/* ─────────────────────────────────────────────────────────────────────────────
   The account pages — sign-in / registration (login.html.twig) and the account (business.html.twig) —
   in the look of the product pages (site.css): its light and dark theme, its masthead and footer.
   Loaded after styles.css and site.css on <body class="acct …">: the colours of styles.css are mapped to the
   tokens of site.css, then the parts are redrawn flat (thin rules, 6–10px corners, no gradients or glows).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── from site.css: the theme tokens, the masthead, the language list, the buttons, the eyebrow ── */
:root {
    --paper: #f5f8fa;
    --paper-2: #eaf1f5;
    --surface: #ffffff;
    --surface-2: #f7fafc;
    --ink: #10263a;
    --ink-soft: #24384b;
    --muted: #40596b;
    --faint: #6b8296;
    --line: #cfdce5;
    --line-strong: #a9bfcd;
    --accent: #08689a;
    --accent-strong: #075b89;
    --accent-ink: #ffffff;
    --accent-soft: #deeff5;
    --accent-line: #1587a1;
    --warm: #9b5610;
    --ok: #127a52;
    --mast: rgba(255, 255, 255, 0.86);
    --hero-glow: radial-gradient(ellipse at 74% 45%, #ffffff 0%, #f8fbfc 48%, #edf3f7 100%);
    --shadow: 0 10px 30px rgba(9, 32, 53, 0.08);
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --wrap: 1320px;
    --gutter: clamp(16px, 5vw, 72px);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --paper: #081120;
    --paper-2: #0d192b;
    --surface: #102033;
    --surface-2: #0f1d2f;
    --ink: #ecf3f8;
    --ink-soft: #d3e1ec;
    --muted: #b4c6d7;
    --faint: #8ba2b7;
    --line: #2b3f52;
    --line-strong: #3d566c;
    --accent: #78ddf2;
    --accent-strong: #a7edfc;
    --accent-ink: #081d2b;
    --accent-soft: #17354a;
    --accent-line: #1587a1;
    --warm: #f6b978;
    --ok: #5fd3a2;
    --mast: rgba(8, 17, 32, 0.86);
    --hero-glow: radial-gradient(ellipse at 75% 42%, #12223a 0%, transparent 55%), #081120;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body.site {
    margin: 0; font: 16px/1.6 var(--sans); color: var(--ink); background: var(--paper);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where(.site) :where(h1, h2, h3, h4, p, figure, ul) { margin: 0; }
.site a { color: inherit; text-decoration: none; }
.site a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.site :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.site img, .site svg { max-width: 100%; }
.site .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.site .skip { position: absolute; left: -10000px; }
.site .skip:focus { position: fixed; left: 16px; top: 10px; z-index: 50; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); }
.site .mono { font-family: var(--mono); }
.site [hidden] { display: none !important; }
.site .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.mast {
    position: sticky; top: 0; z-index: 30; background: var(--mast);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.mast .bar { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand:hover { text-decoration: none !important; }
.brand-mark { width: 26px; height: 26px; flex: none; color: var(--accent); }
.brand-word { font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
.brand-sep { width: 1px; height: 20px; background: var(--line-strong); }
.brand-product { font-weight: 560; font-size: 16px; letter-spacing: -0.02em; color: var(--ink-soft); }
.mast nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.mast nav a { color: var(--ink-soft); }
.mast nav a.current { color: var(--accent); }
.mast .tools { display: flex; align-items: center; gap: 10px; }
.theme-switch, .menu-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px;
    border: 1px solid var(--line-strong) !important; border-radius: 6px !important; font-size: 13px !important; color: var(--ink-soft) !important;
}
.theme-switch svg, .menu-btn svg { width: 17px; height: 17px; flex: none; display: block; }
.theme-switch .label { display: inline; }
.theme-switch .to-light, :root[data-theme="dark"] .theme-switch .to-dark { display: none; }
:root[data-theme="dark"] .theme-switch .to-light { display: inline; }
.menu-btn { display: none; }
.btn-signin { padding: 8px 14px !important; font-size: 13px !important; }

/* the language switcher of i18n.js (its own markup), restyled */
.site .lang-switcher-wrap { position: relative; display: inline-block; z-index: 40; }
.site .lang-switch-btn {
    display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; cursor: pointer;
    border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink-soft); font-size: 13px;
}
.site .lang-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; max-height: 70vh; overflow: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
[dir="rtl"] .site .lang-dropdown { right: auto; left: 0; }
.site .lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; font-size: 14px; color: var(--muted); }
.site .lang-option:hover { background: var(--paper-2); color: var(--ink); }
.site .lang-option.active { color: var(--accent); font-weight: 600; }

/* ── Buttons, labels ─────────────────────────────────────────────────────── */
.site .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 20px;
    font-weight: 650; font-size: 14px; line-height: 1.2; border-radius: 6px; border: 1px solid transparent;
    transition: background .16s, border-color .16s, transform .16s; white-space: nowrap;
}
.site .btn:hover { text-decoration: none; transform: translateY(-1px); }
.site .btn.primary { background: var(--accent); color: var(--accent-ink); }
.site .btn.primary:hover { background: var(--accent-strong); }
:root:not([data-theme="dark"]) .site .btn.primary:hover { background: #084c72; }
.site .btn.ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.site .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.site .btn.wide { width: 100%; }
.site .text-action { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--accent); }

.eyebrow {
    display: flex; align-items: center; gap: 10px; text-transform: uppercase;
    font: 600 11px/1.5 var(--mono); letter-spacing: 0.15em; color: var(--muted);
}
.eyebrow i { width: 24px; height: 2px; background: var(--accent-line); display: inline-block; }
.mini { font: 600 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line-strong);
    border-radius: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase;
}

/* ── from site.css: the footer and the cookie banner ── */
.site-foot { padding: 34px 0 40px; font-size: 13px; color: var(--muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot .brand-word { font-size: 15px; color: var(--ink); }

/* the cookie banner of the site (components/_cookie_banner.html.twig) */
.site .cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto;
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 10px;
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14px;
}
.site .cookie-banner[hidden] { display: none; }
.site .cookie-banner p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.site .cookie-banner a { color: var(--accent); }
.site .cookie-banner-actions { display: flex; gap: 8px; }
.site .btn-cookie { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line-strong); }
.site .btn-cookie-accept { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── from site.css: the masthead on narrow screens ── */
@media (max-width: 1080px) { .mast nav { gap: 18px; } }
@media (max-width: 960px) {
    .menu-btn { display: inline-flex; }
    .mast nav {
        display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 6px var(--gutter) 12px;
    }
    .mast nav.open { display: flex; }
    .mast nav a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
    .mast nav a:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
    .theme-switch .label, .brand-sep, .brand-product { display: none; }
    .mast .tools { gap: 6px; }
}

:root { --danger: #b42318; --danger-soft: #fdecea; }
:root[data-theme="dark"] { --danger: #ff8a75; --danger-soft: #3a1d1a; }

body.acct {
    /* styles.css → site.css */
    --dark: var(--paper);
    --dark-card: var(--surface);
    --dark-surface: var(--surface-2);
    --dark-hover: var(--paper-2);
    --bg-tertiary: var(--paper-2);
    --text: var(--ink);
    --text-secondary: var(--muted);
    --text-muted: var(--muted);
    --text-dim: var(--faint);
    --border: var(--line);
    --border-light: var(--line-strong);
    --border-focus: var(--accent);
    --primary: var(--accent);
    --primary-dark: var(--accent-strong);
    --primary-light: var(--accent);
    --success: var(--ok);
    --warning: var(--warm);
    --error: var(--danger);
    --gradient-hero: var(--paper);

    background: var(--paper); color: var(--ink);
    font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
body.acct ::selection { background: var(--accent-soft); }
body.acct :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* the masthead and the footer of the product pages (their markup sits in <div class="site" style="display:contents">) */
.acct .mast { z-index: 400; }
.acct .site-foot { border-top: 1px solid var(--line); background: var(--paper); }
.acct .eyebrow { justify-content: center; margin-bottom: 14px; }

/* shared parts */
.acct .btn { border-radius: 6px; font-weight: 650; letter-spacing: 0; box-shadow: none; transform: none; }
.acct .btn-primary,
.acct.page-login .btn-primary,
.acct.page-business .btn-primary {
    background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: none;
}
.acct .btn-primary:hover:not(:disabled),
.acct.page-login .btn-primary:hover:not(:disabled),
.acct.page-business .btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); opacity: 1; transform: none; box-shadow: none; }
:root:not([data-theme="dark"]) .acct .btn-primary:hover:not(:disabled) { background: #084c72; border-color: #084c72; }
.acct .btn-primary:disabled { opacity: .5; }
.acct.page-login .btn-outline,
.acct.page-business .btn-secondary {
    background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
}
.acct.page-login .btn-outline:hover,
.acct.page-business .btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.acct.page-business .btn-danger {
    background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}
.acct.page-business .btn-danger:hover { background: var(--danger-soft); }

.acct input, .acct select, .acct textarea { accent-color: var(--accent); }
.acct.page-login input, .acct.page-login select,
.acct.page-business .form-group input, .acct.page-business .form-group select, .acct.page-business .form-group textarea,
.acct.page-business .modal input, .acct.page-business .modal select, .acct.page-business .modal textarea {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px;
    box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.acct.page-login input:focus, .acct.page-login select:focus,
.acct.page-business .form-group input:focus, .acct.page-business .form-group select:focus, .acct.page-business .form-group textarea:focus,
.acct.page-business .modal input:focus, .acct.page-business .modal select:focus, .acct.page-business .modal textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.acct input::placeholder, .acct textarea::placeholder { color: var(--faint); opacity: 1; }
.acct select option { background: var(--surface); color: var(--ink); }
.acct input[type="checkbox"], .acct input[type="radio"] { box-shadow: none !important; }

/* the cookie banner, as on the product pages */
.acct .cookie-banner {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 10px;
}
.acct .cookie-banner a { color: var(--accent); }
.acct .cookie-banner button { border-radius: 6px; }

/* the language list of i18n.js anywhere on these pages */
.acct .lang-dropdown { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.acct .lang-option { color: var(--muted); }
.acct .lang-option:hover { background: var(--paper-2); color: var(--ink); }
.acct .lang-option.active { color: var(--accent); }

/* ══ Sign-in and registration ═════════════════════════════════════════════ */
.acct.page-login .mast nav, .acct.page-login .site-foot nav {   /* not the nav bar of styles.css */
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; z-index: auto;
}
@media (max-width: 960px) {
    .acct.page-login .mast nav { background: var(--surface); border-bottom: 1px solid var(--line); }
}
.acct.page-login .page-wrapper {
    background: var(--hero-glow); border-bottom: 1px solid var(--line);
    min-height: calc(100vh - 69px); padding: 56px 16px 64px;
}
.acct.page-login .page-wrapper::before, .acct.page-login .page-wrapper::after { display: none; }
.acct.page-login .page-wrapper .grid-bg {
    display: block; position: absolute; inset: 0; pointer-events: none; opacity: .45; animation: none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
}
.acct.page-login .auth-container { max-width: 480px; }
.acct.page-login .auth-header { margin-bottom: 26px; }
.acct.page-login .auth-header h1 {
    font-size: clamp(34px, 4.2vw, 50px); line-height: 1.04; letter-spacing: -0.05em; font-weight: 600; color: var(--ink);
    background: none; -webkit-text-fill-color: currentColor; text-wrap: balance;
}
.acct.page-login .auth-header p { color: var(--muted); font-size: 16px; margin-top: 12px; }

.acct.page-login .auth-tabs {
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: none;
}
.acct.page-login .auth-tab { color: var(--muted); border-radius: 5px; font-weight: 600; font-size: 14px; box-shadow: none; }
.acct.page-login .auth-tab.active { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.acct.page-login .auth-tab:not(.active):hover { color: var(--ink); background: var(--paper-2); }

.acct.page-login .form-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.acct.page-login .form-group label { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.acct.page-login .form-group label .required { color: var(--danger); }
.acct.page-login .input-wrapper .icon { filter: grayscale(1); opacity: .5; }
.acct.page-login input.code-digit { background: var(--surface) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; border-radius: 6px !important; font-family: var(--mono); }
.acct.page-login input.code-digit:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }

.acct.page-login .checkbox-group label { color: var(--muted); }
.acct.page-login .checkbox-group a, .acct.page-login .form-extras a, .acct.page-login .auth-panel a:not(.btn):not(.btn-social) { color: var(--accent); }
.acct.page-login .form-extras label, .acct.page-login .form-extras span { color: var(--muted); }

.acct.page-login .form-error {
    background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); border-radius: 6px;
}
.acct.page-login .form-error.is-success {
    background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok);
}

.acct.page-login .divider { color: var(--faint); }
.acct.page-login .divider::before, .acct.page-login .divider::after { background: var(--line); }
.acct.page-login .btn-social { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 6px; }
.acct.page-login .btn-social:hover { border-color: var(--accent); background: var(--surface); }

/* registration: the steps, the account type, the card */
.acct.page-login .step-dot { background: var(--surface); border: 1px solid var(--line-strong); color: var(--faint); box-shadow: none; font-family: var(--mono); }
.acct.page-login .step-dot.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.acct.page-login .step-dot.completed { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
.acct.page-login .step-line { background: var(--line); }
.acct.page-login .step-line.completed { background: var(--ok); }
.acct.page-login .step-title { color: var(--ink); font-weight: 600; letter-spacing: -0.02em; }
.acct.page-login .account-type-btn { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }
.acct.page-login .account-type-btn:hover { border-color: var(--accent); }
.acct.page-login .account-type-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.acct.page-login .account-type-btn .at-desc { color: var(--muted); }
.acct.page-login .password-strength { background: var(--paper-2); }
.acct.page-login .card-preview { box-shadow: none; border-radius: 12px; }
:root:not([data-theme="dark"]) .acct.page-login .card-preview { background: linear-gradient(135deg, #10263a, #08689a); }
.acct.page-login #stripe-card-element {
    background: var(--surface) !important; border: 1px solid var(--line-strong) !important; border-radius: 6px !important;
}
.acct.page-login #stripe-card-element.StripeElement--focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }
.acct.page-login #stripe-card-errors { color: var(--danger) !important; }
.acct.page-login .verification-charge-notice {
    background: var(--accent-soft) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--muted) !important;
}
.acct.page-login .verification-charge-notice span { color: var(--accent) !important; }
.acct.page-login .security-badges { margin-top: 22px; }
.acct.page-login .security-badge { color: var(--faint); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ══ The account (business.html.twig) ═════════════════════════════════════ */
.acct .acct-bar { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; }
.acct .acct-user { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 560; color: var(--ink-soft); white-space: nowrap; }
.acct .acct-user .topbar-avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); font: 600 11px var(--mono); letter-spacing: .02em;
}
.acct .acct-signout { padding: 8px 14px !important; font-size: 13px !important; }

.acct.page-business .layout {   /* the sidebar's rule runs the page's whole height */
    min-height: calc(100vh - 69px);
    background: linear-gradient(90deg, transparent 239px, var(--line) 239px, var(--line) 240px, transparent 240px);
}
.acct.page-business .sidebar-nav {
    background: transparent; border-right: 0; padding: 22px 0;
    position: sticky; top: 69px; align-self: flex-start; height: calc(100vh - 69px); overflow-y: auto;
}
.acct.page-business .nav-section-label {
    font: 600 10.5px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--faint); padding: 14px 22px 6px;
}
.acct.page-business .nav-item { font-size: 14px; color: var(--ink-soft); padding: 8px 22px; border-radius: 0; }
.acct.page-business .nav-item .nav-icon { display: none; }
.acct.page-business .nav-item:hover { background: var(--paper-2); color: var(--ink); }
.acct.page-business .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.acct.page-business .nav-item.active::before { background: var(--accent); width: 2px; height: 100%; border-radius: 0; }
.acct.page-business .nav-item .nav-badge { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); font: 500 10.5px var(--mono); border-radius: 4px; }
.acct.page-business .org-selector { margin: 0 16px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; }
.acct.page-business .org-selector:hover { border-color: var(--accent); }
.acct.page-business .org-selector .org-plan { color: var(--accent); font: 500 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.acct.page-business .main-content { background: var(--paper); padding: 44px clamp(20px, 4vw, 56px) 64px; max-height: none; overflow: visible; }
.acct.page-business .page-header { margin-bottom: 30px; }
.acct.page-business .page-header::before { content: ''; display: block; width: 24px; height: 2px; background: var(--accent-line); margin-bottom: 16px; }
.acct.page-business .page-header h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 600; letter-spacing: -0.045em; color: var(--ink); margin-bottom: 8px; }
.acct.page-business .page-header p { font-size: 15px; color: var(--muted); }

.acct.page-business .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: none; padding: 24px; }
.acct.page-business .card-title { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.acct.page-business .stat-grid { gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.acct.page-business .stat-card { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 20px 22px; }
.acct.page-business .stat-card:first-child { border-left: 0; }
.acct.page-business .stat-card .stat-label { font: 600 10.5px/1.5 var(--mono); letter-spacing: .12em; color: var(--faint); }
.acct.page-business .stat-card .stat-value { font: 600 28px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--ink); margin-top: 8px; }
.acct.page-business .stat-card .stat-value.accent { color: var(--accent); }

.acct.page-business th { font: 600 10.5px/1.5 var(--mono); letter-spacing: .12em; color: var(--faint); border-bottom: 1px solid var(--line-strong); }
.acct.page-business td { border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.acct.page-business tr:hover td { background: var(--surface-2); }
.acct.page-business .badge { border-radius: 4px; font: 600 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; }
.acct.page-business .badge-admin { background: var(--accent-soft); color: var(--accent); }
.acct.page-business .badge-employee, .acct.page-business .badge-draft { background: var(--paper-2); color: var(--muted); }
.acct.page-business .badge-active, .acct.page-business .badge-paid { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.acct.page-business .badge-pending { background: color-mix(in srgb, var(--warm) 14%, transparent); color: var(--warm); }

.acct.page-business .form-group label { font: 600 10.5px/1.5 var(--mono); letter-spacing: .12em; color: var(--faint); }

.acct.page-business .modal-overlay { background: rgba(8, 17, 32, .55); }
.acct.page-business .modal { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.acct.page-business .modal-header, .acct.page-business .modal-footer { border-color: var(--line); }
.acct.page-business .modal-header h3 { font-weight: 650; letter-spacing: -0.015em; }
.acct.page-business .modal-close { color: var(--muted); }
.acct.page-business .modal-close:hover { background: var(--paper-2); color: var(--ink); }

.acct.page-business .contract-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.acct.page-business .signature-pad { border: 1px dashed var(--line-strong); border-radius: 8px; }
.acct.page-business .signature-pad .sig-text { color: var(--accent); }
.acct.page-business .usage-bar { background: var(--paper-2); }

.acct.page-business .payment-card-display {
    background: linear-gradient(135deg, #10263a, #08689a); border: 0; border-radius: 12px; color: #eaf3f8;
}
:root[data-theme="dark"] .acct.page-business .payment-card-display { background: linear-gradient(135deg, #17354a, #0d192b); border: 1px solid var(--line); }
.acct.page-business .payment-card-display::before { background: rgba(255, 255, 255, .06); }
.acct.page-business .payment-card-bottom { color: rgba(234, 243, 248, .7); }
.acct.page-business .payment-card-bottom .val { color: #fff; }
.acct.page-business #bizStripeCard, .acct.page-business .StripeElement {
    background: var(--surface) !important; border: 1px solid var(--line-strong) !important; border-radius: 6px !important;
}

.acct.page-business .status-msg.success { color: var(--ok); }
.acct.page-business .status-msg.error { color: var(--danger); }

/* phones: the sidebar becomes a row of tabs under the masthead */
@media (max-width: 768px) {
    .acct .acct-bar { padding: 0 16px; gap: 10px; }
    .acct .acct-user span { display: none; }
    .acct.page-business .layout { flex-direction: column; background: none; }
    .acct.page-business .sidebar-nav {
        display: flex; position: sticky; top: 68px; z-index: 20; width: 100%; min-width: 0; height: auto; padding: 0 8px;
        overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); background: var(--mast);
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: none;
    }
    .acct.page-business .sidebar-nav::-webkit-scrollbar { display: none; }
    .acct.page-business .sidebar-nav .org-selector, .acct.page-business .sidebar-nav .nav-section-label { display: none; }
    .acct.page-business .nav-item { width: auto; white-space: nowrap; padding: 14px 12px; flex: none; }
    .acct.page-business .nav-item.active { background: transparent; }
    .acct.page-business .nav-item.active::before { top: auto; bottom: 0; left: 12px; right: 12px; transform: none; width: auto; height: 2px; }
    .acct.page-business .main-content { padding: 28px 16px 48px; }
    .acct.page-business .stat-grid { grid-template-columns: 1fr 1fr; }
    .acct.page-business .stat-card:nth-child(odd) { border-left: 0; }
    .acct.page-business .stat-card:nth-child(n+3) { border-top: 1px solid var(--line); }
    .acct.page-business .card { padding: 18px; overflow-x: auto; }
    .acct.page-login .page-wrapper { padding: 32px 16px 48px; }
}
@media (max-width: 640px) {
    .acct .acct-bar { padding: 0 12px; }
    .acct .acct-user { display: none; }
}