:root {
  --spx-green: #0d603d;
  --spx-green-deep: #073927;
  --spx-green-black: #062e22;
  --spx-gold: #d4af37;
  --spx-yellow: #f9c74f;
  --spx-light: #f2f2ee;
  --spx-paper: #f6f1e7;
  --spx-white: #ffffff;
  --spx-black: #111111;
  --spx-muted: #6d6a63;
  --spx-accent: #c8753e;
  --spx-accent-deep: #9d4228;
  --spx-border: rgba(17, 17, 17, 0.11);
  --shadow-soft: 0 18px 50px rgba(17, 17, 17, 0.10);
  --shadow-card: 0 10px 28px rgba(17, 17, 17, 0.10);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --container: 1180px;
  --container-medium: 920px;
  --container-narrow: 820px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--spx-black); background: var(--spx-paper); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.container--medium { width: min(calc(100% - 40px), var(--container-medium)); }
.container--narrow { width: min(calc(100% - 40px), var(--container-narrow)); }
.section { position: relative; padding: 104px 0; overflow: hidden; }
.section--light { background: radial-gradient(circle at 25% 35%, rgba(255,255,255,.85), transparent 32%), linear-gradient(145deg, rgba(255,255,255,.58), rgba(246,241,231,.94)), var(--spx-paper); }
.section--dark { color: var(--spx-white); background: radial-gradient(circle at 65% 25%, rgba(13,96,61,.3), transparent 35%), linear-gradient(160deg, var(--spx-green-deep), var(--spx-green-black)); }
.section--accent { color: var(--spx-white); background: radial-gradient(circle at 55% 30%, rgba(255,255,255,.10), transparent 22%), linear-gradient(180deg, #d37a4a, #c66d3d 62%, #b85f34); }
.display { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
.display--xl { font-size: clamp(2.6rem, 5vw, 5rem); }
.display--lg { font-size: clamp(2.15rem, 4vw, 3.8rem); }
.display--md { font-size: clamp(1.85rem, 3vw, 2.9rem); }
.display--sm { font-size: clamp(1.55rem, 2.4vw, 2.15rem); }
.section-heading { margin-bottom: 52px; }
.section-heading--center { text-align: center; margin-inline: auto; }
.section-heading--inverse { color: var(--spx-white); }
.section-heading .display { max-width: 820px; margin-inline: auto; }
.section-accent { margin: 12px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.75rem, 3vw, 3.25rem); font-weight: 700; color: var(--spx-yellow); }
.lead { margin: 18px auto 0; max-width: 720px; color: var(--spx-muted); font-size: 1.05rem; }
.lead--inverse { color: rgba(255,255,255,.82); }
.text-accent { color: var(--spx-accent); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 40px; padding: 0 16px; border-left: 3px solid var(--spx-green); font-weight: 800; letter-spacing: .16em; color: var(--spx-green-deep); }
.brand-mark--small { min-width: 56px; height: 30px; font-size: .82rem; }
.brand-mark--footer { color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.3); }
.eyebrow { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--soft { color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); }
.eyebrow--outline { color: var(--spx-yellow); border: 1px solid var(--spx-accent); }
.eyebrow--outline-dark { color: var(--spx-accent-deep); border: 1px solid rgba(200,117,62,.55); }
.eyebrow--accent { color: var(--spx-yellow); padding-inline: 0; }
.media-placeholder { position: relative; display: grid; place-items: center; min-height: 220px; overflow: hidden; border-radius: var(--radius-md); color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)), linear-gradient(145deg, var(--spx-green), var(--spx-green-deep)); }
.media-placeholder::before,.media-placeholder::after { content: ""; position: absolute; width: 140%; height: 1px; background: rgba(255,255,255,.14); transform: rotate(32deg); }
.media-placeholder::after { transform: rotate(-32deg); }
.media-placeholder > span { position: relative; z-index: 1; }
.hero { padding-top: 38px; padding-bottom: 96px; min-height: 900px; }
.hero__inner { text-align: center; }
.hero .brand-mark { margin-bottom: 56px; }
.hero .display { max-width: 900px; margin-inline: auto; }
.pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 720px; margin: 34px auto 48px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 22px; border: 1px solid rgba(212,175,55,.55); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--spx-green-deep); box-shadow: 0 5px 16px rgba(17,17,17,.08); font-weight: 600; }
.pill--center { flex-basis: auto; }
.before-after { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 620px; margin: 0 auto; }
.comparison-card { position: relative; margin-top: 26px; }
.comparison-label { position: absolute; z-index: 2; top: -23px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 15px; border-radius: 999px; color: #fff; font-weight: 800; font-size: .78rem; }
.comparison-label--before { background: #b92c28; }
.comparison-label--after { background: #2d843b; }
.media-placeholder--portrait { min-height: 430px; border-radius: 18px; }
.comparison-arrow { position: absolute; z-index: 3; left: 50%; bottom: -30px; transform: translateX(-50%) rotate(10deg); color: var(--spx-accent); font-size: 4.5rem; line-height: 1; }
.proof { padding-top: 116px; padding-bottom: 110px; }
.transition-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 86px; height: 86px; border: 6px solid var(--spx-paper); border-radius: 50%; color: var(--spx-accent); background: #f4eadc; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.media-placeholder--proof { min-height: 360px; background: linear-gradient(160deg, #fafafa, #d9d9d9); color: #777; border-radius: 16px; }
.pain { padding-top: 58px; padding-bottom: 104px; }
.pain-scene { position: relative; max-width: 500px; margin: 24px auto 48px; }
.media-placeholder--pain { min-height: 600px; border-radius: 16px; background: linear-gradient(150deg, #6d4635, #392a22); }
.thought { position: absolute; z-index: 2; width: 160px; padding: 14px 16px; border-radius: 12px; background: #8d1f1d; color: #fff; box-shadow: 0 10px 30px rgba(68,20,17,.25); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.thought--1 { left: -48px; top: 48px; }.thought--2 { right: -58px; top: 48px; }.thought--3 { left: -62px; top: 250px; }.thought--4 { left: -26px; bottom: 92px; }.thought--5 { right: -44px; bottom: 86px; }
.pain-closing { max-width: 660px; margin: 0 auto 28px; text-align: center; font-size: .95rem; font-weight: 800; text-transform: uppercase; }
.question-card { max-width: 520px; margin: 0 auto; padding: 32px 34px; border-radius: 16px; background: #fff; color: var(--spx-black); text-align: center; box-shadow: var(--shadow-card); }
.question-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; color: #161616; background: var(--spx-yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 11px; font-weight: 900; }
.question-card h3 { margin: 0 0 12px; }.question-card p { margin: 0; color: #5d5d5d; }.section-final-line { margin: 28px auto 0; text-align: center; font-weight: 800; font-size: 1.12rem; }
.product-intro { padding-bottom: 50px; }.deliverable-stack { display: grid; gap: 30px; }.deliverable-card { display: grid; grid-template-columns: 44% 56%; min-height: 330px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft); }.deliverable-card__copy { display: flex; flex-direction: column; justify-content: center; padding: 52px; }.deliverable-card__copy h3 { margin: 0 0 12px; color: var(--spx-green-deep); font-size: 1.45rem; }.deliverable-card__copy p { margin: 0; color: var(--spx-muted); }.deliverable-card__visual { min-height: 330px; border-radius: 0; }.deliverable-card__visual--accent { background: linear-gradient(145deg, #c4632e, #9d3c1c); }.deliverable-card__visual--dark { background: linear-gradient(145deg, var(--spx-green), var(--spx-green-black)); }.deliverable-card--reverse { grid-template-columns: 56% 44%; }
.contents { padding-top: 48px; }.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; max-width: 760px; margin: 0 auto; }.content-item { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 16px; border: 1px solid rgba(212,175,55,.38); border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(17,17,17,.04); color: var(--spx-green-deep); font-size: .9rem; font-weight: 700; }.content-thumb { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; color: #fff; background: var(--spx-green); font-size: .72rem; }
.bonus__header { padding: 52px 0 34px; }.bonus__header .section-heading { margin-bottom: 0; }.bonus__header h2 { margin-top: 12px; }.bonus__body { padding: 66px 0 104px; }.bonus-card { display: grid; grid-template-columns: 46% 54%; max-width: 760px; min-height: 480px; margin: 0 auto; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft); }.bonus-card__visual { min-height: 480px; border-radius: 0; background: linear-gradient(150deg, var(--spx-green-deep), var(--spx-green-black)); }.bonus-card__copy { padding: 56px 48px; }.bonus-card__copy h3 { margin: 18px 0 14px; color: var(--spx-green-deep); }.bonus-card__copy p { color: var(--spx-muted); }.bonus-card__copy small { display: block; margin-top: 18px; color: #888; font-style: italic; }.check-list { list-style: none; padding: 0; margin: 22px 0 0; }.check-list li { margin: 8px 0; color: var(--spx-green-deep); font-weight: 700; }.check-list li::before { content: "✓"; margin-right: 8px; }
.audience { padding-top: 90px; }.audience-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }.audience-card { padding: 42px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.035); }.spark-list { list-style: none; padding: 0; margin: 30px 0 0; }.spark-list li { margin: 18px 0; color: rgba(255,255,255,.88); }.spark-list li::before { content: "✦"; color: var(--spx-yellow); margin-right: 10px; }.media-placeholder--audience { min-height: 500px; border-radius: 20px; background: linear-gradient(150deg, #7c6a54, #302b25); }.rule { width: 74%; margin: 52px auto 0; border: 0; border-top: 1px solid rgba(17,17,17,.12); }.rule--dark { border-color: rgba(255,255,255,.12); }.audience-closing { max-width: 640px; margin: 34px auto 0; text-align: center; font-family: "Playfair Display", Georgia, serif; font-size: 1.55rem; font-weight: 700; }
.recap { padding-bottom: 70px; }.value-stack { max-width: 760px; margin: 0 auto; padding: 34px 42px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft); }.value-row,.value-total { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 17px 0; }.value-row { border-bottom: 1px solid var(--spx-border); color: var(--spx-green-deep); font-weight: 700; }.value-row strong { color: var(--spx-accent-deep); text-decoration: line-through; }.value-total { margin-top: 14px; font-weight: 800; }.value-total strong { color: var(--spx-accent-deep); font-size: 1.45rem; }.price-bridge { max-width: 640px; margin: 48px auto 0; text-align: center; font-family: "Playfair Display", Georgia, serif; color: var(--spx-green-deep); font-size: 1.9rem; font-weight: 700; line-height: 1.24; }
.offer { padding: 66px 0; }.offer-card { display: grid; grid-template-columns: 50% 50%; max-width: 820px; margin: 0 auto; overflow: hidden; border-radius: 20px; background: #fff; }.offer-card--shadow { box-shadow: var(--shadow-soft); }.offer-card__bundle { min-height: 430px; border-radius: 0; background: linear-gradient(145deg, #cc6937, #b54e2a); }.offer-card__content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px; text-align: center; color: var(--spx-black); }.offer-kicker { margin-top: 18px; font-size: .82rem; }.offer-price { margin-top: 4px; color: var(--spx-green-deep); font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 800; line-height: 1; }.offer-cash { margin: 10px 0 22px; color: var(--spx-muted); }.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; width: 100%; padding: 12px 20px; border-radius: 999px; background: #25a94e; color: #fff; text-decoration: none; font-weight: 800; font-size: .88rem; box-shadow: 0 9px 25px rgba(37,169,78,.28); }.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: 20px; font-size: .66rem; color: #6f6f6f; }.final-offer { padding-top: 32px; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.step-card { padding: 34px 28px; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-card); text-align: center; }.step-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #f4e9e2; color: var(--spx-green-deep); font-weight: 800; }.step-card h3 { margin: 0 0 10px; color: var(--spx-green-deep); font-size: 1rem; text-transform: uppercase; }.step-card p { margin: 0; color: var(--spx-muted); }
.authority-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: center; }.media-placeholder--authority { min-height: 520px; border-radius: 20px; background: linear-gradient(150deg, #5d5044, #28231f); }.authority-copy h2 { margin-top: 14px; }.authority-copy em { color: var(--spx-yellow); font-style: italic; }.authority-copy p { color: rgba(255,255,255,.78); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 720px; margin: 0 auto; }.choice-card { min-height: 260px; padding: 36px; border-radius: 18px; border: 1px solid rgba(212,175,55,.32); }.choice-card--neutral { background: rgba(255,255,255,.92); }.choice-card--positive { color: #fff; background: var(--spx-green-deep); border-color: var(--spx-green-deep); }.choice-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }.choice-emoji { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--spx-yellow); color: #111; font-weight: 900; }.choice-pill { padding: 6px 14px; border-radius: 999px; background: #4b4b4b; color: #fff; font-size: .72rem; font-weight: 700; }.choice-pill--accent { background: var(--spx-accent); }.choice-card p { font-size: 1rem; line-height: 1.6; }.choice-kicker { text-align: center; margin: 30px 0 10px; font-weight: 800; }.choice-closing { max-width: 620px; margin: 0 auto; text-align: center; font-family: "Playfair Display", Georgia, serif; color: var(--spx-green-deep); font-size: 1.8rem; font-weight: 700; }
.faq { padding-top: 86px; padding-bottom: 90px; }.faq-grid { display: grid; grid-template-columns: 280px 1fr; gap: 70px; align-items: start; }.accordion { border-top: 1px solid rgba(255,255,255,.12); }.accordion-item { border-bottom: 1px solid rgba(255,255,255,.12); }.accordion-trigger { display: flex; justify-content: space-between; gap: 30px; width: 100%; padding: 22px 0; border: 0; color: #fff; background: transparent; text-align: left; cursor: pointer; font-weight: 600; }.accordion-item.is-open .accordion-trigger { color: var(--spx-yellow); }.accordion-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }.accordion-panel { display: none; padding: 0 44px 22px 0; color: rgba(255,255,255,.68); }.accordion-panel p { margin: 0; }.accordion-item.is-open .accordion-panel { display: block; }
.footer { padding: 62px 0 24px; color: rgba(255,255,255,.48); background: #1e1e1e; text-align: center; }.footer__inner { display: flex; flex-direction: column; align-items: center; }.footer__legal { max-width: 700px; font-size: .74rem; line-height: 1.6; }.rule--footer { width: 100%; border-color: rgba(255,255,255,.08); }.footer__copyright { margin-top: 22px; font-size: .72rem; }
@media (max-width: 920px) { .section { padding: 82px 0; }.hero { min-height: auto; }.proof-grid { grid-template-columns: repeat(2, 1fr); }.deliverable-card,.deliverable-card--reverse,.bonus-card,.audience-grid,.authority-grid,.offer-card,.faq-grid { grid-template-columns: 1fr; }.deliverable-card--reverse .deliverable-card__copy { order: 2; }.deliverable-card--reverse .deliverable-card__visual { order: 1; }.faq-grid { gap: 36px; }.faq-grid header { text-align: center; } }
@media (max-width: 680px) { .container,.container--medium,.container--narrow { width: min(calc(100% - 28px), var(--container)); }.section { padding: 68px 0; }.hero { padding-top: 28px; }.hero .brand-mark { margin-bottom: 34px; }.pill-row { margin-top: 26px; }.before-after { grid-template-columns: 1fr 1fr; gap: 8px; }.media-placeholder--portrait { min-height: 300px; }.comparison-label { font-size: .62rem; padding: 6px 10px; }.comparison-arrow { font-size: 3.4rem; bottom: -26px; }.proof-grid { grid-template-columns: 1fr 1fr; gap: 12px; }.media-placeholder--proof { min-height: 260px; }.pain-scene { max-width: 310px; }.media-placeholder--pain { min-height: 480px; }.thought { width: 128px; padding: 10px 11px; font-size: .68rem; }.thought--1 { left: -8px; }.thought--2 { right: -8px; }.thought--3 { left: -8px; top: 210px; }.thought--4 { left: 4px; bottom: 70px; }.thought--5 { right: 2px; bottom: 72px; }.deliverable-card__copy,.bonus-card__copy { padding: 34px 28px; }.content-grid,.choice-grid { grid-template-columns: 1fr; }.step-grid { grid-template-columns: 1fr; }.offer .container--medium,.final-offer .container--medium { width: min(calc(100% - 40px), 400px); }.offer-card { width: 100%; max-width: 400px; border-radius: 24px; }.offer-card__bundle { height: 285px; min-height: 285px; }.offer-card__content { min-height: 350px; padding: 32px 20px 24px; }.offer-card__content .display--sm { max-width: 320px; }.button { max-width: 320px; }.trust-row { max-width: 320px; gap: 6px; }.value-stack { padding: 24px 20px; }.value-row,.value-total { align-items: flex-start; } }