/* Shared reading and interaction rules for the Vilzs interface. */
:root{
  --ui-font:'DM Sans',Arial,sans-serif;
  --ui-text:#19243a;
  --ui-muted:#53647e;
  --ui-caption:12px;
  --ui-body:15px;
  --heading:var(--ui-font);
  --body:var(--ui-font);
}
body{font-family:var(--ui-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--ui-font);font-weight:700;letter-spacing:-.035em}
button,input,select,textarea{font-family:var(--ui-font)}
p{line-height:1.7}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
:is(button,a,input,select,textarea):focus-visible{outline:3px solid var(--blue,#0055fc);outline-offset:3px}

/* Marketing: large, calm headlines; practical navigation and short descriptions. */
body[data-interface=marketing]{--muted:var(--ui-muted)}
body[data-interface=marketing] .hero h1{font-weight:700;letter-spacing:-.055em;line-height:1.04}
body[data-interface=marketing] :is(.nav-pill,.header-actions,.mobile-menu,.footer-column a){font-size:14px}
body[data-interface=marketing] .nav-pill{min-height:36px;padding:7px 15px}
body[data-interface=marketing] :is(.mega-item h3,.mega-item strong){font-size:15px;font-weight:600}
body[data-interface=marketing] :is(.mega-item p,.mega-heading p,.mega-sidebar p){font-size:13px;color:var(--ui-muted);line-height:1.6}
body[data-interface=marketing] :is(.section-kicker,.hero-note,.pricing-footnote,.price-card>small,.footer-bottom,.company-details){font-size:12px;line-height:1.65}
body[data-interface=marketing] .section-kicker{letter-spacing:0;text-transform:none}
body[data-interface=marketing] :is(.price-description,.price-features,.home-discovery-links p){font-size:14px;line-height:1.65}
body[data-interface=marketing] .home-discovery-links>a>span{font-size:12px;letter-spacing:0}
body[data-interface=marketing] :is(.home-discovery-links strong,.journey-link){font-size:14px}
body[data-interface=marketing] .home-discovery-links h3{font-size:22px;line-height:1.3;margin-top:14px}

/* Workspaces: the same scale and vocabulary on company, firm and site screens. */
body:is([data-interface=company],[data-interface=customer],[data-interface=site]){font-size:var(--ui-body);--muted:var(--ui-muted)}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-page-head h1,.panel-page-heading h1,.sm-heading h1){font-size:34px;line-height:1.2;letter-spacing:-.035em;font-weight:700}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-description,.admin-page-head>p,.panel-page-heading p,.sm-heading p){font-size:15px;max-width:65ch;color:var(--ui-muted)}
body[data-interface=company] #admin-nav button,
body[data-interface=customer] .panel-sidebar nav>a,
body[data-interface=site] .sm-nav>a{font-size:14px;min-height:44px}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-nav-group>summary,.sidebar-label,.panel-sidebar nav>small,.sm-nav-label,.panel-eyebrow,.admin-eyebrow){font-size:12px;letter-spacing:0;text-transform:none}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-section>h2,.panel-card-heading h2,.sm-surface-head h2){font-size:20px;line-height:1.35;font-weight:700}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-section>p,.admin-info,.admin-overview-intro>p,.admin-overview-actions p,.empty-state p,.panel-help-note,.sm-empty p,.sm-surface-head p,.sm-setup p,.sm-notice){font-size:14px;color:var(--ui-muted);line-height:1.7}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) label{font-size:14px;font-weight:500;line-height:1.5}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){font-size:16px;min-height:46px}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-button,.panel-button,.sm-button){font-size:14px;line-height:1.5;min-height:44px;white-space:normal}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.field-hint,.crm-editor-note,.panel-form small,.sm-form small){font-size:12px;line-height:1.6;color:var(--ui-muted)}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(th,td){font-size:14px;line-height:1.6}
body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(td small,.status-pill,.sm-badge,.crm-badge){font-size:12px;line-height:1.5}
body[data-interface=customer] :is(.panel-firm strong,.site-card dl,.subscription-card p){font-size:14px}
body[data-interface=customer] :is(.panel-status-bar,.panel-header,.contract-summary,.subscription-metadata){font-size:13px}
body[data-interface=customer] :is(.site-card h2,.subscription-card h2){font-weight:700}
body[data-interface=site] :is(.sm-setup strong,.sm-integrations strong){font-size:16px}
body[data-interface=site] :is(.sm-dns,.sm-license-box dt,.sm-product-table td small){font-size:13px}
body[data-interface=site] .sm-license-box dd{font-size:16px;font-weight:600}

/* Account screens use readable inputs and clear consent text on touch devices. */
body[data-interface=account]{--muted:var(--ui-muted)}
body[data-interface=account] :is(.account-form-heading p,.account-form-area label,.account-consent,.account-status,.account-review>div){font-size:14px;line-height:1.65}
body[data-interface=account] .account-form-area input:not([type=checkbox]){font-size:16px;min-height:48px}
body[data-interface=account] :is(.account-submit,.account-secondary){font-size:15px;min-height:48px}
body[data-interface=account] :is(.account-footer,.account-no-card,.account-slug-field>span,.account-free-note p){font-size:12px}
body[data-interface=account] .account-header nav{font-size:14px}
body[data-interface=account] .account-form-heading h2{font-weight:700;letter-spacing:-.035em}

@media(max-width:760px){
  body:is([data-interface=company],[data-interface=customer],[data-interface=site]) :is(.admin-page-head h1,.panel-page-heading h1,.sm-heading h1){font-size:28px}
  body[data-interface=marketing] .home-discovery-links h3{font-size:20px}
  body[data-interface=marketing] :is(.nav-pill,.header-actions,.mobile-menu){font-size:14px}
  body[data-interface=account] .account-header nav{font-size:12px;gap:12px}
  body[data-interface=account] .account-company-link{padding-left:12px}
  body[data-interface=account] .account-slug-field{min-width:0}
  body[data-interface=account] .account-slug-field>span{flex-shrink:0;padding-inline:10px}
  body[data-interface=customer] .site-card-actions{flex-wrap:wrap}
  body[data-interface=site] .sm-top-actions .sm-button{font-size:12px;min-height:40px}
}

/* Vilzs identity: one brand accent across company and account screens. */
body:not([data-interface=storefront]){--blue:#0055fc;--blue-soft:#eef3f8;--mint:#eef3f8}
.crm-firebase-guide{padding:20px;border:1px solid #dce5f7;border-radius:10px;background:#f5f8ff;color:#19243a}
.crm-firebase-guide strong{font-size:16px}.crm-firebase-guide p{font-size:14px;margin:10px 0;color:#53647e}.crm-firebase-guide a{color:#0055fc;text-decoration:underline;text-underline-offset:3px}

.crm-firebase-advanced{border:1px solid #dce5f7;border-radius:8px;padding:16px 20px}.crm-firebase-advanced summary{cursor:pointer;font-size:14px;font-weight:600;color:#0055fc}.crm-firebase-advanced[open] summary{margin-bottom:20px}