/* DeckNarrator home bundle generated at 2026-04-23 12:24:40 */
/* Preserves current live load order */


/* ===== BEGIN site_v9.css ===== */

/* site.css v8 - rebuilt clean to match Figma export (ENG-stresstest.png)
   Single source of truth (no art_patch needed).
*/

:root{
  --bg:#070a23;
  --bg2:#05061a;
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.52);
  --line:rgba(255,255,255,.10);

  --accent:#6e8cff;
  --accent2:#4f6cff;

  --wrap:1240px;
  --pad:56px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(96,120,255,.14), transparent 62%),
    radial-gradient(1100px 800px at 78% 28%, rgba(96,120,255,.12), transparent 64%),
    radial-gradient(900px 700px at 55% 92%, rgba(96,120,255,.08), transparent 68%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

a{ color:inherit; text-decoration:none; }
.wrap{ width:min(var(--wrap), calc(100% - var(--pad))); margin:0 auto; }
img{ display:block; max-width:100%; height:auto; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border-radius:999px;
  font-size:15px;
  font-weight:800;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow:
    0 12px 40px rgba(96,120,255,.35),
    inset 0 0 12px rgba(255,255,255,.14);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-link{ font-weight:700; opacity:.86; }
.btn-link:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

/* Nav */
.nav{
  position:sticky;
  top:0;
  z-index:20;
  background: linear-gradient(to bottom, rgba(6,9,24,.86), rgba(6,9,24,.56));
  backdrop-filter: blur(10px);
}
.nav-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{ height:18px; width:auto; }
.nav-links{
  display:flex;
  gap:26px;
  font-size:14px;
  color:var(--muted);
}
.nav-links a:hover{ color:var(--text); }

/* Hero */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:92px 0 78px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
}

.hero-copy{
  width:min(660px, 100%);
  position:relative;
  z-index:2;
}

.hero h1{
  margin:0 0 18px;
  font-size:64px;
  line-height:1.08;
  letter-spacing:-1px;
  font-weight:900;
  background: linear-gradient(180deg, #ffffff 0%, #cfd8ff 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-bottom:6px;
  overflow:visible;
}

.hero p{
  margin:0 0 22px;
  font-size:18px;
  line-height:1.6;
  color:rgba(234,240,255,.78);
  max-width:560px;
}

.hero-cta{
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:12px;
}

.hero-meta{
  font-size:12px;
  color:var(--muted2);
}

.hero-triad{
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:28px;
}

.triad-title{
  font-size:13px;
  font-weight:900;
  color:var(--accent);
  margin-bottom:6px;
}

.triad-desc{
  font-size:13px;
  color:rgba(234,240,255,.65);
  line-height:1.6;
}

/* Sections */
.section{ padding:96px 0; }
.section h2{ margin:0 0 22px; font-size:34px; letter-spacing:-.4px; }
.section-dark{ background:transparent; }

/* Upload */
.s-upload .upload-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:72px;
  align-items:center;
}
.upload-copy{
  position:relative;
  padding-left:28px;
}
.upload-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(96,120,255,.40);
  border-radius:2px;
}
.kicker{ margin:0 0 8px; font-weight:900; color:var(--accent); }
.upload-line{
  margin:0 0 18px;
  color:rgba(234,240,255,.58);
  font-size:13px;
  line-height:1.6;
}
.upload-line:last-child{ margin-bottom:0; }

.upload-visual{ justify-self:end; position:relative; }
.upload-figure{
  width:min(980px, 62vw);
  max-width:none;
  transform: translateX(6%);
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.45));
  pointer-events:none;
}

/* Reveals */
.s-reveals .reveal-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:72px;
  align-items:center;
}
.reveal-visual{ justify-self:start; }
.reveal-figure{
  width:min(980px, 62vw);
  max-width:none;
  transform: translateX(-6%);
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.45));
  pointer-events:none;
}
.reveal-copy{ max-width:560px; }
.reveal-title{
  font-weight:900;
  font-size:14px;
  margin-bottom:6px;
  color:var(--accent);
}
.reveal-item{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.10); }
.reveal-text{ font-size:13px; color:rgba(234,240,255,.58); line-height:1.55; }

/* Who */
.who{ background:#cddbf2; color:#0b1020; }
.who h2{ color:#0b1020; }
.who-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:42px;
  align-items:start;
}
.who-cards{ display:flex; flex-direction:column; gap:18px; }
.who-card{
  background: rgba(255,255,255,.55);
  border:1px solid rgba(15,24,55,.08);
  border-radius:12px;
  box-shadow: 0 10px 24px rgba(12,18,40,.10);
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  max-width:560px;
}
.who-ico{
  width:44px; height:44px;
  border-radius:10px;
  display:grid;
  place-items:center;
  color: var(--accent2);
}
.who-ico img{ width:32px; height:32px; display:block; }
.who-card b{ display:block; margin-bottom:6px; }
.who-card p{ margin:0; color: rgba(11,16,32,.72); font-size:13px; line-height:1.55; }
.who-list{ display:flex; flex-direction:column; gap:18px; }
.who-list .item{ padding-bottom:18px; border-bottom:1px solid rgba(11,16,32,.18); }
.who-list .item:last-child{ border-bottom:0; padding-bottom:0; }
.who-list .item b{ display:block; margin-bottom:6px; }
.who-list .item p{ margin:0; color: rgba(11,16,32,.72); font-size:13px; line-height:1.55; }

/* Pricing */
.pricing{ background:#fafafa; color:#0b1020; }
.pricing h2{ color:#0b1020; text-align:center; margin-bottom:34px; }

.pricing-grid{
  display:grid;
  grid-template-columns: 360px 320px;
  grid-template-rows: 1fr 1fr;
  gap:18px 44px;
  justify-content:center;
  align-items:stretch;
}
.p-main{
  grid-column:1;
  grid-row:1 / span 2;
  height:100%;
  border-radius:14px;
  background: linear-gradient(180deg, #e5ebfb 0%, #cfd7ee 100%);
  border:1px solid rgba(15,24,55,.08);
  box-shadow: 0 18px 34px rgba(12,18,40,.16);
  padding:22px;
}
.p-main .price{
  font-size:72px;
  font-weight:900;
  letter-spacing:-1px;
  margin:0;
  line-height:1;
}
.p-main .price small{ font-size:22px; font-weight:800; vertical-align: top; margin-right:10px; }
.p-main hr{ border:0; height:1px; background: rgba(11,16,32,.22); margin:14px 0 16px; }
.p-main .plan{ font-weight:900; margin:0 0 14px; }
.p-main ul{
  margin:0 0 18px;
  padding:0;
  list-style:none;
  color: rgba(11,16,32,.76);
  font-size:13px;
}
.p-main li{ display:flex; gap:10px; align-items:center; margin:10px 0; }
.p-main li svg{ width:16px; height:16px; color:#0b1020; opacity:.9; }
.p-main .p-btn{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 18px;
  border-radius:999px;
  background:#0b1020;
  color:#fff;
  font-weight:800;
  font-size:13px;
}
.p-side{ display:contents; }
.p-side .p-card:nth-child(1){ grid-column:2; grid-row:1; }
.p-side .p-card:nth-child(2){ grid-column:2; grid-row:2; }
.p-card{
  height:100%;
  border-radius:14px;
  background:#f2f3f7;
  border:1px solid rgba(15,24,55,.08);
  box-shadow: 0 18px 34px rgba(12,18,40,.12);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.p-card .big{ font-size:64px; font-weight:900; letter-spacing:-1px; margin:0; line-height:1; }
.p-card .label{ margin-top:10px; font-weight:800; }
.p-card .sub{ color: rgba(11,16,32,.55); font-size:12px; margin-top:4px; }
.pricing-note{ margin-top:22px; text-align:center; color: rgba(11,16,32,.70); font-size:13px; }

/* FAQ */
.faq{
  background:#ffffff;
  color:#0b1020;
  padding:86px 0;
}
.faq-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:56px;
  align-items:start;
}
.faq h2{ margin:0; font-size:22px; font-weight:900; color:#0b1020; }
.qa{ padding:18px 0 20px; border-bottom:2px solid rgba(96,120,255,.35); }
.qa:last-child{ border-bottom:0; }
.qa h3{ margin:0 0 10px; font-size:18px; font-weight:900; }
.qa p{ margin:0; color: rgba(11,16,32,.55); line-height:1.55; font-size:13px; }

/* CTA */
.cta{
  padding:110px 0;
  background: var(--bg);
  background-image:none !important;
  text-align:center;
}
.cta h2{ margin:0; font-size:34px; letter-spacing:-.4px; }
.cta p{ margin:14px 0 28px; color:var(--muted); }
.cta-meta{ margin-top:14px; font-size:12px; color:var(--muted2); }

/* Footer */
.footer{ background:#ffffff; color:#0b1020; padding:34px 0; }
.footer-inner{ display:flex; justify-content:center; align-items:center; gap:10px; font-size:12px; color: rgba(11,16,32,.70); }

@media (max-width: 980px){
  :root{ --pad:34px; }
  .hero{ padding:66px 0 56px; }
  .hero h1{ font-size:38px; }
  .hero-triad{ grid-template-columns:1fr; gap:16px; }

  .hero-figure{
    position:relative;
    top:auto; left:auto;
    transform:none;
    width:min(620px, 92vw);
    margin:22px auto 0;
  }

  .s-upload .upload-grid,
  .s-reveals .reveal-grid{ grid-template-columns: 1fr; gap:26px; }
  .upload-copy{ padding-left:0; }
  .upload-copy::before{ display:none; }

  .upload-figure,
  .reveal-figure{
    width:min(780px, 96vw);
    transform:none;
    margin:0 auto;
  }

  .who-grid{ grid-template-columns:1fr; gap:24px; }
  .who-card{ max-width:100%; }

  .pricing-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap:18px;
  }
  .p-main{ grid-row:auto; grid-column:auto; }
  .p-side{ display:block; }
  .p-side .p-card{ margin-top:18px; }

  .faq-grid{ grid-template-columns:1fr; gap:22px; }
  .nav-links{ gap:16px; }
}

/* DN: REVEALS align — traz o bloco de texto pra esquerda sem mexer em imagem */
@media (min-width: 981px){
  .s-reveals .reveal-grid{
    grid-template-columns: 680px 420px !important; /* esquerda fixa = texto vem pra esquerda */
    justify-content: start !important;            /* não centraliza o grid dentro do wrap */
  }

  /* garante que nenhum tweak antigo esteja empurrando texto */
  .s-reveals .reveal-copy{ transform: none !important; }
}

/* DN fix: REVEALS text must stay ABOVE oversized art */
@media (min-width: 981px){
  .s-reveals .reveal-grid{
    position: relative !important;
    isolation: isolate !important; /* cria um “mundo” de z-index aqui dentro */
  }

  .s-reveals .reveal-visual{
    position: relative !important;
    z-index: 1 !important;
  }

  .s-reveals .reveal-copy{
    position: relative !important;
    z-index: 5 !important; /* texto sempre por cima */
  }
}

/* DN fix: evita cortar descenders (g, y, p, q) no H1 do hero */
.hero h1{
  line-height: 1.08 !important;    /* era 1.05 */
  padding-bottom: 6px !important;  /* dá folga pro "g" */
  overflow: visible !important;
}

/* DN_BG_CONTINUO_V1
   Fundo contínuo para Hero + Upload + Reveals (sem “divisão” entre telas)
*/
html{ background: var(--bg); }

body{
  background: none !important;
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(96,120,255,.14), transparent 62%),
    radial-gradient(1100px 800px at 78% 28%, rgba(96,120,255,.12), transparent 64%),
    radial-gradient(900px 700px at 55% 92%, rgba(96,120,255,.08), transparent 68%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

/* garante que as 3 primeiras telas não pintem outro fundo */
.hero,
.section-dark{
  background: transparent !important;
}

/* DN_CONTINUOUS_BG_V1
   Fundo contínuo (hero + upload + reveals) sem “divisões” por altura de body
*/

body{
  background: none !important;
  position: relative;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(96,120,255,.14), transparent 62%),
    radial-gradient(1100px 800px at 78% 28%, rgba(96,120,255,.12), transparent 64%),
    radial-gradient(900px 700px at 55% 92%, rgba(96,120,255,.08), transparent 68%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  transform: translateZ(0);
}

/* garante que as 3 primeiras “telas” não pintem nada por cima */
.hero,
.section-dark{
  background: transparent !important;
}

/* DN_BG_SOLID_V1
   Fundo chapado (reduz mismatch com as ilustrações)
   - Se quiser ainda mais “flat”: deixa só a cor.
   - Se quiser um micro vinhete: usa a versão com radial bem leve.
*/

body::before{
  /* opção A: CHAPADO total */
  background: #05061a !important;

  /* opção B (comente a linha acima e descomente abaixo): chapado + vinhete sutil */
  /*
  background:
    radial-gradient(1200px 900px at 50% 35%, rgba(255,255,255,.03), transparent 62%),
    radial-gradient(900px 700px at 50% 80%, rgba(0,0,0,.22), transparent 68%),
    #05061a !important;
  */
}

/* DN_BG_FORCE_SOLID_V2
   Mata QUALQUER gradiente do fundo e deixa chapado no tom das ilustrações.
*/
html, body{
  background: #05061a !important;
}

body{
  background-color: #05061a !important;
  background-image: none !important;
  background: #05061a !important;
}

/* se tiver sobrado algum experimento antigo */
body::before,
body::after{
  content: none !important;
  display: none !important;
}

/* DN_BG_SOLID_FORCE (fix definitivo)
   - fundo chapado real (sem radial/linear)
   - evita seam entre HERO + UPLOAD + REVEALS
*/
:root{ --dn-bg-solid: #05061a; } /* ajuste fino: #06081d ou #070a23 */

html, body{
  background: var(--dn-bg-solid) !important;
}

body{
  background: var(--dn-bg-solid) !important;
  background-image: none !important;
  background-color: var(--dn-bg-solid) !important;
}

/* garante que as 3 primeiras telas não pintem nada próprio */
.hero, .s-upload, .s-reveals{
  background: transparent !important;
}

/* segurança: se algum experimento deixou pseudo-elementos */
body::before, body::after{
  content:none !important;
  display:none !important;
}

/* segurança: se scroll-snap entrou em algum momento */
html, body{
  scroll-snap-type: none !important;
}
.section{
  scroll-snap-align: none !important;
}

/* DN_LIVE_HERO_CANONICAL_V3 */

@media (min-width: 981px){
  .hero{
    overflow: hidden !important;
    padding: 92px 0 78px !important;
  }

  .hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr) !important;
    column-gap: 34px !important;
    align-items: center !important;
  }

  .hero-copy{
    width: 100% !important;
    max-width: 560px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero h1{
    max-width: 9ch !important;
    font-size: 60px !important;
    line-height: 1.02 !important;
  }

  .hero p{
    max-width: 560px !important;
  }

  .hero-art{
    position: relative !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
    padding-top: 0 !important;
  }

  .hero-art .hero-figure{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: 860px !important;
    max-width: 860px !important;
    min-width: 860px !important;

    margin: -8px -60px 0 auto !important;

    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
    filter: drop-shadow(0 40px 110px rgba(0,0,0,.42)) !important;
  }
}

@media (max-width: 980px){
  .hero{
    padding: 66px 0 56px !important;
    overflow: hidden !important;
  }

  .hero-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
  }

  .hero-copy{
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 0 !important;
  }

  .hero h1{
    font-size: 38px !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
  }

  .hero p{
    max-width: 100% !important;
  }

  .hero-triad{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hero-art{
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    padding-top: 0 !important;
  }

  .hero-art .hero-figure{
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: min(720px, 96vw) !important;
    max-width: 96vw !important;
    min-width: 0 !important;

    margin: 0 auto !important;

    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

@media (max-width: 640px){
  .hero-art .hero-figure{
    width: 94vw !important;
    max-width: 94vw !important;
  }
}

/* ===== END site_v9.css ===== */


/* ===== BEGIN proof_patch.css ===== */

.dn-proof{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(70% 90% at 78% 42%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #050816 0%, #071021 52%, #0c1730 100%);
  padding:clamp(72px, 10vw, 128px) 0;
}

.dn-proof__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(40% 30% at 80% 38%, rgba(145,170,255,.10) 0%, rgba(145,170,255,0) 70%);
  opacity:.9;
}

.dn-proof__wrap{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}

.dn-proof__copy{
  color:#f4f7ff;
}

.dn-proof__eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-size:12px;
  line-height:1;
  letter-spacing:.14em;
  font-weight:700;
  color:rgba(255,255,255,.68);
}

.dn-proof__copy h2{
  margin:0 0 16px;
  font-size:clamp(34px, 5vw, 56px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:700;
  color:#fff;
  max-width:10ch;
}

.dn-proof__lead{
  margin:0 0 28px;
  max-width:540px;
  font-size:clamp(16px, 1.8vw, 19px);
  line-height:1.55;
  color:rgba(244,247,255,.78);
}

.dn-proof__points{
  display:grid;
  gap:14px;
  margin-bottom:18px;
}

.dn-proof__point{
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.14);
}

.dn-proof__point h3{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
  color:#fff;
}

.dn-proof__point p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(244,247,255,.72);
}

.dn-proof__note{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:rgba(244,247,255,.54);
}

.dn-proof__visual{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dn-proof__glow{
  position:absolute;
  inset:10% 6% 12% 16%;
  border-radius:999px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.22) 0%, rgba(173,194,255,.12) 20%, rgba(173,194,255,0) 68%);
  filter:blur(24px);
  pointer-events:none;
}

.dn-proof__sheet{
  position:relative;
  margin:0;
  width:min(100%, 720px);
  transform:translateY(8px);
  filter:drop-shadow(0 32px 60px rgba(0,0,0,.38));
}

.dn-proof__sheet img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(15,22,40,.18);
  background:#f3f3f1;
}

@media (max-width: 980px){
  .dn-proof__wrap{
    grid-template-columns:1fr;
    gap:36px;
  }

  .dn-proof__copy h2{
    max-width:none;
    font-size:42px;
  }

  .dn-proof__lead{
    max-width:none;
    font-size:16px;
  }

  .dn-proof__visual{
    min-height:auto;
  }

  .dn-proof__sheet{
    width:min(100%, 760px);
    transform:none;
  }
}

@media (max-width: 640px){
  .dn-proof{
    padding:64px 0;
  }

  .dn-proof__point{
    padding:14px;
    border-radius:16px;
  }

  .dn-proof__point h3{
    font-size:15px;
  }

  .dn-proof__point p{
    font-size:13px;
  }

  .dn-proof__note{
    font-size:12px;
  }
}

/* ===== END proof_patch.css ===== */


/* ===== BEGIN hero_desktop_patch.css ===== */

/* hero_desktop_patch.css v4
   Desktop only
   Objetivo:
   - aumentar de verdade a hero por scale
   - empurrar mais para a direita
   - manter o mobile intacto
   - DN_HERO_DESKTOP_V4
*/

@media (min-width: 981px){

  #home .hero{
    padding-bottom: 112px !important;
    overflow: visible !important;
  }

  #home .hero-grid{
    overflow: visible !important;
  }

  #home .hero-art{
    position: relative !important;
    min-height: 720px !important;
    overflow: visible !important;
  }

  #home .hero-art .hero-figure{
    display: block !important;
    position: relative !important;
    width: min(1320px, 88vw) !important;
    max-width: none !important;
    left: 54px !important; /* DN_HERO_INWARD_V7 */
    transform: translateX(-72px) scale(1.16) !important; /* DN_HERO_TRANSLATE_V8 */
    transform-origin: left center !important;
  }

  #home .hero-copy{
    width: min(640px, 100%) !important;
  }

  #home .hero-copy .hero-actions,
  #home .hero-copy .hero-cta{
    margin-bottom: 20px !important;
  }

  #home .hero-copy .hero-meta{
    margin-top: 12px !important;
    margin-bottom: 46px !important;
  }

  #home .hero-proof,
  #home .hero-triad,
  #home .hero-points{
    margin-top: 18px !important;
  }
}

/* DN_H1_FIX_V2
   Corrige o H1 do hero no desktop sem afetar o mobile
*/
@media (max-width: 980px){
  #home .hero h1 br.dn-desk-br{
    display:none !important;
  }
}

@media (min-width: 981px){
  #home .hero-copy{
    width: min(740px, 100%) !important;
    max-width: 740px !important;
  }

  #home .hero h1{
    font-size: 56px !important;
    line-height: 0.98 !important;
    letter-spacing: -1.4px !important;
    max-width: 740px !important;
    text-wrap: initial !important;
  }

  #home .hero h1 br.dn-desk-br{
    display:block !important;
    content:"";
  }
}


/* DN_HERO_TRIAD_NOW_V1
   Desktop: triad abaixo do hero inteiro
*/
.hero-triad-row{
  display:none;
}

@media (min-width: 981px){
  #home .hero-copy > .hero-triad{
    display:none !important;
  }

  .hero-triad-row{
    display:block !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .hero-triad-row .hero-triad{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  .hero-triad-row .triad{
    min-width: 0 !important;
  }

  .hero-triad-row .triad-desc{
    max-width: none !important;
  }
}

@media (max-width: 980px){
  .hero-triad-row{
    display:none !important;
  }
}

/* ===== END hero_desktop_patch.css ===== */


/* ===== BEGIN hero_mobile_patch.css ===== */

/* hero_mobile_patch.css v3
   Objetivo:
   - hero image no topo no mobile
   - imagem um pouco maior
   - CTA principal sempre em 1 linha
   - CTA com mais corpo e respiro
   - desktop intacto
*/

@media (max-width: 980px){

  #home.hero{
    padding-top: 44px !important;
  }

  #home .hero-grid{
    display: flex !important;
    flex-direction: column !important;
  }

  #home .hero-art{
    order: -1 !important;
    min-height: auto !important;
    margin: 0 0 10px !important;
    width: 100% !important;
  }

  #home .hero-copy{
    order: 1 !important;
    width: 100% !important;
  }

  #home .hero-art .hero-figure,
  #home .hero-figure{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(700px, 96vw) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  #home .hero-cta{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    align-items: center !important;
  }

  #home .hero-cta .btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 46px !important;
    white-space: nowrap !important;
    padding: 0 26px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
  }

  #home .hero-cta .btn-link{
    white-space: nowrap !important;
  }

  #home .hero-copy p{
    margin-top: 0 !important;
  }

  #home .hero-meta{
    margin-top: 12px !important;
  }
}

/* ===== END hero_mobile_patch.css ===== */


/* ===== BEGIN section2_layout_patch.css ===== */

/* section2_layout_patch.css v6
   DN_SECTION2_FORCE_V6
*/

#upload .upload-heading{
  margin: 10px 0 14px;
  color: var(--text);
  font-size: 30px;
  line-height: 1.04;
  letter-spacing: -0.6px;
  max-width: 12ch;
}

#upload .upload-lead{
  max-width: 540px;
  font-size: 15px;
  line-height: 1.62;
  margin-bottom: 24px;
}

#upload .upload-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:540px;
}

#upload .upload-item{
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}

#upload .upload-item:first-child{
  padding-top:0;
  border-top:0;
}

#upload .upload-item .kicker{
  margin-bottom:8px;
}

#upload .upload-item .upload-line{
  max-width:none;
}

@media (min-width: 981px){
  #upload{
    padding-top:118px !important;
    padding-bottom:118px !important;
  }

  #upload .upload-grid{
    grid-template-columns:minmax(460px, 560px) minmax(480px, 1fr) !important;
    gap:clamp(56px, 8vw, 120px) !important;
    align-items:center !important;
  }

  #upload .upload-copy{
    max-width:560px !important;
    padding-left:28px !important;
    position:relative !important;
    z-index:2 !important;
  }

  #upload .upload-copy::before{
    left:0 !important;
    top:0 !important;
    height:100% !important;
  }

  #upload .upload-heading{
    margin:12px 0 16px !important;
    font-size:42px !important;
    line-height:1.02 !important;
    letter-spacing:-0.9px !important;
    max-width:10ch !important;
  }

  #upload .upload-lead{
    font-size:17px !important;
    line-height:1.68 !important;
    margin-bottom:30px !important;
  }

  #upload .upload-item .kicker{
    font-size:15px !important;
  }

  #upload .upload-item .upload-line{
    font-size:15px !important;
    line-height:1.68 !important;
  }

  #upload .upload-visual{
    justify-self:end !important;
    display:flex !important;
    justify-content:flex-end !important;
    width:100% !important;
  }

  #upload .upload-figure{
    width:min(720px, 48vw) !important;
    max-width:none !important;
    transform:translateX(10%) scale(.86) !important;
    transform-origin:center right !important;
    opacity:.96 !important;
  }
}

@media (max-width: 980px){
  #upload .upload-heading{
    font-size:30px !important;
    max-width:none !important;
  }

  #upload .upload-lead{
    font-size:15px !important;
    margin-bottom:22px !important;
  }

  #upload .upload-stack{
    gap:14px !important;
  }
}

/* ===== END section2_layout_patch.css ===== */


/* ===== BEGIN section3_layout_patch.css ===== */

/* section3_layout_patch.css v1
   DN_SECTION3_FORCE_V1
   Corrige a estrutura do bloco reveals e neutraliza hacks antigos
*/

@media (min-width: 981px){
  #reveals{
    padding-top: 118px !important;
    padding-bottom: 118px !important;
  }

  #reveals .reveal-grid{
    display: grid !important;
    grid-template-columns: minmax(520px, 1fr) minmax(360px, 460px) !important;
    gap: clamp(56px, 8vw, 112px) !important;
    align-items: center !important;
    justify-content: start !important;
  }

  #reveals .reveal-visual{
    display: flex !important;
    justify-content: flex-start !important;
    align-self: center !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #reveals .reveal-figure{
    width: min(820px, 50vw) !important;
    max-width: none !important;
    transform: translateX(-4%) scale(.92) !important;
    transform-origin: center left !important;
    margin: 0 !important;
  }

  #reveals .reveal-copy{
    max-width: 460px !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    align-items: stretch !important;
  }

  #reveals .reveal-copy > h2,
  #reveals .reveal-copy > .reveal-item{
    position: static !important;
    top: auto !important;
    transform: none !important;
    grid-column: auto !important;
    align-self: auto !important;
  }

  #reveals .reveal-copy > h2{
    margin: 0 0 22px !important;
  }

  #reveals .reveal-item{
    padding: 16px 0 !important;
  }

  #reveals .reveal-visual-inline{
    display: none !important;
  }
}

@media (max-width: 980px){
  #reveals .reveal-grid{
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  #reveals .reveal-copy{
    max-width: none !important;
    min-height: auto !important;
  }

  #reveals .reveal-figure{
    width: min(760px, 94vw) !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  #reveals .reveal-visual-inline{
    display: none !important;
  }
}

/* DN_SECTION3_MOBILE_V2
   Corrige o mobile do reveals:
   - corta o espaço morto da arte
   - aproxima título e texto
   - mantém desktop intacto
*/
@media (max-width: 980px){
  #reveals{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    overflow: hidden !important;
  }

  #reveals .reveal-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  #reveals .reveal-visual{
    order: -1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-height: 420px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #reveals .reveal-figure{
    width: min(620px, 125vw) !important;
    max-width: none !important;
    transform: translateY(-6%) scale(1.02) !important;
    transform-origin: top center !important;
    margin: 0 auto !important;
    display: block !important;
  }

  #reveals .reveal-copy{
    max-width: none !important;
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #reveals .reveal-copy > h2{
    margin: 0 0 18px !important;
  }

  #reveals .reveal-item{
    padding: 14px 0 !important;
  }
}

/* ===== END section3_layout_patch.css ===== */


/* ===== BEGIN who_section_patch.css ===== */

/* who_section_patch.css v1
   DN_WHO_SECTION_V1
   Objetivo:
   - dar mais intenção à coluna da direita
   - reforçar hierarquia dos deck types
   - manter a estrutura atual
*/

@media (min-width: 981px){
  #who{
    padding-top: 112px !important;
    padding-bottom: 112px !important;
  }

  #who .wrap > h2{
    margin: 0 0 22px !important;
  }

  #who .wrap > h2::before{
    content: "Use cases";
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(11,16,32,.46);
  }

  #who .who-grid{
    grid-template-columns: minmax(520px, 1.02fr) minmax(420px, .98fr) !important;
    gap: clamp(48px, 6vw, 96px) !important;
    align-items: start !important;
  }

  #who .who-cards{
    gap: 20px !important;
  }

  #who .who-card{
    padding: 22px 22px 20px !important;
    border-radius: 14px !important;
    min-height: 102px !important;
  }

  #who .who-card b{
    font-size: 16px !important;
    line-height: 1.26 !important;
    margin-bottom: 7px !important;
  }

  #who .who-card p{
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #who .who-list{
    gap: 0 !important;
    max-width: 560px !important;
    padding-top: 6px !important;
    position: relative !important;
  }

  #who .who-list::before{
    content: "Deck types";
    display: block;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(11,16,32,.46);
  }

  #who .who-list .item{
    padding: 18px 0 20px !important;
    border-bottom: 1px solid rgba(11,16,32,.14) !important;
  }

  #who .who-list .item:first-child{
    padding-top: 0 !important;
  }

  #who .who-list .item b{
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  #who .who-list .item p{
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 42ch !important;
  }
}

@media (max-width: 980px){
  #who .wrap > h2::before{
    content: "Use cases";
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(11,16,32,.46);
  }

  #who .who-list{
    gap: 0 !important;
  }

  #who .who-list::before{
    content: "Deck types";
    display: block;
    margin: 6px 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(11,16,32,.46);
  }

  #who .who-list .item{
    padding: 16px 0 18px !important;
  }
}

/* ===== END who_section_patch.css ===== */


/* ===== BEGIN mobile_cleanup_patch.css ===== */

/* mobile_cleanup_patch.css v4
   Correção real do mobile:
   - seção 2 volta a mostrar a arte
   - seção 3 mostra a arte inteira, sem corte agressivo
   - pricing fica mais estreito e mais elegante
*/

@media (max-width: 980px){

  /* HERO: mantém como está */

  /* SECTION 2 - HOW IT WORKS */
  #upload{
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  #upload .upload-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  #upload .upload-copy{
    order: 1 !important;
  }

  #upload .upload-visual{
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  #upload .upload-figure{
    width: min(360px, 84vw) !important;
    max-width: 100% !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* SECTION 3 - REVEALS */
  #reveals{
    padding-top: 40px !important;
    padding-bottom: 56px !important;
    overflow: visible !important;
  }

  #reveals .reveal-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #reveals .reveal-visual{
    order: -1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  #reveals .reveal-figure{
    width: min(360px, 84vw) !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
    display: block !important;
  }

  #reveals .reveal-copy{
    max-width: none !important;
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #reveals .reveal-copy > h2{
    margin: 0 0 16px !important;
    font-size: 30px !important;
    line-height: 1.04 !important;
  }

  #reveals .reveal-item{
    padding: 14px 0 !important;
  }

  /* SAMPLE */
  .dn-proof{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* WHO */
  #who{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  /* PRICING */
  .pricing{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .pricing-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .p-main,
  .p-side,
  .p-card{
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
  }

  .p-side{
    display: block !important;
    width: 100% !important;
  }

  .p-main{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .p-main .price{
    font-size: 64px !important;
  }

  .p-main .p-btn{
    height: 42px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }

  .p-side .p-card{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .p-card{
    padding: 18px 16px !important;
    min-height: 110px !important;
    border-radius: 18px !important;
  }

  .p-card .big{
    font-size: 40px !important;
    margin-bottom: 2px !important;
  }

  .pricing-note{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* ===== END mobile_cleanup_patch.css ===== */


/* ===== BEGIN mobile_final_patch.css ===== */

/* mobile_final_patch.css v1
   Patch final do mobile
   - seção 2: imagem antes do texto
   - seção 3: imagem maior e com mais presença
   - pricing intacto
*/

@media (max-width: 980px){

  /* =========================
     SECTION 2 - HOW IT WORKS
     ========================= */

  #upload{
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  #upload .upload-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  #upload .upload-visual{
    order: -1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  #upload .upload-copy{
    order: 1 !important;
  }

  #upload .upload-figure{
    width: min(390px, 90vw) !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* =========================
     SECTION 3 - REVEALS
     ========================= */

  #reveals{
    padding-top: 40px !important;
    padding-bottom: 56px !important;
    overflow: visible !important;
  }

  #reveals .reveal-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #reveals .reveal-visual{
    order: -1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    max-height: none !important;
  }

  #reveals .reveal-figure{
    width: min(430px, 94vw) !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #reveals .reveal-copy{
    max-width: none !important;
    min-height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #reveals .reveal-copy > h2{
    margin: 0 0 16px !important;
    font-size: 30px !important;
    line-height: 1.04 !important;
  }

  #reveals .reveal-item{
    padding: 14px 0 !important;
  }
}

/* DN_MOBILE_PASSOS_FORCE_V2
   Aumenta de verdade a passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: 0 0 8px !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    width: min(430px, 92vw) !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    transform: scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PASSOS_POSITION_V2
   Ajuste final de posição da passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: -6px 0 6px !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    transform: translate(-18px, -30px) scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PASSOS_POSITION_V3
   Ajuste mais forte da passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: -12px 0 0 !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    transform: translate(-34px, -52px) scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PASSOS_POSITION_V4
   Sobe mais a passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: -18px 0 -4px !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    transform: translate(-34px, -76px) scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PASSOS_POSITION_V4
   Sobe mais a passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: -18px 0 -4px !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    transform: translate(-34px, -76px) scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PASSOS_POSITION_V4
   Sobe mais a passos.webp no mobile
*/
@media (max-width: 980px){
  #upload .upload-visual{
    margin: -18px 0 -4px !important;
    overflow: visible !important;
  }

  #upload .upload-visual .upload-figure,
  #upload .upload-figure{
    transform: translate(-34px, -76px) scale(1.18) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_OQUEVOCERECEBE_BIGGER_V1
   Aumenta a oquevocerecebe.webp no mobile
*/
@media (max-width: 980px){
  #reveals .reveal-visual{
    margin: 0 0 18px !important;
    overflow: visible !important;
  }

  #reveals .reveal-visual .reveal-figure,
  #reveals .reveal-figure{
    width: min(470px, 102vw) !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    transform: scale(1.10) !important;
    transform-origin: center top !important;
  }
}

/* DN_MOBILE_PRICING_SIDE_BY_SIDE_V1
   Mobile: cards auxiliares do pricing lado a lado
*/
@media (max-width: 980px){
  .pricing-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .p-main{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .p-side{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  .p-side .p-card{
    width: auto !important;
    max-width: none !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding: 16px 10px !important;
    border-radius: 16px !important;
  }

  .p-card .big{
    font-size: 34px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
  }

  .p-card .label{
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
  }

  .p-card .sub{
    font-size: 10px !important;
    margin-top: 4px !important;
  }

  .pricing-note{
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 380px){
  .p-side{
    grid-template-columns: 1fr !important;
  }
}

/* DN_MOBILE_SECTION_GAP_V1
   Aproxima a seção 3 da 2 no mobile
*/
@media (max-width: 980px){
  #upload{
    padding-bottom: 20px !important;
  }

  #upload .upload-visual{
    margin: 6px 0 -10px !important;
  }

  #reveals{
    padding-top: 12px !important;
  }

  #reveals .reveal-grid{
    gap: 8px !important;
  }

  #reveals .reveal-visual{
    margin: 0 0 8px !important;
  }
}

/* DN_MOBILE_SECTION2_TIGHTEN_V1
   Aproxima texto da passos.webp e sobe a seção 2 no mobile
*/
@media (max-width: 980px){
  #upload{
    padding-top: 28px !important;
    padding-bottom: 44px !important;
    margin-top: -18px !important;
  }

  #upload .upload-grid{
    gap: 8px !important;
  }

  #upload .upload-visual{
    margin: -22px 0 -6px !important;
    overflow: visible !important;
  }

  #upload .upload-copy{
    margin-top: -4px !important;
  }

  #upload .upload-heading{
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  #upload .upload-lead{
    margin-bottom: 22px !important;
  }

  #upload .upload-stack{
    gap: 12px !important;
  }
}

/* DN_MOBILE_SECTION2_PASSOS_CLOSER_V1
   Aproxima a passos.webp do texto da seção 2 no mobile
*/
@media (max-width: 980px){
  #upload .upload-grid{
    gap: 0 !important;
  }

  #upload .upload-visual{
    margin: -22px 0 -26px !important;
    overflow: visible !important;
  }

  #upload .upload-copy{
    margin-top: -14px !important;
  }
}

/* DN_MOBILE_GLOBAL_GUTTER_V1
   Aumenta um pouco as margens laterais no mobile em todo o site
*/
@media (max-width: 980px){
  .wrap{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* DN_MOBILE_GLOBAL_GUTTER_V1
   Aumenta um pouco as margens laterais no mobile em todo o site
*/
@media (max-width: 980px){
  .wrap{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* DN_MOBILE_GLOBAL_GUTTER_V1
   Aumenta um pouco as margens laterais no mobile em todo o site
*/
@media (max-width: 980px){
  .wrap{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* DN_MOBILE_GLOBAL_GUTTER_V2
   Aumenta de verdade as margens laterais no mobile
   usando a variável global do layout
*/
@media (max-width: 980px){
  :root{
    --pad: 42px !important;
  }
}

/* DN_MOBILE_GLOBAL_GUTTER_V2
   Aumenta de verdade as margens laterais no mobile
   usando a variável global do layout
*/
@media (max-width: 980px){
  :root{
    --pad: 42px !important;
  }
}
/* DN_MOBILE_PROOF_HERO_FIX_V1
   - prova respeita gutter mobile
   - hero image fica um pouco maior
*/
@media (max-width: 980px){

  .dn-proof__wrap{
    padding-left: var(--pad) !important;
    padding-right: var(--pad) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .dn-proof__copy,
  .dn-proof__visual{
    width: 100% !important;
  }

  .dn-proof__sheet{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .dn-proof__sheet img{
    width: 100% !important;
    display: block !important;
  }

  #home .hero-art .hero-figure,
  #home .hero-figure{
    width: min(700px, 96vw) !important;
    max-width: none !important;
  }
}
/* DN_MOBILE_FIX_PROOF_HERO_V2
   - corrige gutter da seção de prova
   - aumenta um pouco a imagem hero no mobile
*/
@media (max-width: 980px){

  /* PROOF: usar o mesmo gutter do site, sem padding duplo */
  .dn-proof__wrap{
    width: calc(100% - (var(--pad) * 2)) !important;
    max-width: calc(100% - (var(--pad) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .dn-proof__copy,
  .dn-proof__visual{
    width: 100% !important;
  }

  /* HERO: aumentar de verdade a imagem no mobile */
  #home .hero-art{
    overflow: visible !important;
  }

  #home .hero-art .hero-figure,
  #home .hero-figure{
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin-left: -16px !important;
    transform: none !important;
  }
}

/* ===== END mobile_final_patch.css ===== */


/* ===== BEGIN desktop_spacing_patch.css ===== */

/* desktop_spacing_patch.css v3
   Ajuste equilibrado de ritmo vertical no desktop
   - reduz vazio sem grudar as seções
*/

@media (min-width: 981px){

  /* HERO */
  #home.hero{
    padding-bottom: 54px !important;
  }

  #home .hero-grid{
    align-items: start !important;
  }

  #home .hero-art{
    min-height: 600px !important;
  }

  /* SECTION 2 - HOW IT WORKS */
  #upload{
    padding-top: 52px !important;
    padding-bottom: 62px !important;
    margin-top: -18px !important;
  }

  #upload .upload-grid{
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: center !important;
  }

  #upload .upload-copy{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #upload .upload-visual{
    margin-top: 0 !important;
  }

  /* SECTION 3 - REVEALS */
  #reveals{
    padding-top: 50px !important;
    padding-bottom: 64px !important;
    margin-top: -10px !important;
  }

  #reveals .reveal-grid{
    gap: clamp(40px, 5vw, 80px) !important;
    align-items: center !important;
  }

  #reveals .reveal-visual{
    margin-top: 0 !important;
  }

  #reveals .reveal-copy > h2{
    margin-top: 0 !important;
  }

  /* SECTION 4 - PROOF / SAMPLE */
  .dn-proof{
    padding-top: 58px !important;
    padding-bottom: 74px !important;
    margin-top: -8px !important;
  }

  .dn-proof__wrap{
    align-items: center !important;
    gap: clamp(40px, 5vw, 80px) !important;
  }

  .dn-proof__visual{
    margin-top: 0 !important;
  }
}

/* DN_DESKTOP_SECTION2_TO_3_V1
   Aproxima somente a seção 3 da seção 2 no desktop
*/
@media (min-width: 981px){
  #upload{
    padding-bottom: 26px !important;
  }

  #reveals{
    padding-top: 18px !important;
    margin-top: -26px !important;
  }

  #reveals .reveal-grid{
    align-items: start !important;
  }

  #reveals .reveal-visual{
    margin-top: -4px !important;
  }

  #reveals .reveal-copy{
    margin-top: 0 !important;
  }
}

/* DN_DESKTOP_REVEALS_CENTER_V1
   Centraliza verticalmente imagem e texto da seção 3 no desktop
*/
@media (min-width: 981px){
  #reveals .reveal-grid{
    align-items: center !important;
  }

  #reveals .reveal-visual{
    align-self: center !important;
    margin-top: 0 !important;
  }

  #reveals .reveal-copy{
    align-self: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #reveals .reveal-copy > h2{
    margin-top: 0 !important;
  }
}
/* DN_DESKTOP_REVEALS_TO_PROOF_V1
   Aproxima a seção de prova da seção 3 no desktop
*/
@media (min-width: 981px){
  #reveals{
    padding-bottom: 34px !important;
  }

  .dn-proof{
    padding-top: 28px !important;
    margin-top: -22px !important;
  }

  .dn-proof__wrap{
    align-items: center !important;
  }

  .dn-proof__visual{
    margin-top: 0 !important;
  }
}

/* ===== END desktop_spacing_patch.css ===== */


/* ===== BEGIN hero_final_patch.css ===== */

/* hero_final_patch.css v20260408-1 */

/* desktop */
@media (min-width: 981px){
  .hero-figure{
    left: 62% !important;
    transform: translate(-12%, -50%) !important;
    width: min(1210px, 84vw) !important;
  }

  .hero-copy{
    width: min(620px, 100%) !important;
  }
}

/* mobile */
@media (max-width: 980px){
  .hero{
    overflow: hidden !important;
    padding-bottom: 28px !important;
  }

  .hero-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-copy{
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-figure{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(560px, 90vw) !important;
    margin: 22px auto 0 !important;
    display: block !important;
  }

  .hero-upload-visual{
    display: none !important;
  }
}

/* ===== END hero_final_patch.css ===== */

/* DN_SITE_PCARD_SUB_UP_V1
   Pulls the small unit labels closer to the metric label:
   "Slides" and "Minutes" inside the pricing/stat cards.
*/
.p-card .sub{
  margin-top: 0 !important;
  transform: translateY(-5px);
}

/* DN_SITE_PCARD_SUB_UNDER_NUMBER_V1
   Places the unit label directly below the big number.
   Neutralizes the previous nudge now that the HTML order is correct.
*/
.p-card .sub{
  margin-top: 4px !important;
  transform: none !important;
}

.p-card .label{
  margin-top: 8px !important;
}