@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color-scheme: light;
  --ink: #213c44;
  --muted: #4d5c55;
  --paper: #fbf7ee;
  --sage: #e8eddf;
  --line: #ded8c9;
  --green: #294b3a;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid #26645b; outline-offset: 4px; }
.skip { position: absolute; z-index: 2; left: 16px; top: -80px; padding: 8px 14px; background: #fff; }
.skip:focus { top: 8px; }
.wrap { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
main { overflow: clip; }
.header { border-bottom: 1px solid var(--line); }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 30px/1 var(--serif); text-decoration: none; white-space: nowrap; }
.brand img { border-radius: 10px; width: 36px; flex: none; }
nav { display: flex; align-items: center; gap: 27px; }
nav > a { text-decoration: none; font-size: 14px; font-weight: 600; }
nav > a:hover:not(.button) { text-decoration: underline; text-underline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .99; text-wrap: balance; }
h1 { font-size: clamp(46px, 5.15vw, 76px); letter-spacing: -.022em; max-width: 18ch; }
h1 em { color: #42654e; font-weight: inherit; }
h2 { font-size: clamp(44px, 5.5vw, 74px); letter-spacing: -.02em; }
p { color: var(--muted); }
.kicker { font: 700 11px/1.45 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #49634e; margin-bottom: 14px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); gap: clamp(25px, 4vw, 62px); align-items: center; padding-block: clamp(53px, 8vw, 106px) clamp(57px, 8vw, 107px); }
.hero-copy > p:not(.kicker) { max-width: 40ch; margin-top: 15px; font-size: 17px; }
.hero-copy h1 + p { margin-top: 24px !important; }
.hero-copy, .hero-device { position: relative; z-index: 1; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 12px 18px; min-height: 46px; border: 1px solid var(--green); border-radius: 51% 45% 48% 42% / 17% 19% 17% 16%; background: linear-gradient(#244b3ac4, #244b3ad9), url("assets/pincelada-1.webp") center / 112% 140% no-repeat, var(--green); color: #fffdf6; font: 700 14px/1.35 var(--sans); text-decoration: none; }
.button:hover { border-color: #17392a; background-color: #17392a; filter: brightness(1.11); }
.button.small { padding: 8px 13px; min-height: 36px; }
.button.secondary { background: #f8f0df url("assets/pincelada-2.webp") center / 110% 125% no-repeat; color: var(--green); }
.button.secondary:hover { background-color: #f7ebd1; filter: brightness(.97); }
.text-link { text-underline-offset: 4px; font-weight: 600; }
.experience { position: relative; padding-block: clamp(59px, 8vw, 105px); background: radial-gradient(ellipse at 35% 0%, #eef0e5, transparent 73%), var(--sage); border-block: 1px solid #dce3d5; }
.experience-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: clamp(30px, 6vw, 80px); }
.experience-copy { max-width: 465px; }
.experience-copy h2 { max-width: 14ch; }
.experience-copy > p:not(.kicker), .bonus p:not(.kicker), .faq > div:first-child p { margin-top: 18px; max-width: 42ch; }
.categories { margin-top: 23px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 365px; }
.categories button { --pincelada: url("assets/pincelada-0.webp"); min-height: 46px; border: 1px solid transparent; border-radius: 8px; background: var(--pincelada) center / 100% 100% no-repeat; color: var(--green); cursor: pointer; font-size: 14px; font-weight: 600; }
.categories button:nth-child(2) { --pincelada: url("assets/pincelada-1.webp"); }
.categories button:nth-child(3) { --pincelada: url("assets/pincelada-3.webp"); }
.categories button:nth-child(4) { --pincelada: url("assets/pincelada-4.webp"); }
.categories button:hover { border-color: #849789; }
.categories button[aria-pressed="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.deck { position: relative; min-width: 0; max-width: 575px; padding: 13px 0 13px 19%; display: flex; justify-content: end; }
.deck-back { width: 47%; position: absolute; inset: 50% auto auto 7%; transform: translateY(-50%) rotate(-11deg); border-radius: 13px; box-shadow: 0 9px 30px #3948392b; }
.sample { position: relative; width: min(100%, 395px); min-height: 324px; padding: 43px clamp(18px, 3.2vw, 44px) 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: #fcf8ee url("assets/frente.webp") center / 100% 100% no-repeat; border: 1px solid #d6c7ad; border-radius: 13px; box-shadow: 0 13px 33px #39483924; }
.sample .kicker { margin: 0; font-size: 10px; }
.sample h3 { font-size: clamp(32px, 4vw, 44px); }
.sample p:not(.kicker) { font: 15px/1.42 Georgia, serif; color: #343e38; }
.sample .sample-seeds { font-style: italic !important; color: #4b675a !important; }
.bonus { position: relative; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(29px, 7vw, 94px); padding-block: clamp(56px, 9vw, 113px); }
.bonus > * { position: relative; z-index: 1; }
.bonus figure { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f3ebda; }
.bonus img { width: 100%; border-radius: 4px; }
.bonus h2 { max-width: 11ch; }
.offer { position: relative; padding-block: clamp(55px, 8vw, 91px); background: radial-gradient(ellipse at 20% 100%, #faefde, transparent 68%), #f1eade; border-block: 1px solid var(--line); }
.offer > .wrap { position: relative; z-index: 1; }
.section-intro { text-align: center; }
.section-intro p { margin-top: 12px; }
.offer-card {
  width: min(100%, 485px);
  margin: 29px auto 0;
  padding: clamp(24px, 4vw, 43px);
  border: 1px solid #9aac9d;
  border-radius: 18px 15px 17px 16px;
  background: radial-gradient(ellipse at 85% 5%, #f6f8ed, transparent 68%), #e9eee3;
  box-shadow: inset 0 0 0 1px #9aac9d, 0 9px 24px #46634b16;
  text-align: center;
}
.offer-price { font: 400 clamp(66px, 10vw, 104px)/.94 var(--serif); letter-spacing: -.035em; color: var(--green); }
.offer-duration { margin-top: 12px; font-size: clamp(19px, 3vw, 25px); color: var(--ink); }
.offer-terms { margin-top: 5px; }
.offer-card .button { margin-top: 21px; width: min(100%, 317px); }
.payment-note { text-align: center; font-size: 14px; margin-top: 15px; }
.faq { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(25px, 7vw, 83px); padding-block: clamp(52px, 7vw, 86px); }
.faq > * { position: relative; z-index: 1; }
.questions { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding-block: 15px; }
summary { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--ink); font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; margin-inline-start: auto; font-size: 23px; line-height: 1; font-weight: 400; }
details[open] summary::after { content: '−'; }
details p { margin-top: 10px; }
.footer { border-top: 1px solid var(--line); }
.footer p, .footer .text-link { font-size: 13px; }
section[id] { scroll-margin-top: 24px; }
/* Original deck artwork follows the margins between sections. */
.hero::before, .hero::after, .experience::before, .experience::after,
.bonus::before, .offer::before, .offer::after, .faq::after {
  content: "";
  position: absolute;
  width: var(--motif-width);
  aspect-ratio: var(--motif-ratio, 1.56);
  background: var(--motif-image) center / contain no-repeat;
  opacity: var(--motif-opacity, .56);
  transform: rotate(var(--motif-turn, 0deg));
  pointer-events: none;
}
.hero::before {
  --motif-image: url("assets/petalas.webp");
  --motif-width: clamp(80px, 10vw, 155px);
  --motif-turn: -34deg;
  top: 21px;
  left: 39%;
}
.hero::after {
  --motif-image: url("assets/ramo-claro.webp");
  --motif-width: clamp(84px, 13vw, 180px);
  --motif-ratio: .82;
  --motif-turn: -53deg;
  right: -39px;
  bottom: -22px;
}
.experience::before {
  --motif-image: url("assets/ramo.webp");
  --motif-width: clamp(100px, 16vw, 225px);
  --motif-turn: -6deg;
  bottom: -9px;
  left: -60px;
}
.experience::after {
  --motif-image: url("assets/petalas.webp");
  --motif-width: clamp(76px, 11vw, 151px);
  --motif-turn: 24deg;
  right: 3%;
  top: 21px;
}
.bonus::before {
  --motif-image: url("assets/petalas.webp");
  --motif-width: clamp(64px, 10vw, 136px);
  --motif-turn: -24deg;
  --motif-opacity: .46;
  bottom: 28px;
  left: 48%;
}
.offer::before {
  --motif-image: url("assets/ramo.webp");
  --motif-width: clamp(115px, 20vw, 265px);
  --motif-turn: 170deg;
  --motif-opacity: .51;
  top: -21px;
  right: -35px;
}
.offer::after {
  --motif-image: url("assets/petalas.webp");
  --motif-width: clamp(76px, 10vw, 133px);
  --motif-turn: 20deg;
  left: 5%;
  bottom: 12%;
}
.faq::after {
  --motif-image: url("assets/ramo-claro.webp");
  --motif-width: clamp(72px, 13vw, 144px);
  --motif-ratio: .82;
  --motif-turn: -30deg;
  --motif-opacity: .4;
  left: -22px;
  bottom: -28px;
}
@media (max-width: 950px) {
  .wrap { width: min(1180px, calc(100% - 60px)); }
  .hero { grid-template-columns: .95fr 1.05fr; }
  .deck { padding-left: 15%; }
}
@media (max-width: 680px) {
  .wrap { width: calc(100% - 36px); }
  .header-inner { min-height: 61px; }
  .brand { font-size: 27px; }
  .brand img { width: 32px; }
  nav > a:not(.button) { display: none; }
  .hero, .experience-grid, .bonus, .faq { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; gap: 28px; }
  h1 { font-size: clamp(46px, 10.5vw, 64px); }
  .hero-copy > p:not(.kicker) { font-size: 16px; }
  .hero::before { top: 18px; right: 0; left: auto; --motif-opacity: .40; }
  .hero::after { right: -19px; bottom: -12px; }
  .experience::before { left: -38px; bottom: 2px; --motif-opacity: .37; }
  .experience::after { top: 13px; right: 0; --motif-opacity: .33; }
  .bonus::before { bottom: 14px; left: auto; right: -12px; }
  .offer::before { right: -30px; top: -9px; --motif-opacity: .30; }
  .offer::after { left: 1%; bottom: 1%; --motif-opacity: .4; }
  .faq::after { left: -15px; bottom: -24px; --motif-opacity: .25; }
  .categories { max-width: none; }
  .deck { padding: 4px 0 4px 13%; }
  .deck-back { left: 4%; }
  .sample { min-height: 310px; margin-left: 14px; }
  .bonus figure { order: 2; }
  .bonus h2 { max-width: none; }
  .footer-inner { flex-wrap: wrap; gap: 12px 18px; padding-block: 20px; }
  .footer-inner > p { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Product photography and story sections */
.hero-copy .assinatura, .assinatura { font: italic 27px/1.15 var(--serif); color: #42654e; }
.hero-device { justify-self: center; position: relative; width: min(100%, 520px); display: grid; place-items: center; padding: 16px 0; isolation: isolate; }
.hero-device::before { content: ""; position: absolute; inset: 6% -2%; z-index: -2; border-radius: 48% 48% 34% 36%; background: radial-gradient(ellipse at center, #f8e7d2 5%, #f8eddd8c 58%, transparent 75%); }
.phone { width: 100%; border: 5px solid #303d39; border-radius: 25px; background: var(--paper); box-shadow: 0 12px 25px #363c2630; }
.hero-device .phone { width: 47%; position: relative; border-width: 6px; }
.hero-card { position: absolute; z-index: -1; width: 42%; border-radius: 12px; box-shadow: 0 13px 25px #755b3c32; }
.hero-card-back { left: 5%; top: 20%; transform: rotate(-16deg); }
.hero-card-front { right: 5%; bottom: 17%; transform: rotate(14deg); }
.editorial-copy { max-width: 740px; }
.editorial-copy > p + p, .bonus > div > p + p { margin-top: 12px; }
.editorial-copy h2 + p { margin-top: 18px; }
.editorial-copy strong { color: var(--ink); }
.story, .how, .ours, .origin { padding-block: clamp(58px, 8vw, 106px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(27px, 6vw, 85px); align-items: center; }
.story { border-top: 1px solid var(--line); }
.story .scene-feature { width: min(100%, 414px); justify-self: center; }
.scene-feature img, .scene-grid img, .origin > img { border-radius: 19px 16px 21px 17px; border: 1px solid #dcd0b9; }
.solution, .benefits, .invitation, .pause, .access { padding-block: clamp(52px, 7vw, 88px); }
.solution { background: #f6eadc; border-block: 1px solid var(--line); }
.section-intro.editorial-copy { margin-inline: auto; }
.mini-deck, .benefit-grid, .scene-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 31px; }
.mini-card { background: #fff9ec url("assets/frente.webp") center / 100% 100% no-repeat; display: grid; place-content: center; min-height: 235px; text-align: center; border: 1px solid #d6c7ad; border-radius: 13px; padding: 32px 32px 40px; }
.mini-card h3, .scene-grid h3, .benefit-grid h3 { font-size: clamp(28px, 3.15vw, 39px); }
.mini-card h3 + p, .scene-grid h3 + p, .benefit-grid h3 + p { margin-top: 10px; }
.mini-card:nth-child(2) { transform: translateY(8px); }
.section-note { text-align: center; margin: 28px auto 0; max-width: 56ch; }
.steps { padding-left: 23px; margin: 18px 0; color: var(--muted); }
.steps li { padding-left: 4px; margin-bottom: 8px; }
.steps li::marker { color: var(--green); font-weight: 700; }
.phone-gallery, .ours-gallery { display: grid; align-items: start; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.phone-gallery figure { min-width: 0; }
.phone-gallery figure:nth-child(2) { margin-top: 15px; }
.phone-gallery .phone { border-radius: 17px; border-width: 4px; }
figcaption { text-align: center; color: var(--muted); font-size: 12px; margin-top: 9px; line-height: 1.4; }
.benefits { background: #f3efdf; }
.benefit-grid { gap: 1px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.benefit-grid article { background: #fcf8ed; padding: clamp(19px, 3vw, 34px); }
.leaf-mark { display: block; width: 39px; height: 30px; background: url("assets/ramo.webp") center / contain no-repeat; margin-bottom: 11px; }
.ours { position: relative; grid-template-columns: 1.02fr .98fr; }
.ours h2 { font-size: clamp(52px, 7vw, 91px); }
.ours-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 430px; justify-self: center; gap: 19px; }
.ours-gallery figure:nth-child(2) { margin-top: 19px; }
.invitation { position: relative; background: #e8eddf; border-block: 1px solid #dce3d5; }
.invitation .section-intro, .pause .section-intro { max-width: min(810px, calc(100% - 36px)); }
.invitation .button { margin-top: 22px; }
.scenes { padding-block: clamp(55px, 8vw, 102px); }
.scene-grid article { min-width: 0; }
.scene-grid img { width: 100%; aspect-ratio: 1.3; object-fit: cover; object-position: center 41%; }
.scene-grid h3 { margin-top: 15px; }
.categories button { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 5px; }
.categories button img { width: 25px; height: 25px; object-fit: contain; }
.experience-copy .demo-note { margin-top: 15px; font-size: 14px; }
.origin img { width: 100%; }
.pause { background: #f5eddf; }
.pause .assinatura { font-size: 42px; }
.offer .section-intro { max-width: 770px; margin-inline: auto; }
.guarantee, .support { padding-block: 34px 52px; }
.guarantee { margin-inline: auto; text-align: center; border-top: 1px solid var(--line); }
.guarantee h2, .support h2 { font-size: clamp(36px, 5vw, 55px); }
.guarantee h2 + p { margin-top: 10px; }
.access { background: #e8eddf; }
.access .text-link { display: inline-block; margin-top: 18px; }
.support { margin-inline: auto; text-align: center; padding-block: 48px 60px; }
.invitation::after, .ours::after {
  content: "";
  position: absolute;
  width: clamp(66px, 12vw, 140px);
  aspect-ratio: 1.56;
  pointer-events: none;
  opacity: .46;
  background: url("assets/petalas.webp") center / contain no-repeat;
}
.invitation::after { bottom: 11px; right: 3%; transform: rotate(25deg); }
.ours::after { bottom: 2%; left: -2%; transform: rotate(-25deg); }

@media (max-width: 950px) {
  .phone-gallery { gap: 8px; }
  .mini-card { padding: 26px 22px 31px; }
}
@media (max-width: 680px) {
  .story, .how, .ours, .origin { grid-template-columns: 1fr; }
  .hero-device { width: min(100%, 390px); }
  .hero-device .phone { border-width: 4px; }
  .story .scene-feature { width: min(100%, 340px); }
  .mini-deck, .scene-grid { grid-template-columns: 1fr; }
  .mini-card { min-height: 171px; }
  .mini-card:nth-child(2) { transform: none; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-grid h3 { font-size: 26px; }
  .scene-grid { gap: 29px; }
  .scene-grid img { aspect-ratio: 1.55; }
  .ours-gallery { width: min(100%, 365px); }
  .phone-gallery .phone, .ours-gallery .phone { border-radius: 13px; }
  .faq { padding-bottom: 40px; }
  .invitation::after, .ours::after { opacity: .27; }
}
@media (max-width: 350px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .categories button img { width: 19px; height: 19px; }
}