:root{
  --ink: #16241D;        /* dark text on paper sections */
  --foreground: #F6F1E4;
  --ink-soft: #55625B;   /* secondary text on paper */
  --quadro: #1B2E23;
  --quadro-deep: #12211A;
  --papel-warm: #F6F1E4;
  --caneta: #C1432E;
  --caneta-deep: #9E3324;
  --giz: #E8C468;
  --acerto: #3F7A4F;
  --acerto-deep: #2E5C3A;
}

*, *::before, *::after{box-sizing:border-box}
html{
  overflow-x:hidden;
  scroll-behavior:smooth;
}
html, body{
  margin:0;
  padding:0;
  max-width:100%;
}
body{
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--quadro-deep);
  color:var(--foreground);
  padding-bottom:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img, picture, video, canvas{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto;vertical-align:middle}
a{text-decoration:none;color:inherit}
.serif{font-family:'Fraunces',ui-serif,Georgia,serif}
.wrap{margin:0 auto;padding:0 1rem;max-width:1152px}
.wrap-md{margin:0 auto;padding:0 1rem;max-width:768px}
.wrap-lg{margin:0 auto;padding:0 1rem;max-width:1024px}
em.accent{font-style:normal;color:var(--caneta)}
.divider{margin:.875rem auto 0;height:3px;width:56px;border-radius:999px;background:var(--caneta)}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal-scale.is-visible{opacity:1;transform:scale(1)}



/* Section heading kit */
.section-head{text-align:center}
.section-head h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:30px;line-height:1.08;margin:1rem 0 0;
}
@media(min-width:640px){.section-head h2{font-size:2.25rem}}
@media(min-width:768px){.section-head h2{font-size:46px}}
.section-head p{margin-top:1rem;font-size:.875rem;color:rgba(255,255,255,.8);max-width:640px;margin-left:auto;margin-right:auto}
@media(min-width:640px){.section-head p{font-size:1rem}}

/* ===== Promo bar ===== */
.promo-bar{
  position:sticky;top:0;z-index:50;width:100%;color:#fff;
  background:linear-gradient(to right, var(--caneta-deep), var(--caneta), var(--caneta-deep));
  box-shadow:0 6px 20px -8px rgba(0,0,0,.35);
}
.promo-bar__inner{
  margin:0 auto;max-width:1152px;padding:.75rem .75rem;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:.375rem .875rem;flex-wrap:wrap;
  text-align:center;font-size:.875rem;font-weight:600;line-height:1.3;
}
@media(min-width:640px){
  .promo-bar__inner{gap:1.125rem;padding:.875rem 1.25rem;font-size:.9375rem;flex-wrap:nowrap}
}
.promo-bar__inner > span{
  display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;max-width:100%;
}
.promo-bar svg{width:18px;height:18px;flex-shrink:0}
.promo-bar__sep{opacity:.55;display:none}
@media(min-width:520px){.promo-bar__sep{display:inline}}
/* these live inside .promo-bar__inner span, so they must out-specify that rule */
.promo-bar__inner span.promo-bar__date--long{display:none}
@media(min-width:600px){
  .promo-bar__inner span.promo-bar__date--long{display:inline}
  .promo-bar__inner span.promo-bar__date--short{display:none}
}
.promo-bar__timer{
  display:inline-flex;align-items:center;font-family:ui-monospace,monospace;
  font-weight:700;background:rgba(0,0,0,.32);border-radius:4px;padding:.15rem .5rem;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

.hero__image-outer{margin-top:1.75rem;display:flex;justify-content:center}
.hero__cta-wrap{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}

/* ===== Pain section ===== */
.pain{padding:2.75rem 0;background:var(--papel-warm)}
@media(min-width:640px){.pain{padding:4.25rem 0}}
.pain .section-head h2{color:var(--ink)}
.pain .section-head h2 em,.pain .section-head h2 .orange-text{font-style:normal;color:var(--caneta)}
.pain-grid{margin-top:2rem;display:grid;gap:1.125rem}
@media(min-width:640px){.pain-grid{grid-template-columns:1fr 1fr}}
.pain-item{
  position:relative;display:flex;align-items:center;gap:1.125rem;border-radius:1rem;
  background:#fff;padding:1.375rem 1.5rem 1.375rem 1.75rem;overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(90, 45, 35, 0.35),0 1px 2px rgba(0,0,0,.04);
  border:1px solid rgba(0, 0, 0, 0.04);
  transition:transform .2s ease,box-shadow .2s ease;
}
.pain-item:hover{transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(90, 45, 35, 0.4),0 1px 2px rgba(0,0,0,.04)}
.pain-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--caneta);
}
.pain-item .x-icon{
  display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:.75rem;
  background:#F8ECE8;
  color:var(--caneta);box-shadow:inset 0 0 0 1px rgba(193, 67, 46, 0.3);
}
.pain-item .x-icon svg{width:17px;height:17px}
.pain-item span:last-child{color:var(--ink);font-size:.9375rem;font-weight:500;line-height:1.45}
/* small chalkboard that echoes the hero: wooden frame, chalk-dust surface, chalk tray */
.pain-banner{
  /* bottom margin leaves room for the tray, which sits outside the box */
  position:relative;margin:2.5rem auto 1.25rem;max-width:640px;
  padding:1.75rem 1.5rem;text-align:center;
  font-size:1rem;line-height:1.65;color:var(--papel-warm);
  background:
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/3px 3px,
    linear-gradient(170deg, var(--quadro) 0%, var(--quadro-deep) 100%);
  border:9px solid #6B4A32;border-bottom-width:7px;border-radius:3px;
  box-shadow:inset 0 0 30px rgba(0,0,0,.45), 0 16px 30px -18px rgba(0,0,0,.45);
}
.pain-banner strong{color:var(--giz);font-weight:700}
/* chalk tray with a single piece of chalk resting on it */
.pain-banner::after{
  content:"";position:absolute;left:-9px;right:-9px;bottom:-20px;height:13px;
  background:#7A5738;border-radius:0 0 3px 3px;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.35);
}
.pain-banner::before{
  content:"";position:absolute;left:24%;bottom:-17px;z-index:1;
  width:30px;height:7px;border-radius:2px;
  background:linear-gradient(180deg,#fff,#ded8c9);
}
@media(min-width:640px){.pain-banner{padding:2rem 2.5rem;font-size:1.0625rem}}
.pain-cta-wrap{margin-top:2rem;display:flex;justify-content:center}

/* ===== Features section ===== */
.features{position:relative;padding:2.75rem 0;background:var(--papel-warm);color:var(--ink)}
@media(min-width:640px){.features{padding:4.25rem 0}}
.features .section-head h2{color:var(--ink)}
.features .section-head p{color:var(--ink-soft)}
.features-grid{margin-top:2.25rem;display:grid;gap:.75rem}
@media(min-width:640px){.features-grid{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(3,1fr)}}

/* On phones the card runs as a row — icon beside the text — because the centred
   stack forced every card ~100px taller than its own content across 10 cards.
   From 640px up there is room for the centred column again. */
.feature-card{
  border-radius:.875rem;border:1px solid rgba(0,0,0,.06);background:#fff;
  padding:1rem 1.125rem;box-shadow:0 14px 32px -24px rgba(0,0,0,.3);
  transition:transform .2s ease,box-shadow .2s ease;
  display:grid;grid-template-columns:auto 1fr;align-items:start;
  column-gap:.875rem;row-gap:.25rem;
}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.feature-card__icon{
  grid-row:1/span 3;align-self:center;
  display:grid;place-items:center;width:46px;height:46px;border-radius:.625rem;
  color:var(--papel-warm);background:var(--quadro);border:2px solid var(--caneta);
}
.feature-card__icon svg{width:21px;height:21px}
.feature-card__tag{
  display:inline-flex;align-items:center;justify-self:start;gap:.375rem;
  border-radius:2px;padding:.1875rem .5rem;font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--quadro-deep);
  background:var(--giz);
}
.feature-card h3{
  margin:0;text-align:left;font-family:'Fraunces',serif;font-size:1.0625rem;
  color:var(--ink);line-height:1.2;
}
.feature-card p{margin:0;text-align:left;font-size:.8125rem;color:var(--ink-soft);line-height:1.45}

@media(min-width:640px){
  .feature-card{display:block;padding:1.25rem;border-radius:1rem}
  .feature-card__icon{margin:0 auto;width:56px;height:56px;border-radius:.75rem}
  .feature-card__icon svg{width:24px;height:24px}
  .feature-card__tag{margin-top:.875rem;display:flex;justify-content:center;padding:.375rem 1rem;font-size:10px}
  .feature-card h3{margin-top:.75rem;text-align:center;font-size:1.5rem}
  .feature-card p{margin-top:.5rem;text-align:center;font-size:.875rem;line-height:1.6}
}
.features-cta-wrap{margin-top:2.25rem;display:flex;justify-content:center}

/* ===== Samples marquee ===== */
.samples{position:relative;overflow:hidden;padding:2.75rem 0;background:var(--papel-warm);color:var(--ink)}
@media(min-width:640px){.samples{padding:4.25rem 0}}
.samples .section-head p{color:var(--ink-soft)}
.marquee-outer{position:relative;margin-top:2rem}
.marquee-mask{
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee-mask::-webkit-scrollbar{display:none}
.marquee-mask.is-dragging{cursor:grabbing;scroll-snap-type:none}
.marquee-track{display:flex;gap:1.25rem;width:max-content;padding:0 4vw}
@media(min-width:640px){.marquee-track{padding:0 2.5rem}}
.marquee-card{
  position:relative;width:46vw;max-width:260px;flex-shrink:0;border-radius:1rem;overflow:hidden;
  border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 16px 40px -22px rgba(0,0,0,.35);
  scroll-snap-align:start;
}
@media(min-width:640px){.marquee-card{width:230px}}
/* <picture> is inline by default, so it would not constrain the img's intrinsic
   width — the card needs the block + fluid img pair explicitly. */
.marquee-card picture{display:block;pointer-events:none}
.marquee-card img{width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.marquee-fade{position:absolute;top:0;bottom:0;width:6rem;pointer-events:none}
@media(min-width:640px){.marquee-fade{width:10rem}}
.marquee-fade.left{left:0;background:linear-gradient(to right, var(--papel-warm), transparent)}
.marquee-fade.right{right:0;background:linear-gradient(to left, var(--papel-warm), transparent)}

/* ===== Grades section ===== */
.grades{padding:2.75rem 0;text-align:center;color:var(--ink);background:var(--papel-warm)}
@media(min-width:640px){.grades{padding:4.25rem 0}}
.grades .section-head h2{color:var(--ink)}
.grades-grid{margin-top:2rem;display:grid;gap:1.25rem;align-items:center;max-width:920px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.grades-grid{grid-template-columns:1fr auto 1fr;gap:1.5rem}}
.grade-card{
  position:relative;border-radius:1.25rem;border:1px solid rgba(0,0,0,.06);background:#fff;
  padding:1.75rem 1.5rem 1.5rem;box-shadow:0 16px 34px -22px rgba(0,0,0,.28);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.grade-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--caneta);
}
.grade-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -20px rgba(0,0,0,.3)}
.grade-card__icon{
  margin:0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:.875rem;
  background:var(--quadro);color:var(--papel-warm);border:2px solid var(--caneta);
}
.grade-card__icon svg{width:24px;height:24px}
.grade-card__label{margin-top:.875rem;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.grade-card__tags{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.grade-tag{
  border-radius:.375rem;border:1px solid var(--quadro);background:var(--quadro);
  padding:.5rem 1.125rem;font-size:.875rem;font-weight:600;color:var(--papel-warm);
  transition:transform .15s ease,background .15s ease;
}
.grade-tag:hover{transform:translateY(-1px);background:var(--quadro-deep)}
.grades-arrow{
  display:grid;place-items:center;width:40px;height:40px;margin:0 auto;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.06);color:var(--caneta);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.2);transform:rotate(90deg);
}
.grades-arrow svg{width:18px;height:18px}
@media(min-width:768px){.grades-arrow{transform:none}}

/* ===== Pricing section ===== */
.pricing{padding:2.75rem 0;color:#fff;background:var(--quadro-deep);scroll-margin-top:64px}
@media(min-width:640px){.pricing{padding:4.25rem 0}}
.pricing .section-head h2{color:#fff}
.pricing-grid{margin-top:2rem;display:grid;gap:1.5rem;align-items:start;text-align:left}
@media(min-width:768px){.pricing-grid{grid-template-columns:1fr 1fr;gap:2rem}}
.price-card{
  position:relative;border-radius:.75rem;border:1px solid rgba(255,255,255,.15);
  background:var(--quadro);
  padding:2rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.price-card.featured{border:2px solid var(--caneta);box-shadow:0 40px 80px -20px rgba(0,0,0,.7)}
.price-card__ribbon{position:absolute;top:-1rem;left:50%;transform:translateX(-50%) rotate(-2deg)}
.price-card__ribbon span{
  display:inline-flex;align-items:center;gap:.375rem;border-radius:2px;background:var(--giz);
  padding:.375rem 1rem;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--quadro-deep);
}
.price-card__ribbon svg{width:14px;height:14px}
.price-card__head{text-align:center}
.price-card__plan{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.price-card__old{margin-top:.75rem;font-size:.875rem;color:rgba(255,255,255,.6);text-decoration:line-through}
.price-card__by{margin-top:.5rem;font-size:.875rem;color:rgba(255,255,255,.8)}
.price-card__amount{margin-top:.25rem;display:flex;align-items:baseline;justify-content:center;gap:.25rem}
.price-card__amount .cur{font-family:'Fraunces',serif;font-size:1.5rem}
.price-card__amount .val{font-family:'Fraunces',serif;font-weight:600;font-size:3rem;line-height:1;color:var(--giz)}
@media(min-width:640px){.price-card__amount .val{font-size:3.75rem}}
.price-card__once{margin-top:.25rem;font-size:.75rem;color:rgba(255,255,255,.6)}
.price-card ul{list-style:none;margin:1.5rem 0 0;padding:0}
.price-card li{
  display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0;font-size:.875rem;color:rgba(255,255,255,.9);
  border-bottom:1px dashed rgba(255,255,255,.15);
}
.price-card li:first-child{border-top:1px dashed rgba(255,255,255,.15)}
.price-card li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--caneta)}
.price-card li span.flex1{flex:1}
.tag-bncc{
  flex-shrink:0;border-radius:2px;padding:.125rem .375rem;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--quadro-deep);background:var(--giz);
}
.price-card__ctawrap{margin-top:1.5rem}
.price-card__secure{margin-top:1rem;font-size:.75rem;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;gap:.5rem}
.price-card__secure svg{width:14px;height:14px;color:var(--caneta)}

/* ===== Testimonials ===== */
.testimonials{position:relative;overflow:hidden;padding:2.75rem 0;color:#fff;background:linear-gradient(180deg, var(--quadro) 0%, var(--quadro-deep) 100%)}
.testimonials__glow{position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 45%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 45%, transparent 85%);
}
.testimonials__inner{position:relative;margin:0 auto;max-width:768px;padding:0 1rem}
.testimonials h2{margin:1.5rem auto 0;max-width:640px;text-align:center;font-family:'Fraunces',serif;font-size:1.875rem;line-height:1.25}
@media(min-width:640px){.testimonials h2{font-size:2.25rem}}
@media(min-width:768px){.testimonials h2{font-size:42px}}
.carousel{position:relative;margin-top:2rem}
.carousel__viewport{overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.carousel__track{display:flex;transition:transform .5s ease-out}
.slide{width:100%;flex-shrink:0;padding:2rem 1.5rem}
@media(min-width:640px){.slide{padding:3.5rem}}
.slide svg.quote{margin:0 auto;display:block;width:32px;height:32px;color:var(--caneta)}
.slide__stars{margin-top:1rem;text-align:center;color:var(--giz);letter-spacing:.25rem;font-size:1.1rem}
.slide p{margin-top:1.125rem;text-align:center;font-size:1.125rem;line-height:1.6;color:rgba(255,255,255,.9)}
@media(min-width:640px){.slide p{font-size:1.25rem}}
.slide__author{margin-top:1.5rem;text-align:center}
.slide__author .name{font-family:'Fraunces',serif;font-size:1.125rem;color:#fff}
.slide__author .role{margin-top:.25rem;font-size:.875rem;color:rgba(255,255,255,.6)}
.carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;transition:background .2s;
}
.carousel__arrow:hover{background:rgba(255,255,255,.2)}
.carousel__arrow svg{width:20px;height:20px}
.carousel__arrow.prev{left:-8px}
.carousel__arrow.next{right:-8px}
@media(min-width:640px){.carousel__arrow.prev{left:-24px}.carousel__arrow.next{right:-24px}}
.carousel__dots{margin-top:2rem;display:flex;justify-content:center;gap:.5rem}
.dot{height:8px;width:8px;border-radius:999px;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:all .2s}
.dot:hover{background:rgba(255,255,255,.4)}
.dot.active{width:32px;background:var(--caneta)}

/* ===== FAQ ===== */
.faq{padding:2.75rem 0;background:linear-gradient(180deg, var(--quadro-deep) 0%, var(--quadro) 100%)}
@media(min-width:640px){.faq{padding:4.25rem 0}}
.faq .section-head h2{color:#fff}
.faq-list{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}
.faq-item{border-radius:.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.faq-item button{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.25rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background .2s;
  font-family:inherit;
}
.faq-item button:hover{background:rgba(255,255,255,.06)}
.faq-item button span{font-weight:600;color:#fff;font-size:.9375rem}
.faq-item button svg{width:20px;height:20px;flex-shrink:0;color:var(--caneta);transition:transform .2s}
.faq-item .faq-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease-out,opacity .3s ease-out}
.faq-item.open .faq-body{grid-template-rows:1fr;opacity:1}
.faq-item .faq-body-inner{overflow:hidden}
.faq-item p{margin:0;padding:0 1.5rem 1.25rem;color:rgba(255,255,255,.7);line-height:1.6;font-size:.9375rem}

/* ===== Final CTA ===== */
.final-cta{position:relative;overflow:hidden;padding:2.75rem 0;color:#fff;background:linear-gradient(180deg, var(--quadro) 0%, var(--quadro-deep) 100%)}
@media(min-width:640px){.final-cta{padding:4.25rem 0}}
.final-cta__glow{position:absolute;inset:0;opacity:.35;pointer-events:none;background:radial-gradient(ellipse at 50% 50%, rgba(232, 196, 104, 0.18), transparent 60%)}
.final-cta__inner{position:relative;margin:0 auto;max-width:768px;padding:0 1rem;text-align:center}
.final-cta h2{font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1.08;color:#fff}
@media(min-width:640px){.final-cta h2{font-size:2.25rem}}
@media(min-width:768px){.final-cta h2{font-size:46px}}
.final-cta p{margin-top:1.125rem;color:rgba(255,255,255,.8);max-width:480px;margin-left:auto;margin-right:auto;font-size:.9375rem}
.final-cta__ctawrap{margin-top:2rem;display:flex;justify-content:center}
.final-cta__note{margin-top:1.25rem;font-size:.8125rem;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.final-cta__note svg{width:16px;height:16px;color:var(--giz)}

/* ===== Footer ===== */
/* wood tone picks up the chalkboard frame from the hero, so it reads as a separate surface
   instead of blending into the dark green section above it */
footer{
  padding:2rem 0;color:rgba(255,255,255,.72);background:#6B4A32;
  border-top:5px solid #7A5738;
  box-shadow:inset 0 8px 18px -10px rgba(0,0,0,.5);
}
footer .wrap-md{text-align:center;font-size:.875rem}
footer .brand{font-family:'Fraunces',serif;font-size:1.125rem;color:var(--papel-warm)}
footer .copy{margin-top:.5rem}
footer .disclaimer{margin:.75rem auto 0;max-width:560px;font-size:.75rem;color:rgba(255,255,255,.5)}

/* ===== HERO PROTOTYPE v2 — caderno/quadro-negro direction ===== */
.hero-v2{
  position:relative;overflow:hidden;color:var(--papel-warm);
  background:linear-gradient(180deg, var(--quadro) 0%, var(--quadro-deep) 100%);
  border-top:14px solid #6B4A32;border-bottom:22px solid #6B4A32;
  border-left:10px solid #6B4A32;border-right:10px solid #6B4A32;
  box-shadow:inset 0 0 40px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.2);
}
.hero-v2__tray{
  position:absolute;left:0;right:0;bottom:-22px;height:22px;background:#7A5738;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.35);
}
.hero-v2__tray::before,.hero-v2__tray::after{
  content:"";position:absolute;top:5px;width:36px;height:8px;border-radius:2px;
  background:linear-gradient(180deg,#fff,#d8d2c4);
}
.hero-v2__tray::before{left:18%}
.hero-v2__tray::after{right:22%;width:24px}
.hero-v2__texture{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);background-size:3px 3px}
.hero-v2__chalk{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 85% 0%, rgba(232, 196, 104, 0.18), transparent 70%)}
.hero-v2__inner{position:relative;margin:0 auto;max-width:960px;padding:2.5rem 1.25rem 3rem;text-align:center}
@media(min-width:640px){.hero-v2__inner{padding-top:3.25rem;padding-bottom:3.5rem}}

.stamp-badge{
  display:inline-block;border:2px solid var(--caneta);color:var(--caneta);
  background:transparent;padding:.5rem 1rem;font-family:'Space Mono',monospace;
  font-size:clamp(10.5px, 2.8vw, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:2px;transform:rotate(-2deg);position:relative;max-width:100%;
  line-height:1.35;
}
.stamp-badge::before{content:"";position:absolute;inset:3px;border:1px solid var(--caneta);border-radius:1px;opacity:.6}

.hero-v2 h1{
  margin:1.25rem auto 0;max-width:680px;font-family:'Fraunces',serif;font-weight:600;
  font-size:2.25rem;line-height:1.12;letter-spacing:-.01em;color:var(--papel-warm);
}
@media(min-width:640px){.hero-v2 h1{font-size:3.25rem}}
@media(min-width:768px){.hero-v2 h1{font-size:3.75rem}}

.marker-hl{position:relative;white-space:nowrap;color:var(--quadro-deep);font-style:italic}
.marker-hl::before{
  content:"";position:absolute;left:-.2em;right:-.2em;top:.28em;bottom:.05em;
  background:var(--giz);transform:rotate(-1.5deg);z-index:-1;border-radius:2px 8px 4px 10px/6px 3px 8px 4px;
}

.hero-v2__lead{margin:1.125rem auto 0;max-width:560px;font-size:1rem;line-height:1.65;color:rgba(246, 241, 228, 0.85)}
.hero-v2__lead strong{color:var(--papel-warm)}

/* the mockup is a transparent PNG, so it sits straight on the board — a frame or tape
   would just outline empty space. drop-shadow follows the artwork's own silhouette. */
.hero-v2__image-inner{position:relative;width:100%;max-width:760px;margin:0 auto}
.hero-v2__image-inner picture{display:block}
.hero-v2__image-inner img{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.45));
}

.btn-ink{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:.375rem;background:var(--acerto);color:var(--papel-warm);
  padding:1rem 2rem;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:none;cursor:pointer;box-shadow:3px 3px 0 var(--quadro-deep), 0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-ink:hover{background:var(--acerto-deep);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--quadro-deep), 0 16px 34px -10px rgba(0,0,0,.55)}
.btn-ink svg{width:16px;height:16px;flex-shrink:0}
.btn-ink.full{width:100%}

.hero-v2__note{margin-top:1rem;font-size:.8125rem;color:rgba(246, 241, 228, 0.7)}

.index-card-grid{margin-top:2.25rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;max-width:520px;margin-left:auto;margin-right:auto}
@media(min-width:640px){.index-card-grid{grid-template-columns:repeat(4,1fr);max-width:none}}
.index-card{
  background:var(--papel-warm);color:var(--quadro-deep);border-radius:.25rem;padding:1rem .75rem;
  transform:rotate(var(--rot));box-shadow:0 10px 20px -8px rgba(0,0,0,.4);position:relative;
}
.index-card::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:22px;height:10px;background:rgba(232, 220, 180, 0.6)}
.index-card__num{font-family:'Fraunces',serif;font-weight:600;font-size:1.375rem;line-height:1}
.index-card__label{margin-top:.375rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:#2D4A38}


/* ===== Quality floor ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal,.reveal-scale{opacity:1;transform:none}
}
:where(a,button):focus-visible{
  outline:3px solid var(--giz);outline-offset:3px;border-radius:3px;
}

/* ===== Upgrade modal (order bump) ===== */
.upsell{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:.5rem}
.upsell[hidden]{display:none}
.upsell__overlay{position:absolute;inset:0;background:rgba(8,16,12,.82);backdrop-filter:blur(4px);animation:upsellFade .2s ease-out}
.upsell__card{
  position:relative;z-index:1;width:100%;max-width:410px;
  background:var(--papel-warm);color:var(--ink);
  border:6px solid #6B4A32;border-radius:12px;
  padding:1.125rem 1rem .875rem;text-align:center;
  box-shadow:0 24px 60px -15px rgba(0,0,0,.75);
  animation:upsellIn .22s cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;
}
@media(min-width:480px){.upsell__card{padding:1.35rem 1.25rem 1rem}}
@keyframes upsellFade{from{opacity:0}to{opacity:1}}
@keyframes upsellIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

.upsell__close{
  position:absolute;top:.375rem;right:.375rem;display:grid;place-items:center;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.06);color:var(--ink);
}
.upsell__close:hover{background:rgba(0,0,0,.12)}
.upsell__close svg{width:14px;height:14px}

.upsell__seal{
  display:inline-block;background:var(--caneta);color:#fff;
  font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  padding:.2rem .55rem;border-radius:4px;
}
.upsell__title{margin:.375rem 0 0;font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;line-height:1.15;color:var(--ink)}
.upsell__sub{margin:.2rem auto 0;max-width:32ch;font-size:.8125rem;line-height:1.3;color:var(--ink-soft)}

.upsell__offer-card{
  margin-top:.75rem;background:var(--quadro);color:var(--papel-warm);
  border:1px solid rgba(232,196,104,.3);border-radius:10px;
  padding:.875rem 1rem;text-align:left;
  box-shadow:inset 0 0 20px rgba(0,0,0,.35);
}
.upsell__offer-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.375rem;
}
.upsell__tag{
  background:var(--giz);color:var(--quadro);
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;
  letter-spacing:.05em;
}
.upsell__pricing{
  display:flex;align-items:baseline;gap:.5rem;
}
.upsell__old-price{
  font-size:.75rem;color:rgba(246,241,228,.55);text-decoration:line-through;
}
.upsell__main-price{
  color:var(--giz);font-family:'Fraunces',serif;font-weight:700;
  display:flex;align-items:baseline;gap:.125rem;
}
.upsell__currency{font-size:.875rem}
.upsell__value{font-size:1.5rem;line-height:1}

.upsell__offer-diff{
  font-size:.71875rem;color:rgba(246,241,228,.85);
  text-align:center;background:rgba(255,255,255,.07);
  padding:.3125rem .5rem;border-radius:4px;margin-bottom:.625rem;
  border:1px dashed rgba(255,255,255,.18);font-weight:500;
}

.upsell__features{
  list-style:none;margin:0;padding:0;display:grid;gap:.375rem;
}
.upsell__features li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.8125rem;color:rgba(255,255,255,.92);line-height:1.3;
}
.upsell__features li svg{
  width:15px;height:15px;color:#52C472;flex-shrink:0;
}
.upsell__features li strong{color:#fff;font-weight:700}

.upsell__accept{margin-top:.75rem;padding:.75rem 1rem;font-size:.875rem}
.upsell__decline{
  display:block;margin-top:.375rem;font-size:.6875rem;line-height:1.3;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.upsell__decline:hover{color:var(--ink)}

/* keeps the page behind the modal from scrolling */
body.upsell-open{overflow:hidden}

/* ===== Sales notification toast ===== */
.sales-toast{
  position:fixed;bottom:1.25rem;left:1.25rem;z-index:90;
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9375rem 1.125rem;width:100%;max-width:322px;
  background:linear-gradient(135deg, var(--quadro) 0%, var(--quadro-deep) 100%);
  color:var(--papel-warm);
  border:1px solid rgba(232,196,104,.22);
  border-left:3px solid var(--giz);
  border-radius:.875rem;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.sales-toast.is-dragging{
  transition:none !important;cursor:grabbing;
}
.sales-toast.is-active{
  transform:translateY(0);opacity:1;visibility:visible;
}
.sales-toast__content{flex:1;min-width:0;text-align:left}
.sales-toast__header{
  display:flex;align-items:center;gap:.4375rem;flex-wrap:wrap;
  line-height:1.25;
}
.sales-toast__check{
  display:grid;place-items:center;flex-shrink:0;
  width:17px;height:17px;border-radius:50%;
  background:#3F7A4F;color:#fff;
}
.sales-toast__check svg{width:10px;height:10px}
.sales-toast__name{font-weight:700;font-size:.9375rem;color:#fff}
.sales-toast__location{font-size:.75rem;color:rgba(246,241,228,.7);font-weight:400}
.sales-toast__action{
  margin-top:.3rem;font-size:.8125rem;color:rgba(246,241,228,.9);line-height:1.35;
}
.sales-toast__action strong{color:var(--giz);font-weight:700}
.sales-toast__footer{
  display:flex;align-items:center;gap:.375rem;
  margin-top:.45rem;font-size:.6875rem;color:rgba(246,241,228,.6);
}
.sales-toast__badge{
  display:inline-flex;align-items:center;gap:.25rem;
  color:#52C472;font-weight:600;
}
.sales-toast__badge svg{width:11px;height:11px}
.sales-toast__sep{opacity:.4}
.sales-toast__time{font-size:.6875rem;color:rgba(246,241,228,.6)}
.sales-toast__close{
  align-self:flex-start;background:transparent;border:none;color:rgba(255,255,255,.4);
  padding:.25rem;cursor:pointer;border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  margin:-.25rem -.25rem 0 0;transition:color .2s,background .2s;
}
.sales-toast__close:hover{color:#fff;background:rgba(255,255,255,.12)}
.sales-toast__close svg{width:14px;height:14px}

@media(max-width:520px){
  .sales-toast{left:.875rem;right:.875rem;bottom:.875rem;max-width:calc(100vw - 1.75rem)}
}

@media (prefers-reduced-motion: reduce){
  .upsell__overlay,.upsell__card{animation:none}
  .sales-toast{transition:none}
}