:root { color-scheme: dark; --bg: #10131a; --text: #f5f7fc; --muted: #a9b3c7; --accent: #f8d37e; --app-safe-top: calc(max(env(safe-area-inset-top), var(--tg-safe-area-inset-top, 0px)) + max(var(--tg-content-safe-area-inset-top, 0px), var(--fullscreen-top, 0px))); --app-safe-bottom: calc(max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px)); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); }
body { min-width: 290px; color: var(--text); font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.app { display: grid; grid-template-rows: minmax(0, 1fr); width: 100%; height: 100vh; height: 100dvh; }
#projectHeader { display: none !important; }
.screen { width: 100%; min-height: 0; height: 100%; padding: max(24px, var(--app-safe-top)) max(18px, env(safe-area-inset-right)) max(24px, var(--app-safe-bottom)) max(18px, env(safe-area-inset-left)); overflow-x: hidden; overflow-y: auto; text-align: center; }
.check-screen, .results-screen, .blocked-screen { display: flex; flex-direction: column; }
.check-content, .results-content, .blocked-content { flex: none; width: min(100%, 580px); margin: auto; }
h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.2; font-weight: 750; letter-spacing: -.035em; }
.message { margin: 13px 0 22px; color: var(--muted); font-size: 0.875rem; white-space: pre-line; }
.message:empty { display: none; }
.subscription-condition { margin: 15px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.subscription-condition strong { color: #e9edf6; font-weight: 600; }
.folder-subscribe { display: inline-flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; margin: 18px auto 0; padding: 11px 17px; border: 1px solid #f8d37e55; border-radius: 14px; background: #f8d37e0b; color: var(--accent); text-decoration: none; font-size: 0.875rem; font-weight: 650; line-height: 1.35; }
.folder-subscribe svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.loader { width: 42px; height: 42px; margin: 0 auto 24px; border: 3px solid #ffffff18; border-top-color: var(--accent); border-radius: 50%; animation: loading .85s linear infinite; }
@keyframes loading { to { transform: rotate(360deg); } }
.primary, .continue-button { min-height: 46px; border: 0; border-radius: 999px; padding: 11px 25px; color: #172031; background: var(--accent); font-size: 0.9375rem; font-weight: 750; }
.primary:disabled { opacity: .55; }
.text-button { display: block; margin: 18px auto 0; padding: 7px 12px; border: 0; background: transparent; color: var(--muted); font-size: 0.8125rem; }
.channel-list { list-style: none; display: grid; width: 100%; gap: 10px; padding: 0; margin: 26px auto 24px; text-align: left; }
.channel-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 28px; align-items: center; gap: 14px; padding: 14px; border: 1px solid #ffffff12; border-radius: 18px; background: linear-gradient(120deg, #ffffff08, #ffffff03); box-shadow: 0 5px 18px #00000012; }
.channel-avatar { position: relative; display: grid; width: 56px; height: 56px; overflow: hidden; place-items: center; border: 1px solid #ffffff17; border-radius: 50%; background: #222630; color: var(--accent); font-size: 1.4375rem; font-weight: 750; }
.channel-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.channel-name { grid-column: 2; min-width: 0; color: var(--text); font-size: 1rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.channel-join { grid-column: 3; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; border: 1px solid #ffe8b655; border-radius: 999px; background: linear-gradient(120deg, #ffe3a1, #efc16c); box-shadow: 0 3px 12px #eab76615; color: #211c14; text-decoration: none; font-size: 0.8125rem; font-weight: 750; transition: filter .15s ease, transform .15s ease; }
.channel-join svg { flex: none; width: 16px; height: 16px; }
.channel-join:hover { filter: brightness(1.08); }
.channel-join:active { transform: scale(.97); }
.channel-status { grid-column: 4; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #ffffff25; border-radius: 50%; background: #ffffff08; color: #8f9aad; }
.channel-status svg { width: 16px; height: 16px; }
.channel-status[data-status="subscribed"] { border-color: #51d79e55; background: #51d79e1a; color: #67e6ae; }
.channel-status[data-status="missing"] { border-color: #fa738b55; background: #fa738b1a; color: #ff869a; }
.channel-list.is-folder-mode .channel-card { grid-template-columns: 56px minmax(0, 1fr) 28px; }
.channel-list.is-folder-mode .channel-status { grid-column: 3; }
@media (max-width: 420px) { .channel-list.is-folder-mode .channel-card { grid-template-columns: 48px minmax(0, 1fr) 28px; } }
@media (max-width: 420px) { .channel-card { grid-template-columns: 48px minmax(0, 1fr) 28px; column-gap: 10px; row-gap: 8px; min-height: 76px; padding: 12px; border-radius: 16px; } .channel-avatar { grid-row: 1 / 3; width: 48px; height: 48px; } .channel-name { grid-column: 2; font-size: 0.9375rem; } .channel-card:not(.has-join) .channel-name { grid-row: 1 / 3; } .channel-join { grid-column: 2; grid-row: 2; justify-self: start; min-height: 34px; padding: 6px 12px; } .channel-status { grid-column: 3; grid-row: 1 / 3; } }
.prizes-screen { display: flex; flex-direction: column; }
.prizes-content { display: flex; flex: none; flex-direction: column; width: min(100%, 500px); margin: auto; }
.prizes-play { flex: none; padding-top: 28px; }
.preview-wheel { position: relative; width: min(232px, 64vw, 28dvh); aspect-ratio: 1; margin: 0 auto 22px; }
.preview-wheel .wheel-rim { padding: 5px; box-shadow: 0 8px 28px #0005; }
.preview-wheel .wheel { border-width: 1.5px; will-change: auto; }
.preview-wheel .wheel-center { border-width: 1.5px; }
.preview-wheel .wheel-pointer { border-left-width: 7px; border-right-width: 7px; border-top-width: 14px; }
.preview-wheel .sector-avatar { box-shadow: 0 1px 4px #0003; }
.preview-spin { display: block; width: 100%; min-height: 54px; margin: 0; border: 1px solid #ffe2a7; border-radius: 16px; background: linear-gradient(120deg, #ffe5a8, #efc16c); box-shadow: 0 8px 28px #eab76619; font-size: 1rem; }
.prizes-content > h1 { flex: none; margin: 0 0 19px; text-align: center; font-size: clamp(1.4375rem, 5vw, 1.75rem); }
.prize-list { display: grid; flex: none; width: 100%; gap: 12px; list-style: none; padding: 0; margin: 0; text-align: left; }
.prize-list li { display: flex; align-items: center; gap: 17px; padding: 14px; border: 1px solid #ffffff10; border-radius: 19px; background: linear-gradient(120deg, #ffffff08, #ffffff03); box-shadow: 0 6px 20px #00000012; }
.prize-icon { position: relative; display: grid; place-items: center; flex: 0 0 66px; width: 66px; height: 66px; overflow: hidden; border-radius: 15px; background: #ffffff08; font-size: 1.9375rem; }
.prize-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.prize-copy { display: grid; gap: 4px; min-width: 0; }
.prize-copy strong { font-size: 1.0625rem; line-height: 1.35; overflow-wrap: anywhere; }
.prize-copy small { color: var(--muted); font-size: 0.75rem; overflow-wrap: anywhere; }
.wheel-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; overscroll-behavior: none; touch-action: none; }
.wheel-button { position: relative; display: block; flex: none; width: min(94vw, calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 64px)); max-width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; background: transparent; touch-action: none; }
.wheel-button:disabled { opacity: 1; }
.wheel-rim { position: absolute; display: block; inset: 2%; padding: 9px; overflow: hidden; border-radius: 50%; background: linear-gradient(140deg, #f7db91, #a57332 48%, #f8df9d); box-shadow: 0 10px 45px #0007; }
.wheel { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #212432; background: #3e6fbe; transform: rotate(0deg); will-change: transform; }
.wheel::before { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffffff72 0 .7deg, transparent .7deg var(--sector-angle, 72deg)); content: ""; pointer-events: none; }
.wheel-pointer { position: absolute; z-index: 4; top: 0; left: 50%; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 27px solid #ffe8ae; filter: drop-shadow(0 2px 3px #0008); transform: translate(-50%, -12%); }
.wheel-sectors { position: absolute; display: block; inset: 0; z-index: 2; }
.wheel-sector { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); }
.sector-avatar { position: relative; display: grid; place-items: center; overflow: hidden; width: var(--avatar-size, 56px); height: var(--avatar-size, 56px); border: min(2px, calc(var(--avatar-size, 56px) / 10)) solid #fff1cd; border-radius: 50%; background: #f9e9c1; box-shadow: 0 3px 12px #0004; color: #27324a; font-size: var(--avatar-font-size, 1.25rem); font-weight: 800; }
.sector-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #f9e9c1; }
.wheel-center { position: absolute; display: block; flex: none; z-index: 3; top: 50%; left: 50%; width: 16%; height: 16%; aspect-ratio: 1; overflow: hidden; border: 3px solid #f2d28f; border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); box-shadow: 0 3px 12px #0004; }
.wheel-center img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.remaining { color: var(--muted); font-size: 0.75rem; }
.wheel-screen .remaining { position: absolute; bottom: max(24px, var(--app-safe-bottom)); margin: 0; }
.number-screen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.number-content { position: relative; width: 100%; }
.ticket-heading { max-width: 540px; margin: 0 auto 22px; color: #d6c0a0; font-size: clamp(1.1875rem, 4.9vw, 1.75rem); font-weight: 500; line-height: 1.45; letter-spacing: 0; text-wrap: balance; }
.issued-number { display: block; width: 100%; margin: 0; font-size: 5.25rem; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.025em; font-weight: 800; white-space: nowrap; color: var(--accent); }
.bot-link { display: inline-block; text-decoration: none; }
.annulled-tickets { display: grid; gap: 22px; list-style: none; margin: 24px 0; padding: 0; }
.annulled-tickets > li { display: grid; gap: 12px; }
.annulled-tickets strong { color: var(--accent); font-size: clamp(1.1875rem, 5.2vw, 1.75rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.annulment-channels { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.annulment-channels li { display: grid; gap: 2px; }
.annulment-channels small { color: var(--muted); font-size: 0.75rem; }
.number-actions { position: absolute; bottom: max(24px, var(--app-safe-bottom)); left: 50%; display: grid; justify-items: center; gap: 11px; transform: translateX(-50%); }
.continue-button { font-size: 0.875rem; min-height: 42px; padding: 9px 22px; }
.number-navigation { position: absolute; top: calc(100% + 24px); left: 50%; display: flex; align-items: center; justify-content: center; gap: 17px; color: var(--muted); font-size: 0.75rem; white-space: nowrap; transform: translateX(-50%); }
.arrow-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff25; border-radius: 50%; color: #d4dceb; background: transparent; font-size: 1.125rem; }
.results-content { max-width: 500px; }
#resultsTitle { font-size: clamp(1.375rem, 5.8vw, 1.625rem); line-height: 1.2; text-wrap: balance; }
.results-date { display: block; margin: 9px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.result-hero { display: grid; gap: 0; margin: 14px 0 0; padding: 14px; border: 1px solid #eac47b42; border-radius: 20px; background: radial-gradient(ellipse at 50% 0, #edc47719, transparent 75%), #ffffff03; }
.result-hero h2 { margin: 0; color: var(--accent); font-size: 1rem; font-weight: 750; line-height: 1.2; }
.result-hero-reward { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; margin: 6px 0; }
#resultHeroIcon { display: block; flex: 0 0 40px; }
.result-hero-reward .prize-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; font-size: 1.25rem; }
#resultHeroPrize { min-width: 0; margin: 0; color: var(--text); font-size: 1.1875rem; line-height: 1.3; font-weight: 750; overflow-wrap: anywhere; text-wrap: balance; }
.result-ticket-label { margin: 0 0 6px; color: var(--muted); font-size: 0.8125rem; }
.result-ticket-number { display: block; width: 100%; min-width: 0; color: var(--accent); font-size: 1.625rem; font-variant-numeric: tabular-nums; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; }
.result-hero-ticket { font-size: 1.625rem; font-weight: 800; }
.result-claim { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff17; }
.result-claim h3 { margin: 0; color: #edf1f8; font-size: .875rem; line-height: 1.35; font-weight: 650; }
#resultClaimInstructions { margin: 4px 0 0; color: #cbd5e5; font-size: .9375rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.result-claim-status { margin: 4px 0 0; color: #9ddabf; font-size: .875rem; line-height: 1.35; font-weight: 650; }
.result-claim-status.is-expired { color: #e9b6bd; }
.result-prize-navigation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 0 0 10px; }
.result-prize-navigation > span { min-width: 0; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }
.result-prize-navigation .arrow-button { flex: none; }
.result-redemption { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff17; }
.result-redemption.has-qr { display: grid; grid-template-columns: minmax(0, 1fr) clamp(112px, 30vw, 136px); gap: 10px; align-items: center; }
.result-code-column, .result-qr-column { min-width: 0; }
.result-redemption h3 { margin: 0 0 5px; color: #edf1f8; font-size: .8125rem; font-weight: 650; line-height: 1.35; }
#resultRedemptionCode { display: block; max-width: 100%; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
#resultRedemptionQR { display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 0; border-radius: 7px; background: white; }
#resultRedemptionNote { margin: 8px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; text-wrap: balance; }
.result-deadline { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px 6px; margin: 8px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.result-deadline time { color: #e0e6f0; font-weight: 650; }
.has-own-prize .results-date { margin: 0 0 6px; font-size: .8125rem; }
.has-own-prize .result-hero { margin-top: 0; }
.result-hero > .result-ticket-label, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.result-redemption.is-used #resultRedemptionCode { color: #cbd5e1; }
.result-redemption.is-used #resultRedemptionNote { color: #a7cdb4; }
#resultsMessage { margin: 22px 0 0; font-size: 1rem; line-height: 1.5; text-wrap: balance; }
#resultsMessage.is-personal { color: #d8dfed; font-size: 1.25rem; }
.result-tickets { margin: 24px 0 0; }
.result-tickets ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.winning-numbers { display: grid; gap: 10px; list-style: none; padding: 0; margin: 14px 0 0; }
.winning-numbers:empty { display: none; }
.instant-result-actions { display: grid; justify-items: center; gap: 10px; margin-top: 22px; }
.instant-result-actions .primary { width: min(100%, 320px); }
.instant-result-actions .remaining { margin: 0; }
.prize-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.winning-numbers li { display: grid; gap: 7px; min-width: 0; padding: 12px; border: 1px solid #ffffff12; border-radius: 16px; background: linear-gradient(120deg, #ffffff07, #ffffff02); }
.result-prize { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.result-prize .prize-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 10px; font-size: 1.5625rem; }
.result-prize-name { min-width: 0; color: var(--text); font-size: 1.125rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; text-wrap: balance; }
.next-round { margin: 27px 0 0; padding: 21px 14px 0; border-top: 1px solid #ffffff17; }
.next-round h2 { margin: 0 0 10px; color: #e0e6f1; font-size: 1.125rem; font-weight: 650; }
#nextRoundPeriod { margin: 0; color: var(--text); font-size: 1.125rem; font-weight: 600; line-height: 1.5; text-wrap: balance; }
#nextRoundDraw { margin: 8px 0 0; color: #bcc7d9; font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 380px) { .prize-list li { padding: 12px; gap: 13px; } .prize-icon { flex-basis: 58px; width: 58px; height: 58px; border-radius: 13px; } .prize-copy strong { font-size: 1rem; } }
@media (max-width: 380px) { .results-screen { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } .result-hero { padding: 12px 10px; } }
@media (orientation: landscape) and (max-height: 500px) { .screen { padding-top: max(15px, var(--app-safe-top)); padding-bottom: max(15px, var(--app-safe-bottom)); } .wheel-button { width: min(65vw, calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 64px)); } .ticket-heading { margin-bottom: 14px; } .number-navigation { top: 50%; left: 0; width: 100%; justify-content: space-between; transform: translateY(-50%); } #numberPosition, .number-actions .remaining { display: none; } .number-actions { bottom: max(15px, var(--app-safe-bottom)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* Text follows system/browser font preferences; long labels scroll vertically. */
.screen { overflow-wrap: anywhere; }
.screen > *, .results-content, .result-hero, .result-redemption, .result-claim { min-width: 0; }
.result-hero { grid-template-columns: minmax(0, 1fr); }
#resultRedemptionCode { width: 100%; min-width: 0; }
.identifier-wrap { white-space: normal !important; overflow-wrap: anywhere; word-break: break-all; }
.screen .primary, .screen .continue-button, .screen .text-button { max-width: 100%; white-space: normal; }
.folder-subscribe > span { min-width: 0; }
.number-screen { display: flex; flex-direction: column; }
.number-content { flex: none; min-width: 0; margin: auto 0 0; }
.number-screen .number-navigation { position: static; max-width: 100%; margin: 24px auto 0; transform: none; flex-wrap: wrap; white-space: normal; }
.number-screen .number-actions { position: static; flex: none; max-width: 100%; margin: 0 auto auto; transform: none; }
.number-screen .number-actions:has(> :not([hidden])) { margin-top: 24px; }
body.is-landing { overflow: auto; background: #0d1015; }
body.is-landing .app { display: block; height: auto; min-height: 100dvh; }
.landing-screen { min-height: 100dvh; color: #f6f6f7; background: radial-gradient(ellipse at 85% 25%, #b00a1821, transparent 40%), #0d1015; }
.landing-wrap { width: min(1200px, 100%); margin: auto; padding: 0 40px; }
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 106px; border-bottom: 1px solid #ffffff12; }
.landing-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; font-size: 1.125rem; font-weight: 750; letter-spacing: -.035em; }
.landing-brand > span:last-child { overflow-wrap: anywhere; }
.landing-brand-icon { position: relative; display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; }
.landing-brand-icon svg { width: 34px; height: 34px; }
.landing-brand-icon img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: #0d1015; }
.landing-header-note { flex: none; font-size: 0.75rem; color: #9b9fa8; }
.landing-hero { display: grid; grid-template-columns: .9fr 1.15fr; align-items: center; gap: 50px; padding: 78px 0 68px; }
.landing-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #c8cbd2; }
.landing-eyebrow span, .landing-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ed2939; }
.landing-copy h1 { font-size: clamp(2.8125rem, 5.3vw, 4.25rem); line-height: 1.03; font-weight: 800; letter-spacing: -.065em; }
.landing-copy h1 span { color: #f13a49; }
.landing-description { max-width: 390px; margin: 25px 0 29px; color: #a5abb7; font-size: 0.9375rem; line-height: 1.7; }
.landing-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 24px; border: 1px solid #ff5865; border-radius: 12px; color: white; background: linear-gradient(135deg, #e82132, #c91021); text-decoration: none; font-size: 0.9375rem; font-weight: 750; box-shadow: 0 9px 35px #d3192528; transition: background .2s, transform .2s; }
.landing-cta:hover { background: #ef2b3b; transform: translateY(-1px); }
.landing-cta svg { width: 21px; height: 21px; }
.landing-cta > span:last-child { margin-left: 12px; font-size: 1.1875rem; font-weight: 400; opacity: .75; }
.landing-cta:focus-visible, .landing-retry:focus-visible, .landing-brand:focus-visible { outline-color: #fa5360; }
.landing-fineprint { margin: 15px 0 0; color: #767e8c; font-size: 0.6875rem; }
.landing-status { margin: 0; color: #b9bfc9; font-size: 0.875rem; line-height: 1.6; }
.landing-status:empty { display: none; }
.landing-retry { border: 0; border-bottom: 1px solid #f13a4955; margin: 12px 0 0; padding: 4px 0; background: transparent; color: #f13a49; font-size: 0.875rem; }
.landing-art { position: relative; margin: 0; padding: 0 0 39px; min-width: 0; }
.landing-art::before { position: absolute; z-index: 0; inset: -20px -14px 14px 25px; border: 1px solid #ffffff0b; border-radius: 24px; transform: rotate(4deg); background: linear-gradient(150deg, #ffffff07, #e71b2d06); content: ""; }
.landing-art > img { position: relative; display: block; width: 100%; height: auto; border: 1px solid #ffffff1a; border-radius: 17px; box-shadow: 0 24px 70px #0005; }
.landing-art figcaption { position: absolute; bottom: 0; right: 8px; display: flex; align-items: center; gap: 8px; color: #949ba8; font-size: 0.6875rem; }
.landing-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; list-style: none; padding: 28px 0 31px; margin: 0; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; }
.landing-steps li { display: flex; align-items: flex-start; gap: 13px; }
.landing-step-number { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border: 1px solid #ffffff12; border-radius: 10px; color: #e54451; font-size: 0.6875rem; font-weight: 750; }
.landing-steps h2 { margin: 0 0 5px; color: #e8e9ee; font-size: 0.8125rem; font-weight: 700; }
.landing-steps p { margin: 0; color: #7d8695; font-size: 0.6875rem; line-height: 1.6; }
.landing-footer { display: flex; justify-content: space-between; gap: 20px; padding: 27px 0 32px; color: #596371; font-size: 0.625rem; }
@media (min-width: 1500px) { .landing-wrap { padding-top: 5vh; } .landing-hero { padding-top: 11vh; padding-bottom: 10vh; } }
@media (max-width: 760px) { .landing-wrap { padding: 0 24px; } .landing-header { min-height: 82px; gap: 12px; } .landing-brand { font-size: 0.9375rem; gap: 9px; } .landing-brand-icon { flex-basis: 32px; width: 32px; height: 32px; } .landing-brand-icon svg { width: 30px; height: 30px; } .landing-header-note { display: none; } .landing-hero { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 36px 0 32px; } .landing-art { grid-row: 1; padding-bottom: 26px; } .landing-art::before { inset: -10px -3px 10px 16px; border-radius: 18px; transform: rotate(3deg); } .landing-art > img { border-radius: 13px; } .landing-art figcaption { right: 0; font-size: 0.5625rem; } .landing-eyebrow { margin-bottom: 16px; font-size: 0.5625rem; letter-spacing: .09em; } .landing-copy h1 { font-size: clamp(2.4375rem, 11.7vw, 3.5rem); } .landing-description { max-width: 410px; margin: 19px 0 22px; font-size: 0.8125rem; line-height: 1.65; } .landing-cta { min-height: 52px; width: 100%; } .landing-fineprint { text-align: center; font-size: 0.625rem; margin-top: 13px; } .landing-steps { grid-template-columns: minmax(0,1fr); gap: 21px; padding: 27px 0; } .landing-steps h2 { font-size: 0.8125rem; } .landing-steps p { font-size: 0.6875rem; } .landing-footer { padding: 24px 0; flex-wrap: wrap; gap: 5px; font-size: 0.5625rem; } }
@media (max-width: 350px) { .landing-wrap { padding: 0 20px; } .landing-header { min-height: 72px; } .landing-hero { padding-top: 27px; gap: 18px; } .landing-copy h1 { font-size: 2.4375rem; } .landing-description { font-size: 0.75rem; margin-top: 16px; } }