/* LP Albertti Cleaning · Recurring Plans · a maquete da página inteira (29/10/2026), sobre a direção "cetim".
 * O hero fica no rosa, com as faixas de cetim; as dobras vão no creme rosado da maquete (#FEF7F5 e #FDF1F0), com
 * manchas rosa nos cantos e um ramo de folhas rosa nas bordas (desktop largo); o CTA final volta ao rosa. Vinho como
 * tinta, rosa-choque nos acentos: itálico do H1, estrelas, ícones, botões, etapa atual, opção marcada, checks e
 * faíscas. Playfair Display 700 nos títulos. Ícones de traço rosa-choque num círculo rosa-claro. Faíscas de 4 pontas
 * depois de alguns títulos e coração desenhado à mão nos planos e no CTA final. Cartões brancos de sombra rosada.
 * Arco na foto da Kamila do obrigado.
 * Hero do desktop: a foto sai das faixas por uma borda em S com fio de cetim duplo, o cartão fica sobre essa
 * passagem e a grade de 1280 px é a mesma do topo, do hero e das dobras.
 * Mobile first: a base é o celular, o desktop entra em min-width:981px.
 * Contraste medido por luminância relativa, contra o fundo mais desfavorável de cada par (e conferido nos pixels
 * reais): texto ≥ 4,5:1, título grande e gráfico ≥ 3:1. O rosa-choque (--hot) vai em gráfico e no título grande
 * sobre fundo claro (o itálico do H1); texto pequeno rosa, o --hot-ink; texto branco só sobre o --btn, o rosa-choque
 * liso da maquete escurecido até passar (≥ 4,6:1 em todos os pontos do degradê).
 */
/* Playfair Display (OFL), subconjunto latino: 700 normal e itálico nos títulos (19 KB cada). A reserva é a Georgia
   ajustada às medidas de cada uma, para o título não pular. Poppins no texto, da própria pasta (8 KB por espessura).
   700 usa o arquivo da 600. (A 400 itálica dos depoimentos saiu com eles, na versão da maquete de 29/10.) */
@font-face{font-family:'Playfair Display';font-weight:700;font-display:swap;src:url(../assets/fonts/playfair-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url(../assets/fonts/playfair-700-italic.woff2) format('woff2')}
@font-face{font-family:'Playfair Fallback';font-weight:700;src:local('Georgia Bold'),local('Georgia-Bold');size-adjust:89.8%;ascent-override:120.4%;descent-override:27.9%;line-gap-override:0%}
@font-face{font-family:'Playfair Fallback';font-style:italic;font-weight:700;src:local('Georgia Bold Italic'),local('Georgia-BoldItalic');size-adjust:85.1%;ascent-override:127.1%;descent-override:29.5%;line-gap-override:0%}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(../assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(../assets/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600 700;font-display:swap;src:url(../assets/fonts/poppins-600.woff2) format('woff2')}
/* Enquanto a Poppins não chega, o texto usa uma fonte do sistema ajustada às MESMAS medidas dela, por
   espessura: sem isso o H1 ganhava uma linha quando a fonte entrava e o hero inteiro pulava. */
@font-face{font-family:'Poppins Fallback';font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:114%;ascent-override:92.1%;descent-override:30.7%;line-gap-override:8.8%}
@font-face{font-family:'Poppins Fallback';font-weight:500;src:local('Arial'),local('ArialMT');size-adjust:115.4%;ascent-override:91%;descent-override:30.3%;line-gap-override:8.7%}
@font-face{font-family:'Poppins Fallback';font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:105.5%;ascent-override:99.5%;descent-override:33.2%;line-gap-override:9.5%}
@font-face{font-family:'Poppins Fallback Android';font-weight:400 700;src:local('Roboto');size-adjust:114%;ascent-override:92.1%;descent-override:30.7%;line-gap-override:8.8%}
:root{
  --white:#fff;
  /* planos, do mais claro ao mais rosado; o branco puro fica só em cartão, campo e pílula */
  --petal:#FFF7F9; --blush:#FBE3EA; --blush-2:#F8D3DE; --rose:#F6C9D6; --rose-2:#F4C1D0;
  --cream:#FEF7F5;   /* fundo das dobras (o do body): o creme rosado da maquete */
  --card-bg:#FFF2F3; --mist:var(--blush-2); --paper:var(--petal);
  --ink:#420A28; --ink-2:#6B4458; --plum:#420A28;   /* vinho dos títulos da maquete */
  /* rosa-choque: --hot em gráfico (ícone, estrela, trilho, coração) e no título grande sobre fundo claro (o itálico
     do H1, ≥ 3,3:1); --accent no itálico de título fora do hero; --hot-ink no texto pequeno (≥ 5:1 no rosa do hero);
     --btn atrás de texto branco: o rosa-choque liso da maquete (#FC3576 dava 3,5:1) escurecido até 4,6:1 */
  --hot:#E5336B; --accent:#D6295F; --hot-ink:#AD1457; --pink-soft:#FCE1E9; --pink-ink:var(--hot-ink);
  --btn:linear-gradient(135deg,#E01F66,#D0175C); --btn-hi:linear-gradient(135deg,#C8145A,#B0104E);
  --glow:0 16px 30px -14px rgba(224,31,102,.7);
  --disc:0 0 0 3px var(--white),0 10px 22px -10px rgba(212,45,102,.6);   /* círculo de ícone: aro branco e sombra rosada */
  --line:rgba(59,24,48,.12); --field-line:#C9557F;   /* aro de campo e opção: 3,5:1 no cartão, 4,1:1 no branco */
  --hair:rgba(212,45,102,.3); --hair-soft:rgba(212,45,102,.17);
  --shadow:0 40px 90px -44px rgba(170,30,85,.55),0 14px 32px -20px rgba(170,30,85,.3);
  --shadow-sm:0 24px 48px -30px rgba(170,30,85,.5);
  --card-sh:0 24px 46px -30px rgba(170,30,85,.55),0 4px 12px -6px rgba(170,30,85,.16);   /* cartão branco das dobras */
  /* faísca de 4 pontas (a do logo) em degradê rosa; o ornamento dos títulos é a faísca, a menor e um fio */
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F58BAB'/%3E%3Cstop offset='1' stop-color='%23D6295F'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='M8 0C8.4 4.7 11.3 7.6 16 8C11.3 8.4 8.4 11.3 8 16C7.6 11.3 4.7 8.4 0 8C4.7 7.6 7.6 4.7 8 0Z'/%3E%3C/svg%3E");
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F58BAB'/%3E%3Cstop offset='1' stop-color='%23D6295F'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='M8 0C8.4 4.7 11.3 7.6 16 8C11.3 8.4 8.4 11.3 8 16C7.6 11.3 4.7 8.4 0 8C4.7 7.6 7.6 4.7 8 0Z'/%3E%3Cpath fill='%23E5336B' d='M21.5 1C21.7 2.9 22.6 3.8 24.5 4C22.6 4.2 21.7 5.1 21.5 7C21.3 5.1 20.4 4.2 18.5 4C20.4 3.8 21.3 2.9 21.5 1Z'/%3E%3Cpath stroke='%23E5336B' stroke-opacity='.5' d='M31 8.5H96'/%3E%3C/svg%3E");
  /* duas faíscas (a grande e a pequena, sem o fio), a faísca só em contorno, o check branco da lista dos planos e as
     setas finas entre as etapas do "How it works" (a longa no tablet, a curta da maquete no desktop) */
  --spark2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 16'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F58BAB'/%3E%3Cstop offset='1' stop-color='%23D6295F'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23g)' d='M8 0C8.4 4.7 11.3 7.6 16 8C11.3 8.4 8.4 11.3 8 16C7.6 11.3 4.7 8.4 0 8C4.7 7.6 7.6 4.7 8 0Z'/%3E%3Cpath fill='%23E5336B' d='M21.5 1C21.7 2.9 22.6 3.8 24.5 4C22.6 4.2 21.7 5.1 21.5 7C21.3 5.1 20.4 4.2 18.5 4C20.4 3.8 21.3 2.9 21.5 1Z'/%3E%3C/svg%3E");
  --spark-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='none' stroke='%23E5336B' stroke-width='1.6' stroke-linejoin='round' d='M13 1.5C13.7 8.4 17.6 12.3 24.5 13C17.6 13.7 13.7 17.6 13 24.5C12.3 17.6 8.4 13.7 1.5 13C8.4 12.3 12.3 8.4 13 1.5Z'/%3E%3C/svg%3E");
  --i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 12' fill='none' stroke='%23E5336B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h106M103 1.5 108 6l-5 4.5'/%3E%3C/svg%3E");
  --arrow-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%23B9939F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h25M22 1.5 27 6l-5 4.5'/%3E%3C/svg%3E");
  /* cetim das dobras: uma faixa clara e uma funda, esticadas na largura (a mesma linguagem do hero, em 1 desenho) */
  --satin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-opacity='.4' d='M0 70C300 0 520 170 760 290S1180 520 1440 460V550C1180 610 960 470 720 380S280 150 0 220Z'/%3E%3Cpath fill='%23F4BFCF' fill-opacity='.35' d='M1440 0C1240 60 1120 170 1080 300C1050 400 1100 520 1180 600H1440Z'/%3E%3C/svg%3E");
  /* ícones dentro dos campos (rosa-choque, traço 2): alfinete do ZIP, casa do tipo de limpeza, calendário das opções */
  --i-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5336B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10c0 5.6-7.5 11.5-7.5 11.5S4.5 15.6 4.5 10a7.5 7.5 0 0 1 15 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.8'/%3E%3C/svg%3E");
  --i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5336B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 10.5 8.5-7 8.5 7V20a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 20z'/%3E%3Cpath d='M9.5 21.5v-7h5v7'/%3E%3C/svg%3E");
  --i-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M16 3v4M8 3v4M3.5 10.5h17'/%3E%3C/svg%3E");
  /* e na etapa 3: pessoa no nome, telefone no telefone, envelope no e-mail (o mesmo traço do alfinete) */
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5336B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --i-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5336B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5336B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  /* borda da foto no desktop, em S: entra 14% no alto, encosta na borda atrás do cartão, embaixo dele varre para a
     direita e segue numa onda baixa pela base (3 a 4% da altura): a foto sai das faixas de cetim e não termina numa
     reta, então o cartão que passa da base num estado de erro fica sobre o rosa, e não pendurado. O rosto, de 66%
     em diante na largura e acima da onda da base, nunca chega perto */
  --edge-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0C9 4 4 9 3 16C1.5 26 1 40 1.5 56C2 70 4 80 11 88C17 94 26 97.5 40 98.2C60 99 80 95 100 96.5V0Z'/%3E%3C/svg%3E");
  --ff:Poppins,'Poppins Fallback','Poppins Fallback Android',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Playfair Display','Playfair Fallback',Georgia,serif;
  --wrap:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-sticky:10; --z-header:20;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-bottom:96px;-webkit-tap-highlight-color:rgba(229,51,107,.16);color-scheme:only light}
body{font-family:var(--ff);color:var(--ink);background:var(--cream);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,.btn{text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr,#step-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}   /* palavra composta ou expressão que não pode quebrar no hífen */
h1 .nb{display:inline-block;max-width:100%;white-space:normal}   /* no título desce inteira para a linha de baixo, mas quebra por dentro se não couber na coluna */
::selection{background:var(--pink-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
section[id],form[id]{scroll-margin-top:16px}
form[id]{scroll-margin-bottom:16px}

/* ── botões: pílula rosa-choque lisa, como na maquete, com halo rosado ──────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font:600 16px/1.2 var(--ff);text-align:center;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--pink{background:var(--btn);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--glow)}
.btn--line{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--field-line),0 12px 26px -18px rgba(170,30,85,.55)}
.btn--block{width:100%}
.btn[disabled]{cursor:progress}
.btn-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;background:none;border:0;font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;border-radius:10px}
.btn-back .icon{width:18px;height:18px}
@media (hover:hover){
  .btn--pink:hover{background:var(--btn-hi)}
  .btn--line:hover{background:var(--ink);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
  .btn-back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .btn .icon{transition:transform .2s var(--ease)}
  .btn:hover .icon{transform:translateX(3px)}
  .mbar .btn:hover .icon{transform:none}
  .call a:hover,.final__call:hover,.ft a:hover,.legal a:hover,.ty__call a:hover,.quote__call a:hover{text-decoration-thickness:2px}
  .field input:not(:focus):not([aria-invalid=true]):hover,.field select:not(:focus):not([aria-invalid=true]):hover,.chip:hover input:not(:checked)+span{border-color:var(--ink)}
  .chip:hover input:not(:checked)+span{transform:translateY(-1px);box-shadow:0 8px 16px -10px rgba(170,30,85,.55)}   /* a opção sobe 1 px */
  .hd__nav a:hover{color:var(--hot-ink);text-decoration:underline;text-decoration-color:var(--hot);text-decoration-thickness:1.5px;text-underline-offset:7px}
}

/* ── estrelas: rosa-choque, como na maquete ─────────────────────────────── */
.stars{display:inline-flex;gap:2px;color:var(--hot)}
.stars svg{width:17px;height:17px;fill:currentColor}

/* ── header ─────────────────────────────────────────────────────────────── */
.hd{position:relative;z-index:var(--z-header);height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hd__logo{display:block;border-radius:8px}
.hd__logo img{width:98px}
.hd__actions{display:flex;align-items:center;gap:12px}
/* pílula branca do telefone: ícone rosa-choque, número em ameixa */
.hd__phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:44px;height:44px;border-radius:50%;background:var(--white);box-shadow:0 10px 24px -12px rgba(120,20,60,.5);font-weight:500;font-size:16px;text-decoration:none;color:var(--ink)}
.hd__phone .icon{color:var(--hot)}
.hd__phone>span:not(.sr){display:none}
.hd__cta{display:none}
/* a 320 px o número não cabe ao lado do logo: ali fica só o ícone */
@media (min-width:330px) and (max-width:980.98px){
  .hd__phone{width:auto;padding:0 16px 0 13px;border-radius:999px;font-size:15px}
  .hd__phone>span:not(.sr){display:inline}
}
/* menu da maquete, em ameixa: só âncoras desta página. Só de 1220 px em diante, quando cabe entre o logo e as pílulas
   fixas sem chegar à foto do hero (de 1180 a 1219 o fim de "Contact" encostava na borda curva dela): centrado nesse
   vão (a margem direita é a largura das pílulas mais um respiro) */
.hd__nav{display:none}
@media (min-width:1220px){
  .hd__nav{display:flex;flex:1;justify-content:center;gap:0 28px;margin:0 400px 0 24px}
  .hd__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
}

/* ── hero ─────────────────────────────────────────────────────────────────
 * Uma foto só (a da maquete: a cleaner sorrindo enquanto tira o pó do lustre com o espanador) e um recorte por
 * faixa de largura. Na foto o espanador fica no alto e o rosto no terço de baixo (66 a 77% da altura). Os recortes e
 * o hero-focus.json (onde ficam o rosto e a ação, a cabeça do espanador no lustre) saem de scripts/build-hero.py; o
 * lugar da foto em cada faixa (object-position, --over) é conferido pelo scripts/qa-hero.js.
 *   até 699     celular: nota, título e os quatro itens · a cena inteira · formulário sobre a base · texto de apoio
 *   700–980     tablet: título na largura toda; embaixo, texto e formulário à esquerda e, numa faixa alta à
 *               direita, sangrando na borda, a pessoa e a ponta do espanador
 *   981–1179    desktop pequeno: texto | formulário | faixa com a pessoa (o espanador não cabe e fica de fora)
 *   1180–1920   desktop: texto | formulário | a cena; o cartão só encosta na foto (28 px, a curva do alto) e,
 *               de ~1240 px em diante, a cena inteira fica à mostra (perto de 1180 o cartão cobre a ponta
 *               esquerda do espanador); a foto ocupa 31 a 39% da largura
 *   acima       a foto para de crescer e recua, sem salto, até 120 px além da grade
 * No celular o .hero__copy é display:contents: os filhos entram na ordem do flex, a foto sobe para logo
 * depois dos quatro itens (o rosto cabe na primeira tela) e o texto de apoio desce para depois do
 * formulário. A ordem do HTML, que é a da leitura e do teclado, não muda.
 * Cetim: o fundo ganha faixas curvas (.hero__waves) e, no desktop, a borda da foto vira um S que segue em onda pela
 * base (máscara), com fio branco duplo (.hero__edge) e uma faixa funda por fora (.hero::after): a foto parece sair
 * das faixas e o cartão fica sobre essa passagem. Ramo de folhas rosa no canto de baixo à esquerda (1440 px em diante).
 * Abaixo de 981 px o hero sobe 66 px por trás do topo (margem negativa e respiro iguais: nada se mexe). */
/* o fundo fica no rosa da maquete (#FBE3EA a #F8D3DE): a faixa clara chega a #FCEBF0, nunca ao branco */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;padding-bottom:56px;
  background:radial-gradient(55% 40% at 0 0,rgba(252,235,240,.9),transparent 72%),linear-gradient(165deg,var(--blush) 0%,#FADDE5 48%,var(--blush-2) 100%)}
@media (max-width:980.98px){
  .hero{margin-top:-66px;padding-top:66px}
  .hero__waves g{display:none}   /* esticados na coluna estreita, os fios brancos do cetim atravessavam o título */
}
.hero__waves{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero__leaves,.hero__edge{display:none}
.hero__grid,.hero__copy{display:contents}
.hero__copy>*{margin-left:20px;margin-right:20px}
/* da largura do cartão (sem tira de foto dos lados dele) e quadrada, como o recorte: o topo do cartão entra na
   primeira tela do celular. O recorte vai do cabo do espanador ao rosto, que fica acima do cartão (o cartão sobe
   56 px sobre a base da foto: a foto aparece quase inteira). De 495 px em diante a altura para nos 470 e a foto corta em cima e embaixo (45%: o
   rosto sobe e fica acima do cartão até 699 px) */
.hero__photo{order:1;position:relative;margin:24px 12px 0;aspect-ratio:1/1;max-height:470px;overflow:hidden;border-radius:28px;box-shadow:0 0 0 3px var(--white),var(--shadow-sm)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* nota do Google: estrelas rosa-choque e a frase em ameixa, como na maquete */
.rating{display:inline-flex;align-self:flex-start;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:14px;font-size:15px;font-weight:500;line-height:1.4;text-decoration:none;color:var(--ink-2);border-radius:8px}
.rating strong{color:var(--ink);font-weight:700}
.rating .stars svg{width:16px;height:16px}
.rating:hover>span:last-child{text-decoration:underline;text-underline-offset:3px}
h1{margin-top:14px;font-family:var(--serif);font-size:clamp(2.25rem,1.45rem + 3.6vw,3.9rem);font-weight:700;line-height:1.04;letter-spacing:-.018em}
h1 em,h2 em{font-style:italic;color:var(--accent);letter-spacing:-.008em}
.hero h1 em{display:block;color:var(--hot)}   /* "Get your" / "weekends back" / o resto, como na maquete; no fundo claro do alto o rosa-choque da maquete passa (≥ 3,3:1, título grande) */
h1,h2,h3,.ty__steps li::before{font-variant-numeric:lining-nums}   /* a Playfair vem com algarismos de texto (o 4 desce da linha) */
.lede{margin-top:16px;max-width:31em;font-size:17px;color:var(--ink-2)}
.hero .lede{order:3;margin-top:34px}   /* 34 px: a primeira linha fica fora da sombra do cartão (≥ 4,5:1 em todos os pixels) */
/* os quatro itens: uma coluna enquanto dois lado a lado não couberem numa linha cada (a partir de 588 px);
   cada um com o seu ícone num círculo rosa-claro de aro branco */
.checks{list-style:none;margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(266px,100%),1fr));gap:10px 16px}
.checks li{display:flex;gap:13px;align-items:center;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.checks .icon{width:38px;height:38px;padding:9px;border-radius:50%;background:var(--pink-soft);color:var(--hot);stroke-width:1.9;box-shadow:var(--disc)}
.call{display:none;margin-top:28px;font-size:16px;color:var(--ink-2)}
.call .icon{width:20px;height:20px;margin:-3px 10px 0 0;vertical-align:middle;color:var(--hot)}
.call a{font-weight:700;color:var(--hot-ink);text-decoration-color:currentColor;text-underline-offset:4px}

/* ── formulário: cartão rosado de aro branco, título com faísca, régua de etapas em círculos ── */
.quote{order:2;position:relative;z-index:2;width:calc(100% - 24px);max-width:460px;margin:-56px auto 0;background:var(--card-bg);border-radius:28px;padding:24px 20px 22px;box-shadow:0 0 0 1.5px rgba(255,255,255,.9),var(--shadow)}
.quote__title{font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.14;letter-spacing:-.012em}
.quote__title::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.22em;vertical-align:.42em;background:var(--spark) center/contain no-repeat}
/* "recurring" no título do cartão e "request" no obrigado: o mesmo itálico rosa-choque do H1 (só um <span> de estilo) */
.it{font-style:italic;color:var(--accent);letter-spacing:-.008em}
.quote .it,.ty h1 .it{color:var(--hot)}   /* 3,6:1 no cartão e ≥ 3,3:1 no alto claro do obrigado (título grande) */
/* régua de etapas: três círculos numerados (contador do CSS) num trilho fino. O js/lp.js só liga .on nos <i> até a
   etapa atual. Cada <i> depois do primeiro desenha o trecho do trilho que chega nele: cheio de rosa quando já foi
   alcançado e pela metade quando é o próximo (a etapa 1 já mostra um trecho rosa, como na maquete). Alcançada =
   círculo rosa-choque cheio, algarismo branco; com :has(), a que já passou volta a rosa-claro com aro. O trilho e
   a etapa atual não dependem de :has(): sem ele, as etapas já feitas também ficam cheias. */
.steps{margin-top:16px}
.steps__bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:etapa}
.steps__bars i{counter-increment:etapa;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-style:normal;font-size:12.5px;font-weight:500;line-height:1.25;text-align:center;color:var(--ink-2)}
.steps__bars i+i::after{content:"";position:absolute;top:14px;right:50%;width:100%;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(90deg,var(--hot),var(--hot)) 0 0/0 100% no-repeat,#F2C4D2;transition:background-size .35s var(--ease)}
.steps__bars i.on+i::after{background-size:50% 100%}
.steps__bars i.on+i.on::after{background-size:100% 100%}
.steps__bars i::before{content:counter(etapa);position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F8DCE3;box-shadow:none;font:600 13px/1 var(--ff);color:var(--ink-2);transition:background-color .3s,color .3s,box-shadow .3s}
.steps__bars i.on::before{background:var(--btn);color:var(--white);box-shadow:0 0 0 3px var(--white),0 6px 14px -4px rgba(212,45,102,.6)}
.steps__bars i.on{color:var(--ink);font-weight:600}
.steps__bars i.on:has(+ i.on)::before{background:var(--pink-soft);color:var(--hot-ink);box-shadow:inset 0 0 0 1.5px var(--hot)}
.steps__bars i.on:has(+ i.on){color:var(--ink-2);font-weight:500}
.js .step:not(.is-active){display:none}
.quote__nojs{display:none;margin-top:12px;font-size:17px;line-height:1.5}
html:not(.js) .quote__nojs{display:block}
html:not(.js) .steps,html:not(.js) .step,html:not(.js) .quote__call{display:none}
.quote.is-moved .step.is-active{animation:stepIn .35s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field{margin-top:14px;border:0;min-width:0}
.field>label,.field>legend{display:block;font-size:15px;font-weight:600;line-height:1.4;margin-bottom:6px;color:var(--ink)}
.field input,.field select{width:100%;height:50px;border:1px solid var(--field-line);border-radius:14px;padding:0 14px;font:500 16px var(--ff);color:var(--ink);background-color:var(--white);transition:border-color .15s,box-shadow .15s}
/* ícone rosa-choque por dentro do campo, à esquerda: alfinete no ZIP, casa no tipo de limpeza, pessoa, telefone e
   envelope na etapa 3. Só a imagem: a cor de fundo continua a do campo (e a rosada do campo com erro) */
#zip,#name,#phone,#email{padding-left:44px;background-repeat:no-repeat;background-position:14px 50%;background-size:20px}
#zip{background-image:var(--i-pin)}
#name{background-image:var(--i-user)}
#phone{background-image:var(--i-tel)}
#email{background-image:var(--i-mail)}
.field select{appearance:none;-webkit-appearance:none;background-image:var(--i-home),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%233B1830' stroke-width='1.6'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px 50%,right 16px center;background-size:20px,14px 9px;padding-left:44px;padding-right:40px}
.field input::placeholder{color:#7E5F70}
/* campo em foco: aro ameixa (o outline do focus-visible) com um halo rosado por fora */
.field input:focus,.field select:focus{border-color:var(--ink);box-shadow:0 0 0 6px rgba(229,51,107,.14)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:14px}
/* preenchimento automático: o navegador pintava os campos de azul-claro com texto preto */
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);box-shadow:0 0 0 1000px var(--white) inset}
.field input[aria-invalid=true]:-webkit-autofill{box-shadow:0 0 0 1000px #FFF7F9 inset}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--hot-ink);background-color:#FFF7F9}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{position:relative;display:block}
/* z-index:1: o rádio invisível fica sempre por cima do rótulo; sem isto o transform do hover/toque põe o <span>
   numa camada acima e ele passa a receber o clique no lugar do rádio */
.chip input{position:absolute;z-index:1;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px 8px;border-radius:999px;border:1px solid var(--field-line);background:var(--white);font-size:15px;font-weight:500;line-height:1.25;text-align:center;transition:border-color .15s,background-color .15s,box-shadow .2s,transform .2s var(--ease)}
/* calendário nas opções de frequência: rosa-choque, e branco na marcada */
#grp-frequency .chip span::before{content:"";flex:none;width:16px;height:16px;background:var(--hot);-webkit-mask:var(--i-cal) center/contain no-repeat;mask:var(--i-cal) center/contain no-repeat}
/* marcada: cheia de rosa-choque, texto branco (≥ 4,6:1), com halo; no toque ela afunda um pouco */
.chip input:checked+span{border-color:transparent;background:var(--btn);color:var(--white);box-shadow:0 0 0 1px #C41B58,0 10px 20px -10px rgba(212,45,102,.85)}
#grp-frequency .chip input:checked+span::before{background:var(--white)}
.chip input:active+span{transform:scale(.98)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
fieldset[aria-invalid=true] .chip span{border-color:var(--hot-ink)}
.quote__hint{margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.err{color:#A3123F;font-size:15px;font-weight:500;line-height:1.4;margin-top:6px;text-wrap:balance}
.err:empty{display:none}
.err a,.form-status a,.quote__nojs a{position:relative;z-index:1;display:inline-block;padding:12px 0;margin:-12px 0;font-weight:600;white-space:nowrap;text-underline-offset:3px}
.err--block{margin-top:12px}
.quote .btn--block{margin-top:18px}
.quote__note{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.step__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.step__nav .btn{flex:1}
.step[data-step="3"]>.btn-back{margin-top:16px}
.consent{display:flex;gap:10px;align-items:flex-start;min-height:44px;margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.consent strong{color:var(--ink);font-weight:600}
.consent input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--hot-ink);cursor:pointer}
.legal{margin-top:16px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.legal a{color:var(--ink);font-weight:500;text-underline-offset:2px;white-space:nowrap}
/* link de texto com 44 px de toque: a área cresce 13 px para cima e para baixo sem mexer em nenhuma linha */
.rating,.call a,.legal a{position:relative}
.rating::after,.call a::after,.legal a::after{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px}
@media (max-width:343.98px){
  .legal a:first-of-type::after{top:-24px;bottom:0}
  .legal a:last-of-type::after{top:0;bottom:-24px}
  .step[data-step="3"]>.btn-back{margin-top:24px}
}
.form-status{margin-top:12px;font-size:15px;line-height:1.45;color:#A3123F;font-weight:500}
.form-status:empty{display:none}
/* telefone no fim do cartão, para quem prefere ligar: só abaixo de 981 px (no desktop a mesma linha está na coluna do texto) */
.quote__call{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair-soft);font-size:15.5px;line-height:22px;text-align:center;color:var(--ink-2)}
.quote__call a{display:inline-block;padding:11px 0;font-weight:700;color:var(--hot-ink);text-underline-offset:4px}

/* ── dobras: base ──────────────────────────────────────────────────────────
 * Como na maquete de 29/10: títulos centrados em vinho com faísca rosa, fundo creme rosado com manchas rosa que somem
 * antes da borda da dobra (nada corta numa reta), cartões brancos de sombra rosada e ícones de traço rosa-choque num
 * círculo rosa-claro. Só o CTA final volta ao rosa.
 * Ordem: o que está incluso · por que a Albertti · quem cuida (a Kamila) · o que muda na casa · planos · como funciona ·
 * CTA final. */
.sec{position:relative;padding:56px 0}   /* sem faixa de cor entre as dobras, o respiro é o da maquete: menor */
.sec>.wrap{position:relative;z-index:1}   /* o conteúdo fica por cima das folhas */
h2{font-family:var(--serif);font-size:clamp(1.95rem,1.3rem + 2vw,3rem);font-weight:700;line-height:1.1;letter-spacing:-.016em}
h3{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.008em}
.sec__head{text-align:center}
.sec__head p{max-width:38em;margin:14px auto 0;font-size:17px;line-height:1.55;color:var(--ink-2)}
/* faísca depois do título: um espaço inquebrável com a faísca de fundo, então ela nunca desce sozinha para a linha
   de baixo. .spark2 = a grande e a pequena; .spark-o = só o contorno (o "doodle" do título dos planos) */
.spark::after,.spark2::after,.spark-o::after{content:"\a0";padding-right:.44em;margin-left:-.08em;background:var(--spark) 100% 24%/.44em .44em no-repeat}
.spark2::after{padding-right:.8em;background:var(--spark2) 100% 20%/.78em .5em no-repeat}
.spark-o::after{padding-right:.66em;background:var(--spark-o) 100% 16%/.62em .62em no-repeat}
/* palavra composta nas colunas e cartões estreitos: abaixo da largura em que ela cabe inteira, quebra no hífen em vez
   de vazar do cartão. Só as duas longas (.nb--long) chegam a vazar: no Chrome cabem de 393 px ("Experienced team") e
   de 414 px ("Peace of mind") em diante; os limites abaixo deixam ao menos 3 px de folga na linha, para a medida de
   texto de outro navegador (Safari). As outras nunca quebram */
@media (max-width:399.98px){ .why__grid .nb--long{white-space:normal} }
@media (max-width:419.98px){ .perk .nb--long{white-space:normal} }

/* ── o que está incluso: quatro cartões brancos, foto 4:3 em cima ───────── */
/* as manchas rosa de cada dobra ficam no meio da altura e somem antes das bordas: com o mesmo creme em todas, nenhuma
   costura aparece entre elas */
.incl{background:radial-gradient(30% 34% at 0 62%,rgba(248,206,219,.5),transparent 70%),radial-gradient(30% 30% at 100% 32%,rgba(248,206,219,.45),transparent 70%)}
.rooms{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
.room{display:flex;flex-direction:column;background:var(--white);border-radius:22px;overflow:hidden;box-shadow:var(--card-sh)}
.room img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--blush-2)}   /* as fotos são 5:4: a moldura 4:3 corta só um pouco dos lados */
.room h3{margin:14px 14px 0;font-size:18.5px}
.room p{margin:5px 14px 16px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* ── por que a Albertti: quatro colunas com fio entre elas, ícone num círculo rosa ── */
.why{overflow:hidden;background:radial-gradient(24% 40% at 0 60%,rgba(247,196,212,.55),transparent 72%),radial-gradient(24% 40% at 100% 62%,rgba(247,196,212,.55),transparent 72%)}
.why__grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
.why__grid li{padding:20px 10px 22px;text-align:center}
.why__grid li:nth-child(odd){border-right:1px solid var(--hair)}
.why__grid li:nth-child(-n+2){border-bottom:1px solid var(--hair)}
.why__grid .disc{width:60px;height:60px;margin:0 auto 14px;background:#FCD9E3;box-shadow:none}
.why__grid h3{font-size:19px}
.why__grid p{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink-2);text-wrap:balance}
/* ramo de folhas rosa nos cantos de baixo (o da direita espelhado), saindo da base da dobra: só decoração, e só de
   1360 px em diante, quando a margem da página deixa as folhas pararem antes do texto */
.leaves{display:none;position:absolute;z-index:0;bottom:0;width:280px;height:368px;pointer-events:none}
.leaves--l{left:-120px}
.leaves--r{right:-120px;transform:scaleX(-1)}
.leaves--plans{right:-150px}   /* nos planos ele fica à direita do coração */
@media (min-width:1360px){ .leaves{display:block} }

/* ── quem cuida: o texto da dobra "Family-owned…" | as duas fotos da Kamila. A da escada (4:5) ocupa 80% da coluna e
   a do notebook (3:4, 46%) fica presa no canto de baixo à direita, por cima, com moldura creme, como num porta-
   retrato. O bloco tem 1,22 × a largura de altura (50/61): o vão embaixo (22%) é o lugar da sobreposição, em
   qualquer largura. Na foto da escada ela fica entre 14 e 50% do bloco: a do notebook, de 54% em diante, só cobre a
   parede. No desktop o bloco encosta na borda direita da grade, como a foto dos planos na esquerda ── */
.about{background:radial-gradient(26% 40% at 100% 44%,rgba(247,190,207,.5),transparent 72%)}
.about__grid{display:grid;gap:40px}
.about h2{margin-top:14px}
.about__lede{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.about__list{list-style:none;display:grid;gap:12px;margin-top:24px}
.about__list li{display:flex;gap:14px;align-items:center;font-size:16.5px;font-weight:500;line-height:1.4}
.about__list .disc{width:44px;height:44px;margin:0;background:#FCD9E3;box-shadow:none}
.about__list .disc .icon{width:22px;height:22px;stroke-width:1.8}
.about__fotos{position:relative;width:100%;max-width:560px;aspect-ratio:50/61}
.about__photo{width:80%;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--blush-2);box-shadow:var(--shadow-sm)}
.about__photo2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--blush-2);box-shadow:0 0 0 6px var(--cream),var(--shadow-sm)}
.about__photo img,.about__photo2 img{width:100%;height:100%;object-fit:cover}

/* ── o que muda na casa: cartões brancos de texto à esquerda, ícone num círculo rosa-claro no alto ─── */
.perks{background:radial-gradient(28% 40% at 0 40%,rgba(247,190,207,.55),transparent 72%),radial-gradient(26% 38% at 100% 64%,rgba(247,190,207,.45),transparent 72%)}
.perks__grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
.perk{background:var(--white);border-radius:22px;padding:22px 14px 20px;box-shadow:var(--card-sh)}
.disc{position:relative;display:grid;place-items:center;flex:none;width:60px;height:60px;margin:0 auto 14px;border-radius:50%;background:var(--pink-soft);color:var(--hot);box-shadow:var(--disc)}
.disc .icon{width:28px;height:28px;stroke-width:1.6}
.perk .disc{margin:0 0 16px;box-shadow:none}
.perk h3{font-size:18.5px}
.perk p{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* ── planos: foto grande arredondada | olho, título, texto, lista de checks rosa-choque e o botão ── */
.plans{overflow:hidden;background:radial-gradient(30% 40% at 100% 62%,rgba(247,190,207,.55),transparent 72%),radial-gradient(28% 36% at 0 34%,rgba(248,206,219,.4),transparent 70%)}
.plans__grid{display:grid;gap:32px}
/* foto 4:5 (a cleaner sorrindo no pendente da cozinha), inteira no celular. O desktop (12:13) e os 560 px de teto
   até 699 px cortam embaixo (20%: o pendente e o rosto ficam); o tablet corta dos lados (a moldura é mais alta que
   a foto) e fica com o rosto, as mãos e o pano (62%: sai só a borda esquerda do vidro do pendente) */
.plans__photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:var(--blush-2);box-shadow:var(--shadow-sm)}
.plans__photo img{width:100%;height:100%;object-fit:cover;object-position:62% 20%}
@media (max-width:699.98px){ .plans__photo{width:100%;max-height:560px} }   /* sem a largura explícita o teto de altura encolhia a foto pela proporção */
.plans__copy{position:relative}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--hot-ink)}
.eyebrow::before{content:"";flex:none;width:15px;height:15px;background:var(--spark) center/contain no-repeat}
.plans h2{margin-top:14px}
.plans__lede{margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ticks{list-style:none;display:grid;gap:12px;margin-top:22px}
.ticks li{position:relative;padding-left:38px;font-size:17px;font-weight:500;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:-.5px;width:25px;height:25px;border-radius:50%;background:var(--i-tick) center/13px no-repeat,var(--hot);box-shadow:0 6px 12px -6px rgba(212,45,102,.75)}
.offer{margin-top:22px;background:var(--white);border-radius:16px;padding:16px 18px;font-size:17px;line-height:1.45;box-shadow:var(--card-sh)}
.offer strong{font-weight:700}
.plans .btn{margin-top:28px}
/* coração desenhado à mão (o do H1): no canto de baixo do texto dos planos e no alto do cartão final. Só decoração */
.heart{position:absolute;overflow:visible;fill:none;stroke:var(--hot);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.heart--plans{display:none;right:0;bottom:-4px;width:84px;height:60px}

/* ── como funciona: três etapas; ícone num círculo rosa-claro com faísca, número rosa e título numa linha ── */
.how{background:radial-gradient(26% 40% at 0 56%,rgba(247,190,207,.5),transparent 72%)}
.how__steps{list-style:none;display:grid;gap:26px;max-width:34rem;margin:32px auto 0}
.how__steps li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-items:start}
.how .disc{grid-row:1 / span 2;width:64px;height:64px;margin:0;background:#FCDDE5;box-shadow:none}   /* círculo liso, como na maquete */
.how .disc::after{content:"";position:absolute;top:-4px;right:-6px;width:18px;height:18px;background:var(--spark) center/contain no-repeat}
.how__steps h3{margin-top:7px;font-size:21px}
.how__n{margin-right:.12em;color:#D91956}   /* o rosa da maquete: 4,7:1 no creme e 3,8:1 na mancha rosa (título grande: 3:1) */
.how__steps p{margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink-2)}
/* celular: um fio rosa liga os círculos, de cima para baixo */
.how__steps li:not(:last-child)::after{content:"";position:absolute;left:31.25px;top:76px;bottom:-16px;width:1.5px;background:linear-gradient(var(--hair),var(--hair-soft))}

/* ── CTA final: faixa rosa de ponta a ponta, como na maquete. Celular e tablet: a foto em cima, na largura toda, e o
   cartão rosado subindo sobre a base dela. Desktop: a foto à esquerda dissolvendo no rosa e o cartão à direita ── */
.final{position:relative;padding:0 0 72px;background:radial-gradient(60% 80% at 100% 0,rgba(253,195,201,.65),transparent 70%),linear-gradient(180deg,#FBDCE1,#F9CFD7)}
/* o cão (deitado, de 19% a 69% da largura da foto espelhada) fica à esquerda; a moldura corta dos lados e do alto (a
   parede escura), nunca as patas. O cartão que sobe sobre a base da foto no celular e no tablet cobre só o tapete */
.final__photo{overflow:hidden;aspect-ratio:4/3;background:var(--blush-2)}
.final__photo img{width:100%;height:100%;object-fit:cover;object-position:32% 100%}
/* até 480 px a moldura fica quadrada: o cão maior e no meio */
@media (max-width:480px){ .final__photo{aspect-ratio:1/1} }
.final__card{position:relative;z-index:1;margin-top:-56px;padding:30px 20px 20px;background:#FFF0F2;border-radius:26px;box-shadow:0 0 0 1.5px rgba(255,255,255,.85),var(--shadow)}
.final__card p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink-2)}
/* o botão e, centrado embaixo dele, o telefone */
.final__actions{display:grid;justify-items:center;gap:4px;margin-top:22px}
.final__card .btn{width:100%}
.final__call{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;color:var(--hot-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.final__call .icon{width:18px;height:18px;color:var(--hot)}
.heart--final{top:-24px;right:18px;width:64px;height:46px}

/* ── rodapé: faixa rosa mais funda, logo colorido, texto em ameixa ─────── */
/* o espaço da barra fixa do celular fica no fim do rodapé (o rosa vai até embaixo da barra) */
.ft{position:relative;background:linear-gradient(180deg,#F6CBD7,#F3BFCE);color:var(--ink-2);padding:36px 0 calc(110px + env(safe-area-inset-bottom));font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.ty-page .ft{padding-bottom:36px}
.ft__inner{display:grid;gap:12px}
.ft__logo{width:108px}
.ft strong{color:var(--ink);font-weight:600}
.ft a{display:inline-block;padding:11px 0;color:var(--ink);font-weight:500;text-underline-offset:4px;text-decoration-color:var(--hot)}
.ft__info p+p{margin-top:0}
@media (max-width:479px){
  .ft__sep{display:none}   /* o telefone desce inteiro para a própria linha, sem ponto solto */
  .ft__info p:first-child a{display:block;width:fit-content}
}

/* ── barra fixa do celular ──────────────────────────────────────────────── */
.mbar{display:grid;grid-template-columns:auto 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--card-bg);box-shadow:0 -1px 0 rgba(255,255,255,.9),0 -12px 28px -14px rgba(120,20,60,.4);transition:transform .3s var(--ease),visibility .3s}
.mbar .btn{min-height:50px;font-size:15.5px;padding:0 20px}
.mbar .btn--line .icon{color:var(--hot)}
/* escondida também para o teclado e o leitor de tela; sem JavaScript ela fica sempre à vista */
.js .mbar.is-hidden{transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.mbar__num{display:none}
@media (min-width:600px){
  .mbar__num{display:inline}
  .mbar{grid-template-columns:auto minmax(0,320px);justify-content:center;gap:12px}   /* era um botão rosa de 600 a 840 px de largura */
}

[data-phone]{white-space:nowrap}
/* telefones no meio do texto: negrito rosa-escuro sublinhado (o negrito já distingue o link) */
.call a,.final__call,.quote__call a,.ty__call a{text-decoration-thickness:1.5px;text-underline-offset:5px}
a[href^="tel:"]{text-decoration-skip-ink:none}   /* sem isto o sublinhado se parte em três nos parênteses de (916) */
/* celular estreito: o CTA longo cabe numa linha (sem a seta e com menos respiro) */
/* celular: o título de cinco linhas e os quatro círculos empurravam a foto 100 px para baixo; com o corpo de 32 px,
   círculos de 32 px e respiros menores o rosto volta à primeira tela (acima da barra fixa) até a 375x667 */
@media (max-width:699.98px){
  .rating{margin-top:10px}
  h1{margin-top:10px;font-size:clamp(2rem,1.2rem + 3.6vw,3.9rem)}
  .checks{margin-top:16px;gap:6px 16px}
  .checks li{gap:11px;font-size:14.5px}
  .checks .icon{width:32px;height:32px;padding:7.5px}
  .hero__photo{margin-top:16px}
}
/* celular baixo (iPhone SE, 375x667): mais 24 px para o rosto ficar inteiro acima da barra fixa */
@media (max-width:699.98px) and (max-height:700px){
  h1{line-height:1}
  .checks{gap:3px 16px}
  .checks .icon{width:30px;height:30px;padding:7px}
  .hero__photo{margin-top:12px}
}
/* celular em pé de até 760 px de altura: na foto quadrada o rosto fica de 48 a 64% da altura e caía atrás da barra
   fixa. A moldura baixa para 280 px e mostra a parte de baixo da foto: o rosto sobe ~60 px e continua acima do
   cartão (que sobe 56 px sobre a base da foto) */
@media (max-width:499.98px) and (max-height:760px){
  .hero__photo{aspect-ratio:auto;height:280px}
  .hero__photo img{object-position:50% 100%}
}
/* celular: os quatro itens em 2 × 2, como na maquete, com o círculo em cima do rótulo (ao lado dele,
   "Background-checked", que não quebra, não cabia); abaixo de 360 px, um por linha */
@media (max-width:587.98px){
  .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .checks li{flex-direction:column;align-items:flex-start;gap:7px;font-size:13.5px;line-height:1.33}
  .checks .icon{width:36px;height:36px;padding:9px}
}
@media (max-width:587.98px) and (max-height:700px){
  .checks{gap:8px 10px}
  .checks .icon{width:32px;height:32px;padding:8px}
}
@media (max-width:359.98px){
  .checks{grid-template-columns:minmax(0,1fr);gap:6px}
  .checks li{flex-direction:row;align-items:center;gap:11px;font-size:14px}
  .checks .icon{width:30px;height:30px;padding:7px}
}
@media (max-width:420px){
  .btn{padding:0 16px;font-size:15px}
}
/* até 380 px o cartão e as opções perdem respiro para cada tamanho de casa caber numa linha;
 * abaixo de 346 px nem assim cabe em duas colunas, e os tamanhos vão um por linha */
@media (max-width:380.98px){
  .quote{padding:20px 14px 18px}
  .chips{gap:6px}
  .chip span{padding:6px 4px;gap:5px}
  #grp-frequency .chip span::before{width:14px;height:14px}
  .steps__bars i{font-size:12px}
}
@media (max-width:345.98px){
  #grp-home_size .chips{grid-template-columns:1fr}
  #grp-frequency .chip span::before{display:none}   /* "Every 2 weeks" numa linha a 320 px */
  .rating{gap:6px 7px;font-size:14px}   /* estrelas e nota numa linha a 320 px */
  .rating .stars svg{width:14px;height:14px}
  .step__nav .btn .icon{display:none}   /* "Back" e "Next: your details" numa linha só */
}

/* ── tablet ─────────────────────────────────────────────────────────────── */
@media (min-width:640px){
  .final__actions{width:min(100%,460px)}
}
/* o coração dos planos só no desktop: abaixo de 981 px a coluna do texto não tem lugar para ele ao lado do botão
   (de 981 a 1179 px ele vem menor, ver o bloco do desktop pequeno) */
@media (min-width:981px){
  .heart--plans{display:block}
}
@media (max-width:639px){
  .ticks li{text-wrap:balance}
}
/* celular: as colunas do "Why choose" e os cartões do "A cleaner home" em 2 × 2, com menos respiro para o título
   caber numa linha a 390 px */
@media (max-width:699.98px){
  .why__grid li{padding:18px 6px 20px}
  .why__grid h3,.perk h3{font-size:17.5px}
  .perk{padding:20px 12px 18px}
  .perk p{font-size:14px}
}
/* até 480 px o botão longo dos planos e do CTA final fica mais compacto; a seta só sai onde o levaria a duas linhas:
   abaixo de 360 px nos planos e de 400 px no cartão final (e de 700 a 719 px nos planos, ver o tablet) */
@media (max-width:480px){
  .plans .btn,.final__card .btn{padding:0 16px;font-size:15px}
}
@media (max-width:359.98px){ .plans .btn .icon{display:none} }
@media (max-width:399.98px){ .final__card .btn .icon{display:none} }
/* abaixo de 380 px o cartão final e o botão dele perdem respiro dos lados: o CTA cabe numa linha de 350 px em diante
   (a 360 px, largura comum de Android, ele quebrava em duas) */
@media (max-width:379.98px){
  .final__card{padding-left:14px;padding-right:14px}
  .final__card .btn{padding:0 12px}
}
@media (max-width:345.98px){ .plans .btn{font-size:14px} }   /* o CTA dos planos numa linha a 320 px */
/* tablet (700–980): as três etapas lado a lado, centradas, com a seta fina entre elas (no desktop o ícone vai ao lado
   do texto, como na maquete) */
@media (min-width:700px) and (max-width:980.98px){
  .how__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:none;margin-top:44px}
  .how__steps li{display:flex;flex-direction:column;align-items:center;text-align:center}
  .how .disc{width:72px;height:72px;margin-bottom:18px}
  .how .disc .icon{width:30px;height:30px}
  .how__steps h3{margin-top:0}
  .how__steps p{max-width:19em;margin-top:6px}
  .how__steps li:not(:last-child)::after{left:calc(100% + 14px - 36px);top:30px;bottom:auto;width:72px;height:12px;background:var(--arrow) center/contain no-repeat}
}
/* tablet em pé: os planos em duas colunas (de 700 px, junto com o hero) e a faixa final ainda empilhada, com o
   cartão subindo sobre a foto (ao lado dela o botão longo não cabia numa linha)… */
@media (min-width:700px) and (max-width:980.98px){
  .final__photo{aspect-ratio:16/9}
  .final__card{margin:-88px 48px 0;padding:36px 36px 28px}
  .how__steps{gap:20px}
  .how__steps h3{font-size:19px}   /* "3 Enjoy a cleaner home" numa linha na coluna de 216 px; 19 px negrito é título grande (o número rosa passa nos 3:1) */
  .how__steps li:not(:last-child)::after{left:calc(100% + 10px - 36px)}   /* centrada no vão de 20 px */
  .sec{padding:64px 0}
  .rooms,.perks__grid{gap:20px;margin-top:40px}
  .room h3{margin:18px 18px 0;font-size:21px}
  .room p{margin:6px 18px 20px;font-size:15.5px}
  .why__grid{margin-top:36px}
  .why__grid li{padding:26px 20px 28px}
  .perk{padding:28px 20px 24px}
  .perk h3{font-size:20px}
  .perk p{font-size:15.5px}
  .plans__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:36px;align-items:center}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:center}
  .plans__photo{align-self:stretch;aspect-ratio:auto;min-height:420px}   /* a foto acompanha a altura do texto */
  .final{padding:0 0 88px}
  .ft__inner{grid-template-columns:auto 1fr;align-items:center;gap:4px 32px}
  .ft__logo{grid-row:span 2}
}
@media (min-width:700px) and (max-width:719.98px){ .plans .btn .icon{display:none} }   /* coluna de 347 a 357 px: com a seta, duas linhas */
/* …e margem de 32 px do iPad mini em diante (a do hero fica depois do bloco dele, mais abaixo) */
@media (min-width:744px) and (max-width:980.98px){
  .wrap{padding:0 32px}
}

/* ── hero no tablet (700–980) ───────────────────────────────────────────────
 * Título na largura toda. Embaixo, texto de apoio, itens e formulário à esquerda, na margem da
 * página (20 px; 32 px de 744 em diante); à direita, numa faixa alta que sangra na borda, a pessoa e a ponta
 * do espanador, com a borda esquerda em curva. A coluna da esquerda tem de 301 a 356 px e o formulário avança
 * 64 px além dela (24 do vão + 40 sobre a foto): 365 a 420 px. A faixa tem altura fixa e a imagem escala pela altura:
 * a foto não muda quando o formulário cresce (o rosto fica no terço de baixo da faixa, como na foto).
 * A última linha da grade (1fr) absorve a altura que sobra da faixa; o min-height do hero garante esse
 * espaço mesmo que um motor não dimensione a linha pela foto (nota + o título mais baixo + 22 + 1010). */
@media (min-width:700px) and (max-width:980.98px){
  .hero{display:grid;grid-template-columns:clamp(300px,calc(100% - 379px),356px) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:24px;align-items:start;padding-left:20px;min-height:1322px}   /* 1200 + 66 do topo + 56 embaixo */
  .hero__copy>*{margin-left:0;margin-right:0}
  .rating{grid-area:1/1/2/-1;justify-self:start}
  .hero h1{grid-area:2/1/3/-1;padding-right:20px}
  .hero .lede{grid-area:3/1;margin-top:16px}
  .checks{grid-area:4/1}
  .hero__photo{grid-area:3/2/6/3;height:1010px;max-height:none;aspect-ratio:auto;margin:22px 0 0;border-radius:0;box-shadow:none;-webkit-mask:var(--edge) 0 0/100% 100% no-repeat;mask:var(--edge) 0 0/100% 100% no-repeat}
  .hero__photo img{object-position:62% 0}
  .quote{grid-area:5/1;width:auto;max-width:none;margin:28px -64px 0 0}
}
/* borda esquerda da foto em S (máscara esticada na caixa): entra 17% no alto, quase encosta na borda no meio e
   varre para a direita embaixo. O rosto (de 63% em diante na largura) nunca chega perto da curva */
.hero{--edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M17 0C9 11 2 24 2 41C2 58 9 67 8 78C7 88 14 95 30 100H100V0Z'/%3E%3C/svg%3E")}
/* 700–743: na coluna de 301 px o texto de apoio em 17 px quebrava em 5 linhas com um toco */
@media (min-width:700px) and (max-width:743.98px){
  .hero .lede{font-size:16px}
}
/* 744–980: o hero entra na margem de 32 px do resto da página (logo em cima, dobras embaixo). A coluna do
   texto e o cartão ficam com a mesma largura (367 = 379 − 12); quem cede os 12 px é a faixa da foto.
   A faixa ganha 56 px de altura: na etapa 3 o cartão terminava 16 px abaixo da base da foto, quase encostando. */
@media (min-width:744px) and (max-width:980.98px){
  .hero{padding-left:32px;grid-template-columns:clamp(300px,calc(100% - 367px),356px) minmax(0,1fr);min-height:1378px}   /* 1256 + 66 + 56 */
  .hero h1{padding-right:32px}
  .hero__photo{height:1066px}
}

/* ── desktop ────────────────────────────────────────────────────────────── */
@media (min-width:981px){
  html{scroll-padding-top:96px;scroll-padding-bottom:0}
  body{font-size:18px}
  .wrap{padding:0 40px}
  /* a LP inteira (topo, hero e dobras) usa a mesma grade de 1280 px de conteúdo: o logo, o título do hero e os
     títulos das dobras começam na mesma linha em qualquer largura. O obrigado fica na de 1200 */
  body:not(.ty-page){--wrap:1360px}
  .hd{height:84px}
  .hd__logo img{width:122px}
  /* duas pílulas soltas, como na maquete: telefone em branco e "Get My Quote" em rosa-choque de aro branco */
  .hd__phone{width:auto;height:auto;min-height:48px;padding:0 20px 0 16px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(120,20,60,.45)}
  .hd__phone>span:not(.sr){display:inline}
  .hd__phone:hover{color:var(--hot-ink)}
  .hd__cta{display:inline-flex;min-height:48px;padding:0 22px;font-size:15px;box-shadow:0 0 0 2px var(--white),var(--glow)}
  .hd__cta .icon{width:18px;height:18px}
  /* telefone e botão ficam na tela durante toda a rolagem (antes: 4.400 px sem nenhum CTA no desktop) */
  body:not(.ty-page) .hd__actions{position:fixed;top:18px;right:max(40px,calc(50% - 640px));z-index:var(--z-header)}

  /* hero: texto | formulário erguido (topo em y 112) | foto sangrando em cima e à direita, borda esquerda em S.
   * A grade ocupa a largura toda do hero e as colunas vêm de variáveis em % dessa largura; a borda esquerda
   * da foto (--photo-l: fim do cartão menos --over), a máscara da curva, o fio de brilho (.hero__edge) e a faixa
   * funda que acompanha a curva (.hero::after) usam as MESMAS variáveis: nada se desencontra, com ou sem barra
   * de rolagem. A foto tem altura fixa (--hero-h): não cresce, não encolhe nem recorta de novo quando o
   * formulário muda de etapa ou mostra erros. O rosto fica no terço de baixo da foto e o espanador no alto.
   * De 981 a 1179 px a faixa livre não comporta a cena: o recorte é na pessoa, o cartão cobre só --over px
   * e o espanador fica fora, nunca pela metade. */
  .hero{display:block;margin-top:-84px;padding-top:84px;padding-bottom:0;min-height:var(--hero-h);
    --hero-h:900px;--gut:max(40px,calc(50% - 640px));--col:min(35%,460px);--gap:min(3%,36px);--card:clamp(368px,calc(50% - 280px),430px);
    --over:20px;--rgt:0px;--photo-l:calc(var(--gut) + var(--col) + var(--gap) + var(--card) - var(--over))}
  /* ramo de folhas rosa no canto de baixo à esquerda, como na maquete: o caule sai da base do hero fora da tela e as
     folhas param a 8 px do texto. Só de 1440 px em diante, quando a margem tem 80 px ou mais */
  .hero__leaves{display:none;position:absolute;z-index:-1;left:calc(var(--gut) - 206px);bottom:0;width:240px;height:315px;pointer-events:none}
  .hero__photo{position:absolute;top:0;right:var(--rgt);left:var(--photo-l);height:var(--hero-h);max-height:none;margin:0;aspect-ratio:auto;border-radius:0;box-shadow:none;-webkit-mask:var(--edge-w) 0 0/100% 100% no-repeat;mask:var(--edge-w) 0 0/100% 100% no-repeat}
  .hero__photo img{object-position:0 20%}
  /* brilho de cetim na curva: fio branco de 3 px e um segundo, de 1,5 px a 50%, por fora, com halo rosa; por cima
     da foto e por baixo do cartão */
  .hero__edge{display:block;position:absolute;z-index:1;top:0;left:var(--photo-l);width:calc(100% - var(--photo-l) - var(--rgt));height:var(--hero-h);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 6px rgba(240,106,149,.55))}   /* largura explícita: num <svg> (elemento substituído) left + right não esticam a caixa */
  /* faixa rosa mais funda que contorna a curva por fora (a mesma máscara, 64 px à esquerda, atrás da foto) */
  .hero::after{content:"";position:absolute;z-index:-1;top:0;left:calc(var(--photo-l) - 64px);right:calc(var(--rgt) + 64px);height:var(--hero-h);pointer-events:none;background:linear-gradient(180deg,#F6C9D6,#F8D1DC 46%,#F4BFCF);-webkit-mask:var(--edge-w) 0 0/100% 100% no-repeat;mask:var(--edge-w) 0 0/100% 100% no-repeat}
  .hero__grid{position:relative;display:grid;grid-template-columns:var(--gut) var(--col) var(--gap) var(--card) minmax(0,1fr);max-width:none;padding:28px 0 0}
  .hero__copy{display:block;grid-column:2;padding:0 0 28px}
  .hero__copy>*{margin-left:0;margin-right:0}
  .rating{margin-top:0}
  h1{margin-top:18px}
  /* o título acompanha a coluna do texto (35% da largura): 4,9vw é o maior corpo em que "house cleaning" cabe numa
     linha e a coluna inteira cabe nos 900 px da foto (de 981 a 1179 px); de 1180 em diante ele cresce mais rápido,
     até 68 px a 1440 */
  .hero h1{font-size:min(4.9vw,4rem);line-height:1.02;letter-spacing:-.02em}
  .lede,.hero .lede{margin-top:18px;font-size:18px}
  /* os quatro itens: um por linha até 1179 px; dali em diante 2 × 2 (ver abaixo) */
  .checks{margin-top:24px;grid-template-columns:1fr;gap:8px}
  .checks li{font-size:15px;line-height:1.3;text-wrap:balance}
  .checks .icon{width:44px;height:44px;padding:11px}
  /* divisor fino e o telefone com ícone rosa, link rosa-escuro em negrito */
  .call{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);font-size:16px}
  /* 32 px embaixo: a faixa proibida do fim do cartão (de −24 a 16 px da base da foto) fica longe em todos os estados */
  .quote{grid-column:4;align-self:start;width:auto;max-width:none;margin:0 0 32px;padding:26px 24px 28px}
  .quote__title{font-size:28px}
  .quote__call{display:none}

  /* dobras: os quatro cartões e as quatro colunas numa fila só, os planos em duas colunas */
  .sec{padding:76px 0}
  .sec__head p{margin-top:18px;font-size:18px}
  .rooms{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:52px}
  .room{border-radius:24px}
  .room h3{margin:20px 22px 0;font-size:23px}
  .room p{margin:8px 22px 24px;font-size:16px;line-height:1.5}
  .why__grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
  .why__grid li:nth-child(n){padding:6px 28px 8px;border-bottom:0;border-right:1px solid var(--hair)}
  .why__grid li:last-child{border-right:0}
  .why__grid .disc{width:76px;height:76px;margin-bottom:18px}
  .why__grid .disc .icon{width:34px;height:34px}
  .why__grid h3{font-size:22px}
  .why__grid p{margin-top:8px;font-size:16px}
  .perks__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:52px}
  .perk{padding:36px 26px 32px;border-radius:24px}
  .perk .disc{width:72px;height:72px;margin-bottom:20px}
  .perk .disc .icon{width:32px;height:32px}
  .perk h3{font-size:22px}
  .perk p{margin-top:8px;font-size:16px;line-height:1.5}
  .plans__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:center}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:center}
  .about__fotos{justify-self:end}
  .about h2{margin-top:16px}
  .about__lede{margin-top:20px;font-size:18px}
  .about__list{gap:14px;margin-top:28px}
  .about__list li{font-size:18px}
  .plans__photo{aspect-ratio:12/13}   /* quase quadrada, como na maquete: corta um pouco do alto e da base da foto 4:5 */
  .plans h2{margin-top:16px}
  .plans__lede{margin-top:20px;font-size:18px}
  .ticks{gap:14px;margin-top:28px}
  .ticks li{font-size:18px}
  .plans .btn{margin-top:34px}
  .heart--plans{right:12px;bottom:-8px;width:100px;height:72px}
  /* como funciona, como na maquete: o ícone à esquerda e, ao lado, o número rosa pendurado antes do título, com o
     texto alinhado ao título; seta curta no vão entre as etapas, na altura do título */
  .how__steps{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:56px;max-width:1240px;margin-top:60px}   /* start: a etapa mais curta não estica e o texto fica na mesma linha nas três */
  .how__steps li{grid-template-columns:84px minmax(0,1fr);column-gap:20px}
  .how .disc{width:84px;height:84px}
  .how .disc .icon{width:36px;height:36px}
  .how .disc::after{top:-2px;right:-4px;width:22px;height:22px}
  .how__steps h3{position:relative;margin-top:14px;padding-left:30px;font-size:23px}
  .how__n{position:absolute;left:0;top:0}
  .how__steps p{margin-top:8px;padding-left:30px;font-size:16px}
  .how__steps li:not(:last-child)::after{left:calc(100% + 14px);top:22px;bottom:auto;width:28px;height:12px;background:var(--arrow-s) center/contain no-repeat}
  /* faixa final: a foto nos 66% da esquerda (até 1040 px), dissolvendo no rosa a partir de 62% dela, e o cartão rosado
     translúcido à direita, na grade. A faixa cresce com a janela (34vw) e o teto de largura da foto segura a escala:
     ela corta só o alto (a parede escura), nunca a cabeça nem as patas */
  .final{display:flex;align-items:center;min-height:max(600px,34vw);padding:64px 0}
  .final__photo{position:absolute;top:0;bottom:0;left:0;width:min(66%,1040px);aspect-ratio:auto;-webkit-mask:linear-gradient(90deg,#000 62%,transparent);mask:linear-gradient(90deg,#000 62%,transparent)}
  .final__photo img{object-position:50% 100%}
  .final>.wrap{display:flex;justify-content:flex-end}
  .final__card{width:min(640px,52%);margin:0;padding:50px 52px 40px;background:rgba(255,238,241,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .final__card p{font-size:18px}
  .heart--final{top:-30px;right:30px;width:78px;height:56px}

  .ft,.ty-page .ft{padding:44px 0}
  .ft__inner{grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
  .mbar{display:none}
}
/* com o cartão de 640 px (1340 px em diante) sobra lugar ao lado do botão: o coração desce para a altura dele, como na
   maquete. Mais estreito, ele encostava no botão e fica no alto do cartão */
@media (min-width:1340px){
  .heart--final{top:auto;bottom:118px}
}

/* ── hero de 1180 px para cima: a cena inteira, saindo das faixas de cetim ──────────
 * A foto em destaque, como na maquete: o cartão só encosta nela (--over de 28 px: entra sob ele só a curva em S do
 * alto) e não cobre nada da cena. O cartão tem no máximo 400 px (o mínimo para o botão da etapa 3 caber numa
 * linha), para a foto ganhar largura. A imagem fica centrada
 * no assunto (object-position 55%): da cabeça do espanador no lustre (22,8% da imagem) ao rosto (até 79,4%), tudo à
 * mostra de ~1240 px em diante; perto de 1180, onde a faixa livre é curta, o cartão cobre a ponta esquerda do
 * espanador e o rosto fica inteiro.
 * O recorte tem 856 px de largura: na caixa mais larga (744 px a 1920) a foto não amplia. Quando ela sobra na altura
 * (caixa mais larga que 0,69 × a altura, de ~1680 a ~2230 px), o corte é de 30% em cima: o contato do espanador
 * com o lustre fica logo abaixo das pílulas do topo e o queixo, acima da onda da base. Janela baixa: ver o bloco
 * logo depois da tela larga.
 * A foto ocupa 31% da largura a 1180, 35% a 1440 e 39% a 1920. Acima de 1920 px a borda direita
 * recua da janela até 120 px além da grade (de 2320 px em diante) e fica nela; o canto direito arredonda junto. */
@media (min-width:1180px){
  .hero h1{font-size:min(calc(3.92vw + 11.5px),4.25rem)}
  .hero{--rgt:clamp(0px,calc(100% - 1920px),calc(50% - 760px));
    --card:clamp(368px,calc(50% - 280px),400px);
    --free:calc(100% - var(--rgt) - var(--gut) - var(--col) - var(--gap) - var(--card));
    --over:28px}
  .hero__photo{border-bottom-right-radius:clamp(0px,calc(100vw - 1920px),56px)}
  .hero__photo img{object-position:55% 30%}
  /* os quatro itens em 2 × 2, como na maquete: a grade avança pelo vão até 6 px do cartão, o que dá a
     "Background-checked" (que não quebra) a largura de que ele precisa ao lado do círculo */
  .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin-right:calc(6px - min(3vw,36px))}   /* o --gap em vw: aqui o % seria da coluna, não do hero */
  .checks li{gap:10px;font-size:14px}
  .checks .icon{width:46px;height:46px;padding:12px}
}
/* de 1280 px em diante: rótulos de 15 px e círculos de 50 px; o texto de apoio em 19 px */
@media (min-width:1280px){
  .hero .lede{font-size:19px;line-height:1.55}
  .checks{gap:14px 12px}
  .checks li{gap:12px;font-size:15px}
  .checks .icon{width:50px;height:50px;padding:13px}
}
/* de 1440 px em diante, os círculos de 56 px da maquete e o ramo de folhas */
@media (min-width:1440px){
  .hero__leaves{display:block}
  .checks{gap:14px}
  .checks .icon{width:56px;height:56px;padding:15px}
}

/* ── tela larga: o hero ganha até 50 px de altura (900 a 1680 px, 950 a 1920) para o peito caber na foto ──
 * Com o cartão alto (janela acima de 820 px), o bloco de texto e o cartão descem o mesmo tanto que a foto cresce:
 * a distância do fim do cartão até a base da foto fica a mesma de 1680 a 3440 px. Com o cartão compacto (até 820 px
 * de altura) a folga já sobra e nada desce: o cartão inteiro continua na primeira tela. */
@media (min-width:1680px){
  .hero{--hero-h:clamp(900px,calc(20.83vw + 550px),950px)}
}
/* janela baixa de notebook: na foto o rosto fica de 66 a 77% da altura e numa janela baixa cairia abaixo da dobra.
   · até 880 px de altura, quando a foto sobra na altura (de ~1560 px de largura em diante), o corte passa a 90% em
     cima: o rosto sobe (1680x720, 1920x720 e 1920x800) e o espanador perde a cabeça;
   · até 700 px de altura e de 1180 a 1439 px de largura, onde a foto não sobra na altura, o hero baixa para 800 px:
     o rosto fica inteiro na primeira tela a 1366x625 e 1366x641, e a 1280x593 aparecem 74% dele (a boca e o queixo
     na dobra). O preço: nessas janelas, com o erro longo de ZIP, o cartão termina perto da base da foto (−11 a
     +10 px), na faixa que as janelas altas evitam. De 1440 px em diante o rosto já cabe a 700 px com o hero de 900 */
@media (min-width:1180px) and (max-height:880px){
  .hero__photo img{object-position:55% 90%}
}
@media (min-width:1180px) and (max-width:1439.98px) and (max-height:700px){
  .hero{--hero-h:800px}
}
/* cartão alto (janela acima de 820 px): a etapa 3 (nome, telefone, e-mail, consentimento) é a mais alta; com o título
   em duas linhas e a régua de círculos ela terminava 39 px acima da base da foto (o mínimo é 48). Só ela aperta 16 px:
   as etapas 1 e 2 ficam como estão, para o erro longo de ZIP continuar passando da base da foto (fora da faixa de
   −24 a 16). No cartão compacto nada disso vale: lá a etapa 3 com erros já termina 29 px acima da base. */
@media (min-width:981px) and (height > 820px){
  .step[data-step="3"] .field{margin-top:12px}
  .step[data-step="3"] .field input{height:48px}
  .step[data-step="3"] .consent{margin-top:14px}
  .step[data-step="3"] .btn--block{margin-top:16px}
  /* e a etapa 1 ganha 6 px de respiro: com o erro longo de ZIP o cartão passa 31 px da base da foto (e não 25,
     rente ao limite de 24) e, com os dois erros curtos, termina 44 px acima dela */
  .step[data-step="1"] .quote__hint{margin-top:11px}
  .step[data-step="1"] .quote__note{margin-top:15px}
}
@media (min-width:1680px) and (height > 820px){
  .hero__grid{padding-top:calc(var(--hero-h) - 872px)}   /* 28 px + o que a foto cresceu */
}
/* cartão de 400 px (1366 px em diante) em janela alta: o título nos 30 px da maquete; a etapa 3 devolve os 5 px que
   ele ganha, para continuar terminando 48 px ou mais acima da base da foto */
@media (min-width:1440px) and (height > 820px){
  .quote__title{font-size:30px}
  .step[data-step="3"] .field{margin-top:11px}
  .step[data-step="3"] .consent{margin-top:12px}
}

/* ── janela baixa de notebook (até 820 px de altura): o cartão perde respiro para o botão da etapa 1
 * ficar na primeira tela mesmo a 1280x593, 1366x625 e 1536x730. Nenhum controle abaixo de 44 px. ── */
/* mouse ou trackpad: os links legais dispensam a área de toque estendida, e a etapa 3 volta à altura
   para a qual a foto do hero foi calculada. Tablet deitado (toque) mantém a folga de 44 px. */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .legal{margin-top:12px}
  .legal a::after{content:none}
  .step[data-step="3"]>.btn-back{margin-top:4px}
}

@media (min-width:981px) and (max-height:820px){
  .quote{padding:18px 20px 18px}
  .quote__title{font-size:20px}
  .quote__title::after{display:none}   /* o título cabe numa linha sem a faísca */
  .steps{margin-top:10px}
  .steps__bars i+i::after{top:12px}
  .steps__bars i{gap:3px;font-size:12px}
  .steps__bars i::before{width:24px;height:24px;font-size:12px}
  .field{margin-top:10px}
  .field>label,.field>legend{margin-bottom:5px;line-height:1.35}
  .field input,.field select{height:46px}
  .chip span{min-height:44px}
  .quote__hint{margin-top:6px}
  .quote .btn--block,.step__nav{margin-top:14px}
  .quote .btn{min-height:50px}
  .quote__note{margin-top:10px}
  .consent{margin-top:12px}
}
/* com o cartão de 368 px (até 1259 px de largura) o título só cabe numa linha com 19 px */
@media (min-width:981px) and (max-width:1259.98px) and (max-height:820px){
  .quote__title{font-size:19px}
}
/* janela muito baixa (até 660 px): a régua fica só com os círculos, para o botão da etapa 1 caber a 1280x593, e o
   #step-text ("Step 1 of 3 · Your home", o mesmo que o leitor de tela ouve) sai do esconderijo e vira a legenda */
@media (min-width:981px) and (max-height:660px){
  .steps{display:flex;align-items:center;gap:12px}
  .steps__bars{flex:none;width:96px}
  .steps__bars i{font-size:0;gap:0}
  #step-text{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;color:var(--hot-ink)}
}

/* desktop pequeno: quatro cartões de 207 a 257 px, com menos respiro e texto um ponto menor */
@media (min-width:981px) and (max-width:1179.98px){
  .room h3{margin:16px 16px 0;font-size:20px}
  .room p{margin:6px 16px 20px;font-size:15px}
  .why__grid li:nth-child(n){padding:6px 16px 8px}
  .why__grid h3{font-size:20px}
  .perk{padding:30px 18px 26px}
  .perk h3{font-size:20px}
  .perk p{font-size:15px}
  .heart--plans{right:0;width:60px;height:43px}   /* ao lado do botão sobram de 69 a 162 px */
  /* como funciona: círculo de 64 px e vão de 32 px, para o texto ter de 170 a 230 px ao lado do ícone */
  .how__steps{gap:32px}
  .how__steps li{grid-template-columns:64px minmax(0,1fr);column-gap:16px}
  .how .disc{width:64px;height:64px}
  .how .disc .icon{width:30px;height:30px}
  .how__steps h3{margin-top:8px;padding-left:26px;font-size:20px}
  .how__steps p{padding-left:26px;font-size:15px}
  .how__steps li:not(:last-child)::after{left:calc(100% + 4px);top:13px;width:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
  .chip input:checked+span{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .ticks li::before{forced-color-adjust:none}   /* o check é branco: sem isto ele sumia no fundo do sistema */
  .leaves,.heart{display:none}
  .steps__bars i.on::before{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .steps__bars i+i::after{forced-color-adjust:none;background:linear-gradient(Highlight,Highlight) 0 0/0 100% no-repeat,GrayText}
  .hd__phone{border:2px solid LinkText}
  .field select{appearance:auto;background-image:none;padding-left:14px}
  #zip,#name,#phone,#email{background-image:none;padding-left:14px}
  .hero__edge,.hero::after,.hero__leaves{display:none}
}

/* ── página de obrigado ─────────────────────────────────────────────────── */
/* em telas altas o rodapé encosta no fim da janela e o conteúdo fica centrado no espaço livre */
.ty-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--satin) 0 0/100% 100% no-repeat,radial-gradient(50% 40% at 0 0,rgba(252,235,240,.9),transparent 70%),linear-gradient(165deg,var(--blush),#FADDE5 45%,var(--blush-2))}
.ty-page .ty{flex:1;display:grid;align-content:center}
.ty{padding:32px 0 72px}
.ty__grid{display:grid;gap:44px;align-items:center}
.ty h1{margin-top:0;font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem);overflow-wrap:anywhere}
.ty h1::before{content:"";display:block;width:96px;height:16px;margin-bottom:20px;background:var(--orn) 0 50%/96px 16px no-repeat}
/* resumo do pedido: cartão rosado de aro branco; "Your request" vira micro-rótulo */
.ty__summary{margin-top:26px;background:var(--card-bg);box-shadow:0 0 0 1.5px rgba(255,255,255,.9),var(--shadow-sm);border-radius:22px;padding:18px 22px;max-width:30em}
.ty__summary h2{font-family:var(--ff);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--hot-ink)}
.ty__summary dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair-soft);font-size:15.5px}
.ty__summary dt{color:var(--ink-2)}
.ty__summary dd{font-weight:600;white-space:nowrap}
@media (max-width:389px){
  .ty__summary{padding:16px}
  .ty__summary dl{gap:6px 12px;font-size:15px}
}
.ty__steps{list-style:none;counter-reset:passo;display:grid;gap:24px;margin-top:34px}
.ty__steps li{counter-increment:passo;position:relative;padding-left:64px}
.ty__steps li::before{content:counter(passo);position:absolute;left:0;top:-8px;width:46px;height:46px;border-radius:50%;background:var(--btn);box-shadow:var(--disc);display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:22px;font-weight:700;color:var(--white)}
.ty__steps h3{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.01em}
.ty__steps p{margin-top:4px;font-size:17px;color:var(--ink-2)}
.ty__call{margin-top:28px;font-size:17px}
.ty__call a{display:inline-block;padding:10px 0;margin:-10px 0;font-weight:700;color:var(--hot-ink);text-underline-offset:4px;white-space:nowrap}
/* a fundadora na mesa, em arco */
.ty__photo{border-radius:50% 50% 10px 10px/40% 40% 10px 10px;overflow:hidden;aspect-ratio:4/5;max-width:420px;outline:2px solid var(--white);outline-offset:12px;margin:12px;box-shadow:var(--shadow-sm)}
@media (min-width:700px) and (max-width:980.98px){
  .ty__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start}
}
.ty__photo img{width:100%;height:100%;object-fit:cover}
@media (min-width:981px){
  .ty{padding:48px 0 112px}
  .ty__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px}
  .ty__photo{max-width:none;margin:14px;outline-offset:14px}
  .ty .lede{max-width:540px}
}