@charset "UTF-8";
/* Landing only. Design lengths use a 16px reference; media queries retain viewport breakpoints. */
html.landing-page { font-size: clamp(0.875rem, calc(0.839285714rem + 0.178571429vw), 1rem); }

@font-face { font-family: Manrope; src: url('/fonts/manrope.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 4.5rem; --page-gutter: 3rem; --radius-control: 0.5rem; --radius-card: 1rem; color-scheme: light; --black: #0c0b05; --yellow: #fbd100; --white: #fff; --bg: #f7f7f4; --muted: #72716b; --line: #e7e6df; font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*, *::before, *::after { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--black); font-size: 0.875rem; line-height: 1.6; }
button, input, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-weight: 700; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 0.1875rem solid #a58900; outline-offset: 0.25rem; }
h1:focus, h2:focus, main:focus { outline: none; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: 81rem; padding-inline: var(--page-gutter); align-self: center; }
.icon { display: block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -6.25rem; left: 1.25rem; z-index: 10; padding: var(--space-3) var(--space-4); background: var(--yellow); border-radius: var(--radius-control); }
.skip-link:focus { top: 0.75rem; }
.header-inner, .brand, .header-nav { display: flex; align-items: center; }
.brand { gap: var(--space-2); white-space: nowrap; }
.button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-control); font-size: 0.8125rem; line-height: 1.5; font-weight: 700; white-space: nowrap; transition: background .18s, transform .18s, border-color .18s; }
.button:hover { transform: translateY(-0.0625rem); }
.button:active { transform: translateY(0); }
.button .icon { width: 1.125rem; height: 1.125rem; }
.button-primary { background: var(--yellow); color: var(--black); }
.button-primary:hover { background: #edc500; }
.button-dark { background: var(--black); color: var(--white); }
.button-dark:hover { background: #29271c; }
.stories-section { --stories-gutter: max(3rem, calc((100% - 75rem) / 2)); --story-width: 21.75rem; padding: var(--space-6) 0 var(--space-6); background: var(--black); color: var(--yellow); scroll-margin-top: 0; }
.stories-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.stories-heading h2 { font-size: 1.9375rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.08125rem; }
.stories-controls { display: flex; gap: var(--space-2); }
.icon-button { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--white); padding: 0; }
.icon-button .icon { width: 1rem; height: 1rem; }
.icon-button:hover { background: #f0efe9; }
.icon-button:disabled { opacity: .3; }
.stories-controls .icon-button { width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--yellow); background: none; border-color: #fbd10045; }
.stories-controls .icon-button:hover { background: #fbd10019; }
.stories-track { position: relative; display: flex; gap: var(--space-4); width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: var(--space-2) 0 var(--space-2) var(--stories-gutter); scroll-snap-type: x proximity; scroll-padding-left: var(--stories-gutter); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: auto; }
.stories-track::after { content: ''; flex: 0 0 3rem; pointer-events: none; }
.stories-track::-webkit-scrollbar { display: none; }
.story-slide { flex: 0 0 var(--story-width); width: var(--story-width); min-width: 0; scroll-snap-align: start; }
.stories-track .story-card { cursor: pointer; }
.stories-track.is-scrubbing { scroll-snap-type: none; }
.story-card { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; aspect-ratio: 9 / 16; min-height: 0; padding: var(--space-5); border: 1px solid #fbd10030; border-radius: var(--radius-card); text-align: left; white-space: normal; overflow: hidden; transition: transform .2s; }
button.story-card:hover { transform: translateY(-0.1875rem); }
.story-card::before { content: none; }
.story-card:has(.story-placeholder) { background: #eeede6; border-color: #e3e0d4; }
.story-placeholder { display: block; flex: 1; width: 100%; }
.story-yellow { background: var(--yellow); color: var(--black); }
.story-black { background: #17150b; color: var(--yellow); }
.story-black::before { background: linear-gradient(137deg, transparent 14%, #fbd1000c 14%, #fbd1000c 32%, transparent 32%, transparent 57%, #fbd10010 57%, #fbd10010 76%, transparent 76%); }
.story-white { background: #eeece3; color: var(--black); }
.story-white::before { background: linear-gradient(137deg, transparent 14%, #fbd10050 14%, #fbd10050 32%, transparent 32%, transparent 57%, #fbd10075 57%, #fbd10075 76%, transparent 76%); }
.story-card.has-media { padding: 0; background: var(--black); }
.story-card.has-media::before { content: none; }
.story-media { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; background: var(--black); }
.stories-track .story-media { pointer-events: none; }
.story-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #0c0b0599; color: white; font-size: 1.4375rem; pointer-events: none; }
.stories-footer { display: flex; align-items: center; gap: var(--space-5); }
.stories-scroll { display: block; flex: 1; min-width: 0; height: 1.5rem; padding: 0; border: 0; background: transparent; accent-color: var(--yellow); cursor: pointer; -webkit-appearance: none; appearance: none; }
.stories-scroll::-webkit-slider-runnable-track { height: 0.1875rem; background: #fbd10033; border-radius: var(--radius-control); }
.stories-scroll::-webkit-slider-thumb { width: 4rem; height: 0.3125rem; border: 0; border-radius: var(--radius-control); background: var(--yellow); -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.stories-scroll::-moz-range-track { height: 0.1875rem; background: #fbd10033; border-radius: var(--radius-control); }
.stories-scroll::-moz-range-thumb { width: 4rem; height: 0.3125rem; border: 0; border-radius: var(--radius-control); background: var(--yellow); cursor: ew-resize; }
.stories-scroll:disabled { opacity: .3; cursor: default; }
.story-dialog { width: min(26.25rem, calc(100vw - 2rem), calc((100dvh - 8.5rem) * .5625)); max-height: calc(100dvh - 1.5rem); padding: 2.75rem 0 3.25rem; border-radius: 0; overflow: visible; border: 0; background: transparent; color: white; }
.story-viewer-frame { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--black); color: white; }
.story-dialog::backdrop { background: #0c0b05e0; }
.story-dialog .story-card { aspect-ratio: 9 / 16; min-height: 0; border: 0; border-radius: 0; padding: var(--space-7) var(--space-5) var(--space-9); }
.story-dialog .story-card.has-media { padding: 0; }
.story-viewer-progress { position: absolute; top: 0.8125rem; left: 1rem; right: 1rem; z-index: 2; display: flex; gap: var(--space-1); }
.story-viewer-progress > span { height: 0.1875rem; flex: 1; border-radius: var(--radius-control); background: currentColor; opacity: .2; }
.story-viewer-progress > span.active { opacity: 1; }
.story-dialog.is-yellow, .story-dialog.is-white { color: white; }
.story-close { position: absolute; top: 0; right: 0; z-index: 2; background: transparent; color: inherit; border-color: currentColor; border-radius: 50%; }
.story-close:hover { background: #ffffff25; }
.story-viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; }
.story-viewer-controls > .icon-button { width: 2.25rem; height: 2.25rem; background: none; border-color: currentColor; border-radius: 50%; color: inherit; }
.story-viewer-controls > .icon-button:hover { background: #ffffff25; }
#story-viewer-count { font-size: 0.6875rem; font-weight: 600; }
.site-footer { background: #0a0a0a; color: #ffffffb3; }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-7); padding-block: var(--space-8) var(--space-6); }
.footer-columns { display: flex; align-items: flex-start; gap: var(--space-7); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; flex: 2 1 0; gap: 1.25rem; min-width: 0; }
.footer-brand-link { display: inline-flex; }
.site-footer .footer-logo { display: block; width: auto; height: 1.75rem; max-width: 100%; filter: brightness(0) invert(1); }
.footer-email { font-size: 0.875rem; line-height: 1.6; color: #ffffff8c; }
.footer-email a { color: var(--white); }
.footer-column { display: flex; flex-direction: column; flex: 1 1 0; gap: 1.25rem; min-width: 0; }
.footer-column h2 { color: var(--white); font-size: 0.8125rem; line-height: 1.5; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.footer-links a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; max-width: 100%; font-size: 0.9375rem; line-height: 1.6; }
.site-footer a { transition: color .15s ease; }
.site-footer a:hover { color: var(--yellow); }
.site-footer a:focus-visible { outline-color: var(--yellow); }
.footer-new { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0.125rem 0.375rem; background: var(--yellow); color: var(--black); border-radius: 0.25rem; font-size: 0.5625rem; line-height: 1.2; font-weight: 800; letter-spacing: .06em; }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid #ffffff1a; font-size: 0.8125rem; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.footer-legal > span { color: #ffffff47; }
.footer-copy { max-width: 35rem; color: #ffffff80; line-height: 1.5; }
@media (max-width: 900px) {
  .footer-columns { flex-wrap: wrap; gap: var(--space-6); }
  .footer-brand, .footer-column { flex: 1 1 calc(50% - var(--space-4)); }
}
@media (max-width: 600px) {
  .footer-inner { gap: var(--space-6); padding-block: var(--space-7) var(--space-5); }
  .footer-brand, .footer-column { flex-basis: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
dialog { width: min(28.75rem, calc(100% - 2rem)); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-card); max-height: calc(100dvh - 2.5rem); color: var(--black); overflow-y: auto; box-shadow: 0 1.5625rem 5.625rem #0c0b0530; }
dialog::backdrop { background: #0c0b0577; backdrop-filter: blur(0.3125rem); }
dialog[open] { animation: modal-in .18s ease-out; }
body:has(dialog[open]) { overflow: hidden; }
dialog h2 { font-size: 1.6875rem; font-weight: 750; letter-spacing: -0.0625rem; line-height: 1.3; }
.toast { display: flex; align-items: center; gap: var(--space-2); position: fixed; bottom: 1.5625rem; left: 50%; transform: translateX(-50%); max-width: calc(100% - 2rem); width: max-content; z-index: 20; border: 1px solid #fbd10038; border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--black); color: var(--yellow); box-shadow: 0 0.5rem 1.5625rem #0c0b0525; font-size: 0.75rem; }
.toast .icon { width: 1.0625rem; height: 1.0625rem; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(0.4375rem); }
  to { opacity: 1; transform: translateY(0); }
}
:where(body, main, #landing-view, .site-header, .site-footer) { display: flex; flex-direction: column; }
:where(.offer-card, .stories-section, .stories-heading > div:first-child, .referral-card, .stat-card, .cabinet, .cabinet-sidebar, .materials-panel, .rules-page, .rules-body, .rules-body section, #application-form-view, #application-form, .form-field, .success-view, .story-card) { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.stories-heading > div:first-child, .rules-body section { gap: var(--space-2); }
.stories-section { gap: var(--space-4); }
.story-card { gap: var(--space-4); }
.story-dialog .story-card { gap: var(--space-3); }
dialog { margin: auto; }
.button { border-radius: var(--radius-control); gap: var(--space-3); }
.stories-scroll::-webkit-slider-thumb { transform: translateY(-0.0625rem); }
@media (max-width: 1190px) {
  :root { --page-gutter: 2rem; }
  .stories-section { --stories-gutter: 2rem; --story-width: 20rem; }
  .story-card { padding: var(--space-5); }
}
@media (max-width: 900px) {
  :root { --page-gutter: 1.5rem; }
  .stories-section { --stories-gutter: 1.5rem; --story-width: 18.75rem; }
}
@media (max-width: 680px) {
  :root { --page-gutter: 1.25rem; }
  .brand { gap: var(--space-1); }
  .stories-section { --stories-gutter: 1.25rem; --story-width: min(80vw, 20rem); padding: var(--space-5) 0 var(--space-5); }
  .stories-heading { gap: var(--space-3); }
  .stories-heading h2 { font-size: 1.5625rem; letter-spacing: -0.0625rem; }
  .stories-controls { gap: var(--space-1); }
  .stories-controls .icon-button { width: 1.875rem; height: 1.875rem; }
  .stories-controls .icon-button .icon { width: 0.875rem; height: 0.875rem; }
  .stories-track { gap: var(--space-3); }
  .stories-track::after { flex-basis: 1.25rem; }
  .story-card { padding: var(--space-5); }
  .stories-footer { gap: var(--space-4); }
  .stories-scroll::-webkit-slider-thumb { width: 3rem; }
  .stories-scroll::-moz-range-thumb { width: 3rem; }
  .story-dialog .story-card { padding: var(--space-7) var(--space-5) var(--space-9); }
  dialog { padding: var(--space-5) var(--space-5); border-radius: var(--radius-card); }
  dialog h2 { font-size: 1.5625rem; }
  .toast { font-size: 0.6875rem; padding: var(--space-3) var(--space-4); bottom: 1.25rem; }
}
@media (max-width: 370px) {
  :root { --page-gutter: 1rem; }
  .stories-heading h2 { font-size: 1.4375rem; }
  .stories-section { --stories-gutter: 1rem; }
  .stories-track::after { flex-basis: 1rem; }
  .story-card { padding: var(--space-4); }
}
@media (max-height: 650px) {
  .story-dialog { width: min(21.25rem, calc(100% - 2rem), calc((100dvh - 8.5rem) * .5625)); }
  .story-dialog .story-card { padding-top: var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.step-register-link { display: inline; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: .12em; }
@media (min-width: 681px) {
  .stories-track { scroll-snap-type: none; }
  .story-slide { scroll-snap-align: none; }
}

[data-content-key] { white-space: pre-line; }
.program-section { display: flex; flex-direction: column; gap: var(--space-7); padding-block: 0 var(--space-7); }
.program-offer { --overlap: var(--space-7); display: flex; flex-direction: column; gap: 0; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: #008bfd; }
.program-header { display: flex; flex-direction: column; width: 100%; height: 3rem; flex-shrink: 0; min-width: 0; }
.program-header-inner { padding-inline: 6rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 100%; min-width: 0; }
.program-header .brand, .program-header .header-login { flex-shrink: 0; }
.program-header .brand-logo { width: auto; height: 1.25rem; }
.program-intro, .bonus-section, .program-how, .program-heading,
.discount-section, .program-connect-actions { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.program-intro { position: relative; isolation: isolate; overflow: visible; align-items: flex-start; justify-content: center; min-height: calc(27.5rem - var(--overlap)); padding: var(--space-7); color: var(--white); }
.program-intro-photo { position: absolute; top: 0; right: 0; z-index: -1; display: flex; height: calc(100% + var(--overlap)); width: max-content; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 50%, #000 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.program-intro-photo img { display: block; flex: none; width: auto; height: 100%; object-fit: contain; }
.program-intro-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: 68%; min-width: 0; }
.program-intro-heading { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.program-intro-heading > p { max-width: 26.875rem; font-size: 1.125rem; font-weight: 500; line-height: 1.6; color: var(--white); }
.hero-accent { color: var(--white); }
.program-intro h1 { max-width: 47.5rem; font-size: 3.5rem; line-height: 1; letter-spacing: -0.0875rem; font-weight: 750; }
.program-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.program-actions .button { min-width: 10.5rem; }
.program-intro .program-actions { gap: 0.5rem; }
.program-intro .button-primary { background: var(--white); color: var(--black); }
.program-intro .button-primary:hover { background: #f1f1ee; }
.program-heading { gap: var(--space-2); }
.program-section h2, .discount-section h2, .program-connect h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.0375rem; line-height: 1.35; }
.bonus-section { gap: 2rem; position: relative; isolation: isolate; overflow: hidden; padding: 3rem; border-radius: var(--radius-card); background: var(--white); color: var(--black); }
.bonus-section > .bonus-decoration { display: none; }
.bonus-decoration { --bonus-angle: 0deg; position: absolute; top: 75%; right: calc(-25% - 1.5rem); z-index: -1; display: block; width: auto; height: calc(200% + 6rem); max-width: 124%; object-fit: contain; object-position: right center; pointer-events: none; user-select: none; transform-origin: right center; transform: translateY(-50%) rotate(var(--bonus-angle)); animation: bonus-breathe 12s ease-in-out infinite; }
.bonus-decoration-secondary { --bonus-angle: -9deg; top: calc(75% + 4.5rem); right: calc(-25% - 5rem); opacity: .65; animation-delay: -6s; }
@keyframes bonus-breathe {
  0%,100% { transform: translateY(-50%) rotate(var(--bonus-angle)) scale(1); }
  50% { transform: translateY(-50%) rotate(var(--bonus-angle)) scale(1.02); }
}
.bonus-levels { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
.bonus-level { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-5); border-radius: var(--radius-control); background: #f4f4f7; }
.bonus-level strong { display: inline-flex; align-items: center; padding: 0; color: var(--black); font-size: clamp(2.375rem, 4vw, 3.25rem); line-height: 1.1; font-weight: 750; letter-spacing: -0.0375rem; }
.bonus-level > span { font-size: 0.9375rem; color: #666861; }
.bonus-level-top { background: var(--yellow); color: var(--black); }
.bonus-level-top strong { color: var(--black); }
.bonus-level-top > span { color: var(--black); }
.program-steps { display: flex; gap: var(--space-4); list-style: none; padding: 0; }
.program-step-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex: 1 1 0; min-width: 0; padding: var(--space-5); border-radius: var(--radius-card); background: var(--yellow); color: var(--black); }
.program-step-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); flex: 1 1 0; min-width: 0; }
.program-step-number { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-2); border-radius: 0.25rem; background: var(--black); color: var(--yellow); font-size: 0.9375rem; font-weight: 700; letter-spacing: .08em; }
.program-connect-inner { display: flex; flex-direction: column; flex: 0 0 20rem; width: 20rem; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); background: var(--yellow); border-radius: var(--radius-card); }
.program-connect-actions { align-items: flex-start; gap: var(--space-2); flex-shrink: 0; }
@media (min-width: 901px) {
  .program-connect-inner h2 { font-size: 1.25rem; }
}
@media (max-width: 900px) {
  .bonus-level { padding: var(--space-4); }
  .program-connect-inner { flex: auto; width: 100%; gap: var(--space-6); }
}
@media (max-width: 680px) {
  .program-section { padding-block: 0 var(--space-6); gap: var(--space-6); }
  .program-offer { --overlap: var(--space-5); }
  .program-intro h1 { font-size: 1.875rem; letter-spacing: -0.05rem; }
  .program-intro { min-height: calc(35rem - var(--overlap)); justify-content: flex-end; padding: var(--space-5); }
  .program-intro-photo { bottom: auto; width: min(100%, 23.75rem); height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%); }
  .program-intro-photo img { width: 100%; height: auto; }
  .program-intro-copy { max-width: 100%; gap: var(--space-4); }
  .program-actions { gap: var(--space-3); }
  .program-section h2, .discount-section h2, .program-connect h2 { font-size: 1.3125rem; }
  .bonus-section { padding: 3rem; }
  .bonus-decoration { width: 176%; height: auto; max-width: none; }
  .bonus-decoration-secondary { top: calc(75% + 2.5rem); right: calc(-25% - 3.5rem); }
  .bonus-levels { gap: var(--space-3); }
  .bonus-level { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .bonus-level strong { font-size: 2.375rem; }
  .bonus-level > span { font-size: 0.875rem; text-align: right; }
  .program-step-card { padding: var(--space-5); }
  .program-step-copy { gap: var(--space-4); }
  .program-steps { flex-direction: column; }
  .program-connect-inner { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .program-connect-actions { align-items: flex-start; }
}
.brand-logo { display: block; width: 8.25rem; height: auto; }
.footer-logo { display: block; width: 7.25rem; height: auto; }
.bonus-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); }
.bonus-terms { flex: 1 1 0; min-width: 0; color: #666861; font-size: 0.875rem; line-height: 1.35; }
@media (max-width: 680px) {
  .bonus-footer { flex-direction: column; align-items: stretch; gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-decoration { animation: none; }
}
.program-how-caption { color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.program-how-heading { display: flex; flex-direction: column; gap: 0.25rem; }
.program-intro-copy { gap: 4rem; }
.program-connect-inner { align-items: center; text-align: center; justify-content: center; }
.support-manager { display: block; width: 10rem; max-width: 100%; height: 12.5rem; object-fit: contain; }
.program-connect-inner .program-connect-actions { width: 100%; align-items: stretch; }
.program-connect-inner .program-connect-actions .button { width: 100%; justify-content: center; text-align: center; white-space: normal; }
@media (max-width: 680px) {
  .program-intro { min-height: 0; justify-content: flex-start; padding: 1.5rem; }
  .program-intro-photo { top: 0; right: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
  .program-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
  .program-intro-copy { width: 100%; max-width: 100%; gap: 1.5rem; }
  .program-intro h1 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.03125rem; }
  .program-intro-heading > p { font-size: 1rem; }
  .program-intro .program-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .program-intro .program-actions .button { width: 100%; min-width: 0; }
  .program-step-card { flex: 0 0 auto; height: auto; min-height: 10rem; }
}
@media (max-width: 680px) {
  .program-intro-photo { opacity: .2; }
}
body:has(#landing-view:not([hidden])) { position: relative; isolation: isolate; }
body:has(#landing-view:not([hidden]))::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100svh; min-height: 30rem; z-index: -1; pointer-events: none; background: url('/illustrations/exchange-travel-v2.webp') right center / cover no-repeat, #008bfd; }
.program-header { position: relative; z-index: 1; color: white; }
.program-header .brand-logo { filter: brightness(0) invert(1); }
.program-offer { background: transparent; }
.program-intro { background: transparent; }
.program-offer { min-height: 0; width: 100%; flex-shrink: 0; }
.program-offer .program-intro { flex: 0 0 auto; min-height: 0; }
.program-offer .bonus-section { flex: 0 0 auto; }
.program-how { min-height: 0; height: auto; justify-content: flex-start; padding: 10rem 3rem 0; }
.program-intro-photo { display: none; }
@media (max-width: 680px) {
  body:has(#landing-view:not([hidden]))::before { background: url('/illustrations/exchange-travel-v2.webp') right top / cover no-repeat, #008bfd; }
}
.program-section { min-height: 0; height: auto; justify-content: flex-start; gap: 0; padding-block: 0; }
.steps-section { display: flex; flex-direction: column; background: white; }
.program-how h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04375rem; line-height: 1.3; }
@media (max-width: 680px) {
  .program-how h2 { font-size: 1.5rem; }
}
.program-intro .program-actions .button { font-size: 1rem; }
.program-intro-copy { gap: 2.5rem; }
.program-intro { padding-bottom: 6rem; }
@media (max-width: 680px) {
  .program-intro { padding-bottom: 3rem; }
}
.program-intro { padding-bottom: 4rem; }
.program-intro-heading { gap: 1rem; }
.bonus-rate-row { display: flex; align-items: center; gap: 1rem; }
.bonus-tier-ring { --ring-color: var(--black); --ring-muted: #0c0b0524; --ring-surface: #f4f4f7; --segment-two: var(--ring-muted); --segment-three: var(--ring-muted); position: relative; display: block; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: conic-gradient(from 5deg, var(--ring-color) 0deg 110deg, transparent 110deg 120deg, var(--segment-two) 120deg 230deg, transparent 230deg 240deg, var(--segment-three) 240deg 350deg, transparent 350deg 360deg); }
.bonus-tier-ring::after { content: ''; position: absolute; inset: 0.25rem; border-radius: 50%; background: var(--ring-surface); }
.bonus-tier-ring.tier-fill-2, .bonus-tier-ring.tier-fill-3 { --segment-two: var(--ring-color); }
.bonus-tier-ring.tier-fill-3 { --segment-three: var(--ring-color); }
.bonus-level-top .bonus-tier-ring { --ring-color: var(--black); --ring-muted: #00000024; --ring-surface: var(--yellow); }
@media (max-width: 680px) {
  body:has(#landing-view:not([hidden])) { background: white; }
  body:has(#landing-view:not([hidden]))::before { content: none; }
  .program-header { background: white; color: var(--black); }
  .program-header-inner { padding-inline: calc(var(--page-gutter) * 2); }
  .program-header .brand-logo { filter: none; }
  .program-section { min-height: 0; justify-content: flex-start; padding-block: 1rem 2rem; }
  .program-offer { background: #008bfd; }
  .program-intro { padding: 1.5rem; min-height: 22.5rem; justify-content: center; }
  .program-intro-photo { display: flex; position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
  .program-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
  .program-intro-copy { gap: 1.5rem; }
  .bonus-section { padding: 1.5rem; gap: 1.5rem; }
  .bonus-rate-row { gap: 0.75rem; }
  .bonus-level strong { font-size: 2rem; }
  .bonus-level { gap: 0.75rem; }
  .bonus-level > span { font-size: 0.875rem; }
  .program-how { padding-top: 2rem; }
}
@media (min-width: 681px) {
  .bonus-tier-ring { transform: rotate(120deg); }
}
.program-step-wrapper { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; padding: 0; border-radius: var(--radius-card); background: #f1f1ee; }
.program-step-wrapper > .program-step-card { flex: 1 1 auto; width: 100%; }
@media (max-width: 680px) {
  .program-step-wrapper { flex: 0 0 auto; }
}
.program-step-wrapper { background: var(--black); color: var(--yellow); }
.program-step-card { background: var(--yellow); color: var(--black); }
.program-step-number { background: transparent; color: var(--yellow); padding: 0; }
.program-step-wrapper > .program-step-card { flex: 0 0 auto; min-height: 0; height: auto; }
.program-step-copy { flex: 0 1 auto; height: auto; }
@media (max-width: 680px) {
  .program-header-inner { padding-inline: 1rem; }
  .program-section { padding: 0.75rem; }
  .program-how { padding: 0.75rem; }
  .program-how-heading { padding: 0.75rem; }
  .program-step-card { min-height: 0; height: auto; }
}
.step-register-link { white-space: nowrap; }
.program-intro-copy { gap: 2.5rem; }
.floating-tools { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; display: flex; gap: 0.5rem; }
.floating-tools[hidden], .floating-faq[hidden] { display: none; }
.floating-help, .floating-top { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: 0 0.25rem 1rem #00000012; font-size: 0.875rem; font-weight: 500; }
.floating-help { background: var(--yellow); color: var(--black); }
.floating-top { background: white; color: var(--black); }
.floating-top svg { flex-shrink: 0; width: 1rem; height: 1rem; }
.floating-faq { position: fixed; right: 1.5rem; bottom: 5rem; z-index: 31; display: flex; flex-direction: column; gap: 1rem; width: min(23.75rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 6.875rem); overflow-y: auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: white; box-shadow: 0 0.75rem 2.5rem #0002; }
.floating-faq-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.floating-faq h2 { font-size: 1.125rem; }
.floating-faq details { border-bottom: 1px solid transparent; padding-bottom: 0.75rem; overflow: hidden; transition: border-color 180ms ease; }
.floating-faq details.is-expanded { border-bottom-color: var(--line); }
.floating-faq summary { font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.floating-faq details p { padding-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 680px) {
  .hero-world { display: block; white-space: nowrap; }
  .floating-tools { right: 0.75rem; bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .floating-top { position: fixed; left: 50%; bottom: max(0.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%); height: 2rem; min-height: 2rem; padding: 0 0.75rem; font-size: 0.875rem; font-weight: 500; }
  .floating-help { height: 2rem; min-height: 2rem; padding: 0 0.75rem; }
  .floating-faq { right: 0.75rem; bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 681px) {
  .program-steps { align-items: stretch; }
  .program-step-wrapper > .program-step-card { flex: 1 1 auto; }
}
.floating-help { width: 2rem; height: 2rem; min-height: 2rem; padding: 0.375rem; border: 0; border-radius: 50%; }
.floating-help svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.floating-tools { align-items: center; }
#faq-close { border: 0; background: transparent; }
.floating-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; list-style: none; }
.floating-faq summary::-webkit-details-marker { display: none; }
.floating-faq summary .icon { width: 1rem; height: 1rem; transition: transform .15s; }
.floating-faq details[open] summary .icon { transform: rotate(180deg); }
.floating-faq .button [data-icon="telegram-filled"] { display: flex; }
.floating-faq .button [data-icon="telegram-filled"] .icon { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }
.floating-help, .floating-top { width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility .25s; }
.floating-top > span { display: none; }
.floating-tools.is-visible .floating-help, .floating-tools.is-visible .floating-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 680px) {
  .floating-top { width: auto; height: 2.5rem; min-height: 2.5rem; padding: 0 0.75rem; transform: translate(-50%, 1rem); }
  .floating-top > span { display: inline; }
  .floating-tools.is-visible .floating-top.is-visible { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-help, .floating-top { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-faq details, .floating-faq summary .icon { transition: none; }
}
@media (max-width: 680px) {
  .floating-tools { left: 0.75rem; right: auto; }
  .floating-faq { left: 0.75rem; right: auto; }
}
@media (min-width: 681px) {
  .program-header { height: 4rem; }
}
.floating-top { border: 0; order: 1; }
.floating-help { order: 2; }
.floating-faq:not([hidden]) { transform-origin: bottom right; animation: faq-reveal .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(0.75rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-faq:not([hidden]) { animation: none; }
}
.floating-faq details { border-bottom: 0; }
.floating-faq .faq-chevron { display: flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; }
.floating-faq .faq-chevron > span { display: flex; }
.floating-faq .faq-chevron .icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 681px) {
  .program-section.container { min-height: 0; height: auto; justify-content: flex-start; gap: 0; }
}
.program-section.container { padding: 3rem; min-height: 0; height: auto; }
@media (min-width: 681px) {
  .program-offer { gap: 4rem; }
  .program-offer .program-intro { padding-top: 0; padding-bottom: 0; }
  body:has(#landing-view:not([hidden]))::before { content: none; }
  .program-section.container { position: relative; isolation: isolate; min-height: calc(100svh - 4rem); padding: 3rem; }
  .program-section.container::before { content: ''; position: absolute; z-index: -1; top: -4rem; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: #008bfd url('/illustrations/exchange-travel-v2.webp') right center / cover no-repeat; }
}
@media (max-width: 680px) {
  .program-section.container { padding: 0.75rem; min-height: 0; }
  .program-offer { gap: 0; }
  .program-offer .program-intro { padding: 1.5rem; }
  .program-offer .bonus-section { z-index: 1; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .program-offer .program-intro { transform: translate3d(0, var(--intro-scroll-offset, 0), 0); will-change: transform; }
}
@media (min-width: 681px) {
  .floating-tools { flex-direction: column; }
}
.program-connect-inner { position: relative; isolation: isolate; overflow: hidden; }
@keyframes support-breathe {
  0%,100% { transform: translateY(-50%) scaleX(-1) rotate(var(--bonus-angle)) scale(1); }
  50% { transform: translateY(-50%) scaleX(-1) rotate(var(--bonus-angle)) scale(1.02); }
}
.manager-hover { column-gap: 0; }
.manager-telegram { display: flex; flex-shrink: 0; width: 0; opacity: 0; overflow: hidden; transform: translateX(-0.25rem); transition: width .2s ease, opacity .2s ease, transform .2s ease; }
.manager-telegram .icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: currentColor; stroke: none; }
.manager-hover:hover, .manager-hover:focus-visible { column-gap: 0.5rem; }
.manager-hover:hover .manager-telegram, .manager-hover:focus-visible .manager-telegram { width: 1.25rem; opacity: 1; transform: translateX(0); }
.floating-faq > .button { justify-content: space-between; text-align: left; padding-inline: 0.75rem; }
.floating-faq > .button > [data-content-key] { flex: 1; }
@media (hover: none) {
  .manager-hover { column-gap: 0.5rem; }
  .manager-telegram { width: 1.25rem; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .manager-telegram { transition: none; }
}
@media (min-width: 681px) {
  .program-section.container { justify-content: center; }
}
.program-connect-inner > :not(.support-decoration) { position: relative; z-index: 1; }
.support-ripples { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; border-radius: inherit; }
.support-ripples span { position: absolute; left: -30%; top: 30%; width: 160%; height: 1.75rem; border: 0; border-radius: 1.25rem; background: #ffffffa6; opacity: .65; filter: blur(0.5rem); transform: translateY(0) rotate(-15deg); animation: support-stripe 12s ease-in-out infinite; }
.support-ripples span:nth-child(2) { top: 62%; height: 6rem; animation-delay: -6s; opacity: .5; }
@keyframes support-stripe {
  0%,100% { transform: translateY(0) rotate(-15deg); filter: blur(0.5rem); }
  50% { transform: translateY(2.25rem) rotate(-15deg); filter: blur(2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .support-ripples span { animation: none; }
}
.program-connect-inner { box-shadow: inset 0 0 2rem rgb(255 255 255 / 15%); }
.program-steps-illustrated { align-items: stretch; gap: 1rem; }
.program-steps-illustrated .program-step-wrapper { overflow: hidden; background: #f5f6f8; border-radius: 1rem; }
.program-steps-illustrated .program-step-card { display: flex; flex-direction: column; flex: 1 1 auto; align-items: stretch; gap: 1.5rem; width: 100%; min-height: 0; aspect-ratio: auto; padding: 1.5rem; background: #f5f6f8; }
.program-steps-illustrated .program-step-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 auto; gap: 0.875rem; width: 100%; min-width: 0; }
.program-steps-illustrated .program-step-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 2rem; padding: 0; border-radius: 4px; background: #fbd100; color: #0c0b05; font-size: 1.125rem; font-weight: 750; line-height: 1; letter-spacing: -0.03125rem; }
.program-step-text { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; min-width: 0; }
.program-steps-illustrated h3 { max-width: 100%; font-size: 1.125rem; font-weight: 750; line-height: 1.25; letter-spacing: -0.034375rem; }
.program-step-text > p { width: 100%; font-size: 0.875rem; font-weight: 400; line-height: 1.45; letter-spacing: -0.009375rem; color: #787b84; text-wrap: pretty; }
.program-steps-illustrated .step-register-link { text-decoration: none; }
.program-steps-illustrated .step-register-link:hover { color: var(--black); text-decoration: underline; text-underline-offset: 0.1875rem; }
.program-steps-illustrated .step-register-link:focus-visible { outline: 0.125rem solid var(--black); outline-offset: 0.1875rem; border-radius: 0.125rem; }
.program-step-art { display: block; align-self: center; flex: 0 0 auto; width: 100%; max-width: 36.25rem; height: auto; aspect-ratio: 290 / 133; object-fit: contain; pointer-events: none; user-select: none; }
@media (min-width: 1001px) and (max-width: 1140px) {
  .program-steps-illustrated { gap: 0.75rem; }
  .program-steps-illustrated .program-step-card { padding: 1.125rem; }
  .program-steps-illustrated h3 { font-size: 1.0625rem; }
  .program-step-text > p { font-size: 0.8125rem; }
}
@media (max-width: 1000px) {
  .program-steps-illustrated { flex-direction: column; gap: 1rem; }
  .program-steps-illustrated .program-step-wrapper { flex: 0 0 auto; align-self: center; width: 100%; max-width: 40rem; }
  .program-steps-illustrated h3 { font-size: 1.3125rem; }
  .program-step-text > p { font-size: 1rem; }
}
@media (max-width: 680px) {
  .program-steps-illustrated { gap: 0.75rem; }
  .program-steps-illustrated .program-step-card { gap: 1.25rem; padding: 1.25rem; }
  .program-steps-illustrated h3 { font-size: 1.125rem; }
  .program-step-text > p { font-size: 0.875rem; }
}
@media (max-width: 380px) {
  .program-steps-illustrated .program-step-card { padding: 1.125rem; }
  .program-steps-illustrated h3 { font-size: 1rem; }
  .program-step-text > p { font-size: 0.8125rem; }
}

.offers-section { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 10rem; background: #fff; }
.offers-heading, .library-heading > div { display: flex; flex-direction: column; gap: 0.5rem; }
.offers-heading { gap: 0.25rem; }
.offers-heading h2 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -0.05rem; white-space: pre-line; }
.offers-layout { display: flex; align-items: stretch; gap: 1rem; }
.client-offers { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; flex: 1; }
.client-offer-cards { display: flex; flex-wrap: wrap; gap: 1rem; min-width: 0; }
.client-offer { display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; padding: 1.5rem; flex: 1 1 calc(50% - 0.5rem); min-width: 0; border: 0; border-radius: 1rem; }
.client-offer.client-offer-wide { flex-basis: 100%; }
.client-offer > div { display: flex; flex-direction: column; gap: 0.5rem; }
.client-offer h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.03125rem; }
.client-offer p { font-size: 0.875rem; line-height: 1.5; color: #5b6068; }
.offer-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.offer-tag { display: inline-flex; align-items: center; padding: 0.375rem 0.625rem; border-radius: 0.5rem; background: var(--offer-tag-bg); font-size: 0.75rem; line-height: 1.4; font-weight: 600; }
.offer-blue { --offer-tag-bg: #dce9ff; background: #eaf2ff; color: #125eac; }
.offer-green { --offer-tag-bg: #dcefe0; background: #edf7ef; color: #26704d; }
.offer-rose { --offer-tag-bg: #ffe0e4; background: #fff0f1; color: #c63853; }
.offer-yellow { --offer-tag-bg: #ffefaa; background: #fff8ce; color: #735913; }
.client-offer h3 { color: #0c0b05; }
.client-offer.client-offer-illustrated { position: relative; isolation: isolate; flex-direction: row; align-items: stretch; justify-content: flex-start; min-height: 14.75rem; gap: 0; padding: 0; overflow: hidden; }
.client-offer-illustrated > .client-offer-copy { z-index: 1; flex: 0 0 58%; min-width: 0; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0 1.5rem 1.5rem; }
.client-offer-description { display: flex; flex-direction: column; gap: 0.5rem; }
.client-offer-illustrated > .client-offer-art { position: relative; flex: 1; min-width: 0; align-items: center; justify-content: center; padding: 1rem 0.75rem 1rem 0.25rem; pointer-events: none; }
.client-offer-art img { display: block; width: 100%; height: 12.5rem; object-fit: contain; }
.client-offer-illustrated.offer-blue { background: radial-gradient(ellipse at 100% 100%, #d9eaff, transparent 75%), #eef5ff; }
.client-offer-illustrated.offer-green { background: radial-gradient(ellipse at 100% 100%, #dcefe2, transparent 75%), #f0f8f2; }
.client-offer-illustrated.offer-rose { background: radial-gradient(ellipse at 100% 100%, #ffe0e4, transparent 75%), #fff5f6; }
.client-offer-illustrated.offer-yellow { background: radial-gradient(ellipse at 85% 100%, #ffedaf, transparent 70%), #fff9e5; }
.client-offer[data-offer-id=esim] .client-offer-art { padding: 0; }
.client-offer[data-offer-id=esim] .client-offer-art img { position: absolute; top: 1rem; right: -12%; width: 132%; max-width: none; height: auto; }
.client-offer[data-offer-id=bybit] { min-height: 13.75rem; }
.client-offer[data-offer-id=bybit] .client-offer-copy { flex-basis: 48%; }
.client-offer[data-offer-id=bybit] .client-offer-art { padding: 1rem 1.5rem 0.75rem 0.5rem; }
.client-offer[data-offer-id=bybit] .client-offer-art img { height: 12.5rem; }
.offers-layout .program-connect-inner { flex: 0 0 20rem; width: 20rem; padding: 1.5rem; gap: 1.25rem; }
.offers-layout .program-connect-inner h2 { font-size: 1.375rem; line-height: 1.4; }
.offers-layout .support-manager { width: 10rem; height: 13.625rem; object-fit: contain; }
@media (max-width: 1100px) {
  .offers-layout { flex-direction: column; }
  .offers-layout .program-connect-inner { flex: auto; width: 100%; }
}
@media (max-width: 680px) {
  .offers-section { padding: 4rem 0.75rem 0; gap: 1.25rem; }
  .offers-heading h2 { font-size: 1.5rem; }
  .offers-layout { width: 100%; min-width: 0; }
  .client-offers { flex: 0 0 auto; width: 100%; }
  .client-offer-cards { flex-wrap: nowrap; width: 100%; max-width: 100%; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .client-offer-cards::-webkit-scrollbar { display: none; }
  .client-offer-cards:focus-visible { outline: 0.125rem solid #008bfd; outline-offset: 0.25rem; border-radius: 1rem; }
  .client-offer, .client-offer.client-offer-wide, .client-offer.client-offer-illustrated { flex: 0 0 min(84%, 20rem); flex-direction: column; min-height: 26.25rem; aspect-ratio: 3 / 4; scroll-snap-align: start; }
  .client-offer { padding: 1.5rem; gap: 1.5rem; }
  .client-offer.client-offer-illustrated { padding: 0; gap: 0; }
  .client-offer h3 { font-size: 1.125rem; }
  .client-offer p { font-size: 0.8125rem; }
  .client-offer[data-offer-id] .client-offer-copy { flex: 0 0 auto; width: 100%; padding: 1.5rem; gap: 1rem; }
  .client-offer[data-offer-id] .client-offer-art { flex: 1 0 auto; width: 100%; min-height: 12.5rem; padding: 0 1.25rem 1.25rem; }
  .client-offer[data-offer-id] .client-offer-art img { position: static; width: 100%; max-width: 100%; height: 13.75rem; object-fit: contain; }
}

html:has(#landing-view:not([hidden])) { background: #008bfd; overflow-x: clip; }
body:has(#landing-view:not([hidden])) { background: #fff; --landing-hero-height: 100svh; }
#landing-view { background: #fff; }
body:has(#landing-view:not([hidden]))::after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: var(--landing-hero-height); background: #008bfd url('/illustrations/exchange-travel-v2.webp') right center / cover no-repeat; transform: translateY(-100%) scaleY(-1); pointer-events: none; }
.earnings-surface, .offers-surface { display: flex; flex-direction: column; width: 100%; background: #fff; }
.offers-section.container { width: 100%; min-width: 0; padding: 10rem 3rem; }
.earnings-section { display: flex; flex-direction: column; gap: 1rem; padding: 10rem 3rem 0; }
.earnings-calculator { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.audience-section { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.audience-cards { display: flex; align-items: stretch; gap: 1rem; }
.audience-card { --audience-bg: #f4f4f7; --audience-photo: url('/audiences/travel-card-v3.webp'); position: relative; isolation: isolate; display: flex; justify-content: flex-end; flex: 1 1 0; min-width: 0; overflow: hidden; border: 0; border-radius: 1rem; background: var(--audience-bg); }
.audience-card::before { content: ''; position: absolute; z-index: -1; inset: 0 55% 0 0; background: var(--audience-photo) center / cover no-repeat; }
.audience-card-inner { display: flex; flex-direction: column; width: 55%; min-height: 15rem; padding: 1.5rem; }
.audience-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.audience-copy h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.025rem; overflow-wrap: break-word; }
.audience-copy p { font-size: 0.875rem; line-height: 1.5; color: #666861; }
.audience-card-blue { --audience-bg: #f4f4f7; --audience-photo: url('/audiences/blogger-card-v3.webp'); }
.audience-card-green { --audience-bg: #f4f4f7; --audience-photo: url('/audiences/community-card-v3.webp'); }
@media (max-width: 1000px) {
  .audience-cards { flex-direction: column; width: 100%; min-width: 0; }
  .audience-card { flex: 0 0 auto; width: 100%; min-height: 14rem; }
  .audience-card-inner { min-height: 14rem; }
}
@media (max-width: 680px) {
  .audience-card { min-height: 13rem; }
  .audience-card-inner { width: 58%; min-height: 13rem; }
  .audience-card::before { right: 58%; }
  .audience-copy h3 { font-size: 1.125rem; }
  .audience-copy p { line-height: 1.4; }
}
.section-heading { display: flex; flex-direction: column; gap: 0.5rem; }
.section-heading h2, .earnings-copy h2 { font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.04375rem; }
.earnings-card { --earnings-surface: #f4f4f7; display: flex; align-items: stretch; padding: 0; gap: 0; border: 0; border-radius: 1rem; background: var(--earnings-surface); }
.earnings-copy { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 65%; min-width: 0; padding: 2.5rem; gap: 0; }
.earnings-equation { display: flex; align-items: stretch; gap: 0.5rem; }
.earnings-factor { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex: 1 1 0; min-width: 0; gap: 0.5rem; padding: 1rem; border-radius: 0.75rem; background: #fff; text-align: left; }
.earnings-factor > span, .earnings-factor > label { font-size: 0.875rem; line-height: 1.4; color: #747479; }
.earnings-factor output, .earnings-select select, .earnings-rate-toggle { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 750; line-height: 1.25; letter-spacing: -0.04375rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; }
#earnings-count, .earnings-average output, .earnings-select { display: flex; justify-content: flex-start; align-items: center; width: 100%; min-width: 0; min-height: 2.75rem; padding: 0; background: transparent; color: #0c0b05; }
.earnings-times { display: flex; flex-shrink: 0; align-self: center; align-items: center; font-size: 1.75rem; font-weight: 400; color: #747479; }
.earnings-rates { position: relative; }
.earnings-select select { appearance: none; width: 100%; min-width: 0; min-height: 2.75rem; padding: 0 1.75rem 0 0; border: 0; border-radius: 0; background: transparent; color: #0c0b05; font-family: inherit; cursor: pointer; }
.earnings-select > span { display: none; }
.earnings-select .icon { width: 1.25rem; height: 1.25rem; }
.earnings-select select:focus-visible { outline: 0.125rem solid #008bfd; outline-offset: 0.25rem; }
.earnings-rate-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
.earnings-rate-toggle:focus-visible { outline: 0.125rem solid #008bfd; outline-offset: 0.25rem; border-radius: 0.25rem; }
.earnings-rate-chevron { flex-shrink: 0; width: 1.25rem; height: 1.25rem; transition: transform .2s; }
.earnings-rate-toggle[aria-expanded=true] .earnings-rate-chevron { transform: rotate(180deg); }
.earnings-rate-options { position: absolute; z-index: 5; top: calc(100% + 0.5rem); left: 0; right: 0; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.375rem; border: 1px solid #e7e7eb; border-radius: 0.75rem; background: #fff; box-shadow: 0 0.5rem 1.5rem #0c0b051a; }
.earnings-rate-options[hidden] { display: none; }
.earnings-rate-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.625rem; border: 0; border-radius: 0.5rem; background: #fff; color: #0c0b05; font: inherit; font-size: 1.25rem; font-weight: 650; text-align: left; cursor: pointer; }
.earnings-rate-option:hover, .earnings-rate-option.is-highlighted { background: #f4f4f7; }
.earnings-rate-option[aria-selected=true]::after { content: '✓'; font-size: 1rem; }
.earnings-inputs { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.earnings-slider { position: relative; isolation: isolate; display: flex; width: 100%; }
.earnings-slider::before { content: ''; position: absolute; z-index: 0; left: var(--thumb-position, 0.8125rem); top: 50%; width: 5.5rem; height: 4.5rem; border-radius: 50%; background: radial-gradient(ellipse, #ffd52a80, #ffe68b30 45%, transparent 72%); transform: translate(-50%, -50%); pointer-events: none; animation: earnings-slider-glow 3s ease-in-out infinite; }
.earnings-slider::after { content: ''; position: absolute; z-index: 0; left: 0; top: 50%; width: var(--thumb-position, 0.8125rem); height: 0.75rem; border-radius: 62.4375rem; background: linear-gradient(90deg, #ffcf0055, #ffe48533); filter: blur(0.625rem); transform: translateY(-50%); pointer-events: none; }
@keyframes earnings-slider-glow {
  0%,100% { opacity: .55; }
  50% { opacity: .9; }
}
.earnings-inputs input[type=range] { --range-progress: 0%; --slider-track-fill: linear-gradient(90deg, #ffcd00 0%, #ffdc31 calc(var(--thumb-position, 0.8125rem) - 8%), #ffe894 var(--thumb-position, 0.8125rem), #f2ecd8 calc(var(--thumb-position, 0.8125rem) + 10%), #e6e7ec calc(var(--thumb-position, 0.8125rem) + 25%)); --slider-thumb-shadow: 0 0.125rem 0.375rem #c39a0026, 0 0 0.875rem 0.25rem #ffd52a99, 0 0 1.75rem 0.5rem #ffdc3033; appearance: none; -webkit-appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 2rem; padding: 0; background: transparent; cursor: pointer; }
.earnings-inputs input[type=range]::-webkit-slider-runnable-track { height: 0.75rem; border-radius: 62.4375rem; background: var(--slider-track-fill); }
.earnings-inputs input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 1.625rem; height: 1.625rem; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--slider-thumb-shadow); transform: translateY(-0.4375rem); transition: box-shadow .2s; }
.earnings-inputs input[type=range]:is(:hover, :focus-visible), .earnings-slider.is-active input[type=range] { --slider-thumb-shadow: 0 0.125rem 0.375rem #c39a0033, 0 0 1.125rem 0.375rem #ffd52ab3, 0 0 2.25rem 0.75rem #ffdc304d; }
.earnings-inputs input[type=range]::-moz-range-track { height: 0.75rem; border-radius: 62.4375rem; background: var(--slider-track-fill); }
.earnings-inputs input[type=range]::-moz-range-progress { height: 0.75rem; border-radius: 62.4375rem; background: transparent; }
.earnings-inputs input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 1.625rem; height: 1.625rem; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--slider-thumb-shadow); transition: box-shadow .2s; }
@media (prefers-reduced-motion: reduce) {
  .earnings-slider::before { animation: none; opacity: .7; }
}
.earnings-scale { display: flex; justify-content: space-between; padding: 0 0.8125rem; color: #94949c; font-size: 0.75rem; }
.earnings-scale > span { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 0; }
.earnings-scale > span::before { content: ''; flex: 0 0 0.5rem; width: 0.0625rem; height: 0.5rem; background: #b9b9c1; }
.earnings-scale button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; min-height: 1.75rem; padding: 0.25rem 0.125rem; border: 0; border-radius: 0.375rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.earnings-scale button:hover { background: #fbd10040; color: #0c0b05; }
.earnings-scale button:focus-visible { outline: 0.125rem solid #008bfd; outline-offset: 0.0625rem; }
.earnings-summary { display: flex; flex-direction: column; justify-content: center; flex: 1 1 35%; min-width: 0; gap: 1.75rem; padding: 2.5rem; border: 0.5rem solid var(--earnings-surface); border-radius: 1rem; background: var(--yellow); color: #0c0b05; }
.earnings-bonus { position: relative; display: flex; flex-direction: column; gap: 0.75rem; }
.earnings-bonus > span { font-size: 1rem; line-height: 1.5; font-weight: 400; color: #5b501b; }
#earnings-result { color: var(--black); font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 1.1; letter-spacing: -0.125rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.earnings-odometer { display: flex; align-items: baseline; color: var(--black); font-size: clamp(2.5rem, 4.8vw, 4.5rem); line-height: 1.1; letter-spacing: -0.125rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: pre; }
.earnings-digit { display: block; flex: 0 0 auto; width: 1ch; height: 1.1em; overflow: hidden; letter-spacing: 0; }
.earnings-digit-reel { display: flex; flex-direction: column; animation-duration: 480ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-fill-mode: both; }
.earnings-digit-reel > span { display: block; flex: 0 0 1.1em; height: 1.1em; text-align: center; }
@keyframes earnings-digit-up {
  from { transform: translateY(0); }
  to { transform: translateY(var(--digit-travel)); }
}
@keyframes earnings-digit-down {
  from { transform: translateY(var(--digit-travel)); }
  to { transform: translateY(0); }
}
.earnings-slider .earnings-gains { z-index: 3; }
.earnings-gains { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.earnings-gain { position: absolute; left: var(--thumb-position, 0.8125rem); bottom: 5rem; display: block; padding: 0.75rem; border-radius: 0.75rem; background: #fff; color: #199c52; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0.25rem 1rem #00000014; translate: -50% 0; animation: earnings-gain-float 1400ms ease-out both; }
@keyframes earnings-gain-float {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; transform: translate(0, -0.5rem) scale(1); }
  55% { opacity: 1; transform: translate(0, -1.75rem); }
  100% { opacity: 0; transform: translate(0, -4rem); }
}
@keyframes earnings-gain-fade {
  0%,100% { opacity: 0; }
  15%,55% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .earnings-gain { animation-name: earnings-gain-fade; }
}
@media (prefers-reduced-motion: reduce) {
  .earnings-digit-reel { animation-duration: 1ms; animation-delay: 0ms !important; }
}
.earnings-formula { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid #0c0b0526; color: #5b501b; font-size: 1.0625rem; line-height: 1.5; font-weight: 600; font-variant-numeric: tabular-nums; }
.earnings-formula > span { white-space: nowrap; }
@media (max-width: 1100px) {
  .earnings-card { flex-direction: column; }
  .earnings-copy, .earnings-summary { flex-basis: auto; }
}
@media (max-width: 680px) {
  .earnings-copy { padding: 1.5rem; }
  .earnings-equation { gap: 0.5rem; flex-wrap: wrap; }
  .earnings-factor { flex: 1 1 8.75rem; }
  .earnings-count { align-items: flex-start; }
  .earnings-times { display: none; }
  .earnings-factor > span, .earnings-factor > label { font-size: 0.75rem; }
  .earnings-factor output, .earnings-select select, .earnings-rate-toggle { font-size: 1.625rem; }
  .earnings-scale { font-size: 0.625rem; }
  .earnings-scale button { width: 1.5rem; }
  .earnings-summary { padding: 1.5rem; }
  #earnings-result, .earnings-odometer { font-size: clamp(2.5rem, 10vw, 4rem); }
}
@media (max-width: 680px) {
  .offers-section.container { padding: 4rem 0.75rem 0; }
  .earnings-section { padding: 2.5rem 0.75rem 0; }
  .earnings-calculator { gap: 1.25rem; }
  .section-heading { padding-inline: 0.75rem; }
  .section-heading h2, .earnings-copy h2 { font-size: 1.5rem; }
  .earnings-card { flex-direction: column; }
  .earnings-summary { order: -1; min-width: 0; padding: 1.5rem; }
}
.bonus-conditions { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-width: 0; }
.bonus-conditions .bonus-terms { flex: none; }

/* Keep controls usable at the smallest fluid scale. */
.button { min-height: max(3rem, 44px); }
.earnings-rate-toggle, .earnings-rate-option { min-height: max(2.75rem, 44px); }
::selection { background: var(--yellow); color: var(--black); }