/* ============================================================
   ORGANICFLOW · PREMIUM v1 FINAL (contrato visual, prefixo pm)
   Consolidado: base PM1 + enxertos PM2 (status bar, aro escuro,
   pmScope, unidade de moeda, botao money, stagger automatico).
   Mobile first ~390px. Sem asset externo, sem webfont, sem lib.
   Zero transform 3D. Zero filter em conteudo/texto.
   Animacao infinita so em pseudo/elemento sem texto.
   Rabinho de bolha por borda e radius, nunca losango rotacionado.
   ============================================================ */

:root{
  /* superficies */
  --pm-bg:#EFEDE6;
  --pm-card:#FFFFFF;
  --pm-card-sub:#F7F5EF;
  /* tinta */
  --pm-ink:#0C2A23;          /* texto principal */
  --pm-ink2:#3B4A44;         /* corpo */
  --pm-mut:#6A645B;          /* caption */
  --pm-faint:#CAC4B7;
  --pm-line:rgba(12,42,35,.07);
  /* preto de compromisso (decisao, aro) */
  --pm-black:#0B0D14;
  --pm-black-hi:#1B2130;
  /* accent (marca) */
  --pm-blu:#1C7C43;
  --pm-blu-hi:#2E9C56;
  --pm-blu-lo:#186B39;
  --pm-blu-press:#155F33;
  --pm-blu-t:#E4F0E7;
  /* semanticas */
  --pm-grn:#2BC65A;
  --pm-grn-t:#E7F6EC;
  --pm-red:#E5484D;
  --pm-amber:#FBBC04;        /* estrelas Google */
  /* google (so dentro da replica) */
  --pm-glink:#1A73E8;
  --pm-gtxt:#202124;
  --pm-gmut:#70757A;
  --pm-gline:#DADCE0;
  /* sms iOS */
  --pm-sms-out-hi:#3FD35A;
  --pm-sms-out-lo:#27B444;
  --pm-sms-in:#E9E9EB;
  /* raios */
  --pm-r-lg:24px; --pm-r-md:20px; --pm-r-sm:14px; --pm-r-pill:28px;
  /* sombras: SEMPRE 2 camadas, contato (curta) + ambiente (longa,
     spread negativo pra nao virar mancha cinza) */
  --pm-sh-card:0 1px 2px rgba(12,42,35,.05), 0 12px 32px -8px rgba(12,42,35,.10);
  --pm-sh-float:0 2px 4px rgba(12,42,35,.06), 0 24px 48px -12px rgba(12,42,35,.16);
  --pm-sh-btn:0 1px 2px rgba(21,95,51,.28), 0 10px 24px -6px rgba(28,124,67,.45);
  /* motion */
  --pm-spring:cubic-bezier(.34,1.56,.64,1);  /* entradas pequenas */
  --pm-glide:cubic-bezier(.2,.8,.2,1);       /* deslizes */
}

/* escopo tipografico: aplicar no body ou no wrapper raiz */
.pmScope{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--pm-bg);
  color:var(--pm-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.014em;
}

/* ------------------------------------------------------------
   1 · MOLDURA DE CELULAR PREMIUM  (.pmPhone)
   Aro titanio escuro em gradiente, ilha dinamica, status bar,
   brilho de vidro estatico em pseudo, sombra em 2 camadas.
   markup: .pmPhone > .pmPhone__bezel > .pmPhone__screen
           > (.pmPhone__island + .pmPhone__status + .pmPhone__body)
   ------------------------------------------------------------ */
.pmPhone{
  position:relative;
  width:min(320px,88vw);
  margin:0 auto;
  border-radius:58px;
  padding:3.5px;                             /* espessura do aro */
  background:linear-gradient(155deg,
    #EDEEF1 0%, #B8BCC4 16%, #878C97 38%,
    #CDD0D6 55%, #7C818C 78%, #B4B8BF 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),   /* fio de luz no metal */
    inset 0 -1px 1px rgba(11,13,20,.35),
    0 4px 10px rgba(11,13,20,.14),           /* contato */
    0 30px 64px -16px rgba(11,13,20,.34);    /* ambiente */
}
.pmPhone__bezel{
  background:#05060A;
  border-radius:54.5px;
  padding:9px;
}
.pmPhone__screen{
  position:relative;
  overflow:hidden;
  border-radius:46px;
  background:var(--pm-bg);
  min-height:560px;
  display:flex;
  flex-direction:column;
}
.pmPhone__screen>*{ min-width:0; }
/* ilha dinamica */
.pmPhone__island{
  position:absolute;
  top:11px; left:50%;
  width:92px; height:27px;
  margin-left:-46px;
  border-radius:14px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  z-index:60;
}
/* brilho de vidro: sliver diagonal estatico no canto superior,
   alpha maximo .14, nunca sobre texto de conteudo */
.pmPhone__screen::after{
  content:"";
  position:absolute;
  top:-40%; left:-30%;
  width:70%; height:60%;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.14) 48%,
    rgba(255,255,255,.05) 60%,
    rgba(255,255,255,0) 70%);
  pointer-events:none;
  z-index:55;
}
/* status bar fiel: hora esquerda, sinal e bateria direita */
.pmPhone__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px 6px;
  font-size:14px; font-weight:600; color:var(--pm-ink);
}
.pmPhone__glyphs{ display:flex; align-items:center; gap:6px; }
.pmStSignal{ display:inline-flex; align-items:flex-end; gap:1.5px; }
.pmStSignal i{ width:3px; border-radius:1px; background:var(--pm-ink); }
.pmStSignal i:nth-child(1){ height:4px; }
.pmStSignal i:nth-child(2){ height:6px; }
.pmStSignal i:nth-child(3){ height:8px; }
.pmStSignal i:nth-child(4){ height:10px; }
.pmStBatt{
  width:24px; height:11.5px;
  border:1.5px solid rgba(15,21,34,.42);
  border-radius:3.5px; position:relative;
}
.pmStBatt::before{ content:""; position:absolute; inset:1.5px; right:5.5px;
  background:var(--pm-ink); border-radius:1.5px; }
.pmStBatt::after{ content:""; position:absolute; right:-4px; top:3px;
  width:1.8px; height:4px; background:rgba(15,21,34,.42); border-radius:0 2px 2px 0; }
/* corpo da tela */
.pmPhone__body{
  padding:8px 16px 22px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}

/* ------------------------------------------------------------
   2 · CARTAO ELEVADO  (.pmCard)
   ------------------------------------------------------------ */
.pmCard{
  background:var(--pm-card);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  padding:20px;
}
.pmCard--float{ box-shadow:var(--pm-sh-float); }
.pmCard--sub{ background:var(--pm-card-sub); box-shadow:none; }
.pmCard--tight{ padding:14px 16px; }

/* ------------------------------------------------------------
   3 · BOTAO PRINCIPAL  (.pmBtn)
   56px, gradiente sutil, sombra colorida, active 0.97.
   Azul: proximo passo. --dark: decisao. --money: so paywall.
   ------------------------------------------------------------ */
.pmBtn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:56px;
  border:none; cursor:pointer;
  border-radius:var(--pm-r-pill);
  background:linear-gradient(180deg,var(--pm-blu-hi) 0%,var(--pm-blu) 52%,var(--pm-blu-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), var(--pm-sh-btn);
  color:#fff;
  font-family:inherit;
  font-size:17px; font-weight:700; letter-spacing:-.01em;
  transition:transform .16s var(--pm-spring), box-shadow .2s ease;
}
.pmBtn:active{
  transform:scale(.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(21,95,51,.28), 0 6px 14px -6px rgba(28,124,67,.40);
}
.pmBtn[disabled]{
  background:#85C2FF; box-shadow:none; cursor:default;
}
.pmBtn--dark{
  background:linear-gradient(180deg,var(--pm-black-hi) 0%,var(--pm-black) 60%,#06070C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(11,13,20,.30), 0 10px 24px -6px rgba(11,13,20,.42);
}
.pmBtn--dark:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 4px rgba(11,13,20,.30);
}
/* dinheiro: gradiente marinho ate azul, caps, 64px. SO no paywall. */
.pmBtn--money{
  height:64px;
  background:linear-gradient(135deg,#0C2A23 0%,#1C7C43 100%);
  text-transform:uppercase; letter-spacing:.04em; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(21,95,51,.28), 0 14px 32px -6px rgba(28,124,67,.40);
}
.pmBtn svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------------------
   4 · PUSH NOTIFICATION iOS FIEL  (.pmPush)
   Banner moderno: icone 38, titulo bold 13, corpo 13, "agora".
   Sem linha de nome de app (iOS atual nao mostra).
   ------------------------------------------------------------ */
.pmPush{
  display:flex; align-items:flex-start; gap:11px;
  background:rgba(250,250,252,.97);
  border:1px solid rgba(16,24,40,.05);
  border-radius:22px;
  padding:12px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 16px 40px -10px rgba(16,24,40,.22);
}
.pmPush__icon{
  flex:none;
  width:38px; height:38px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--pm-blu-hi),var(--pm-blu-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  color:#fff; font-size:16px; font-weight:800;
}
.pmPush__icon svg{ width:22px; height:22px; stroke:#fff; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.pmPush__body{ flex:1; min-width:0; }
.pmPush__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pmPush__title{
  flex:1; min-width:0;
  font-size:13px; font-weight:700; letter-spacing:-.01em; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pmPush__when{ flex:none; font-size:12px; color:rgba(60,60,67,.6); }
.pmPush__text{ font-size:13px; line-height:1.32; color:#1C1C1E; margin-top:1px; letter-spacing:-.005em; }

/* ------------------------------------------------------------
   5 · THREAD DE SMS iOS FIEL  (.pmSms)
   Rabinho OPT-IN via --tail (so no ultimo balao da sequencia),
   desenhado por par de pseudos com border-radius.
   Dentro de fundo nao branco: setar --pm-sms-carve.
   ------------------------------------------------------------ */
.pmSms{
  background:#FFFFFF;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  overflow:hidden;
}
.pmSms__bar{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 16px 10px;
  background:rgba(247,247,249,.98);
  border-bottom:.5px solid rgba(16,24,40,.10);
}
.pmSms__avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#A6AEBB,#8A93A2);
  color:#fff; font-size:16px; font-weight:600; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.pmSms__name{
  font-size:12px; font-weight:500; color:var(--pm-ink);
  display:flex; align-items:center; gap:3px;
}
.pmSms__name small{ font-size:11px; font-weight:400; color:var(--pm-mut); }
.pmSms__name::after{ content:"›"; color:var(--pm-faint); font-size:13px; }
.pmSms__feed{ display:flex; flex-direction:column; gap:3px; padding:14px 14px 16px; }
.pmSms__stamp{
  align-self:center;
  font-size:11px; font-weight:500; color:rgba(60,60,67,.45);
  margin:4px 0 8px;
}
.pmSms__bub{
  position:relative;
  max-width:78%;
  padding:8px 13px;
  font-size:15px; line-height:1.32; letter-spacing:-.01em;
  border-radius:18px;
}
.pmSms__bub + .pmSms__bub{ margin-top:2px; }
/* recebido: cinza, esquerda */
.pmSms__bub--in{
  align-self:flex-start;
  background:var(--pm-sms-in);
  color:#000;
}
/* enviado: verde, direita */
.pmSms__bub--out{
  align-self:flex-end;
  background:linear-gradient(180deg,var(--pm-sms-out-hi),var(--pm-sms-out-lo));
  color:#fff;
}
/* rabinho: curva por dois blocos com border-radius */
.pmSms__bub--tail{ overflow:visible; }
.pmSms__bub--tail::before{
  content:"";
  position:absolute; bottom:0;
  width:18px; height:19px;
  z-index:0;
}
.pmSms__bub--tail::after{
  content:"";
  position:absolute; bottom:0;
  width:12px; height:21px;
  background:var(--pm-sms-carve,#FFFFFF);
  z-index:1;
}
.pmSms__bub--in.pmSms__bub--tail::before{
  left:-7px;
  background:var(--pm-sms-in);
  border-bottom-right-radius:16px 14px;
}
.pmSms__bub--in.pmSms__bub--tail::after{
  left:-12px;
  border-bottom-right-radius:11px;
}
.pmSms__bub--out.pmSms__bub--tail::before{
  right:-7px;
  background:var(--pm-sms-out-lo);
  border-bottom-left-radius:16px 14px;
}
.pmSms__bub--out.pmSms__bub--tail::after{
  right:-12px;
  border-bottom-left-radius:11px;
}
/* recibo de entrega */
.pmSms__read{
  align-self:flex-end;
  font-size:11px; font-weight:500; color:rgba(60,60,67,.55);
  margin:3px 4px 0;
}
/* typing dots: infinito permitido, elemento sem texto */
.pmSms__typing{
  align-self:flex-start;
  display:flex; gap:5px; align-items:center;
  background:var(--pm-sms-in);
  border-radius:18px;
  padding:12px 14px;
}
.pmSms__typing i{
  width:8px; height:8px; border-radius:50%;
  background:#9B9BA1;
  animation:pmDot 1.3s ease-in-out infinite;
}
.pmSms__typing i:nth-child(2){ animation-delay:.18s; }
.pmSms__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes pmDot{
  0%,60%,100%{ opacity:.35; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-2px); }
}

/* ------------------------------------------------------------
   6 · REPLICA DO GOOGLE  (.pmG)
   Cores e fonte do Google valem SO aqui dentro.
   ------------------------------------------------------------ */
.pmG{
  background:#FFFFFF;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  overflow:hidden;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,system-ui,Arial,sans-serif;
  font-size:14px;
  letter-spacing:0;
  color:var(--pm-gtxt);
}
.pmG__head{ padding:16px 16px 0; }
.pmG__logo{
  font-size:24px; font-weight:500; letter-spacing:-.5px;
  text-align:center; margin-bottom:12px;
}
.pmG__logo b{ font-weight:500; }
.pmG__logo .g1{ color:#4285F4; } .pmG__logo .g2{ color:#EA4335; }
.pmG__logo .g3{ color:#FBBC05; } .pmG__logo .g4{ color:#4285F4; }
.pmG__logo .g5{ color:#34A853; } .pmG__logo .g6{ color:#EA4335; }
.pmG__bar{
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 16px;
  border:1px solid #DFE1E5;
  border-radius:22px;
  box-shadow:0 1px 6px rgba(32,33,36,.12);
  font-size:15px; color:var(--pm-gtxt);
}
.pmG__bar svg{ width:18px; height:18px; flex:none; stroke:#9AA0A6; stroke-width:2;
  fill:none; stroke-linecap:round; }
.pmG__bar span{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmG__mic{ stroke:#4285F4 !important; }
.pmG__tabs{
  display:flex; gap:22px;
  padding:12px 16px 0;
  border-bottom:1px solid #EBEBEB;
  font-size:13px; color:var(--pm-gmut);
  overflow-x:auto; scrollbar-width:none;
}
.pmG__tabs::-webkit-scrollbar{ display:none; }
.pmG__tab{ padding-bottom:10px; white-space:nowrap; }
.pmG__tab--on{
  color:var(--pm-glink); font-weight:500;
  border-bottom:3px solid var(--pm-glink);
}
/* Business Profile */
.pmG__biz{ padding:16px; border-bottom:8px solid #F1F3F4; }
.pmG__bizName{ font-size:22px; font-weight:400; color:var(--pm-gtxt); letter-spacing:0; }
.pmG__bizRate{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; color:var(--pm-gmut); }
.pmG__bizRate b{ color:var(--pm-gtxt); font-weight:400; }
.pmG__stars{ color:var(--pm-amber); font-size:13px; letter-spacing:1px; }
.pmG__bizMeta{ font-size:13px; color:var(--pm-gmut); margin-top:3px; }
.pmG__bizOpen{ color:#188038; font-weight:500; }
.pmG__acts{ display:flex; gap:8px; margin-top:12px; }
.pmG__act{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:36px;
  border:1px solid var(--pm-gline);
  border-radius:18px;
  background:#fff;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--pm-glink);
  cursor:pointer;
  transition:background .15s ease;
}
.pmG__act:active{ background:#F1F6FE; }
/* variante preenchida: so no primeiro botao (Ligar) quando destacado */
.pmG__act--fill{ background:var(--pm-glink); border-color:var(--pm-glink); color:#fff; }
.pmG__act--fill svg{ stroke:#fff !important; }
.pmG__act svg{ width:15px; height:15px; stroke:var(--pm-glink); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.pmG__photos{ display:flex; gap:6px; margin-top:12px; }
.pmG__photo{ flex:1; height:74px; border-radius:10px; }
.pmG__photo--a{ background:linear-gradient(135deg,#D7E3EE 0%,#9FB6C9 55%,#6E8AA3 100%); }
.pmG__photo--b{ background:linear-gradient(160deg,#EFE4D4 0%,#CBB79B 60%,#93805F 100%); }
.pmG__photo--c{ background:linear-gradient(145deg,#DFE8E1 0%,#A7BFAE 55%,#70907C 100%); }
/* resultados organicos: dominio simples, sem https */
.pmG__res{ padding:14px 16px; }
.pmG__res + .pmG__res{ border-top:1px solid #EBEBEB; }
.pmG__src{ display:flex; align-items:center; gap:8px; }
.pmG__fav{
  width:26px; height:26px; border-radius:50%;
  background:#F1F3F4;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#5F6368;
}
.pmG__url{ font-size:13px; color:var(--pm-gtxt); line-height:1.25; }
.pmG__url small{ display:block; font-size:12px; color:var(--pm-gmut); }
.pmG__title{ display:block; font-size:17px; color:#1A0DAB; margin-top:6px;
  line-height:1.3; font-weight:400; text-decoration:none; }
.pmG__snip{ font-size:13px; color:#4D5156; line-height:1.45; margin-top:3px; }
.pmG__snip b{ font-weight:500; color:var(--pm-gtxt); }

/* ------------------------------------------------------------
   7 · NUMEROS VIVOS  (.pmNum)
   Dinheiro sempre: tabular, peso 800, tracking apertado.
   Unidade de moeda menor via .pmNum__unit.
   ------------------------------------------------------------ */
.pmNum{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--pm-ink);
  line-height:1.05;
}
.pmNum--display{ font-size:44px; line-height:1.02; }
.pmNum--card{ font-size:32px; }
.pmNum--row{ font-size:22px; font-weight:700; }
.pmNum--grn{ color:var(--pm-grn); }
.pmNum--blu{ color:var(--pm-blu); }
.pmNum__unit{
  font-size:.5em; font-weight:700; color:var(--pm-mut);
  letter-spacing:-.01em; vertical-align:baseline;
}
/* alvo do count-up: o JS le data-countup e anima o textContent */
.pmNum [data-countup], .pmNum[data-countup]{ min-width:1ch; }

/* ------------------------------------------------------------
   8 · MOMENTO DE VITORIA  (.pmWin)
   Selo verde cheio, check que desenha, particulas em pseudo
   sem texto, rajada unica, sem som. Disparo: classe is-on.
   ------------------------------------------------------------ */
.pmWin{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0; }
.pmWin__badge{
  position:relative;
  width:84px; height:84px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#43D065,#23AE49);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 2px 4px rgba(35,174,73,.25),
    0 16px 36px -8px rgba(35,174,73,.45);
}
.pmWin__badge svg{ width:44px; height:44px; }
.pmWin__check{
  stroke:#fff; stroke-width:3.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:52; stroke-dashoffset:52;
}
.pmWin.is-on .pmWin__badge{ animation:pmPop .55s var(--pm-spring) both; }
.pmWin.is-on .pmWin__check{ animation:pmDraw .55s .30s var(--pm-glide) forwards; }
/* particulas: pontos por box-shadow, uma passada so */
.pmWin__badge::before,
.pmWin__badge::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:5px; height:5px; margin:-3px 0 0 -3px;
  border-radius:50%;
  background:transparent;
  opacity:0;
  pointer-events:none;
}
.pmWin__badge::before{
  box-shadow:
    -46px -30px 0 var(--pm-grn),
     48px -22px 0 var(--pm-amber),
    -34px  40px 0 var(--pm-blu),
     40px  38px 0 var(--pm-grn),
      2px -52px 0 var(--pm-blu);
}
.pmWin__badge::after{
  width:4px; height:4px;
  box-shadow:
    -55px   6px 0 var(--pm-amber),
     58px   8px 0 var(--pm-blu),
    -18px -48px 0 var(--pm-grn),
     24px  50px 0 var(--pm-amber);
}
.pmWin.is-on .pmWin__badge::before{ animation:pmBurst .8s .32s var(--pm-glide) forwards; }
.pmWin.is-on .pmWin__badge::after{ animation:pmBurst .9s .40s var(--pm-glide) forwards; }
.pmWin__title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--pm-ink); margin-top:18px; }
.pmWin__sub{ font-size:15px; color:var(--pm-mut); margin-top:5px; line-height:1.4; }
.pmWin.is-on .pmWin__title{ animation:pmRise .5s .18s var(--pm-glide) both; }
.pmWin.is-on .pmWin__sub{ animation:pmRise .5s .26s var(--pm-glide) both; }
@keyframes pmPop{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes pmDraw{ to{ stroke-dashoffset:0; } }
@keyframes pmBurst{
  0%{ opacity:0; transform:scale(.2); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.15); }
}

/* ------------------------------------------------------------
   9 · TIPOGRAFIA (hierarquia por PESO)
   ------------------------------------------------------------ */
.pmDisplay{ font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--pm-ink); }
.pmH1{ font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--pm-ink); }
.pmH2{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--pm-ink); }
.pmBody{ font-size:16px; line-height:1.45; color:var(--pm-ink2); }
.pmCaption{ font-size:13px; line-height:1.4; color:var(--pm-mut); }
.pmOverline{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pm-mut); }

/* ------------------------------------------------------------
   10 · MOTION (entradas, stagger automatico ou manual)
   ------------------------------------------------------------ */
@keyframes pmRise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes pmPopIn{
  from{ opacity:0; transform:scale(.72); }
  to{ opacity:1; transform:scale(1); }
}
.pmIn{ animation:pmRise .45s var(--pm-glide) both; }
.pmIn--pop{ animation:pmPopIn .45s var(--pm-spring) both; }
/* stagger manual (controle fino) */
.pmIn[data-i="1"]{ animation-delay:.07s; }
.pmIn[data-i="2"]{ animation-delay:.15s; }
.pmIn[data-i="3"]{ animation-delay:.23s; }
.pmIn[data-i="4"]{ animation-delay:.31s; }
.pmIn[data-i="5"]{ animation-delay:.39s; }
.pmIn[data-i="6"]{ animation-delay:.47s; }
/* stagger automatico (filhos diretos, 70 a 90ms) */
.pmStagger>*{ animation:pmRise .45s var(--pm-glide) both; }
.pmStagger>*:nth-child(1){ animation-delay:.02s; }
.pmStagger>*:nth-child(2){ animation-delay:.09s; }
.pmStagger>*:nth-child(3){ animation-delay:.17s; }
.pmStagger>*:nth-child(4){ animation-delay:.25s; }
.pmStagger>*:nth-child(5){ animation-delay:.33s; }
.pmStagger>*:nth-child(6){ animation-delay:.41s; }
.pmStagger>*:nth-child(7){ animation-delay:.49s; }

@media (prefers-reduced-motion:reduce){
  .pmIn,.pmIn--pop,.pmStagger>*,
  .pmWin.is-on .pmWin__badge,
  .pmWin.is-on .pmWin__title,
  .pmWin.is-on .pmWin__sub,
  .pmWin.is-on .pmWin__badge::before,
  .pmWin.is-on .pmWin__badge::after,
  .pmSms__typing i{ animation:none; }
  .pmWin.is-on .pmWin__check{ animation:none; stroke-dashoffset:0; }
}


/* ============================================================
   TEMA RAW (?ds=raw) · reescrito 28/08 com os numeros MEDIDOS
   no funil da Jobber, colhidos ao vivo em secure.getjobber.com.
   Nao e inspiracao de olho: cada valor abaixo saiu do inspetor.

   O que foi medido la:
     fonte     Inter
     tinta     #233D48   (titulo E corpo na mesma cor)
     titulo    36px peso 900, entrelinha 1.08
     corpo     14px peso 400, entrelinha 1.5
     campo     altura 48, raio 8, padding 14px 24px, fonte 14
     botao     altura 48, raio 8, fonte 14, PESO 400
     coluna    500px
     verde     #388523

   Duas adaptacoes conscientes, e so duas:
   1) o verde vira o AZUL da nossa marca. Formato deles, cor nossa.
   2) o corpo sobe de 14 para 15px porque o nosso funil e de celular
      e o deles que eu medi era desktop. No video do celular deles o
      corpo tambem e maior.
   O peso 400 do botao eu MANTIVE igual ao deles, mesmo parecendo
   fraco, porque e escolha deliberada la: o peso mora no titulo.
   ============================================================ */
html[data-ds="raw"]{
  /* superficies */
  --pm-bg:#FFFFFF;
  --pm-card:#FFFFFF;
  --pm-card-sub:#F7F7F5;
  /* tinta: um tom so pra titulo e corpo, como eles fazem */
  --pm-ink:#1F382E;
  --pm-ink2:#1F382E;
  --pm-mut:#6A645B;
  --pm-line:rgba(12,42,35,.18);
  /* acao: o formato e deles, a cor e nossa */
  --pm-blu:#1C7C43;
  --pm-blu-hi:#2E9C56;
  --pm-blu-lo:#155F33;
  --pm-blu-press:#0F4A28;
  --pm-blu-t:#E4F0E7;
  /* raio 8, medido. Nao 4 como eu tinha chutado antes. */
  --pm-r-lg:8px; --pm-r-md:8px; --pm-r-sm:8px; --pm-r-pill:8px;
  /* sombra nao existe no sistema deles */
  --pm-sh-card:none;
  --pm-sh-float:none;
  --pm-sh-btn:none;
  /* motion sem mola */
  --pm-spring:cubic-bezier(.2,.7,.3,1);
  --pm-glide:cubic-bezier(.2,.7,.3,1);
}
html[data-ds="raw"] .pmScope,
html[data-ds="raw"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:normal;   /* eles nao apertam. SF apertado e a assinatura Apple */
}
/* TIPOGRAFIA medida */
html[data-ds="raw"] h1,
html[data-ds="raw"] .ob h1,
html[data-ds="raw"] .pmH1{
  font-size:34px;
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--pm-ink);
}
html[data-ds="raw"] .ob p,
html[data-ds="raw"] .pmSub,
html[data-ds="raw"] .pmBody{
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  color:var(--pm-ink);
}
/* CONTROLES medidos: 48 de altura, raio 8 */
html[data-ds="raw"] .pmBtn,
html[data-ds="raw"] .obCta,
html[data-ds="raw"] .obECta,
html[data-ds="raw"] button.cta{
  min-height:48px;
  border-radius:8px;
  font-size:15px;
  font-weight:400;      /* igual a eles. O peso mora no titulo. */
  box-shadow:none;
  background:var(--pm-blu);
  background-image:none;
  letter-spacing:normal;
}
html[data-ds="raw"] .obInput,
html[data-ds="raw"] .pmInput,
html[data-ds="raw"] input[type=text],
html[data-ds="raw"] input[type=tel],
html[data-ds="raw"] input[type=email],
html[data-ds="raw"] input[type=password]{
  min-height:48px;
  border-radius:8px;
  font-size:15px;
  padding:14px 20px;
  border:1px solid var(--pm-line);
  box-shadow:none;
  background:#fff;
}
html[data-ds="raw"] .obInput:focus,
html[data-ds="raw"] .pmInput:focus{
  border-color:var(--pm-blu);
  box-shadow:0 0 0 2px rgba(28,124,67,.16);
}
/* chip de escolha: pilula CONTINUA pilula na Jobber, mas com borda
   fina e sem sombra. Aqui eu sigo eles. */
html[data-ds="raw"] .obChip,
html[data-ds="raw"] .obOpt,
html[data-ds="raw"] .obPick{
  border-radius:999px;
  border:1px solid var(--pm-line);
  box-shadow:none;
  font-size:15px;
  min-height:44px;
}
/* cartao: sem sombra, com borda */
html[data-ds="raw"] .pmCard,
html[data-ds="raw"] .pmTile,
html[data-ds="raw"] .pmSheet{
  border:1px solid var(--pm-line);
  border-radius:8px;
  box-shadow:none;
}
/* BARRA DE PROGRESSO no padrao deles: mais grossa, chapada, reta,
   largura cheia da coluna. A nossa era 3px com gradiente. */
html[data-ds="raw"] #obBar{
  height:5px;
  max-width:none;
  background:#E4E6E4;
  border-radius:0;
}
html[data-ds="raw"] #obBar i{
  background:var(--pm-blu);
  border-radius:0;
}
/* moldura de celular sem aro de vidro */
html[data-ds="raw"] .pmPhone__bezel{
  border-radius:10px;
  padding:6px;
  background:#0B0D14;
  box-shadow:none;
}
html[data-ds="raw"] .pmPhone__screen{ border-radius:6px; }
html[data-ds="raw"] .pmPhone__bezel::before,
html[data-ds="raw"] .pmPhone__bezel::after{ display:none; }