/* Onboarding layout extensions. Shared brand values come from brand-tokens.css. */
@import url('./brand-fonts.css');
.onboarding-brand{
 --am-bg:var(--dg-paper);--am-surface:#fff;--am-surface-2:var(--dg-paper);
 --am-ink:var(--dg-ink);--am-ink-hover:var(--dg-ink);--am-ink-2:var(--dg-muted);--am-muted:var(--dg-muted);
 --am-line:var(--dg-ink);--am-line-strong:var(--dg-ink);--am-accent:var(--dg-teal-deep);
 --am-accent-ink:#fff;--am-accent-soft:var(--dg-paper);--am-danger:var(--dg-pink-deep);--am-success:var(--dg-teal-deep);
 --am-font-body:"DM Sans",system-ui,sans-serif;--am-font-display:"Bungee","Arial Black",sans-serif;
 --ob-yellow:var(--dg-yellow);--ob-pink:var(--dg-pink);--ob-teal:var(--dg-teal);
 background:var(--am-bg);color:var(--am-ink);font-family:var(--am-font-body);line-height:1.6;
}
.onboarding-brand *{box-sizing:border-box}
.onboarding-brand :focus-visible{outline:3px solid var(--ob-pink);outline-offset:4px}
.onboarding-brand ::selection{background:var(--ob-yellow);color:var(--am-ink)}
.onboarding-brand a{color:var(--am-accent);text-underline-offset:3px}
.onboarding-brand :is(h1,h2,h3){color:var(--am-ink);overflow-wrap:anywhere}
.onboarding-brand h1{font-family:var(--am-font-display);font-size:clamp(28px,4.5vw,48px);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:1.18;text-shadow:3px 3px 0 var(--ob-pink)}
.onboarding-brand :is(h2,h3){font-family:var(--am-font-body);font-weight:700;letter-spacing:-.02em;text-shadow:none}
.onboarding-brand :is(.eyebrow,.demo-eyebrow){font-family:var(--am-font-body);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--am-ink);text-transform:uppercase}
.onboarding-brand :is(.lead,.demo-lede){color:var(--am-ink-2);font-family:var(--am-font-body);font-size:18px;line-height:1.65}
.onboarding-brand :is(.muted,.small,.demo-small,.field-hint){color:var(--am-muted)}
.onboarding-brand .am-main{padding-block:40px 64px;min-width:0}
.onboarding-brand .am-header{background:var(--am-bg);border-bottom:3px solid var(--am-ink);box-shadow:none}
.onboarding-brand .am-header-inner{min-height:88px}
.onboarding-logo,.onboarding-brand .demo-logo img{display:block;width:164px;height:38px;object-fit:contain}
.onboarding-brand .am-footer{border-top:3px solid var(--am-ink);background:var(--am-ink);color:white}
.onboarding-brand .am-footer :is(a,p,.am-footer-brand,.am-footer-legal){color:white}
.onboarding-brand .am-footer .am-footer-brand i{background:var(--ob-yellow)}
.onboarding-brand :is(.am-focus-card,.card,.panel,.demo-card){background:#fff;border:3px solid var(--am-ink);border-radius:16px;box-shadow:5px 5px 0 var(--am-ink);padding:clamp(20px,4vw,32px)}
.onboarding-brand .am-focus{max-width:640px;margin:24px auto}
.onboarding-brand .am-focus-card{width:100%;max-width:none}
.onboarding-brand .am-frames{display:none}
.onboarding-brand :is(button,.button,.btn,.am-button,.demo-button){
 font-family:var(--am-font-body);font-weight:700;font-size:16px;line-height:1.4;
 background:var(--ob-yellow);color:var(--am-ink);border:3px solid var(--am-ink);border-radius:999px;
 padding:12px 22px;min-height:48px;box-shadow:3px 3px 0 var(--am-ink);text-decoration:none;
 transition:transform 120ms ease,box-shadow 120ms ease;cursor:pointer;white-space:normal;
}
.onboarding-brand :is(button,.button,.btn,.am-button,.demo-button):hover{background:var(--ob-yellow);color:var(--am-ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--am-ink)}
.onboarding-brand :is(button,.button,.btn,.am-button,.demo-button):active{transform:translate(3px,3px);box-shadow:none}
.onboarding-brand :is(button,.button,.btn,.am-button,.demo-button):disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.onboarding-brand :is(.demo-button--secondary,.button.quiet){background:#fff}
.onboarding-brand :is(.demo-button--secondary,.button.quiet):hover{background:var(--am-bg)}
.onboarding-brand :is(.demo-quiet,.reveal){background:transparent;border:0;box-shadow:none;min-height:44px;padding:8px 12px;color:var(--am-ink);text-decoration:underline}
.onboarding-brand :is(.demo-quiet,.reveal):hover{background:var(--am-bg);box-shadow:none;transform:none}
.onboarding-brand :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select){
 width:100%;max-width:100%;min-width:0;background:#fff;color:var(--am-ink);border:2px solid var(--am-ink);border-radius:12px;
 padding:13px 14px;font-family:var(--am-font-body);font-size:16px;line-height:1.5;box-shadow:none;
}
.onboarding-brand textarea{resize:vertical;min-height:104px}
.onboarding-brand input:is([type=checkbox],[type=radio]){accent-color:var(--am-accent);width:20px;height:20px;flex-shrink:0}
.onboarding-brand label{color:var(--am-ink);font-weight:700}
.onboarding-brand .password-field input{padding-right:78px!important}
.onboarding-brand :is(.notice,.errors,.am-notice){border:2px solid var(--am-ink);border-radius:12px;background:#fff;color:var(--am-ink);box-shadow:3px 3px 0 var(--am-ink);padding:16px 20px;overflow-wrap:anywhere}
.onboarding-brand :is(.notice.error,.errors){border-color:var(--am-danger);color:var(--am-danger);box-shadow:3px 3px 0 var(--am-danger)}
.onboarding-brand .notice.warn{background:var(--ob-yellow)}
.onboarding-brand .price-items>div{border-color:var(--am-line);gap:16px}
.onboarding-brand .price-items dd{overflow-wrap:anywhere}
.onboarding-brand #helcim-checkout{margin-top:24px}
.onboarding-brand #helcim-checkout>label{display:flex;align-items:flex-start;gap:12px;line-height:1.6;margin-bottom:20px}
/* Every demo state, including private team review, uses the same branded shell. */
.onboarding-brand .demo-shell{max-width:960px;color:var(--am-ink);padding:28px clamp(18px,4vw,48px) 40px}
.onboarding-brand .demo-shell--review{max-width:1280px}
.onboarding-brand .demo-header{margin-bottom:36px;gap:16px}
.onboarding-brand .demo-header a{color:var(--am-ink)}
.onboarding-brand .demo-logo{letter-spacing:normal;flex-shrink:0}
.onboarding-brand .demo-shell h1{font-family:var(--am-font-display);font-size:clamp(30px,5vw,52px);font-weight:400;letter-spacing:.015em;line-height:1.15;margin-bottom:24px}
.onboarding-brand .demo-shell--review>h1{font-family:var(--am-font-body);font-size:clamp(24px,4vw,36px);text-transform:none;text-shadow:none}
.onboarding-brand .demo-intro{max-width:720px;background:var(--ob-yellow);border:3px solid var(--am-ink);border-radius:24px;box-shadow:8px 8px 0 var(--am-ink);padding:clamp(24px,5vw,44px)}
.onboarding-brand .demo-intro .demo-lede{color:var(--am-ink)}
.onboarding-brand .demo-intro .demo-card{margin-bottom:0}
.onboarding-brand :is(.demo-steps,.demo-progress){color:var(--am-muted);font-weight:500;gap:16px}
.onboarding-brand .demo-progress{padding:14px 0;border-bottom:2px solid var(--am-ink)}
.onboarding-brand .demo-progress [aria-current]{color:var(--am-ink);background:var(--ob-yellow);border-radius:999px;padding:2px 10px;font-weight:700}
.onboarding-brand #demo-status{background:var(--ob-yellow);border:3px solid var(--am-ink);border-radius:24px;padding:clamp(24px,4vw,36px);box-shadow:5px 5px 0 var(--am-ink);margin-block:28px 36px}
.onboarding-brand .demo-status-icon{color:var(--am-ink);font-size:48px;line-height:1;margin:20px 0}
.onboarding-brand #demo-status .demo-lede{color:var(--am-ink)}
.onboarding-brand .demo-card summary{cursor:pointer;font-size:20px;font-weight:700;line-height:1.4}
.onboarding-brand .demo-card summary span{color:var(--am-muted)}
.onboarding-brand .demo-card figure{margin:20px 0;padding:16px;background:var(--am-bg);border:2px solid var(--am-ink);border-radius:12px}
.onboarding-brand .demo-card figcaption{font-size:13px;color:var(--am-muted);margin-top:10px}
.onboarding-brand .demo-footer{border-top:2px solid var(--am-ink);color:var(--am-muted);padding-top:24px;gap:16px}
.onboarding-brand .demo-ad-formats img{border:2px solid var(--am-ink);border-radius:16px;box-shadow:3px 3px 0 var(--am-ink)}
.onboarding-brand .demo-upgrade{background:white;border:3px solid var(--am-ink);box-shadow:5px 5px 0 var(--am-ink);border-radius:16px;padding:clamp(20px,4vw,32px)}
.onboarding-brand .demo-candidate{border:3px solid var(--am-ink);border-radius:16px;box-shadow:3px 3px 0 var(--am-ink)}
.onboarding-brand .demo-candidate:has(input:checked){background:var(--ob-yellow);outline:3px solid var(--ob-pink);outline-offset:3px}
.onboarding-brand .demo-actions{gap:16px}
.onboarding-brand .demo-delivery-banner{background:var(--am-ink);color:white;border:3px solid var(--am-ink);border-radius:16px;box-shadow:5px 5px 0 var(--ob-pink);padding:20px;overflow-wrap:anywhere}
.onboarding-brand .demo-delivery-banner a{color:var(--ob-yellow)}
.onboarding-brand .demo-delivery-banner button{background:transparent;border:0;box-shadow:none;color:white;min-height:44px;padding:6px 12px}
.onboarding-brand #demo-kit-ready{display:block;width:fit-content;max-width:100%;padding:12px 18px;border:2px solid var(--am-ink);border-radius:12px;background:white;color:var(--am-accent);font-weight:700;margin-block:20px}
@media(max-width:600px){
 .onboarding-brand .am-header-inner{min-height:72px}
 .onboarding-logo,.onboarding-brand .demo-logo img{width:138px;height:32px}
 .onboarding-brand .am-main{padding-block:24px 40px}
 .onboarding-brand .demo-shell{padding:20px 18px 32px}
 .onboarding-brand .demo-header{margin-bottom:28px}
 .onboarding-brand .demo-intro{padding:24px 18px;border-radius:20px;box-shadow:5px 5px 0 var(--am-ink)}
 .onboarding-brand .demo-shell h1{font-size:30px;text-shadow:2px 2px 0 var(--ob-pink)}
 .onboarding-brand .demo-progress{justify-content:flex-start;font-size:12px}
 .onboarding-brand .demo-fields{grid-template-columns:1fr;gap:0}
 .onboarding-brand :is(.demo-actions .demo-button,.demo-upgrade .demo-button){width:100%}
 .onboarding-brand .demo-ad-formats{grid-template-columns:1fr}
 .onboarding-brand .price-items>div{grid-template-columns:1fr;gap:4px}
 .onboarding-brand .price-items dd{text-align:left}
}
@media(prefers-reduced-motion:reduce){.onboarding-brand *, .onboarding-brand *::before,.onboarding-brand *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.onboarding-brand :is(input,textarea,select,button,a):focus-visible{outline:3px solid var(--ob-pink);outline-offset:4px}
@media(max-width:600px){
 .onboarding-brand .demo-shell h1{font-size:28px}
 .onboarding-brand .price-items>div{flex-direction:column;align-items:flex-start}
 .onboarding-brand .price-items dd{margin-left:0;text-align:left}
}