@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
/* Opening measured from the Bumbum reference; inner UI follows Desp Kids uxB. */
:root{--font:'Inter',-apple-system,Arial,sans-serif;--head:var(--font);--ink:#17222c;--muted:#7d8790;--accent:#d93a34;--accent-dark:#b82e29;--accent-pale:#fdeceb;--line:#e4e7ea;--paper:#fff}
body:not(.hero-mode){background:#fff;color:var(--ink)}
.shell{max-width:540px;padding:30px 20px 45px}
body:not(.hero-mode) h1{text-align:center;font-size:24px;line-height:1.3;letter-spacing:-.45px;font-weight:800;margin-bottom:24px}
body:not(.hero-mode) .intro{text-align:center;font-size:15px;line-height:1.55}
.inner-reference-header{display:flex;flex-direction:column;align-items:center;padding:6px 0 26px;position:relative}
.inner-reference-header .avatar{width:66px;height:66px;flex-basis:66px;border:3px solid white;outline:2px solid #d93a34;background:#f5f6f7;color:#a4abb2;margin:0 0 10px;box-shadow:none}
.avatar-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-empty svg{width:24px;height:24px}
.inner-reference-header .back{position:absolute;left:0;top:6px;background:transparent;color:#68737d;font-size:30px}
.inner-expert-name{font-size:13px;line-height:1.4;font-weight:700;color:#17222c;margin-bottom:16px}
.inner-reference-header .phase-bars{max-width:260px;width:100%;gap:7px;margin:0 0 16px;height:3px}
.inner-reference-header .phase-bars>span{height:3px;background:#e4e7ea;border-radius:999px}
.inner-reference-header .phase-bars i{background:#d93a34;border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.inner-reference-badge{display:inline-flex;padding:8px 16px;border:1px solid #e2e5e9;border-radius:999px;background:#fff;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#3c454f;box-shadow:0 1px 3px rgba(20,30,40,.06)}
body:not(.hero-mode) .option{border:1.5px solid #e4e7ea;border-radius:12px;background:#fff;box-shadow:0 1.5px 0 #eef1f3;min-height:66px;padding:14px 16px}
body:not(.hero-mode) .option-copy{font-size:14.5px;font-weight:700;line-height:1.35;color:#17222c}
body:not(.hero-mode) .option-copy small{font-size:13px;font-weight:400;line-height:1.45;color:#626e78}
body:not(.hero-mode) .option:hover{background:#fffbfb;border-color:#f2a2a2}
body:not(.hero-mode) .option.selected{background:#fdeceb;border-color:#d93a34;box-shadow:0 2px 0 #f0c4c1}
body:not(.hero-mode) .option.selected .option-copy{color:#8c1f1a}
body:not(.hero-mode) .option.image-option{padding:0}
body:not(.hero-mode) .image-option .option-copy{padding:14px 12px;font-size:13px}
body:not(.hero-mode) .part-option{padding:0 10px 0 0;min-height:74px}
body:not(.hero-mode) .part-option .option-copy{font-size:12px}
body:not(.hero-mode) .primary{border-radius:12px;background:#d93a34;box-shadow:0 3px 0 #b52c27}
body:not(.hero-mode) .sticky-action{background:linear-gradient(transparent,#fff 20%);padding-top:24px}
.media-slot,.before-after>div:nth-child(2) .media-slot{background:#f4f5f6;border-color:#e4e7ea}.media-empty{color:#adb4ba}
.before-after{border-radius:10px;border-color:#e4e7ea;gap:1px}.pair-arrow{display:none}.media-label{font-size:9px;letter-spacing:1px;border-radius:4px;background:#0008;color:#fff}
.prose{font-size:15px;line-height:1.65}.callout{background:#fafafa;border:1px solid #e4e7ea;border-radius:12px}.callout h2{color:#17222c}.quote-placeholder{height:66px;background:#f5f6f7;border-radius:7px;margin:15px}
.pending-stage{height:240px;width:100%;background:#f7f8f9;border:1px dashed #dce0e4;border-radius:12px;margin:20px 0 26px}
.target-card{background:transparent;border:0;padding:20px 0;margin:0}.target-card strong{color:#17222c}
.logo-slot{width:112px;height:54px;aspect-ratio:auto;margin:0 auto 22px;border-radius:4px}.logo-slot .media-empty{min-height:0;height:100%;padding:8px}.logo-slot .media-empty svg{width:22px;height:22px}.logo-slot img{object-fit:contain}
.video-placeholder{background:#171717;border:1px solid #252525;border-radius:8px;box-shadow:none}.video-placeholder .play-symbol{background:transparent;border-color:#777;color:#ddd;box-shadow:none}
#preview-bar{position:fixed!important;bottom:12px!important;right:12px!important;margin:0!important;width:auto!important;opacity:.85;font-family:'Inter',sans-serif}
/* Bumbum opening. No custom logo, editorial kicker or extra sales text. */
body.hero-mode{font-family:'Geist',-apple-system,Arial,sans-serif;--head:'Geist',-apple-system,Arial,sans-serif;background:#0b0b0b;color:#fff;min-height:100vh;min-height:100dvh;overflow-x:hidden}
body.hero-mode::before{content:'';position:fixed;top:-160px;right:-120px;left:auto;bottom:auto;width:720px;height:720px;background:radial-gradient(circle,rgba(229,9,20,.22),transparent 62%);pointer-events:none;z-index:0;transform:none;writing-mode:horizontal-tb}
body.hero-mode::after{content:'';position:fixed;bottom:-200px;left:-160px;width:540px;height:540px;background:radial-gradient(circle,rgba(229,9,20,.14),transparent 62%);pointer-events:none;z-index:0}
.hero-mode .shell{position:relative;z-index:1;max-width:640px;width:100%;padding:40px clamp(16px,5vw,40px) 96px;margin:0 auto}
.reference-header{display:flex;flex-direction:column;align-items:center}
.reference-header .avatar{width:64px;height:64px;flex-basis:64px;border-radius:50%;border:2px solid #e50914;outline:0;box-shadow:0 0 0 3px rgba(229,9,20,.18),0 6px 18px rgba(0,0,0,.35);margin:0 0 14px;background:#1f1f1f;color:#808080}
.reference-header .avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.reference-progress{display:flex;gap:8px;margin-bottom:22px;width:100%;max-width:320px}
.reference-progress span{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.reference-progress .active{background:#e50914;box-shadow:0 0 14px rgba(229,9,20,.55)}
.reference-badge{padding:8px 18px 8px 15px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(229,9,20,.06),0 6px 22px rgba(0,0,0,.4);font-size:.7rem;font-weight:700;letter-spacing:.28em;color:rgba(255,255,255,.93);text-align:center}
.reference-divider{width:110px;height:1px;margin:18px 0 14px;background:linear-gradient(90deg,transparent,rgba(229,9,20,.5),transparent)}
.hero-mode .hero-intro{text-align:center}
.hero-mode .hero-intro h1{font-size:clamp(1.45rem,4.6vw,1.95rem);font-weight:900;line-height:1.22;letter-spacing:-.02em;color:#fff;margin:0 0 20px;max-width:none;text-align:center}
.hero-mode .hero-promise{font-size:clamp(1rem,3.7vw,1.18rem);font-weight:800;line-height:1.4;letter-spacing:-.01em;color:#fff;margin:0 0 24px;max-width:none;text-align:center}
.hero-mode .before-after{margin:0 0 24px;border:1px solid rgba(255,255,255,.12);border-radius:10px;gap:1px;background:rgba(255,255,255,.12)}
.hero-mode .before-after .media-slot,.hero-mode .before-after>div:nth-child(2) .media-slot{aspect-ratio:1/1.05;background:#1f1f1f;border:0;border-radius:0}
.hero-mode .media-empty{color:#737373;min-height:0;height:100%;padding:20px}
.hero-mode .media-empty svg{width:30px;height:30px}
.hero-mode .hero-question{text-align:center}
.hero-mode .hero-question>p{font-size:14px;line-height:1.5;font-weight:500;color:#d2d2d2;margin:0 0 10px}
.hero-mode .hero-question h2{font-size:clamp(1.25rem,4.6vw,1.6rem);font-weight:900;line-height:1.22;letter-spacing:-.02em;color:#fff;margin:0 0 24px}
.hero-mode .hero-question .options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-mode .hero-question .option{display:flex;align-items:center;justify-content:center;min-height:58px;padding:16px 10px;border:0;border-radius:10px;background:#e50914;color:#fff;box-shadow:0 8px 26px rgba(229,9,20,.28);transition:transform .14s,background-color .2s,box-shadow .2s}
.hero-mode .hero-question .option-copy{color:#fff;font-family:inherit;font-size:14px;font-weight:800;line-height:1.3;letter-spacing:-.01em;text-align:center}
.hero-mode .hero-question .radio-mark{display:none}
.hero-mode .hero-question .option:hover{background:#f6121d}
.hero-mode .hero-question .option:active{transform:scale(.97)}
.hero-mode .hero-question .option.selected{background:#b0060f;outline:2px solid white;outline-offset:2px}
.hero-mode .screen-enter{animation:referenceEnter .22s ease both}
@keyframes referenceEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:640px){.hero-mode .shell{padding-top:48px}.hero-mode .before-after{max-width:420px;width:100%;margin-left:auto;margin-right:auto}.hero-mode .hero-question .options{max-width:420px;margin:0 auto}.hero-mode .hero-question .option-copy{font-size:16px}}
@media(max-width:400px){body:not(.hero-mode) h1{font-size:22px}.hero-mode .hero-question .option-copy{font-size:13px}body:not(.hero-mode) .image-option .option-copy{font-size:12px}.hero-mode .hero-question h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.hero-mode .screen-enter{animation:none}}
body:not(.hero-mode) .art-frame,body:not(.hero-mode) .image-option:nth-child(even) .art-frame{background:#f4f5f6}

.expert-instagram{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#17222c;font-size:13px;font-weight:700;line-height:1.4;text-decoration:none;margin:0 0 16px;white-space:nowrap}.expert-instagram:hover{text-decoration:underline;text-underline-offset:3px}.expert-check{width:16px;height:16px;flex:0 0 16px}.hero-mode .expert-instagram{color:#fff}.reference-header .avatar{margin-bottom:10px}

.reference-progress>span{overflow:hidden}.reference-progress i{display:block;height:100%;background:#e50914;box-shadow:0 0 14px rgba(229,9,20,.55);border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.3,1)}