/* All dialog rules are scoped so the earning guide can share any Panda screen. */
.earning-guide-entry { padding:22px; margin:20px 0; border-radius:20px; background:#07382b; color:#f1f4f0; box-shadow:inset 0 0 0 1px rgba(84,245,190,.17); }
.earning-guide-entry .earning-guide-kicker { color:#54f5be; margin:0 0 7px; font:700 11px/1.4 var(--body,'IBM Plex Sans',sans-serif); text-transform:uppercase; letter-spacing:.08em; }
.ph .earning-guide-entry { margin:20px var(--gutter,20px); }
.ph .visual-guide-actions .earning-guide-launch { grid-column:1/-1; }
.support-page .guide-card>.earning-guide-launch { margin-top:14px; }
.invite .earning-guide-launch { margin-top:16px; }
.earning-guide-entry h2 { color:#fff; margin:0; font:800 25px/1.12 var(--display,'Bricolage Grotesque',sans-serif); letter-spacing:-.03em; }
.earning-guide-entry p { margin:9px 0 16px; color:#c8e5da; font:400 14px/1.5 var(--body,'IBM Plex Sans',sans-serif); max-width:48em; }
.earning-guide-launch { display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:48px; padding:13px 18px; border:0; border-radius:12px; color:#07382b; background:#fcc53a; box-shadow:inset 0 -2px 0 rgba(7,56,43,.14); font:700 15px/1.3 var(--body,'IBM Plex Sans',sans-serif); cursor:pointer; text-decoration:none; text-align:center; }
.earning-guide-launch svg { flex:none; width:20px; height:20px; }
.earning-guide-launch:focus-visible { outline:3px solid #54f5be; outline-offset:3px; }
.earning-guide-launch:active { transform:translateY(1px); }
.earning-guide-open { overscroll-behavior:none; }
.eg-dialog { --eg-ink:#07382b; --eg-mint:#54f5be; --eg-gold:#fcc53a; --eg-paper:#f8faf6; box-sizing:border-box; position:fixed; inset:0; width:min(620px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:hidden; border:1px solid rgba(215,229,220,.8); border-radius:18px; color:var(--eg-ink); background:var(--eg-paper); box-shadow:0 24px 80px rgba(0,15,10,.25); font:400 14px/1.5 var(--body,'IBM Plex Sans',system-ui,sans-serif); }
.eg-dialog[open] { display:flex; flex-direction:column; animation:eg-arrive .24s cubic-bezier(.2,.7,.2,1); }
.eg-dialog::backdrop { background:rgba(2,27,21,.62); backdrop-filter:blur(4px); }
.eg-dialog *, .eg-dialog *::before, .eg-dialog *::after { box-sizing:border-box; }
.eg-dialog button,.eg-dialog a,.eg-dialog input { font-family:inherit; }
.eg-dialog button { cursor:pointer; }
.eg-dialog button:disabled { cursor:wait; opacity:.65; }
.eg-dialog :is(button,a,input):focus-visible { outline:3px solid #137b5b; outline-offset:3px; }
.eg-dialog button,.eg-dialog a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.eg-dialog.eg-is-calm :is(button,a) { transition:none; }
.eg-toolbar { display:flex; flex:none; align-items:center; gap:10px; min-height:62px; padding:8px 16px; border-bottom:1px solid #e0e9e2; background:#f8faf6; color:#07382b; }
.eg-brand { flex:1; display:flex; align-items:center; gap:8px; font:650 12px/1.25 var(--body,'IBM Plex Sans',sans-serif); letter-spacing:.01em; }
.eg-brand::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#d5a324; box-shadow:0 0 0 4px #f5eed9; }
.eg-back,.eg-close { flex:none; min-height:44px; border:0; border-radius:8px; color:#476455; background:transparent; font-size:13px; transition:background .16s ease,color .16s ease; }
.eg-back { padding:10px 9px; font-weight:600; }
.eg-back[hidden] { display:none; }
.eg-close { width:44px; font-size:25px; line-height:1; }
.eg-toolbar :is(button,a):focus-visible { outline-color:#137b5b; }
.eg-path { flex:none; padding:10px 24px; border-bottom:1px solid #e0e9e2; background:#f0f5ef; }
.eg-path[hidden] { display:none; }
.eg-path ol { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; padding:0; margin:0; list-style:none; color:#476455; font-size:11px; }
.eg-path li:not(:last-child)::after { content:'›'; margin-left:8px; color:#6c8072; }
.eg-path [aria-current] { color:#07382b; font-weight:700; }
.eg-body { min-height:0; padding:24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#bacdbf transparent; }
.eg-body::-webkit-scrollbar { width:7px; }.eg-body::-webkit-scrollbar-thumb { border-radius:7px; background:#bacdbf; border:2px solid #f8faf6; }
.eg-hero { display:flex; align-items:center; gap:14px; margin:0 0 19px; }
.eg-hero-copy { min-width:0; }
.eg-art { display:block; flex:none; width:58px; height:58px; }
.eg-title { margin:0; color:#07382b; font:750 clamp(24px,3.6vw,28px)/1.14 var(--display,'Bricolage Grotesque',system-ui,sans-serif); letter-spacing:-.035em; }
.eg-dialog .eg-title:focus,.eg-dialog .eg-title:focus-visible { outline:none!important; box-shadow:none!important; }
.eg-intro { margin:8px 0 0; color:#5b7162; font-size:13px; line-height:1.55; }
.eg-copy { margin:0; }
.eg-section-title { margin:20px 0 11px; font:650 14px/1.3 var(--body,'IBM Plex Sans',sans-serif); color:#07382b; }
.eg-choices { display:grid; gap:9px; }
.eg-choice { display:flex; align-items:center; gap:13px; width:100%; min-height:100px; padding:15px; border:1px solid #d9e5dc; border-radius:12px; background:#fff; color:#07382b; text-align:left; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.eg-choice .eg-art { width:48px; height:48px; }
.eg-choice-copy { flex:1; min-width:0; }
.eg-choice-copy strong { display:block; margin:3px 0 5px; font:750 18px/1.15 var(--display,'Bricolage Grotesque',sans-serif); letter-spacing:-.025em; }
.eg-choice-note { display:block; color:#5b7162; font-size:12.5px; line-height:1.5; }
.eg-tag { display:block; color:#63766a; font:600 9px/1.4 var(--body,'IBM Plex Sans',sans-serif); text-transform:uppercase; letter-spacing:.045em; }
.eg-chevron { flex:none; font-size:19px; color:#44836a; }
.eg-note { margin:16px 0 0; padding:11px 13px; border:1px solid #e7e6d4; border-radius:8px; color:#66705b; background:#f3f3e9; font-size:11.5px; line-height:1.6; }
.eg-stats { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:1px; overflow:hidden; border:1px solid #d0ded2; border-radius:12px; margin:16px 0; background:#d0ded2; }
.eg-stats>div { padding:13px 11px; background:#fff; min-width:0; }
.eg-stats dt { margin:0 0 6px; color:#64766a; font-size:11px; line-height:1.3; }
.eg-stats dd { margin:0; font:800 18px/1.15 var(--display,'Bricolage Grotesque',sans-serif); overflow-wrap:anywhere; }
.eg-tiers { display:grid; gap:8px; }
.eg-tier { display:flex; align-items:center; gap:10px; width:100%; min-height:68px; padding:12px 15px; border:1px solid #d9e5dc; border-radius:9px; color:#07382b; background:#fff; text-align:left; transition:border-color .16s ease,background .16s ease; }
.eg-tier>span:first-child { flex:1; min-width:0; }
.eg-tier strong { display:block; font-size:15px; line-height:1.3; }
.eg-tier-note { display:block; margin-top:4px; color:#637668; font-size:12px; line-height:1.35; }
.eg-tier-price { white-space:nowrap; font:800 20px/1.15 var(--display,'Bricolage Grotesque',sans-serif); }
.eg-action { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:12px 16px; margin:18px 0 0; border:1px solid transparent; border-radius:9px; color:#fff; background:#07382b; font:650 13px/1.4 var(--body,'IBM Plex Sans',sans-serif); text-align:center; text-decoration:none; transition:background .16s ease,border-color .16s ease; }
.eg-action.eg-secondary { color:#07382b; background:transparent; border-color:#b6cbbd; }
.eg-flow { display:grid; gap:14px; list-style:none; padding:0; margin:22px 0; }
.eg-flow li { display:flex; align-items:flex-start; gap:12px; color:#395b49; font-size:13.5px; line-height:1.55; }
.eg-flow-number { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; color:#07382b; background:#ceebdb; font-size:12px; font-weight:800; }
.eg-timeline { padding:17px 0 0; display:grid; grid-template-columns:repeat(3,1fr); color:#627769; font-size:11px; }
.eg-timeline>span { text-align:center; }
.eg-timeline-bar { grid-column:1/-1; height:8px; margin:10px 10% 8px; border-radius:20px; background:linear-gradient(90deg,#07382b,#39c48e); position:relative; }
.eg-timeline-bar::before,.eg-timeline-bar::after,.eg-timeline-bar i { content:''; position:absolute; top:50%; width:14px; height:14px; transform:translate(-50%,-50%); border-radius:50%; border:3px solid #07382b; background:#54f5be; }
.eg-timeline-bar::before { left:0; }.eg-timeline-bar i { left:50%; }.eg-timeline-bar::after { left:100%; }
.eg-timeline-values { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); text-align:center; font-size:14px; font-weight:700; color:#07382b; }
.eg-ref-tree { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0; }
.eg-ref-tree>div { position:relative; padding:15px 10px; border-radius:12px; border:1px solid #c4decf; background:#e3f5e9; text-align:center; }
.eg-ref-tree strong { display:block; color:#07382b; font:800 29px/1.1 var(--display,'Bricolage Grotesque',sans-serif); }
.eg-ref-tree span { display:block; margin-top:7px; color:#476455; font-size:11px; line-height:1.4; }
.eg-invite { margin:18px 0 0; padding:16px; border-radius:14px; background:#07382b; color:#f1f4f0; }
.eg-invite label { display:block; margin:0 0 8px; color:#bcdfce; font-size:12px; font-weight:600; }
.eg-invite input { width:100%; min-height:46px; padding:11px; border:1px solid #679581; border-radius:8px; background:#f1f4f0; color:#07382b; font-size:13px; }
.eg-invite .eg-action { margin-top:12px; background:#fcc53a; color:#07382b; }
.eg-invite :is(input,button):focus-visible { outline-color:#54f5be; }
.eg-copy-status { margin:10px 0 0; color:#d5f1e3; font-size:12px; }
.eg-copy-status:empty { display:none; }
.eg-example { padding:18px; border-radius:14px; background:#e1f2e7; border:1px solid #c4decf; }
.eg-example strong { display:block; margin-top:8px; font:800 24px/1.15 var(--display,'Bricolage Grotesque',sans-serif); letter-spacing:-.03em; }
.eg-footer { display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 8px; padding:8px 24px; border-top:1px solid #e0e9e2; background:#f0f5ef; color:#748274; font-size:10px; }
.eg-footer .eg-action { flex:none; width:auto; min-height:44px; margin:0; padding:10px 0; border:0; background:transparent; color:#176b4d; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.eg-guide-target { outline:3px solid #fcc53a!important; outline-offset:5px!important; box-shadow:0 0 0 8px rgba(252,197,58,.2)!important; }
.eg-handoff { display:flex; align-items:center; gap:16px; margin:18px 0; padding:16px; border:1px solid #aadbc5; border-radius:14px; background:#e3f5e9; color:#07382b; font:400 13px/1.5 var(--body,'IBM Plex Sans',sans-serif); }
.eg-handoff>div { flex:1; min-width:0; }.eg-handoff strong { display:block; font-weight:700; }.eg-handoff p { margin:5px 0 0; color:#476455; }.eg-handoff button { flex:none; min-height:44px; padding:10px 14px; border:1px solid #a9c5b4; border-radius:9px; background:transparent; color:#07382b; font:700 12px/1.4 var(--body,'IBM Plex Sans',sans-serif); cursor:pointer; }
@media (hover:hover) { .eg-choice:hover,.eg-tier:hover { border-color:#84b99d; background:#f2f8f1; }.eg-choice:hover { box-shadow:0 2px 7px rgba(7,56,43,.05); }.eg-toolbar button:hover { color:#07382b; background:#eaf2e8; }.eg-action:hover { background:#14573f; }.eg-action.eg-secondary:hover { background:#eaf2e8; }.eg-footer .eg-action:hover { background:transparent; color:#07382b; }.earning-guide-launch:hover { background:#ffd264; } }
@media(max-width:420px) { .eg-dialog { max-height:calc(100dvh - 20px); border-radius:15px; }.eg-toolbar { min-height:58px; padding:7px 10px; gap:8px; }.eg-brand { font-size:11px; }.eg-back { padding:10px 6px; font-size:12px; }.eg-path { padding:9px 17px; }.eg-body { padding:21px 17px; scrollbar-gutter:auto; }.eg-hero { gap:11px; }.eg-hero>.eg-art { width:48px;height:48px; }.eg-title { font-size:25px; }.eg-intro { font-size:12.5px; }.eg-choice { padding:13px 12px; gap:10px; }.eg-choice .eg-art { width:43px; height:43px; }.eg-choice-copy strong { font-size:18px; }.eg-choice-note { font-size:12px; }.eg-chevron { font-size:18px; }.eg-tier { padding:12px; }.eg-tier-price { font-size:19px; }.eg-stats>div { padding:12px 8px; }.eg-stats dd { font-size:16px; }.eg-ref-tree strong { font-size:25px; }.eg-footer { padding:7px 17px; }.earning-guide-entry { padding:20px; }.eg-handoff { flex-wrap:wrap; gap:8px; }.eg-handoff button { margin-left:auto; } }
@media(max-width:330px) { .eg-choice .eg-art { width:35px;height:35px; }.eg-choice { gap:9px; padding:12px 10px; }.eg-choice-copy strong { font-size:17px; }.eg-choice .eg-chevron { display:none; }.eg-hero>.eg-art { display:none; }.eg-stats { grid-auto-flow:row; grid-template-columns:1fr; }.eg-stats>div { display:flex; align-items:center; justify-content:space-between; gap:12px; }.eg-stats dt { margin:0; }.eg-tier { flex-wrap:wrap; gap:7px; }.eg-tier>span:first-child { flex-basis:100%; }.eg-tier-note { font-size:11px; }.eg-tier-price { font-size:17px; }.eg-tier .eg-chevron { margin-left:auto; } }
@media(prefers-reduced-motion:reduce) { .eg-dialog[open] { animation:none; }.eg-dialog :is(button,a) { transition:none; }.earning-guide-launch:active { transform:none; } }
@media(forced-colors:active) { .eg-dialog,.eg-choice,.eg-tier,.eg-action,.eg-stats,.eg-invite,.earning-guide-entry,.earning-guide-launch { border:1px solid CanvasText; }.eg-dialog::backdrop { background:Canvas; opacity:.8; }.eg-guide-target { outline-color:Highlight!important; } }
@keyframes eg-arrive { from { opacity:0;transform:translateY(6px); } to { opacity:1;transform:translateY(0); } }