.site-header { position: relative; z-index: 2; border-bottom: 1px solid rgb(29 33 43 / 11%); background: rgb(250 248 245 / 90%); }
.site-header__inner, .site-footer__inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; color: var(--color-sand); font-family: var(--font-display); font-size: clamp(.68rem, 1.3vw, .9rem); font-weight: 600; text-decoration: none; }
.section--hero { overflow: clip; padding-top: clamp(56px, 9vw, 120px); background: radial-gradient(circle at 82% 30%, rgb(122 51 66 / 15%), transparent 26%), var(--color-ivory); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr); align-items: center; gap: clamp(40px, 8vw, 112px); }
.hero h1 { margin-top: var(--space-2); color: var(--color-sand); font-size: clamp(2.4rem, 6.1vw, 5.9rem); letter-spacing: -.06em; }
.hero h2.hero__statement { max-width: 650px; margin-top: var(--space-4); color: var(--color-ink); font-size: clamp(1rem, 1.7vw, 1.35rem); }
.lead { max-width: 620px; margin-top: var(--space-3); color: var(--color-muted); font-size: clamp(1rem, 1.45vw, 1.15rem); }
.route-panel { position: relative; border: 1px solid var(--color-ink); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); background: var(--color-ink); box-shadow: var(--shadow-card); }
.route-panel::before { position: absolute; inset: 16px; border: 1px solid rgb(250 248 245 / 9%); border-radius: var(--radius-md); content: ""; pointer-events: none; }
.route { position: relative; display: grid; gap: var(--space-2); margin-top: var(--space-5); list-style: none; }
.route li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: var(--space-2); border-bottom: 1px solid rgb(250 248 245 / 15%); padding-bottom: var(--space-2); color: var(--color-ivory); font-family: var(--font-display); font-size: clamp(.85rem, 1.3vw, 1.1rem); }
.route li:last-child { border: 0; padding-bottom: 0; }
.route li span { color: var(--color-accent); font-family: var(--font-body); font-size: .75rem; }
.card-grid--outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audience-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.audience-grid .content-card { grid-column: span 2; }
.audience-grid .content-card:nth-child(4) { grid-column: 2 / span 2; }
.program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonus-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); align-items: center; gap: var(--space-5); }
.bonus-layout > * { min-width: 0; }
.gift-illustration { justify-self: end; }
.bonus-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.bonus-zone { grid-column: 1 / -1; }
.tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.faq-layout { display: grid; grid-template-columns: minmax(220px, .66fr) minmax(0, 1.25fr); gap: clamp(40px, 8vw, 120px); }
.section--final { background: radial-gradient(circle at 50% 0%, rgb(122 51 66 / 18%), transparent 36%), var(--color-ivory); text-align: center; }
.final-choice { max-width: 850px; }
.final-choice h2 { margin-inline: auto; }
.final-choice > p { max-width: 600px; margin-inline: auto; }
.final-choice__actions { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.final-choice__actions .payment-action { flex: 0 1 260px; margin: 0; padding: 0; }
.final-choice__actions .button { width: 100%; }
.site-footer { border-top: 1px solid rgb(250 248 245 / 12%); background: var(--color-ink); color: rgb(250 248 245 / 65%); font-size: .88rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.site-footer a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; color: var(--color-text); text-underline-offset: 4px; }
.service-page { min-height: 100vh; display: flex; flex-direction: column; }
.service-page main { flex: 1; display: grid; align-items: center; }
.service-page__panel { max-width: 760px; border: 1px solid rgb(29 33 43 / 18%); border-radius: var(--radius-lg); padding: clamp(28px, 6vw, 72px); background: var(--color-surface-raised); box-shadow: var(--shadow-card); }
.service-page__panel h1 { margin-top: var(--space-2); color: var(--color-sand); font-size: clamp(1.9rem, 4.4vw, 3.5rem); }
.service-page__panel > p:not(.eyebrow) { max-width: 610px; margin-top: var(--space-3); color: var(--color-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.service-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.service-page__notice { min-height: 1.55em; margin-top: var(--space-3); color: var(--color-text) !important; font-size: .95rem !important; }
.service-page__notice:empty { display: none; }
.service-page__footer { margin-top: auto; }
@media (max-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr); gap: var(--space-5); } .bonus-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 768px) { .container { width: min(calc(100% - 40px), var(--container)); } .section { padding-block: 72px; } .hero__grid, .bonus-layout, .faq-layout { grid-template-columns: minmax(0, 1fr); } .route-panel, .gift-illustration { max-width: 520px; justify-self: start; } .card-grid--outcomes, .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audience-grid .content-card, .audience-grid .content-card:nth-child(4) { grid-column: auto; } .audience-grid .content-card:last-child { grid-column: 1 / -1; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bonus-grid { grid-template-columns: minmax(0, 1fr); } .bonus-zone { grid-template-columns: minmax(0, 1fr); } .bonus-zone .tag { grid-column: auto; } .tariff-card { min-height: 0; } .site-footer__inner { min-height: 0; flex-direction: column; align-items: flex-start; padding-block: var(--space-4); } }
@media (max-width: 430px) { .container { width: auto; margin-inline: 16px; } .site-header__inner { min-height: 68px; } .site-header .button { min-height: 44px; padding-inline: 14px; } .section { padding-block: 64px; } .hero h1 { font-size: clamp(2.1rem, 13vw, 3.2rem); } .hero h2.hero__statement { font-size: .98rem; } .card-grid--outcomes, .audience-grid, .program-grid, .tariff-grid, .steps { grid-template-columns: minmax(0, 1fr); } .audience-grid .content-card:last-child { grid-column: auto; } .content-card, .program-card { min-height: 0; } .final-choice__actions { flex-direction: column; align-items: stretch; } .final-choice__actions .payment-action { flex-basis: auto; } .sticky-tariff-cta { display: flex; } .sticky-tariff-cta:not(.is-visible) { opacity: 0; pointer-events: none; transform: translateY(12px); } }
@media (max-width: 360px) { .site-header__inner { gap: 10px; } .brand { font-size: .6rem; } .site-header .button { font-size: .66rem; } .route-panel { padding: var(--space-3); } }

/* Light editorial business system */
.site-header { border-bottom-color: var(--color-border); background: rgb(250 248 245 / 92%); backdrop-filter: blur(16px); }
.brand { color: var(--color-ink); font-size: clamp(.72rem, 1.3vw, .92rem); letter-spacing: .04em; }
.section--hero { padding-top: clamp(72px, 10vw, 144px); background: radial-gradient(circle at 88% 18%, rgb(122 51 66 / 11%), transparent 28%), var(--color-ivory); }
.hero h1 { max-width: 780px; color: var(--color-ink); font-size: clamp(3.3rem, 7.1vw, 7rem); letter-spacing: -.055em; }
.hero h2.hero__statement { max-width: 690px; color: var(--color-ink); font-size: clamp(1.55rem, 2.35vw, 2.45rem); line-height: 1.03; }
.route-panel { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-ivory); box-shadow: 0 28px 70px rgb(29 33 43 / 16%); }
.route-panel::before { border-color: rgb(250 248 245 / 13%); }
.route-panel__label { color: rgb(250 248 245 / 68%); }
.route-panel h2,
.route-panel h3 { color: var(--color-ivory); }
.route-panel__note { color: rgb(250 248 245 / 66%); }
.route li { border-bottom-color: rgb(250 248 245 / 14%); color: var(--color-ivory); }
.route li span { color: rgb(250 248 245 / 60%); }
.section--final { background: radial-gradient(circle at 50% 0%, rgb(122 51 66 / 16%), transparent 38%), var(--color-ivory); }
.site-footer { border-top-color: rgb(250 248 245 / 12%); background: var(--color-ink); color: rgb(250 248 245 / 65%); }
.site-footer a { color: var(--color-ivory); }
.service-page__panel { border-color: var(--color-border); background: var(--color-surface-raised); box-shadow: var(--shadow-card); }
.service-page__panel h1 { color: var(--color-ink); }
.service-page__notice { color: var(--color-ink) !important; }
@media (max-width: 430px) {
  .hero h1 { font-size: clamp(3rem, 15.5vw, 4.35rem); }
  .hero h2.hero__statement { font-size: clamp(1.35rem, 7vw, 1.75rem); }
}

@media (max-width: 360px) {
  .section h2 { font-size: clamp(1.85rem, 10.5vw, 2.2rem); }
  .hero h1 { font-size: clamp(2.55rem, 13.5vw, 3rem); letter-spacing: -.045em; }
  .hero h2.hero__statement { font-size: 1.32rem; }
}

/* Final dark-surface contrast overrides */
.section--graphite { background: var(--color-ink); border-block-color: rgb(250 248 245 / 12%); color: var(--color-ivory); }
.section--graphite h2,
.section--graphite .content-card h3,
.section--graphite .bonus-card h3,
.section--graphite .steps h3 { color: var(--color-ivory); }
.section--graphite .eyebrow,
.section--graphite .card-number { color: rgb(250 248 245 / 72%); }
.section--graphite .content-card,
.section--graphite .bonus-card,
.section--graphite .bonus-zone { border-color: rgb(250 248 245 / 14%); background-color: rgb(250 248 245 / 6%); }
.section--graphite .content-card p:last-child,
.section--graphite .bonus-card p:not(.tag),
.section--graphite .steps p { color: rgb(250 248 245 / 72%); }

/* Hero portrait and high-clarity bonus presentation */
.hero-portrait { position: relative; align-self: end; min-height: 620px; margin: 0; }
.hero-portrait::before { position: absolute; inset: 18% 4% 4%; border-radius: 50% 50% 18px 18px; background: radial-gradient(circle at 50% 35%, rgb(122 51 66 / 18%), transparent 68%); content: ""; }
.hero-portrait img { position: relative; width: 100%; max-height: 690px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 30px rgb(29 33 43 / 14%)); }
.hero-portrait figcaption { position: absolute; right: 0; bottom: 22px; border-radius: var(--radius-sm); padding: 10px 14px; background: var(--color-ink); color: var(--color-ivory); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.section--graphite[data-track-section="bonuses"] { background: radial-gradient(circle at 82% 12%, rgb(122 51 66 / 12%), transparent 25%), var(--color-ivory); color: var(--color-ink); }
.section--graphite[data-track-section="bonuses"] h2 { color: var(--color-ink); font-size: clamp(4.4rem, 10vw, 9rem); line-height: .78; }
.section--graphite[data-track-section="bonuses"] .gift-illustration--premium { width: min(100%, 430px); max-height: 430px; object-fit: contain; filter: drop-shadow(0 24px 34px rgb(122 51 66 / 18%)); }
.section--graphite[data-track-section="bonuses"] .bonus-card { border-color: rgb(122 51 66 / 24%); background: var(--color-surface-raised); color: var(--color-ink); }
.section--graphite[data-track-section="bonuses"] .bonus-card h3 { color: var(--color-ink); }
.section--graphite[data-track-section="bonuses"] .bonus-card p { color: var(--color-muted); }
.section--graphite[data-track-section="bonuses"] .bonus-zone { border-color: rgb(122 51 66 / 34%); background: radial-gradient(circle at 85% 10%, rgb(122 51 66 / 16%), transparent 36%), var(--color-surface-raised); }
@media (max-width: 768px) { .hero-portrait { min-height: 440px; max-width: 520px; justify-self: center; } .hero-portrait img { max-height: 520px; } .section--graphite[data-track-section="bonuses"] h2 { font-size: clamp(4rem, 18vw, 7rem); } }
@media (max-width: 430px) { .hero-portrait { min-height: 360px; } .hero-portrait img { max-height: 410px; } .hero-portrait figcaption { right: 8px; bottom: 8px; font-size: .58rem; } .section--graphite[data-track-section="bonuses"] h2 { font-size: clamp(3.7rem, 21vw, 5.4rem); } }
@media (max-width: 430px) { .motion-ready [data-reveal] { opacity: 1; transform: none; } }

/* Long-form legal pages */
.legal-page { background: var(--color-ivory); }
.legal-document { max-width: 900px; padding-block: clamp(64px, 9vw, 112px); }
.legal-document > h1 { max-width: 820px; margin-top: var(--space-2); color: var(--color-ink); font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.05em; }
.legal-document__lead { max-width: 720px; color: var(--color-muted); font-size: 1.16rem; }
.legal-document__meta { margin-top: var(--space-3); color: var(--color-muted); font-size: .9rem; }
.legal-document section { margin-top: clamp(36px, 5vw, 56px); }
.legal-document h2 { color: var(--color-ink); font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.035em; }
.legal-document h3 { margin-top: var(--space-4); color: var(--color-ink); font-size: 1.18rem; }
.legal-document p, .legal-document li { max-width: 78ch; }
.legal-document ul { display: grid; gap: 8px; padding-left: 1.25rem; }
.legal-document a:not(.button) { color: var(--color-wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-document__back { margin-top: clamp(48px, 7vw, 80px); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.site-footer a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); }
.site-footer__inner > p:first-child { justify-self: start; }
.site-footer__inner nav { justify-content: center; }
.site-footer__copyright { justify-self: end; text-align: right; white-space: nowrap; }
@media (max-width: 768px) { .legal-document { padding-block: 56px 72px; } .legal-document > h1 { font-size: clamp(2.25rem, 11vw, 3.6rem); } }
@media (max-width: 768px) { .site-footer__inner { display: flex; align-items: flex-start; } .site-footer__inner nav { justify-content: flex-start; } .site-footer__copyright { text-align: left; } }

/* Final mobile composition: one calm reading flow */
@media (max-width: 768px) {
  .section { padding-block: 60px; }
  .hero__grid,
  .bonus-layout,
  .faq-layout,
  .card-grid--outcomes,
  .audience-grid,
  .program-grid,
  .tariff-grid,
  .steps { grid-template-columns: minmax(0, 1fr); }
  .audience-grid .content-card,
  .audience-grid .content-card:nth-child(4),
  .audience-grid .content-card:last-child { grid-column: auto; }
  .card-grid,
  .program-grid,
  .tariff-grid,
  .audience-grid,
  .steps { gap: 18px; margin-top: 36px; }
  .tariff-card { min-height: 0; }
  .program-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .program-route li::after { display: none; }
}

@media (max-width: 430px) {
  .container { margin-inline: 16px; }
  .site-header__inner { min-height: 72px; flex-wrap: wrap; gap: 8px 12px; padding-block: 8px; }
  .brand { min-width: 0; max-width: 116px; line-height: 1.15; }
  .site-header .button { min-height: 44px; padding-inline: 11px; font-size: .66rem; white-space: nowrap; }
  .section { padding-block: 52px; }
  .section--hero { padding-top: 52px; }
  .hero h1 { font-size: clamp(2.7rem, 12.5vw, 3.35rem); letter-spacing: -.045em; }
  .hero h2.hero__statement { font-size: clamp(1.2rem, 5.5vw, 1.45rem); line-height: 1.08; }
  .hero .lead { font-size: 1rem; }
  .hero-portrait { min-height: 0; width: min(100%, 340px); justify-self: center; }
  .hero-portrait img { display: block; max-height: 360px; margin-inline: auto; }
  .hero-portrait figcaption { position: static; width: max-content; max-width: 100%; margin: -4px auto 0; text-align: center; }
  .section h2 { font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .section--graphite[data-track-section="bonuses"] h2 { font-size: clamp(2.9rem, 16vw, 4.2rem); line-height: .88; }
  .content-card,
  .program-card,
  .bonus-card,
  .tariff-card { padding: 22px 20px; }
  .bonus-zone { padding: 20px; }
  .bonus-card__quantity { font-size: clamp(1.8rem, 10vw, 2.6rem) !important; overflow-wrap: anywhere; }
  .program-flow { font-size: .72rem; overflow-wrap: anywhere; }
  .program-route { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .program-route li { grid-template-columns: 18px minmax(0, 1fr); justify-items: start; text-align: left; }
  .program-route li::before { grid-row: 1; }
  .program-route li::after { display: none; }
  .tariff-card__price { font-size: clamp(2.7rem, 15vw, 3.6rem); }
  .bonus-cta .button { width: 100%; padding-inline: 14px; font-size: .74rem; overflow-wrap: anywhere; }
  .sticky-tariff-cta { right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 16px; max-width: 480px; min-height: 54px; margin-inline: auto; }
  .site-footer__inner { gap: 16px; padding-block: 28px; }
  .site-footer__inner nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer__inner nav a { min-height: 40px; }
  .site-footer__copyright { margin-top: 8px; white-space: normal; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 2.45rem; }
  .hero h2.hero__statement { font-size: 1.15rem; }
}