/* Homepage only. Dashboard layouts retain their own shared styles. */
.landing-page { background: var(--brand-navy); color: #F7F8FC; }
.landing-page .auth-header { background: transparent; border: 0; padding: 28px 24px 0; }
.landing-page .auth-header .brand { flex-direction: row; text-align: right; }
.landing-page .auth-header .brand-copy { align-items: flex-start; }
.landing-page .auth-header .brand-mark { width: 64px; height: 64px; border-radius: 18px; }
.landing-page .auth-header .brand-name { font-size: 29px; }
.landing-page .subtitle { display: none; }
.landing-page .auth-page { background: radial-gradient(ellipse at 15% 8%, #6236D955, transparent 35%), radial-gradient(ellipse at 95% 35%, #20C99716, transparent 35%); }
.landing-main { overflow: hidden; }
.landing-quick-auth { position: fixed; z-index: 1500; top: 20px; left: 22px; display: flex; gap: 8px; padding: 6px; border: 1px solid #ffffff2b; border-radius: 15px; background: #15182BEF; box-shadow: 0 12px 35px #090B1966; backdrop-filter: blur(12px); }
.landing-quick-auth button { display: inline-flex; min-height: 40px; padding: 8px 14px; align-items: center; gap: 7px; border: 1px solid #ffffff29; border-radius: 10px; background: #ffffff0d; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.landing-quick-auth button:first-child { border-color: #20C9977a; background: #20C997; color: #15182B; }
.landing-quick-auth button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.landing-quick-auth button span { font-size: 18px; line-height: 1; }
.landing-hero { text-align: center; padding: 38px 24px 30px; position: relative; }
.hero-eyebrow, .section-kicker { display: inline-block; color: #20C997; font-size: 13px; letter-spacing: .2px; }
.hero-eyebrow { padding: 6px 15px; border: 1px solid #20C9973b; border-radius: 30px; background: #2B2050; }
.hero-eyebrow span { display: inline-block; width: 7px; height: 7px; background: var(--brand-mint); border-radius: 50%; margin-left: 8px; }
.hero-intro { font-size: clamp(20px, 3.2vw, 32px); margin: 18px 0 7px; color: #F7F8FC; }
.landing-hero h1 { font-size: clamp(34px, 5.5vw, 66px); line-height: 1.38; font-weight: 700; letter-spacing: -1.5px; }
.landing-hero h1 em { font-style: normal; color: #20C997; }
.hero-description { margin: 14px auto; color: #D0D5DD; font-size: 15px; line-height: 1.85; }
.hero-scroll { display: inline-flex; align-items: center; gap: 12px; color: #F7F8FC; text-decoration: none; font-size: 12px; padding: 12px; }
.hero-scroll span { display: grid; place-items: center; border: 1px solid #667085; border-radius: 50%; width: 30px; height: 30px; }
.landing-story, .landing-offers, .landing-access { max-width: 1160px; margin: auto; padding: 45px 28px 60px; }
.landing-section-heading { text-align: center; }
.landing-section-heading h2, .landing-access h2 { color: #F7F8FC; font-size: clamp(23px, 3vw, 34px); margin: 9px 0; }
.landing-section-heading p { color: #D0D5DD; font-size: 14px; max-width: 640px; margin: auto; }
.exchange-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 65px 170px 65px minmax(0, 1fr); align-items: center; margin: 38px auto 24px; padding: 30px 25px; border: 1px solid #6236D936; border-radius: 30px; background: radial-gradient(ellipse at center, #42238F60, transparent 75%), #15182B; box-shadow: inset 0 1px 0 #ffffff09; }
.scene-pharmacy { text-align: center; z-index: 1; min-width: 0; }
.scene-badge { display: inline-block; background: #42238F; border: 1px solid #20C99755; border-radius: 30px; padding: 4px 13px; font-size: 11px; color: #20C997; }
.pharmacy-building { display: block; width: 100%; max-width: 220px; margin: 8px auto; filter: drop-shadow(0 12px 12px #0003); }
.scene-pharmacy h3 { font-size: 15px; color: #F7F8FC; }
.scene-pharmacy p { font-size: 12px; color: #D0D5DD; }
.scene-hub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 1; }
.scene-hub img { width: 94px; height: 94px; padding: 6px; background: #fff; border-radius: 25px; z-index: 1; box-shadow: 0 0 45px #20C99728; }
.scene-hub strong { font: 700 21px Arial, sans-serif; }
.scene-hub > span { color: #A7F3D0; font-size: 11px; }
.hub-orbit { position: absolute; width: 124px; height: 124px; border: 1px solid #20C99750; border-radius: 50%; top: -15px; animation: hubPulse 4s ease-in-out infinite; }
.scene-connection { position: relative; height: 3px; background: linear-gradient(90deg,#20C997,#6236D9); display: flex; justify-content: space-around; margin-top: -25px; }
.scene-connection i { width: 5px; height: 5px; border-radius: 50%; background: #20C997; margin-top: -1px; }
.travelling-pill { position: absolute; top: -5px; width: 24px; height: 12px; border: 1px solid #F7F8FC; border-radius: 12px; background: linear-gradient(90deg, #fff 50%, #20C997 50%); box-shadow: 0 0 18px #20C997; animation: exchangeTravel 3.8s ease-in-out infinite; }
.reverse .travelling-pill { animation-delay: 1.9s; }
.story-steps { list-style: none; display: flex; justify-content: center; gap: 40px; color: #E4E7EC; font-size: 13px; }
.story-steps span { color: #20C997; margin-left: 7px; }
.story-caption { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; font-size: 11px; color: #98A2B3; }
.story-caption button { color: #E4E7EC; border: 1px solid #667085; background: transparent; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.story-paused .travelling-pill, .story-paused .hub-orbit { animation-play-state: paused; }
.landing-offers { border-top: 1px solid #ffffff12; }
.landing-offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 30px; }
.landing-offer { color: var(--brand-ink); background: #F7F8FC; border: 1px solid #E4E7EC; border-radius: 20px; padding: 22px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.offer-preview-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; margin-bottom: 20px; }
.offer-preview-symbol { color: var(--brand-primary); font-size: 25px; background: #F2EEFC; border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; }
.offer-preview-type { background: #F2EEFC; color: #42238F; font-size: 11px; padding: 4px 10px; border-radius: 20px; }
.landing-offer h3 { font-size: 18px; overflow-wrap: anywhere; margin-bottom: 16px; }
.landing-offer dl { width: 100%; margin-bottom: 22px; font-size: 13px; }
.landing-offer dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 6px 0; }
.landing-offer dt { color: var(--brand-muted); }
.landing-offer dd { margin: 0; overflow-wrap: anywhere; }
.landing-offer button { margin-top: auto; width: 100%; padding: 11px; border: 1px solid #C9C0E8; border-radius: 10px; color: #42238F; background: transparent; cursor: pointer; font-weight: 700; }
.landing-offer button:hover { background: #F2EEFC; }
.landing-state { grid-column: 1/-1; padding: 35px 20px; text-align: center; border: 1px dashed #667085; border-radius: 18px; color: #D0D5DD; }
.landing-retry { display: block; margin: 15px auto; padding: 10px 20px; background: #F2EEFC; color: #15182B; border: 0; border-radius: 10px; cursor: pointer; }
.landing-access { text-align: center; padding-bottom: 80px; }
.access-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; max-width: 740px; margin: 28px auto 0; }
.access-card { position: relative; padding: 30px 20px; border: 1px solid #8E69F6; border-radius: 24px; background: linear-gradient(140deg,#42238F,#15182B); color: #F7F8FC; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 15px 38px #090B1959, inset 0 1px 0 #ffffff26; transition: transform .2s, border-color .2s, box-shadow .2s; }
.access-card:hover { transform: translateY(-6px) scale(1.015); border-color: #20C997; box-shadow: 0 20px 48px #090B1980, 0 0 0 3px #20C99720; }
.access-card svg { width: 45px; height: 45px; color: #20C997; }
.access-card strong { font-size: 23px; }
.access-card span { font-size: 12px; color: #D0D5DD; }
.access-card i { font-style: normal; color: #20C997; }
.landing-footer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; max-width: 1104px; margin: auto; padding: 25px; border-top: 1px solid #ffffff1c; color: #D0D5DD; font-size: 11px; }
.landing-footer > span:first-child { font: 700 19px Arial,sans-serif; color: #F7F8FC; }
.landing-auth-dialog { margin: auto; width: min(520px,calc(100% - 28px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 24px; background: white; color: var(--brand-ink); box-shadow: 0 25px 100px #0007; }
.landing-auth-dialog[open] { animation: openAuth .25s ease-out; }
.landing-auth-dialog:has(#registerPanel:not([hidden])) { width: min(620px,calc(100% - 28px)); }
.register-step[hidden], #registerLicenseGroup[hidden] { display: none !important; }
.register-type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0 20px; }
.register-type-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 18px 18px 18px 45px; border: 1.5px solid var(--brand-border); border-radius: 16px; cursor: pointer; background: var(--brand-page); transition: border-color .18s, background .18s, box-shadow .18s; }
.register-type-card:hover, .register-type-card:focus-within { border-color: var(--brand-primary); box-shadow: 0 4px 18px #6236D91a; }
.register-type-card:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-soft); box-shadow: 0 4px 20px #6236D91a; }
.register-type-card input { appearance: none; position: absolute; top: 18px; left: 16px; width: 20px; height: 20px; border: 2px solid #98A2B3; border-radius: 50%; background: white; margin: 0; cursor: pointer; }
.register-type-card input:checked { border: 6px solid var(--brand-primary); }
.register-type-card input:focus-visible, .register-terms input:focus-visible, .terms-dialog-accept input:focus-visible { outline: 3px solid #20C99788; outline-offset: 3px; }
.register-type-card span { font-size: 12px; color: var(--brand-muted); }
.register-terms { margin: 14px 0 22px; padding: 15px; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-page); line-height: 1.9; }
.register-terms label, .terms-dialog-accept { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.register-terms input, .terms-dialog-accept input { appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 3px 0 0; border: 2px solid #98A2B3; border-radius: 7px; background: white; cursor: pointer; }
.register-terms .custom-check, .terms-dialog-accept .custom-check { display: none; }
.register-terms input:checked, .terms-dialog-accept input:checked { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: inset 0 0 0 3px var(--brand-primary); }
.register-terms input:checked::after, .terms-dialog-accept input:checked::after { content: "✓"; display: block; color: white; font-size: 17px; font-weight: 800; line-height: 17px; text-align: center; }
.register-terms button { display: inline; padding: 0; border: 0; color: var(--brand-primary); background: none; text-decoration: underline; text-underline-offset: 4px; font: inherit; font-weight: 700; cursor: pointer; }
.register-terms-dialog { position: fixed; inset: 0; margin: auto; width: min(820px,calc(100% - 28px)); height: min(78vh,760px); max-height: calc(100dvh - 24px); border: 1px solid var(--brand-border); border-radius: 22px; padding: 0; overflow: hidden; background: white; color: var(--brand-ink); box-shadow: 0 25px 80px #15182b55; }
.register-terms-dialog::backdrop { background: #15182baa; backdrop-filter: blur(4px); }
.terms-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--brand-border); }
.terms-dialog-heading h3 { margin: 0; font-size: clamp(18px,2.4vw,24px); }
.terms-dialog-heading button { flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 27px; cursor: pointer; }
.register-terms-dialog #registerTermsText { white-space: pre-wrap; line-height: 2.25; padding: 24px 32px; overflow: auto; height: calc(100% - 175px); font-size: 15px; }
.terms-dialog-accept { margin: 0 24px 20px; padding: 15px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-page); font-weight: 700; }
.register-back { margin-bottom: 16px; }
.landing-auth-dialog::backdrop { background: #15182Bbd; backdrop-filter: blur(7px); }
.landing-auth-dialog .landing-auth-forms { display: block; padding: 0; margin: 0; }
.landing-auth-dialog .auth-card { padding: 45px 28px 28px; box-shadow: none; }
.password-recovery-link { width: 100%; margin-top: 14px; padding: 13px 14px; border: 1px solid #6236d933; border-radius: 14px; background: #f8f6ff; color: var(--brand-primary); display: flex; align-items: center; gap: 12px; text-align: right; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.password-recovery-link:hover { border-color: var(--brand-primary); background: var(--brand-soft); transform: translateY(-1px); }
.password-recovery-link:focus-visible, .recovery-back:focus-visible { outline: 3px solid #20c99766; outline-offset: 2px; }
.password-recovery-link svg { flex: 0 0 35px; width: 35px; height: 35px; padding: 7px; border-radius: 10px; background: white; box-shadow: 0 3px 12px #15182b12; }
.password-recovery-link span { display: flex; flex-direction: column; gap: 1px; }
.password-recovery-link strong { color: var(--brand-ink); font-size: 14px; }
.password-recovery-link small { color: var(--brand-muted); font-size: 11px; }
.password-recovery-view { animation: openAuth .2s ease-out; }
.recovery-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.recovery-heading .recovery-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--brand-soft); color: var(--brand-primary); }
.recovery-heading svg { width: 27px; height: 27px; }
.recovery-heading h2 { margin: 0 0 4px; font-size: 21px; }
.landing-auth-dialog .recovery-heading p { margin: 0; line-height: 1.8; }
.password-recovery-view .btn { width: 100%; }
.password-recovery-view .form-group small { display: block; margin-top: 4px; color: var(--brand-muted); }
.recovery-verified { margin-bottom: 18px; padding: 11px 13px; border: 1px solid #20c99755; border-radius: 12px; background: #effcf7; color: #116b4d; font-size: 13px; font-weight: 700; }
.recovery-verified span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 5px; border-radius: 50%; background: var(--brand-mint); color: white; }
.landing-auth-dialog .forgot-username-note { margin: 18px 0 10px; padding: 12px 14px; border-right: 3px solid var(--brand-primary); border-radius: 10px; background: var(--brand-page); color: var(--brand-muted); line-height: 1.9; }
.forgot-username-note strong { display: block; color: var(--brand-ink); }
.password-recovery-view .message { margin-top: 10px; }
.recovery-back { width: 100%; margin-top: 10px; padding: 8px; border: 0; background: transparent; color: var(--brand-primary); font: inherit; font-weight: 700; cursor: pointer; }
.landing-auth-dialog .registration-complete > :not(#registerSuccess) { display: none !important; }
.landing-auth-dialog .auth-card.registration-complete { padding: 36px 28px; }
.register-success { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 20px; border: 1px solid #20c99766; border-radius: 20px; background: linear-gradient(160deg,#effcf7,#f8fffc); text-align: center; }
.register-success-icon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #20c99722; color: #13865f; }
.register-success-icon svg { width: 48px; height: 48px; }
.landing-auth-dialog .register-success h2 { margin: 0; color: #116b4d; font-size: clamp(22px,3vw,29px); }
.landing-auth-dialog .register-success p { margin: 0 0 12px; color: var(--brand-ink); font-size: 16px; }
.register-success-login { max-width: 300px; min-height: 48px; font-size: 16px; }
.register-success-login span { margin-right: 8px; }
.close-auth { position: absolute; top: 12px; left: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; font-size: 25px; color: var(--brand-navy); background: #F2EEFC; cursor: pointer; z-index: 1; }
.landing-page.auth-open { overflow: hidden; }
.landing-page [hidden] { display: none !important; }
@keyframes exchangeTravel { 0% { right: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { right: calc(100% - 24px); opacity: 0; } }
@keyframes hubPulse { 50% { transform: scale(1.12); opacity: .35; } }
@keyframes openAuth { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width: 760px) {
    .exchange-scene { grid-template-columns: minmax(0,1fr) 25px 105px 25px minmax(0,1fr); padding: 25px 10px; }
    .scene-hub img { width: 70px; height: 70px; border-radius: 18px; }
    .scene-hub strong { font-size: 16px; }
    .hub-orbit { width: 90px; height: 90px; top: -10px; }
    .scene-pharmacy h3 { font-size: 11px; }
    .scene-pharmacy p, .scene-badge { font-size: 10px; }
    .landing-story, .landing-offers, .landing-access { padding-inline: 18px; }
    .landing-offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .story-steps { gap: 16px; font-size: 11px; flex-wrap: wrap; }
}
@media(max-width: 480px) {
    .landing-quick-auth { top: auto; right: 12px; bottom: 12px; left: 12px; justify-content: center; }
    .landing-quick-auth button { flex: 1; justify-content: center; }
    .landing-page .auth-header .brand-name { font-size: 25px; }
    .landing-hero { padding: 45px 18px 25px; }
    .hero-intro { font-size: 20px; }
    .hero-description { font-size: 13px; }
    .exchange-scene { grid-template-columns: 1fr; gap: 18px; }
    .pharmacy-building { width: 130px; margin-block: 0; }
    .scene-pharmacy h3 { font-size: 14px; }
    .scene-pharmacy p { font-size: 12px; }
    .scene-connection { width: 58px; justify-self: center; transform: rotate(90deg); margin: 22px 0; }
    .landing-offer-grid { grid-template-columns: 1fr; }
    .access-options { gap: 12px; }
    .access-card { padding: 25px 12px; }
    .access-card span { font-size: 11px; }
}
@media(prefers-reduced-motion: reduce) {
    .landing-page *, .landing-page *::before, .landing-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Illustrated connection scene */
.exchange-scene { overflow: hidden; background: radial-gradient(circle at 50% 50%,#6236D94d 0,transparent 36%),radial-gradient(circle at 17% 45%,#20C99722 0,transparent 30%),radial-gradient(circle at 83% 45%,#8E65F028 0,transparent 30%),#15182B; }
.exchange-scene::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(#BFB2FF 1px,transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); }
.scene-pharmacy { position: relative; padding: 12px 4px 8px; border: 1px solid #ffffff1c; border-radius: 22px; background: linear-gradient(150deg,#ffffff14,#ffffff05 58%,#ffffff0b); box-shadow: 0 16px 40px #080C2480,inset 0 1px #ffffff22; backdrop-filter: blur(5px); }
.scene-destination { background: linear-gradient(210deg,#20C99718,#ffffff06 55%,#6236D923); }
.pharmacy-stage { position: relative; max-width: 270px; margin: 2px auto; aspect-ratio: 320/255; }
.pharmacy-building { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; filter: drop-shadow(0 14px 18px #070A2588); animation: pharmacyFloat 5s ease-in-out infinite; }
.scene-destination .pharmacy-building { transform: scaleX(-1); animation: pharmacyFloatReverse 5.5s ease-in-out infinite; }
.stage-glow { position: absolute; inset: 25% 13% 4%; border-radius: 50%; background: #20C99750; filter: blur(33px); animation: stageGlow 4s ease-in-out infinite; }
.scene-destination .stage-glow { background: #9D7BF955; animation-delay: 1s; }
.stage-chip { position: absolute; z-index: 2; padding: 5px 10px; border: 1px solid #ffffff55; border-radius: 9px; background: #F7F8FCe8; color: #42238F; box-shadow: 0 8px 23px #060A2855; font-size: 10px; font-weight: 700; white-space: nowrap; animation: chipFloat 4s ease-in-out infinite; }
.stage-chip-top { top: 12%; right: 0; }
.stage-chip-bottom { bottom: 6%; left: 2%; background: #E8FFF7; color: #08684E; animation-delay: 1.3s; }
.scene-destination .stage-chip-top { right: auto; left: 0; }
.scene-destination .stage-chip-bottom { left: auto; right: 2%; }
.scene-medicine { position: absolute; z-index: 3; top: 31%; left: -8%; display: flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #ffffffaa; border-radius: 13px; background: #ffffffef; color: #42238F; box-shadow: 0 10px 25px #15182b66; font-size: 21px; animation: chipFloat 3.5s ease-in-out infinite; }
.scene-medicine small { font-size: 10px; font-weight: 800; }
.scene-response { left: auto; right: -8%; top: 42%; background: #E8FFF7; color: #087D60; animation-delay: 1.2s; }
.scene-hub img { box-shadow: 0 0 0 8px #ffffff14,0 0 45px #20C99750; animation: hubLevitate 5s ease-in-out infinite; }
.scene-connection { height: 4px; box-shadow: 0 0 16px #20C99788; }
.story-paused .pharmacy-building,.story-paused .stage-glow,.story-paused .stage-chip,.story-paused .scene-hub img { animation-play-state: paused; }
.story-paused .scene-medicine { animation-play-state: paused; }
.landing-info { max-width: 1160px; margin: 0 auto; padding: 18px 28px 72px; }
.landing-info-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.info-panel,.faq-panel { padding: 30px; border: 1px solid #ffffff24; border-radius: 23px; background: linear-gradient(145deg,#6236D929,#ffffff08); box-shadow: inset 0 1px #ffffff16; }
.info-support { background: linear-gradient(145deg,#20C9971d,#ffffff08); }
.info-panel h2 { margin: 10px 0; color: white; font-size: clamp(20px,2.4vw,29px); }
.info-panel p,.faq-list p { color: #D0D5DD; line-height: 2; white-space: pre-wrap; }
.support-contact { display: inline-block; margin: 10px 0 0; padding: 8px 13px; border: 1px solid #20C99766; border-radius: 10px; color: #B4F4E1 !important; overflow-wrap: anywhere; }
.faq-panel { margin-top: 18px; }
.faq-list { max-width: 850px; margin: 22px auto 0; }
.faq-list details { margin: 9px 0; padding: 14px 18px; border: 1px solid #ffffff29; border-radius: 13px; background: #ffffff0b; }
.faq-list summary { cursor: pointer; font-weight: 700; }
.faq-list p { margin: 10px 0 0; }
.offer-preview-city { font-size: 10px; color: #667085; }
@media(max-width:700px) { .landing-info-grid { grid-template-columns: 1fr; } .landing-info { padding-inline: 18px; } .scene-medicine { left: 0; } .scene-response { left: auto; right: 0; } }
@keyframes pharmacyFloat { 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes pharmacyFloatReverse { 50% { transform: scaleX(-1) translateY(-8px) rotate(-1deg); } }
@keyframes chipFloat { 50% { transform: translateY(-6px); } }
@keyframes hubLevitate { 50% { transform: translateY(-5px); box-shadow: 0 0 0 12px #ffffff0c,0 0 55px #20C99770; } }
@keyframes stageGlow { 50% { opacity: .5; transform: scale(1.12); } }

/* Compact circular preview of real published offers */
.landing-carousel { position: relative; margin-top: 24px; padding-inline: 42px; }
.landing-offer-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0; min-height: 145px; touch-action: pan-y; }
.landing-offer-grid.carousel-arrive { animation: carouselArrive .3s ease-out; }
.landing-offer { width: 100%; min-width: 0; min-height: 130px; padding: 11px; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 10px; align-items: stretch; text-align: right; border: 1px solid #E4E7EC; border-radius: 15px; background: #F7F8FC; color: var(--brand-ink); cursor: pointer; transition: transform .2s,border-color .2s,box-shadow .2s; }
.landing-offer:hover,.landing-offer:focus-visible { transform: translateY(-3px); border-color: #A992F1; box-shadow: 0 12px 28px #05082155; }
.offer-preview-image { width: 72px; height: 100%; min-height: 102px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg,#ECE7FC,#DFF9F0); }
.offer-preview-image img { width: 100%; height: 100%; object-fit: cover; }
.offer-image-missing { padding: 8px; color: #667085; font-size: 10px; line-height: 1.7; text-align: center; }
.offer-image-missing::before { content: "✚"; display: block; color: var(--brand-primary); font-size: 27px; line-height: 1; margin-bottom: 7px; }
.offer-preview-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.offer-preview-name { font-size: 14px; line-height: 1.55; color: var(--brand-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.offer-preview-maker { font-size: 11px; color: var(--brand-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-preview-facts { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--brand-border); font-size: 11px; color: #42238F; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 50px; border: 1px solid #A992F1; border-radius: 11px; background: #F7F8FC; color: #42238F; font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px #0508214d; }
.carousel-arrow:hover { background: #EDE8FC; }
.carousel-arrow[hidden] { display: none; }
#landingPrev { right: 0; } #landingNext { left: 0; }
@keyframes carouselArrive { from { opacity: .45; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media(max-width: 760px) { .landing-offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .landing-carousel { padding-inline: 35px; } .pharmacy-stage { width: 100%; } .stage-chip { font-size: 8px; padding: 3px 6px; } }
@media(max-width: 480px) { .scene-pharmacy { width: min(270px,100%); justify-self: center; } .pharmacy-stage { max-width: 230px; } .landing-carousel { padding-inline: 28px; } .landing-offer-grid { gap: 8px; } .landing-offer { grid-template-columns: 1fr; grid-template-rows: 68px 1fr; min-height: 173px; padding: 7px; gap: 7px; } .offer-preview-image { width: 100%; height: 68px; min-height: 0; } .offer-preview-name { font-size: 12px; } .offer-preview-maker,.offer-preview-facts { font-size: 10px; } .carousel-arrow { width: 24px; height: 44px; font-size: 25px; } }

/* The exchange journey is illustrated as one coherent scene with live layers. */
.exchange-scene-v2 { display: block; width: 100%; aspect-ratio: 12 / 5; min-height: 245px; padding: 0; isolation: isolate; border-color: #8e65f075; background: #15182B; overflow: hidden; }
.exchange-scene-v2 .scene-backdrop { display: block; width: 100%; height: 100%; object-fit: cover; animation: sceneBreath 13s ease-in-out infinite alternate; }
.scene-live-light { position: absolute; z-index: 2; top: 26%; width: 16%; height: 37%; border-radius: 50%; pointer-events: none; filter: blur(21px); mix-blend-mode: screen; animation: pharmacyLight 4s ease-in-out infinite; }
.scene-live-source { right: 5%; background: #20c99759; }
.scene-live-destination { left: 5%; background: #936dff66; animation-delay: -2s; }
.scene-spark { position: absolute; z-index: 3; top: 48%; width: 6px; height: 6px; border-radius: 50%; background: #effffb; box-shadow: 0 0 8px 3px #20c997c7; pointer-events: none; animation: sparkTravel 5s linear infinite; }
.scene-spark-two { animation-delay: -1.7s; }
.scene-spark-three { animation-delay: -3.3s; }
.exchange-scene-v2::before { z-index: 1; opacity: .38; background: radial-gradient(circle at 50% 50%,#15182b90 0,transparent 23%); mask-image: none; }
.scene-light-route { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.scene-light-route path { fill: none; stroke: #20C99766; stroke-width: 3; filter: drop-shadow(0 0 9px #20C997); }
.scene-light-route .route-glow { stroke: #E8FFF7; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 42; animation: routeFlow 2.8s linear infinite; }
.scene-hub-v2 { position: absolute; z-index: 5; left: 50%; top: 44%; transform: translate(-50%,-50%); padding: 15px 22px; min-width: 180px; border: 1px solid #ffffff6e; border-radius: 24px; background: #15182bdd; box-shadow: 0 12px 46px #050821bd,0 0 35px #6236D955; backdrop-filter: blur(12px); }
.scene-hub-v2 img { width: 75px; height: 75px; border-radius: 18px; animation: hubLevitate 5s ease-in-out infinite; }
.scene-hub-v2 .hub-orbit { left: 50%; top: 2px; width: 100px; height: 100px; transform: translateX(-50%); }
.scene-hub-v2 strong { font-size: 18px; }
.scene-hub-v2 > span { font-size: 10px; white-space: nowrap; }
.exchange-token { position: absolute; z-index: 4; top: 59%; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid #ffffffa6; border-radius: 999px; background: #f7f8fcef; color: #42238F; font-size: 11px; font-weight: 800; box-shadow: 0 0 22px #20c997b8; white-space: nowrap; }
.exchange-token span { font-size: 17px; }
.exchange-token-offer { animation: offerJourney 7s ease-in-out infinite; }
.exchange-token-reply { background: #e8fff7ef; color: #087d60; animation: replyJourney 7s ease-in-out infinite; }
.scene-label { position: absolute; z-index: 3; bottom: 7%; padding: 8px 13px; border: 1px solid #ffffff6b; border-radius: 11px; background: #15182bbd; color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.scene-label-source { right: 4%; }
.scene-label-destination { left: 4%; }
.story-paused .scene-light-route .route-glow,.story-paused .exchange-token,.story-paused .scene-hub-v2 img,.story-paused .scene-backdrop,.story-paused .scene-live-light,.story-paused .scene-spark { animation-play-state: paused; }
@keyframes sceneBreath { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes pharmacyLight { 50% { opacity: .28; transform: scale(1.13); } }
@keyframes sparkTravel { 0% { left: 76%; top: 48%; opacity: 0; } 12% { opacity: 1; } 55% { top: 55%; } 88% { opacity: 1; } 100% { left: 24%; top: 48%; opacity: 0; } }
@keyframes routeFlow { to { stroke-dashoffset: -54; } }
@keyframes offerJourney { 0%,7% { left: 75%; opacity: 0; transform: translateY(-6px) scale(.8); } 16% { opacity: 1; } 47% { left: 47%; opacity: 1; transform: translateY(7px) scale(1); } 61%,100% { left: 47%; opacity: 0; transform: translateY(7px) scale(.7); } }
@keyframes replyJourney { 0%,49% { left: 47%; opacity: 0; transform: translateY(7px) scale(.7); } 60% { opacity: 1; } 90% { left: 22%; opacity: 1; transform: translateY(-6px) scale(1); } 100% { left: 22%; opacity: 0; transform: translateY(-6px) scale(.8); } }

/* The information after signup/login is a separate light chapter. */
.landing-page .landing-info { max-width: none; margin: 0; padding: 56px max(24px,calc((100% - 1160px) / 2)) 70px; background: #fff; color: #202231;
    --intro-title-size: 22px; --intro-body-size: 13px; --support-title-size: 22px; --support-body-size: 13px;
    --support-contact-size: 13px; --faq-title-size: 22px; --faq-question-size: 14px; --faq-answer-size: 13px; }
.landing-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.landing-info .info-panel,.landing-info .faq-panel { padding: 24px 26px; border: 1px solid #E4E7EC; border-radius: 18px; background: #F7F8FC; box-shadow: 0 10px 28px #15182b0a; }
.landing-info .info-support { background: #F4FBF9; }
.landing-info .section-kicker { color: #6236D9; }
.landing-info .info-panel h2,.landing-info .faq-panel h2 { color: #202231; line-height: 1.5; }
.landing-info #landingIntroTitle { font-size: var(--intro-title-size); }
.landing-info #landingIntroBody { font-size: var(--intro-body-size); }
.landing-info #landingSupportTitle { font-size: var(--support-title-size); }
.landing-info #landingSupportBody { font-size: var(--support-body-size); }
.landing-info #landingSupportContact { font-size: var(--support-contact-size); }
.landing-info #landingFaqTitle { font-size: var(--faq-title-size); }
.landing-info .faq-list summary { font-size: var(--faq-question-size); }
.landing-info .faq-list p { font-size: var(--faq-answer-size); }
.landing-info .info-panel p,.landing-info .faq-list p { color: #667085; line-height: 1.85; }
.landing-info .support-contact { color: #087d60 !important; background: #e8fff7; }
.support-ticket-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #20c99738; }
.support-ticket-cta strong { color: var(--brand-ink); font-size: 14px; }
.support-ticket-cta span { color: var(--brand-muted); font-size: 12px; line-height: 1.8; }
.support-ticket-button,.inline-ticket-button { margin-top: 4px; padding: 9px 14px; border: 1px solid var(--brand-primary); border-radius: 10px; background: white; color: var(--brand-primary); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: color .18s,background .18s,transform .18s; }
.support-ticket-button:hover,.inline-ticket-button:hover { background: var(--brand-primary); color: white; transform: translateY(-1px); }
.forgot-username-note p { margin: 3px 0 8px !important; color: var(--brand-muted) !important; }
.inline-ticket-button { padding: 7px 11px; background: transparent; }
.support-ticket-dialog { margin: auto; width: min(570px,calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 32px 28px 26px; border: 0; border-radius: 23px; background: white; color: var(--brand-ink); box-shadow: 0 25px 100px #0007; }
.support-ticket-dialog[open] { animation: openAuth .22s ease-out; }
.support-ticket-dialog::backdrop { background: #15182bcc; backdrop-filter: blur(7px); }
.close-ticket { position: absolute; top: 12px; left: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand-navy); font-size: 25px; cursor: pointer; }
.ticket-heading { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 22px; padding-left: 35px; }
.ticket-heading-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: #e8fff7; color: #087d60; }
.ticket-heading-icon svg { width: 29px; height: 29px; }
.ticket-heading h2 { margin: 2px 0 4px; color: var(--brand-navy); font-size: 22px; }
.ticket-heading p { color: var(--brand-muted); font-size: 12px; line-height: 1.8; }
.support-ticket-dialog .btn { width: 100%; }
.support-ticket-dialog .form-group small { display: block; margin-top: 5px; color: var(--brand-muted); font-size: 11px; line-height: 1.8; }
.support-ticket-dialog textarea { resize: vertical; min-height: 125px; }
.ticket-success { min-height: 370px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 20px; border: 1px solid #20c99766; border-radius: 20px; background: linear-gradient(160deg,#effcf7,#f8fffc); text-align: center; }
.ticket-success > span { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #20c99722; color: #13865f; }
.ticket-success svg { width: 49px; height: 49px; }
.ticket-success h2 { color: #116b4d; font-size: clamp(22px,3vw,29px); }
.ticket-success p { max-width: 410px; color: var(--brand-ink); font-size: 16px; line-height: 2; }
.ticket-success .btn { max-width: 260px; }
.landing-info .faq-list details { border-color: #E4E7EC; background: #fff; }
.landing-page .landing-footer { max-width: none; margin: 0; padding-inline: max(24px,calc((100% - 1104px) / 2)); border-top: 1px solid #E4E7EC; background: #fff; color: #667085; }
.landing-page .landing-footer > span:first-child { color: #42238F; }
@media(max-width:760px) { .scene-hub-v2 { min-width: 125px; padding: 8px; gap: 4px; } .scene-hub-v2 img { width: 45px; height: 45px; } .scene-hub-v2 strong { font-size: 13px; } .scene-hub-v2 > span { font-size: 8px; } .scene-hub-v2 .hub-orbit { width: 64px; height: 64px; } .scene-label { font-size: 9px; padding: 4px 7px; } .exchange-token { font-size: 9px; padding: 4px 7px; } .landing-info-grid { grid-template-columns: 1fr; } }
@media(max-width:480px) { .exchange-scene-v2 { min-height: 215px; border-radius: 18px; } .scene-backdrop { object-fit: contain !important; } .scene-label { bottom: 5%; } .landing-page .landing-info { padding-inline: 18px; } .landing-info .info-panel,.landing-info .faq-panel { padding: 20px; } }
@media(prefers-reduced-motion:reduce) { .scene-light-route .route-glow,.exchange-token,.scene-hub-v2 img,.scene-backdrop,.scene-live-light,.scene-spark { animation: none !important; } .exchange-token-offer { left: 67%; opacity: 1; } .exchange-token-reply { left: 21%; opacity: 1; } .scene-spark { display: none; } }