/* Celular · Parte B · só dentro de @media (max-width:720px) */
@media (max-width:720px){

/* 1 · Cabeçalhos de seção alinhados à esquerda, na mesma margem dos cards (20px) */
#exemplo .section-heading,#continuidade .section-heading,#fundador .section-heading,#entregaveis .delivery-heading,#entregaveis .delivery-heading>div{align-items:flex-start;text-align:left;max-width:none;margin-left:0;margin-right:0}
#exemplo .section-heading,#continuidade .section-heading,#fundador .section-heading,#entregaveis .delivery-heading{margin-bottom:40px}
#exemplo .section-heading .eyebrow,#continuidade .section-heading .eyebrow,#fundador .section-heading .eyebrow,#entregaveis .delivery-heading .eyebrow{align-self:flex-start;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font-size:14px;margin:0 0 20px}
/* 4 · h2 32px, entrelinha 1,15; subtítulo 16px */
#exemplo .section-heading h2,#continuidade .section-heading h2,#fundador .section-heading h2,#entregaveis .delivery-heading h2{text-align:left;font-size:32px;line-height:1.15;letter-spacing:-.03em;max-width:none;margin:0;text-wrap:pretty}
#exemplo .section-heading>p,#continuidade .section-heading>p,#fundador .section-heading>p,#entregaveis .delivery-heading>p{text-align:left;font-size:16px;line-height:1.6;max-width:none;margin:16px 0 0}

/* 4 · um token para título de card no celular: 20px (16 x 1,25), entrelinha 1,3; o subtítulo do bloco do CRM fica um passo acima (25px) e o h2 no seguinte (32px) */
#exemplo .opportunity-item h3,#entregaveis .delivery-fold h3,#entregaveis .delivery-fold[open] h3{font-size:20px;line-height:1.3;letter-spacing:-.02em}
#exemplo .opportunity-item h3{margin:0 0 12px}

/* notas de fim de seção: à esquerda, 15px */
#exemplo .opportunity-list>p:last-child,#continuidade .section-body>p.section-note,#entregaveis .delivery-note{text-align:left;max-width:none;margin:24px 0 0;font-size:15px;line-height:1.6}

/* 01 · três perguntas: rotina de indicação em linhas, sem quebra palavra a palavra */
#exemplo .referral-flow{grid-template-columns:1fr;gap:0;padding:8px 0 16px}
#exemplo .referral-flow>span{display:block;padding:10px 0;font-size:15px;line-height:1.5}
#exemplo .referral-flow>span:last-child{border-bottom:1px solid #DED6E0}
#exemplo .referral-flow small{display:inline-block;min-width:32px;margin:0;font-size:13px;font-variant-numeric:tabular-nums}
#exemplo .referral-flow strong{font-size:15px}

/* 02 · painel: HTML legível, fica inteiro dentro das margens de 20px (regra da Parte B: HTML na margem; captura sangra) */

/* radar: rótulos dos eixos em Sora 400, #120B16, 14px renderizados (texto de apoio do painel); o SVG escala com min(100vw - 69px, 360px) de 320 unidades */
#continuidade .competency-radar .radar-label{font-family:Sora,sans-serif;font-weight:400;fill:#120B16;letter-spacing:0;font-size:clamp(12.45px,calc(32.2px - 4.667vw),15.4px)}
#continuidade .radar-legend{color:#625865}

/* leitura do acordeão "Como investigar" em 16px (sem parágrafo de 14px) */
#continuidade .reading-details .reading-content>p,#continuidade .reading-details .reading-content>p:last-child{font-size:16px;line-height:1.6}

/* Fundador: retrato grande no topo do card, texto abaixo */
#fundador .founder-with-photo{display:block;padding:0;overflow:hidden}
#fundador .founder-portrait{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:0}
#fundador .founder-with-photo>p{margin:0;padding:24px;font-size:16px;line-height:1.6}

/* 6 · Entregas: trilho horizontal, conteúdo aberto, próximo card aparecendo pela borda direita */
#entregaveis .delivery-grid{display:flex;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-inline:contain;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
#entregaveis .delivery-grid::-webkit-scrollbar{display:none}
#entregaveis .delivery-item{flex:0 0 calc(100vw - 96px);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;padding:24px}
#entregaveis .delivery-item>.delivery-fold{display:flex;flex-direction:column;flex:1 1 auto}
#entregaveis .delivery-fold>summary{display:block;pointer-events:none;cursor:default;min-height:0;padding:0;list-style:none}
#entregaveis .delivery-fold>summary::after,#entregaveis .delivery-fold[open]>summary::after{content:none}
#entregaveis .delivery-fold h3,#entregaveis .delivery-fold[open] h3{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:20px;line-height:1.3;margin:0 0 12px}
#entregaveis .delivery-fold .delivery-description{display:flex;flex-direction:column;flex:1 1 auto;padding:0}
#entregaveis .delivery-item p{font-size:16px;line-height:1.6;margin:0 0 16px}
#entregaveis .delivery-fold .delivery-description .delivery-output{margin:auto 0 0;padding:16px 0 0;font-size:15px}

/* 6 · indicador dos trilhos (entregas e telas do CRM): pontos (botões de 44px) + contador 01 / 06, acompanhando a rolagem; só no celular */
#entregaveis .rail-dots:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0}
#entregaveis .rail-dots-list{display:flex;margin-left:0}
#entregaveis .rail-dot{display:flex;align-items:center;justify-content:flex-start;width:44px;height:44px;min-width:44px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
#entregaveis .rail-dot::before{content:"";display:block;width:8px;height:8px;border-radius:999px;background:#625865}
#entregaveis .rail-dot[aria-current=true]::before{width:24px;background:#5C1041}
#entregaveis .rail-dot:focus-visible{outline:3px solid #F7F5F8;outline-offset:-3px;border-radius:8px}
#entregaveis .rail-count{flex:0 0 auto;white-space:nowrap;font-size:14px;line-height:1;color:#625865;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* bloco do CRM: textos à esquerda */
#entregaveis .delivery-tech,#entregaveis .delivery-tech:hover{margin:44px 0 0}
#entregaveis .delivery-tech h3{text-align:left;font-size:25px;line-height:1.25;margin:0 0 12px}
#entregaveis .delivery-tech>p{text-align:left;font-size:16px;line-height:1.6;max-width:none;margin:0}
#entregaveis .delivery-tech .crm-caption{text-align:left;max-width:none;margin:14px 0 0;font-size:15px}
#entregaveis .delivery-tech .rail-dots+.crm-caption{margin-top:4px}

/* 3 + 6 · galeria do CRM: captura de tela sangra pela borda direita da página, como o mockup do hero.
   Cada tela inteira (sem recorte) em 1,6x a largura útil (560px em 390, 512px em 360); a moldura vai até a borda e corta a tela ali.
   Trilho com encaixe por proximidade, para a rolagem lateral alcançar também a parte direita de cada tela. */
#entregaveis .crm-gallery{margin:32px 0 0}
#entregaveis .crm-mock{width:auto;margin-right:-20px;border-right:0;border-radius:18px 0 0 18px}
#entregaveis .crm-stage,#entregaveis .crm-mock .crm-stage{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:16px;overscroll-behavior-inline:contain;padding:16px;aspect-ratio:auto;border-radius:0;scrollbar-width:none}
#entregaveis .crm-stage::-webkit-scrollbar{display:none}
#entregaveis .crm-stage .crm-screen{position:relative;display:block;flex:0 0 calc((100vw - 40px)*1.6);width:auto;min-width:0;left:auto;right:auto;top:auto;bottom:auto;transform:none;scroll-snap-align:start;overflow:hidden}
#entregaveis .crm-stage .crm-screen-label{font-size:15px;padding:12px 14px}
#entregaveis .crm-stage .crm-screen img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:8/5}
}