/* Local website styling, following BRANDING.md. Geometry and flows are preserved. */
:root {
  --bg-main: var(--m-bg); --bg-surface: var(--m-surface); --bg-accent: var(--m-surface-subtle);
  --bg-dark: var(--m-surface); --text-primary: var(--m-ink); --text-secondary: var(--m-text-secondary);
  --accent-primary: var(--m-brand); --accent-secondary: var(--m-brand); --accent-glow: transparent;
  --glass-bg: var(--m-surface); --glass-border: var(--m-divider);
  --success: var(--m-success); --warning: var(--m-warning); --error: var(--m-danger);
  --section-padding: 5rem 2rem; --radius-md: 12px; --radius-lg: 16px;
}
body { background: var(--m-bg); color: var(--m-ink); font-size: 16px; line-height: 1.5; }
h1,h2,h3,h4 { font-weight: 600; letter-spacing: -.025em; }
.glass,.pricing-table { background: var(--m-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
#navbar,#navbar.scrolled { background: var(--m-surface); border-bottom: 1px solid var(--m-divider); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1rem 0; }
.logo { font-size: 20px; font-weight: 600; letter-spacing: 0; gap: 8px; }
.logo img { width: 32px; height: 32px; }
.logo span { display: none; }
.nav-links { gap: 24px; }
.nav-links a { font-size: 14px; color: var(--m-text-secondary); }
.nav-links a:hover,.nav-links a.active { color: var(--m-ink); }
.nav-account-icon,.admin-icon-btn { color: var(--m-ink); background: var(--m-surface); border: 1px solid var(--m-control-border); border-radius: 8px; min-width: 36px; min-height: 36px; }
.btn-cta,.btn-cta:hover { background: var(--m-ink); color: var(--m-surface) !important; font-weight: 500; border-radius: 8px; box-shadow: none; transform: none; border: 1px solid var(--m-ink); }
.btn-cta:hover { background: var(--m-text-secondary); }
.btn-cta.btn-secondary,.btn-cta.btn-secondary:hover { color: var(--m-ink) !important; background: var(--m-surface); border: 1px solid var(--m-control-border); box-shadow: none; }
.btn-cta.btn-secondary:hover { background: var(--m-surface-subtle); }
.hero,.hero-compact,.page-hero { background: var(--m-bg); background-image: none; }
.hero::before,.hero-visual-concept::before { display: none; }
.hero h1,.hero-copy h1,.page-hero h1 { color: var(--m-ink); background: none; -webkit-text-fill-color: currentColor; font-weight: 500; font-size: clamp(40px,4vw,60px); line-height: 1.08; letter-spacing: -.045em; }
.hero-copy p,.page-hero p { font-size: 17px; line-height: 1.5; }
.status-chip,.badge-coming-soon { background: var(--m-surface); border: 1px solid var(--m-divider); color: var(--m-text-secondary); text-transform: none; font-weight: 500; }
.feature-card,.step-card,.plan-card,.use-case-card,.account-panel,.admin-panel,.admin-metric,.admin-editor-card,.modal-card { background: var(--m-surface); border-color: var(--m-divider); box-shadow: none; }
.feature-card:hover,.showcase-card:hover,.screenshot-float:hover,.plan-card:hover,.use-case-card:hover { transform: none; box-shadow: none !important; }
.feature-icon { color: var(--m-ink); width: 24px; height: 24px; }
.product-visual,.showcase-card,.screenshot-float,.hero-visual-concept { border-color: var(--m-divider); box-shadow: none !important; }
.hero-visual-concept figcaption,.feature-screenshot figcaption { background: var(--m-surface); color: var(--m-text-secondary); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--m-divider); }
.showcase-img-wrap { background: var(--m-surface-subtle); }
.showcase-card:hover .showcase-img-wrap img { transform: none; }
.pricing-table th,.pricing-table td:first-child { background: var(--m-surface-subtle); }
.most-popular-badge,.step-num { background: var(--m-ink) !important; color: var(--m-surface) !important; text-transform: none; }
.pricing-header-audience,.plan-badge { text-transform: none; }
footer p { opacity: 1 !important; color: var(--m-text-muted); }
input,select,textarea { border-color: var(--m-control-border); background: var(--m-surface); color: var(--m-ink); border-radius: 8px; }
input::placeholder,textarea::placeholder { color: var(--m-text-muted); opacity: 1; }
.modal-backdrop,dialog::backdrop { background: rgb(25 25 25 / 28%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-card,dialog { box-shadow: var(--m-shadow-modal); border-radius: 12px; }
.sandbox-banner { color: var(--m-text-secondary); background: var(--m-surface-subtle); border-color: var(--m-divider); }
.account-error,.account-alert,.account-panel-danger { color: var(--m-danger); }
.admin-shell { font-size: 14px; line-height: 1.4; }
.admin-header h1 { font-size: 24px; }
.admin-tab { font-weight: 500; }
.admin-tab.active { background: var(--m-surface-subtle); color: var(--m-ink); border-color: var(--m-divider); box-shadow: inset 0 -2px var(--m-brand); }
.admin-table thead th,.admin-related-table thead th,.admin-table th:hover { background: var(--m-surface-subtle) !important; color: var(--m-text-secondary); font-size: 12px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--m-divider); }
.admin-table tbody td,.admin-related-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--m-divider) !important; font-size: 13px; line-height: 18px; }
.admin-table tbody tr:nth-child(even),.admin-related-table tr:nth-child(even) { background: var(--m-surface); }
.admin-table tbody tr:hover,.admin-related-table tr:hover { background: var(--m-surface-subtle); }
.admin-table tbody tr.active { background: var(--m-brand-soft) !important; box-shadow: inset 3px 0 var(--m-brand); }
.admin-pager button,.admin-pager select,.admin-users-dialog td select { background: var(--m-surface); color: var(--m-ink); min-height: 32px; }
.admin-users-dialog,.admin-editor-card,.admin-log-dialog { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow-modal); }
.row-editor-head,.admin-users-dialog .admin-panel-head { background: var(--m-surface); }
.row-field label { font-size: 12px; text-transform: none; font-weight: 500; }
.admin-chart-tooltip { background: var(--m-surface); color: var(--m-ink); box-shadow: var(--m-shadow); }
.admin-log-dialog pre { background: var(--m-surface-subtle); }
.log-error { color: var(--m-danger); }.log-warning { color: var(--m-warning); }.log-read { color: var(--m-info); }.log-admin { color: var(--m-inferred); }
.admin-shell .btn-cta,.account-shell .btn-cta { border-radius: 8px; min-height: 36px; font-size: 14px; }
.mantis-brevo-form,.mantis-brevo-form * { font-family: var(--m-font); }
#sib-container.mantis-brevo-container { background: var(--m-surface) !important; }
#sib-container.mantis-brevo-container .mantis-brevo-field input { background: var(--m-surface) !important; border-color: var(--m-control-border) !important; }
#sib-container.mantis-brevo-container .mantis-brevo-field input::placeholder { color: var(--m-text-muted); }
.sib-form-message-panel { display: none; padding: 12px; }
.sib-form-message-panel--active { display: block; }
.sib-form-message-panel__text { display: flex; align-items: center; gap: 8px; }
.input--hidden,.sib-hide-loader-icon { display: none !important; }
.sib-icon,.progress-indicator__icon { fill: currentColor; }
.mantis-brevo-message-error { color: var(--m-danger); background: var(--m-danger-soft); }
.mantis-brevo-message-success { color: var(--m-success); background: var(--m-success-soft); }
@media(max-width:768px) {
  #navbar,#navbar.scrolled { position: relative; }
  .hero,.page-hero { padding-top: 3rem; }
  .account-shell { padding-top: 3rem; }
  .nav-links { gap: 8px; }
  .hero h1,.hero-copy h1,.page-hero h1 { font-size: 40px; }
  .hero-copy p,.page-hero p { font-size: 16px; }
  .hero-visual-concept figcaption { position: static; }
}

/* Feature icons lead the title and remain aligned when titles wrap. */
.feature-card-title { display: flex; align-items: flex-start; gap: 12px; }
.feature-card-title .feature-icon { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; }
.feature-card-title span { min-width: 0; }
.showcase-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media(max-width:768px) { .showcase-grid-four { grid-template-columns: 1fr; } }

.showcase-grid-four .showcase-img-wrap { aspect-ratio: 16 / 9; }
.showcase-grid-four .showcase-img-wrap img { height: 100%; object-fit: contain; }

/* Account controls share the website's surfaces, spacing and focus treatment. */
.account-actions.auth-methods { max-width: none; gap: 20px; }
.password-auth-form { gap: 8px; }
.password-auth-form label { font-size: 14px; font-weight: 500; color: var(--m-ink); }
.password-auth-form label:not(:first-child) { margin-top: 8px; }
.password-auth-form input { min-width: 0; min-height: 46px; padding: 11px 14px; font-size: 16px; line-height: 22px; border: 1px solid var(--m-control-border); background: var(--m-surface); color: var(--m-ink); }
.password-auth-form input:hover:not(:disabled) { border-color: var(--m-text-secondary); }
.password-auth-form input:focus-visible { border-color: var(--m-brand); outline: 2px solid var(--m-brand); outline-offset: 2px; }
.password-auth-actions { margin-top: 16px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.account-shell .account-actions .btn-cta { min-height: 44px; padding: 10px 16px; line-height: 22px; cursor: pointer; }
.account-shell .btn-cta:disabled { cursor: wait; opacity: .55; }
.account-shell .btn-cta:focus-visible { outline: 2px solid var(--m-brand); outline-offset: 3px; }
.auth-divider { font-weight: 500; text-transform: none; }
@media(max-width:480px) {
  .account-shell { padding-right: 0; padding-left: 0; }
  .account-panel { padding: 24px 20px; }
  .password-auth-actions { grid-template-columns: 1fr; gap: 10px; }
}