/* Skavio Website DEV v2 shared design system.
 * Authoritative styles for any newly built or retained static preview page.
 * Consistent with website/style.css token palette; production untouched.
 */
:root{
  --sk-bg:#f6f8fb;
  --sk-surface:#fff;
  --sk-surface-soft:#edf2f8;
  --sk-ink:#182235;
  --sk-muted:#526176;
  --sk-border:#d8e0ea;
  --sk-accent:#2456a6;
  --sk-radius:10px;
  --sk-shadow:0 2px 8px rgba(24,34,53,.05);
  --sk-page-max:1200px;
}
.ux-page,.legacy-preview{background:var(--sk-bg)!important;color:var(--sk-ink)!important;font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif!important}
.ux-page h1,.legacy-preview h1{font-size:clamp(25px,2.5vw,34px)!important;line-height:1.2!important;letter-spacing:-.025em!important}
.ux-page h2,.legacy-preview h2{font-size:21px!important;line-height:1.25!important}
.ux-page h3,.legacy-preview h3{font-size:16px!important;line-height:1.3!important}
.ux-page p,.legacy-preview p{font-size:14px;line-height:1.5}
.ux-page .ux-main,.legacy-preview :where(main,.wrap,.meeting-main){max-width:var(--sk-page-max)!important}
.ux-page .button,.legacy-preview .button{font-size:13px!important;min-height:44px!important;padding:9px 14px!important;gap:8px!important}
.ux-page a:focus-visible,.ux-page button:focus-visible,.ux-page input:focus-visible,.ux-page select:focus-visible{outline:2px solid var(--sk-accent);outline-offset:2px}
/* Navigation: one shared shell for every route, with unchanged language preference. */
.ux-header{background:#fff!important}
.ux-header [data-skavio-language]{padding:0!important;margin-top:0!important;min-height:0!important;display:flex!important;align-items:center!important;box-sizing:border-box!important}
.legacy-preview .ux-header .header-inner,.ux-header .header-inner{min-height:60px!important}
.legacy-preview .ux-header .account-entry{margin-left:0}
.ux-header .account-entry,.ux-header .menu-toggle{min-height:44px!important}
/* Compact business layout, not oversized empty forms */
.account-layout{grid-template-columns:148px minmax(0,1fr)!important;gap:20px!important}
.account-nav{gap:4px!important}
.account-nav a{min-height:44px!important;padding:8px 12px!important;font-size:13px!important}
.account-panels>section>h2{margin:0 0 10px!important}
.account-panels .notice{padding:9px 12px!important;font-size:13px!important;margin:0 0 12px!important}
.account-panels #auth{
 display:grid!important;
 grid-template-columns:112px minmax(0,1fr);
 column-gap:14px;row-gap:8px;
 padding:16px!important;max-width:600px!important;
}
.account-panels #auth>h3,.account-panels #auth>p,.account-panels #auth>.check-label,.account-panels #auth>.hero-actions{grid-column:1/-1}
.account-panels #auth>h3,.account-panels #auth>p{margin:0!important}
.account-panels #auth>label:not(.check-label){grid-column:1;align-self:center;margin:0!important;font-size:13px!important}
.account-panels #auth>input{grid-column:2;margin:0!important;min-height:40px!important;padding:8px!important}
.account-panels #auth>.check-label{font-size:12px!important;margin:0!important}
.account-panels #auth>.check-label input{height:16px!important;width:16px!important}
.account-panels #auth .hero-actions{display:flex;flex-direction:row!important;align-items:center!important;gap:8px!important;margin:4px 0 0!important}
.account-panels #auth .button{width:auto!important;flex:0 1 auto!important}
.account-panels .two-grid.section{padding:12px 0!important}
.account-panels .ux-card{padding:14px!important}
.account-panels .ux-card h3{font-size:16px!important;margin:0 0 8px!important}
.account-panels .ux-card p{margin:0 0 10px!important}
.account-panels .ux-card a{font-size:13px}
/* Service catalog: dense light cards with visible prices, no dark ghost blocks */
.legacy-preview :where(.launch-section,.pricing-strip,.steps-section,.account-section){padding:20px 0!important;margin:0!important}
.legacy-preview .section-head{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:18px!important;margin-bottom:12px!important}
.legacy-preview .section-head>p{max-width:380px!important;font-size:13px!important;color:var(--sk-muted)!important}
.legacy-preview :where(.launch-grid,.plans-grid){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.legacy-preview :where(.launch-card,.plan-card,.price-card,.tier-card,.pricing-card,.launch-founders){
 background:var(--sk-surface)!important;
 background-image:none!important;
 color:var(--sk-ink)!important;
 box-shadow:var(--sk-shadow)!important;
 border:1px solid var(--sk-border)!important;
 border-radius:var(--sk-radius)!important;
 min-width:0!important;
}
.legacy-preview .launch-card{padding:14px!important;gap:7px!important}
.legacy-preview .launch-card h3{font-size:16px!important;margin:0!important}
.legacy-preview .launch-card p{font-size:13px!important;color:var(--sk-muted)!important;margin:0!important}
.legacy-preview .launch-card .badge{color:var(--sk-accent)!important;background:var(--sk-surface-soft)!important;border:1px solid var(--sk-border)!important;font-size:11px!important}
.legacy-preview .launch-prices{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;background:none!important}
.legacy-preview .launch-prices>div{min-width:0!important;padding:8px 10px!important;background:var(--sk-surface-soft)!important;border-radius:7px!important}
.legacy-preview .launch-prices strong{font-size:19px!important;color:var(--sk-ink)!important;line-height:1.2!important}
.legacy-preview .launch-prices small{font-size:11px!important;color:var(--sk-muted)!important}
.legacy-preview .launch-card-link{margin-top:auto!important;display:inline-flex!important;min-height:36px!important;align-items:center!important;font-size:13px!important;font-weight:650!important;color:var(--sk-accent)!important}
.legacy-preview :where(.launch-founders,.band,.pricing-strip){background:var(--sk-surface)!important;border:1px solid var(--sk-border)!important;border-radius:var(--sk-radius)!important}
.legacy-preview :where(.launch-founders,.band) :where(h1,h2,h3,p,span,small,strong){color:var(--sk-ink)!important}
/* Retained proof/other product sections may have dark gradients or ink. */
.legacy-preview :where(.plan-card,.tier-card,.price-card,.pricing-card,.pricing-strip) :where(h2,h3,h4,p,small,strong,span,li,div){color:var(--sk-ink)!important;text-shadow:none!important}
.legacy-preview :where(.panel,.card,.meeting-card){background:var(--sk-surface)!important;border:1px solid var(--sk-border)!important;color:var(--sk-ink)!important;box-shadow:none!important}
/* Preserve explicit action contrast despite legacy text rules. */
.legacy-preview :where(.button.primary,.btn.primary,.meeting-btn.primary){background:var(--sk-accent)!important;color:#fff!important}
@media(max-width:1080px){
  .legacy-preview :where(.launch-grid,.plans-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
 .account-layout{grid-template-columns:minmax(0,1fr)!important}
 .account-nav{gap:4px!important}
 .legacy-preview :where(.launch-grid,.plans-grid){grid-template-columns:minmax(0,1fr)!important}
 .legacy-preview .section-head{display:block!important}
 .legacy-preview .section-head>p{margin:8px 0 0!important}
 .ux-page .button{min-height:44px!important}
}
@media(max-width:420px){
 .account-panels #auth{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
 .account-panels #auth>*{grid-column:1!important}
 .account-panels #auth>input{grid-column:1!important}
 .account-panels #auth .hero-actions{flex-wrap:wrap!important}
}


/* Accessible interactive hit areas without enlarging displayed typography. */
.ux-page .text-link{min-height:44px!important;min-width:44px;display:inline-flex!important;align-items:center!important;font-size:13px}