:root {
  --blue: #3848de;
  --sky: #5590e7;
  --orange: #ea5b2a;
  --orange-vivid: #fd4d02;
  --graphite: #2d2d2d;
  --cream: #fef8f5;
  --ink: #252525;
  --display: "Onest", Arial, sans-serif;
  --body: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
.section-shell { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 128px) max(5.5vw, calc((100vw - 1280px) / 2)); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.eyebrow span { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.eyebrow-dark { color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: .9; text-transform: uppercase; }
h1 { margin-bottom: 24px; font-size: clamp(60px, 7.3vw, 116px); }
h2 { margin-bottom: 24px; font-size: clamp(52px, 6vw, 94px); }
h3 { margin-bottom: 20px; font-size: clamp(36px, 3.6vw, 58px); }
em { color: var(--orange-vivid); font-style: normal; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 58px; padding: 0 22px 0 28px; border-radius: 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em; transition: transform .2s ease, box-shadow .2s ease; }
.button span { font-size: 25px; font-weight: 400; line-height: 1; }
.button:hover, .payment-link:hover { transform: translateY(-4px) rotate(-1deg); }
.button-orange { background: var(--orange-vivid); color: #fff; box-shadow: 6px 7px 0 var(--graphite); }
.button-dark { background: var(--graphite); color: #fff; box-shadow: 6px 7px 0 #fff; }
.button-light { background: var(--cream); color: var(--graphite); }
.button-blue { background: var(--blue); color: #fff; box-shadow: 6px 7px 0 var(--orange-vivid); }

.hero { display: grid; min-height: 820px; grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr); padding-top: 80px; padding-bottom: 70px; background: linear-gradient(130deg, var(--blue), #4152e5 56%, var(--sky)); color: #fff; isolation: isolate; }
.hero-copy { position: relative; z-index: 3; align-self: center; max-width: 680px; }
.product-name { margin: 0 0 20px; color: #ff986b; font-size: clamp(92px, 12vw, 188px); font-weight: 900; letter-spacing: -.045em; line-height: .72; }
.hero-offer { max-width: 640px; margin: 0 0 22px; font-family: var(--display); font-size: clamp(32px, 3.7vw, 60px); font-weight: 800; letter-spacing: -.032em; line-height: .94; }
.hero-lead { max-width: 510px; margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 21px); font-weight: 500; line-height: 1.45; }
.hero-details { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; margin: 0 0 34px; }
.hero-details span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.price-note { margin: 18px 0 0; font-size: 11px; font-weight: 600; opacity: .78; }
.hero-photo-wrap { position: relative; z-index: 2; align-self: end; height: 100%; min-height: 650px; }
.hero-photo-frame { position: absolute; inset: 7% 0 0 7%; border: 1px solid rgba(255,255,255,.6); border-radius: 52% 48% 8% 48%; transform: rotate(-4deg); }
.hero-photo { position: absolute; right: -7vw; bottom: -70px; width: min(47vw, 670px); height: min(52vw, 770px); object-fit: cover; object-position: center 22%; border-radius: 49% 49% 0 0; filter: saturate(1.04) contrast(1.02); }
.photo-sticker { position: absolute; right: 3%; bottom: 20%; z-index: 2; display: grid; width: 126px; height: 126px; place-items: center; padding: 12px; border: 1px solid #fff; border-radius: 50%; background: var(--orange-vivid); color: #fff; text-align: center; font-family: var(--display); font-size: 21px; line-height: .85; transform: rotate(13deg); }
.hero-bottom-line { position: absolute; z-index: 4; right: 5.5vw; bottom: 25px; left: 5.5vw; border-top: 1px solid rgba(255,255,255,.55); padding-top: 11px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.orbit-one { top: -220px; left: -120px; width: 520px; height: 520px; }
.orbit-two { right: 20%; bottom: -260px; width: 510px; height: 510px; }

.outcome { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(38px, 8vw, 128px); background: var(--cream); }
.section-intro > p:last-child { max-width: 380px; font-size: 16px; line-height: 1.55; }
.outcome-cards { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.outcome-card { position: relative; min-width: 0; min-height: 430px; padding: 25px; border-radius: 26px; color: #fff; }
.card-orange { background: linear-gradient(145deg, var(--orange), var(--orange-vivid)); transform: translateY(28px); }
.card-blue { background: linear-gradient(150deg, var(--blue), var(--sky)); }
.card-graphite { background: var(--graphite); transform: translateY(54px); }
.card-index { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; }
.outcome-card h3 { margin-top: 96px; font-size: clamp(29px, 2.2vw, 34px); }
.outcome-card p { max-width: 210px; margin-bottom: 0; font-size: 13px; font-weight: 600; line-height: 1.45; }
.card-mark { position: absolute; right: 20px; bottom: 15px; font-family: var(--display); font-size: 70px; line-height: 1; }

.live { min-height: 760px; padding-top: 58px; background: linear-gradient(130deg, var(--orange), var(--orange-vivid)); color: #fff; }
.live-topline { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.7); padding: 9px 0; font-family: var(--display); font-size: 22px; letter-spacing: .12em; }
.live-content { display: grid; grid-template-columns: minmax(0,.9fr) minmax(290px,.75fr) minmax(0,.8fr); gap: clamp(22px,4vw,68px); align-items: center; min-height: 580px; }
.live-intro { position: relative; z-index: 2; padding-top: 46px; }
.live-intro .eyebrow { margin-top: 0; }
.live-intro h2 { margin-bottom: 0; font-size: clamp(54px, 5.7vw, 92px); }
.live-intro em { color: var(--graphite); }
.date-label { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.live-proof { position: relative; z-index: 3; margin: 46px 0 -50px; transform: rotate(3deg); }
.live-proof img { display: block; width: 100%; aspect-ratio: .82; object-fit: cover; object-position: center 29%; border: 10px solid var(--cream); border-radius: 8px; box-shadow: 16px 18px 0 var(--graphite); }
.live-proof-label { position: absolute; z-index: 2; top: -12px; right: -15px; padding: 9px 12px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.live-proof figcaption { margin-top: 30px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.live-action { position: relative; z-index: 2; align-self: end; padding-bottom: 40px; }
.live-copy { max-width: 310px; margin-bottom: 22px; font-size: 14px; font-weight: 600; line-height: 1.55; }
.live-facts { display: flex; flex-wrap: wrap; gap: 7px; max-width: 320px; margin: 0 0 24px; }
.live-facts span { border: 1px solid rgba(255,255,255,.75); border-radius: 999px; padding: 7px 10px; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.live-ring { position: absolute; right: -72px; bottom: -72px; display: grid; width: 320px; height: 320px; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: transparent; font-family: var(--display); font-size: 46px; line-height: .9; -webkit-text-stroke: 1px #fff; transform: rotate(-17deg); }

.tariffs { background: var(--graphite); color: #fff; }
.tariffs-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 8vw; align-items: end; margin-bottom: 50px; }
.tariffs-heading .eyebrow, .tariffs-heading h2 { grid-column: 1; }
.tariffs-heading h2 { margin-bottom: 0; }
.tariffs-heading h2 em { color: #ff8b5b; }
.tariffs-heading > p:last-child { grid-column: 2; max-width: 310px; margin-bottom: 10px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.5; }
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tariff-card { position: relative; display: flex; min-width: 0; min-height: 550px; flex-direction: column; padding: 26px; border: 1px solid rgba(255,255,255,.45); border-radius: 28px; background: #333; }
.tariff-card:nth-child(3) { background: #252525; }
.tariff-featured { top: -20px; border-color: var(--orange-vivid); background: var(--orange-vivid); color: #fff; }
.tariff-badge { position: absolute; top: -14px; right: 20px; padding: 7px 11px; border-radius: 999px; background: var(--cream); color: var(--graphite); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.tariff-head { display: flex; min-width: 0; justify-content: space-between; gap: 10px; }
.tariff-head span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; }
.tariff-head h3 { min-width: 0; margin: 4px 0 30px; font-size: clamp(39px, 4vw, 61px); text-align: right; }
.tariff-card ul { min-height: 144px; margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.36); }
.tariff-card li { border-bottom: 1px solid rgba(255,255,255,.36); padding: 10px 0; font-size: 12px; font-weight: 600; line-height: 1.3; }
.tariff-price { margin: auto 0 22px; font-family: var(--display); font-size: clamp(68px, 6vw, 96px); line-height: .75; letter-spacing: .01em; }
.tariff-price small { font-size: .47em; }
.tariff-card .button { width: 100%; }

.roadmap { background: var(--cream); }
.roadmap-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 52px; }
.roadmap-heading h2 { margin-bottom: 0; }
.roadmap-track { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: 28px; }
.road-step { min-height: 350px; padding: 28px; color: #fff; }
.road-step p { margin-bottom: 70px; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.road-step strong { display: block; margin-bottom: 24px; font-family: var(--display); font-size: clamp(42px, 4vw, 68px); font-weight: 400; line-height: .88; }
.road-step span { display: block; max-width: 230px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.road-step-blue { background: linear-gradient(135deg, var(--blue), var(--sky)); }
.road-step-orange { background: linear-gradient(135deg, var(--orange), var(--orange-vivid)); }
.road-step-dark { background: var(--graphite); }

.author { display: grid; grid-template-columns: minmax(330px,.8fr) minmax(0,1.2fr); gap: 9vw; align-items: center; background: #fff; }
.author-portrait { position: relative; min-height: 500px; isolation: isolate; }
.author-portrait::before { position: absolute; z-index: -1; top: 42px; right: 8%; bottom: 0; left: 0; border-radius: 45% 45% 10% 10%; background: linear-gradient(145deg, var(--blue), var(--sky)); content: ""; transform: rotate(4deg); }
.author-portrait img { position: absolute; bottom: 0; left: 4%; width: 94%; height: 96%; object-fit: cover; object-position: center 22%; border-radius: 46% 46% 7% 7%; }
.author-stamp { position: absolute; top: 48px; right: -7px; display: grid; width: 124px; height: 124px; place-items: center; border: 1px solid #fff; border-radius: 50%; background: var(--orange-vivid); color: #fff; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.04em; line-height: .86; text-align: center; transform: rotate(13deg); }
.author-copy h2 { margin-bottom: 18px; }
.author-role { max-width: 470px; margin-bottom: 18px; font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; line-height: 1.25; }
.author-copy > p:not(.eyebrow):not(.author-role) { max-width: 600px; margin-bottom: 12px; font-size: 15px; line-height: 1.6; }
.author-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; max-width: 620px; margin: 28px 0; }
.author-facts span { min-height: 105px; padding: 13px; border-radius: 14px; background: var(--cream); }
.author-facts b { display: block; margin-bottom: 16px; font-family: var(--display); font-size: clamp(20px,2.3vw,33px); font-weight: 800; letter-spacing: -.05em; line-height: .8; }
.author-facts small { display: block; font-size: 9px; font-weight: 800; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; }

.reviews { background: linear-gradient(135deg, var(--blue), #4355e3 60%, var(--sky)); color: #fff; }
.reviews-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8vw; align-items: end; margin-bottom: 48px; }
.reviews-heading .eyebrow, .reviews-heading h2 { grid-column: 1; }
.reviews-heading h2 { margin-bottom: 0; }
.reviews-heading h2 em { color: #ff9b70; }
.reviews-heading > p:last-child { grid-column: 2; max-width: 340px; margin: 0 0 10px; font-size: 14px; font-weight: 500; line-height: 1.55; }
.review-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 15px; align-items: start; }
.review-card { overflow: hidden; border-radius: 26px; padding: 18px; }
.review-card-orange { background: var(--orange-vivid); }
.review-card-light { background: var(--cream); color: var(--graphite); }
.review-card-dark { background: var(--graphite); }
.review-result { display: flex; align-items: end; gap: 11px; margin-bottom: 16px; }
.review-result strong { font-family: var(--display); font-size: clamp(62px, 6vw, 90px); font-weight: 400; line-height: .68; letter-spacing: .02em; }
.review-result span { padding-bottom: 3px; font-size: 10px; font-weight: 800; line-height: 1.22; letter-spacing: .04em; text-transform: uppercase; }
.review-card figure { margin: 0; }
.review-card img { display: block; width: 100%; border-radius: 16px; background: #fff; }
.review-card-light img { border: 1px solid rgba(45,45,45,.16); }
.review-card figcaption { padding: 11px 3px 0; font-size: 10px; font-weight: 700; line-height: 1.35; }

.faq { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 9vw; align-items: start; background: #fff; }
.faq-heading { position: sticky; top: 22px; }
.faq-heading h2 { margin-bottom: 18px; }
.faq-heading > p:last-child { max-width: 335px; margin-bottom: 0; font-size: 15px; line-height: 1.55; }
.faq-list { border-top: 1px solid rgba(45,45,45,.25); }
.faq-list details { border-bottom: 1px solid rgba(45,45,45,.25); }
.faq-list summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(23px, 2.15vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; text-transform: uppercase; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--orange-vivid); color: #fff; font-family: var(--body); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s ease, background .2s ease; }
.faq-list details[open] summary span { background: var(--blue); transform: rotate(45deg); }
.faq-list details p { max-width: 590px; margin: -4px 52px 24px 0; font-size: 14px; font-weight: 500; line-height: 1.62; }

.payment { display: grid; grid-template-columns: 1fr .9fr; gap: 10vw; align-items: center; background: var(--graphite); color: #fff; }
.payment h2 { margin-bottom: 18px; }
.payment h2 em { color: #ff8b5b; }
.payment > div > p:last-child { max-width: 400px; margin-bottom: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); }
.payment-actions { display: grid; gap: 14px; }
.payment-link { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: 18px; transition: transform .2s ease; }
.payment-link span { font-family: var(--display); font-size: 44px; line-height: .8; }
.payment-link b { font-size: 11px; letter-spacing: .06em; }
.payment-tg { background: var(--orange-vivid); }
.payment-max { background: var(--cream); color: var(--graphite); }

footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 5.5vw; background: var(--ink); color: #fff; }
.footer-logo { font-family: var(--display); font-size: 40px; line-height: .8; }
footer p, footer a { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; }
footer a { border-bottom: 1px solid currentColor; }
.footer-meta { display: grid; gap: 10px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.footer-legal a { font-size: 8px; opacity: .78; }

@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 70px; }
  .hero-copy { max-width: 700px; }
  .hero-photo-wrap { min-height: 500px; margin: 20px -5.5vw -70px; }
  .hero-photo { right: 6%; bottom: 0; width: 70%; height: 510px; }
  .hero-photo-frame { inset: 5% 16% 0 16%; }
  .photo-sticker { right: 8%; bottom: 22%; }
  .outcome { grid-template-columns: 1fr; }
  .outcome-cards { max-width: 720px; }
  .live { min-height: auto; }
  .live-content { grid-template-columns: 1fr; min-height: 500px; max-width: 640px; }
  .live-intro { padding-top: 20px; }
  .live-proof { max-width: 390px; margin: 22px 0 14px 6%; }
  .live-action { padding-bottom: 28px; }
  .live-copy { max-width: 450px; }
  .tariffs-heading { grid-template-columns: 1fr; }
  .tariffs-heading > p:last-child { grid-column: 1; }
  .tariff-grid { grid-template-columns: 1fr; max-width: 600px; }
  .tariff-card, .tariff-featured { top: auto; min-height: 470px; }
  .roadmap-heading { grid-template-columns: 1fr; }
  .roadmap-track { grid-template-columns: 1fr; }
  .road-step { min-height: 250px; }
  .road-step p { margin-bottom: 34px; }
  .author { grid-template-columns: 1fr; gap: 52px; }
  .author-portrait { max-width: 440px; min-height: 500px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq-heading { position: static; }
  .payment { grid-template-columns: 1fr; gap: 48px; }
  .reviews-heading { grid-template-columns: 1fr; }
  .reviews-heading > p:last-child { grid-column: 1; }
  .review-grid { grid-template-columns: 1fr; max-width: 680px; }
}

@media (max-width: 560px) {
  .section-shell { padding: 68px 20px; }
  h1 { font-size: clamp(54px, 16.5vw, 78px); }
  h2 { font-size: clamp(48px, 15vw, 66px); }
  .hero { padding-top: 58px; }
  .product-name { font-size: clamp(68px, 19vw, 78px); letter-spacing: -.07em; }
  .hero-details { gap: 6px; }
  .hero-details span { padding: 8px 10px; font-size: 9px; }
  .hero-bottom-line { right: 20px; bottom: 17px; left: 20px; font-size: 8px; line-height: 1.45; }
  .hero-photo-wrap { min-height: 430px; margin: 10px -20px -68px; }
  .hero-photo { right: 5%; width: 84%; height: 440px; }
  .hero-photo-frame { inset: 6% 10% 0 10%; }
  .photo-sticker { right: 7%; bottom: 29%; width: 96px; height: 96px; font-size: 16px; }
  .outcome-cards { grid-template-columns: 1fr; gap: 13px; }
  .outcome-card, .card-orange, .card-graphite { min-height: 270px; transform: none; }
  .outcome-card h3 { margin-top: 48px; }
  .live { min-height: 650px; }
  .live-topline span:nth-child(2) { display: none; }
  .live-ring { right: -95px; width: 250px; height: 250px; font-size: 36px; }
  .live-intro h2 { font-size: clamp(48px, 14vw, 60px); }
  .live-proof { max-width: 300px; margin: 20px 0 10px 10px; }
  .live-proof img { border-width: 7px; box-shadow: 10px 12px 0 var(--graphite); }
  .live-proof-label { right: -8px; }
  .live-action { padding-bottom: 0; }
  .tariff-card { min-height: 450px; padding: 22px; }
  .tariff-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .tariff-head h3 { width: 100%; margin: 0 0 8px; font-size: clamp(38px, 12vw, 48px); text-align: left; }
  .tariff-card:nth-child(3) .tariff-head h3 { font-size: clamp(31px, 9.6vw, 38px); }
  .tariff-card ul { min-height: auto; }
  .roadmap-track { border-radius: 18px; }
  .author { grid-template-columns: 1fr; }
  .author-portrait { min-height: 390px; }
  .author-stamp { top: 32px; width: 98px; height: 98px; font-size: 16px; }
  .author-facts { gap: 6px; }
  .author-facts span { min-height: 92px; padding: 10px; }
  .author-facts b { font-size: 20px; }
  .reviews-heading { margin-bottom: 28px; }
  .review-grid { grid-template-columns: 1fr; }
  .review-card { padding: 14px; border-radius: 20px; }
  .review-result strong { font-size: 74px; }
  .faq-list summary { padding: 19px 0; font-size: 25px; }
  .faq-list details p { margin-right: 0; font-size: 13px; }
  .payment-link span { font-size: 38px; }
  footer { align-items: flex-start; flex-direction: column; padding: 28px 20px; }
}