::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

/* Theme system: light by default, violet-blue AI/SEO brand */
:root{color-scheme:light;--color-primary:#635bff;--color-primary-dark:#5147e5;--color-primary-light:#eeecff;--gradient-brand:linear-gradient(135deg,#765fff 0%,#635bff 48%,#1687ff 100%);--color-ink:#15171f;--color-body:#3f4655;--color-muted:#737b8d;--color-muted-2:#626b7e;--color-border:#dde1eb;--color-border-light:#e9ebf2;--color-bg:#fff;--color-bg-soft:#f3f4f8;--color-bg-page:#f6f7fb;--color-success-bg:#edf3ff;--color-success-fg:#2875d9;--color-warning-bg:#fff5df;--color-warning-fg:#9a6500;--color-danger-bg:#fff0f0;--color-danger-fg:#c84242;--shadow-brand:0 14px 34px rgba(99,91,255,.22)}
html,body{background:#f6f7fb}body{background-image:radial-gradient(circle at 76% -10%,rgba(99,91,255,.09),transparent 34%)}
.brand-link,.landing-brand{color:#15171f!important}.brand-mark{border-color:#635bff;box-shadow:0 0 22px rgba(99,91,255,.25)}.live-dot{background:#635bff;box-shadow:0 0 0 5px rgba(99,91,255,.1)}
.btn-primary{background:var(--gradient-brand)!important;color:#fff!important;box-shadow:var(--shadow-brand)!important}.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#6850ef,#5147e5 52%,#0876e8)!important;color:#fff!important}
.btn-default,.btn-google{background:#fff!important;color:#20232d!important;border-color:#dfe2eb!important}.btn-default:hover,.btn-google:hover{background:#f1f2f7!important;color:#15171f!important}
.btn-commercial{background:linear-gradient(135deg,#ff9a4d,#f4772f)!important;color:#fff!important;box-shadow:0 12px 28px rgba(238,111,39,.24)!important}.btn-commercial:hover,.btn-commercial:focus{background:linear-gradient(135deg,#f58a3a,#df6422)!important;color:#fff!important;transform:translateY(-1px)}
.form-control{background:#fff!important;border-color:#dcdfea!important;color:#15171f!important}.project-header{background:rgba(255,255,255,.82)!important;border-color:#e5e7ef!important}.project-header nav a{color:#626a7a}.project-header nav a:hover{color:#15171f}.app-header{border-color:#e5e7ef!important;box-shadow:0 12px 40px rgba(28,32,48,.07)}.account-nav-link{background:#f3f4f8;border-color:#e1e4ec}.account-nav-avatar{background:var(--gradient-brand)!important;color:#fff!important}
.hero-band{border-color:#e8eaf1}.hero-band::before{background:radial-gradient(circle,rgba(99,91,255,.13),transparent 65%)}.hero-lead{color:#646c7c!important}.hero-product{background:rgba(255,255,255,.91)!important;border-color:#e0e3eb!important;box-shadow:0 45px 100px rgba(38,43,68,.16),inset 0 1px #fff!important}.product-topbar{background:#f4f5f8!important;border-color:#e5e7ee!important}.product-topbar span{background:#c5c9d3!important}.product-topbar span:first-child{background:#635bff!important}.product-row,.product-grid>div{border-color:#e7e9f0!important}.product-row em{background:#eeecff!important;color:#5147e5!important}.icon-chip{background:#eeecff!important;color:#635bff!important;border-color:#e5e0ff!important}
.section-band{background:#f0f2f7!important;border-color:#e3e6ee!important}.seo-check-widget,.capability-block,.pricing-card,.integration-card,.tokens-explainer-card,.steps-grid article,.project-card,.dashboard-panel,.activation-note,.empty-state,.account-card,.billing-card,.content-card,.auth-card{background:#fff!important;border-color:#e2e5ed!important;box-shadow:0 18px 48px rgba(32,37,58,.07)!important}.seo-check-widget{background:linear-gradient(145deg,#fff,#f8f8fc)!important}.seo-check-input-row{background:#fff;border-color:#dfe2eb}.seo-check-input{background:transparent!important}.problem-list li,.capability-list li{border-color:#e5e7ed!important}.steps-grid article span{background:#eeecff!important;color:#635bff!important}
.pricing-card--featured{border-color:#f4772f!important;box-shadow:0 0 0 1px #f4772f,0 30px 70px rgba(238,111,39,.14)!important}.pricing-badge{background:linear-gradient(135deg,#ff9a4d,#f4772f)!important;color:#fff!important}.cta-band{background:linear-gradient(135deg,#635bff,#1687ff)!important}.landing-cta h2,.landing-cta p,.contact-phone,.contact-phone small{color:#fff!important}.cta-band .btn-primary{background:#fff!important;color:#5147e5!important}.cta-band .icon-chip{background:rgba(255,255,255,.14)!important;color:#fff!important}
.project-card:hover{border-color:#c9cde0!important;box-shadow:0 24px 60px rgba(32,37,58,.12)!important}.project-domain{color:#171923!important}.tabs-nav{background:#eef0f5!important;border-color:#e1e4eb!important}.tabs-nav-item{color:#71798a!important}.tabs-nav-item.is-active{color:#fff!important;background:var(--gradient-brand)!important}.overview-summary-item,.token-summary-cell,.package-card,.plan-choice-card{background:#f8f9fb!important;border-color:#e2e5ed!important}.table th,.table td{border-color:#e6e8ef!important}.table tbody tr:hover td{background:#f7f8fb}.auth-shell{background:radial-gradient(circle at 50% 15%,rgba(99,91,255,.11),transparent 30%),#f6f7fb!important}.auth-divider span{background:#fff!important;color:#7b8393!important}.auth-divider::before{border-color:#e2e5ed!important}
html[data-theme=dark]{color-scheme:dark;--color-primary:#8178ff;--color-primary-dark:#9c95ff;--color-primary-light:rgba(129,120,255,.14);--color-ink:#f1f2f7;--color-body:#c6c9d4;--color-muted:#8f95a5;--color-border:#2b2e39;--color-border-light:#232630;--color-bg:#12141a;--color-bg-soft:#191c23;--color-bg-page:#0b0d12;--color-success-bg:rgba(67,137,255,.14);--color-success-fg:#76aaff}
html[data-theme=dark],html[data-theme=dark] body{background:#0b0d12}html[data-theme=dark] body{background-image:radial-gradient(circle at 76% -10%,rgba(99,91,255,.1),transparent 34%)}html[data-theme=dark] .brand-link,html[data-theme=dark] .landing-brand{color:#f3f4f8!important}html[data-theme=dark] .project-header{background:rgba(11,13,18,.82)!important;border-color:#252832!important}html[data-theme=dark] .project-header nav a{color:#a6abb9}html[data-theme=dark] .project-header nav a:hover{color:#fff}html[data-theme=dark] .app-header{border-color:#252832!important;box-shadow:0 12px 40px rgba(0,0,0,.25)}html[data-theme=dark] .account-nav-link{background:#171920;border-color:#292c36}
html[data-theme=dark] .btn-default,html[data-theme=dark] .btn-google{background:#191c23!important;color:#eef0f7!important;border-color:#303440!important}html[data-theme=dark] .form-control{background:#111319!important;border-color:#303440!important;color:#f3f4f8!important}html[data-theme=dark] .hero-product,html[data-theme=dark] .seo-check-widget,html[data-theme=dark] .capability-block,html[data-theme=dark] .pricing-card,html[data-theme=dark] .integration-card,html[data-theme=dark] .tokens-explainer-card,html[data-theme=dark] .steps-grid article,html[data-theme=dark] .project-card,html[data-theme=dark] .dashboard-panel,html[data-theme=dark] .activation-note,html[data-theme=dark] .empty-state,html[data-theme=dark] .account-card,html[data-theme=dark] .billing-card,html[data-theme=dark] .content-card,html[data-theme=dark] .auth-card{background:#12141a!important;border-color:#292c36!important;box-shadow:0 18px 48px rgba(0,0,0,.22)!important}
html[data-theme=dark] .product-topbar,html[data-theme=dark] .section-band{background:#171920!important;border-color:#292c36!important}html[data-theme=dark] .product-row,html[data-theme=dark] .product-grid>div,html[data-theme=dark] .problem-list li,html[data-theme=dark] .capability-list li{border-color:#292c36!important}html[data-theme=dark] .seo-check-input-row{background:#0f1116;border-color:#303440}html[data-theme=dark] .project-domain{color:#f3f4f8!important}html[data-theme=dark] .tabs-nav{background:#111319!important;border-color:#292c36!important}html[data-theme=dark] .overview-summary-item,html[data-theme=dark] .token-summary-cell,html[data-theme=dark] .package-card,html[data-theme=dark] .plan-choice-card{background:#181b22!important;border-color:#2b2f39!important}html[data-theme=dark] .table th,html[data-theme=dark] .table td{border-color:#282b34!important}html[data-theme=dark] .table tbody tr:hover td{background:#181b22}html[data-theme=dark] .auth-shell{background:radial-gradient(circle at 50% 15%,rgba(99,91,255,.1),transparent 30%),#0b0d12!important}html[data-theme=dark] .auth-divider span{background:#12141a!important}
@media(max-width:640px){.landing-header nav{gap:9px!important}.theme-toggle{flex:0 0 auto}}
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    min-height: 20px;
    border: solid transparent;
    border-width: 1px 3px;
    border-radius: 6px;
    background-clip: content-window;
    box-shadow: inset 0 0 0 10px rgba(62,58,58,0.85);
}

html {
    scrollbar-gutter: stable;
}

body, html{
    font-family: 'Inter', sans-serif;
    font-weight: 400; background-color: #ffffff;
    font-size: 15px; color: #303841;
    line-height: 1.5;
}

:root {
    --color-primary: #0464fb;
    --color-primary-dark: #0435e8;
    --color-primary-light: #e8f1ff;
    --gradient-brand: linear-gradient(135deg, #04a6fb 0%, #0464fb 55%, #0435e8 100%);
    --color-ink: #18212f;
    --color-body: #303841;
    --color-muted: #657286;
    --color-muted-2: #69768a;
    --color-border: #dfe6ee;
    --color-border-light: #e8edf3;
    --color-bg: #ffffff;
    --color-bg-soft: #f6f8fa;
    --color-bg-page: #eef1f6;
    --color-success-bg: #e6f7ed;
    --color-success-fg: #157347;
    --color-warning-bg: #fdf3de;
    --color-warning-fg: #8a5e10;
    --color-danger-bg: #fdecea;
    --color-danger-fg: #9c2b1d;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-xs: 0 1px 2px rgba(24, 33, 47, 0.04), 0 1px 1px rgba(24, 33, 47, 0.03);
    --shadow-sm: 0 2px 6px rgba(24, 33, 47, 0.06);
    --shadow-md: 0 12px 28px rgba(24, 33, 47, 0.09);
    --shadow-lg: 0 28px 64px rgba(24, 33, 47, 0.14);
    --shadow-brand: 0 14px 28px -10px rgba(4, 100, 251, 0.45);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Type scale */
    --fs-2xl: clamp(40px, 30px + 3.2vw, 64px);
    --fs-xl: clamp(28px, 24px + 1.4vw, 38px);
    --fs-lg: 30px;
    --fs-md: 20px;

    /* Spacing scale */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Full-width layout container */
    --container-max: 1520px;
    --container-pad: clamp(24px, 4vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }
::selection { background: var(--color-primary-light); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

img { max-width: 100%; }

/* Buttons */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    font-size: 14px;
    line-height: 1.3;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.btn-primary {
    background: var(--gradient-brand) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-brand) !important;
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.06);
    color: #ffffff !important;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(1px); filter: brightness(0.96); }
.btn-default {
    background: var(--color-bg-soft) !important;
    color: var(--color-ink) !important;
}
.btn-default:hover, .btn-default:focus {
    background: var(--color-border-light) !important;
    color: var(--color-ink) !important;
}
.btn-link {
    color: var(--color-muted) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.btn-link:hover, .btn-link:focus {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}
.btn-danger {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-fg) !important;
}
.btn-danger:hover, .btn-danger:focus {
    background: var(--color-danger-fg) !important;
    color: #ffffff !important;
}
.btn-lg {
    padding: 13px 26px !important;
    font-size: 16px;
    border-radius: var(--radius-sm) !important;
}
.btn-sm {
    padding: 6px 12px !important;
    font-size: 12.5px;
}
.btn.btn-outline-danger {
    background: transparent !important;
    color: var(--color-danger-fg) !important;
    border: 1px solid var(--color-danger-fg) !important;
}
.btn.btn-outline-danger:hover, .btn.btn-outline-danger:focus {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-fg) !important;
}

/* Forms */
.form-group { margin-bottom: 18px; }
.form-group label {
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 6px;
    display: inline-block;
}
.form-control {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    height: auto !important;
    font-size: 14px !important;
    color: var(--color-ink);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}
.text-muted { color: var(--color-muted) !important; }

/* Alerts */
.alert {
    border-radius: var(--radius-sm) !important;
    border: 1px solid transparent !important;
    padding: 12px 16px !important;
    font-size: 14px;
    margin-bottom: 18px;
}
.alert-success { background: var(--color-success-bg) !important; color: var(--color-success-fg) !important; }
.alert-danger { background: var(--color-danger-bg) !important; color: var(--color-danger-fg) !important; }

/* Tables */
.table { border-collapse: collapse; width: 100%; font-size: 14px; }
.table th {
    text-align: left;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border) !important;
    white-space: nowrap;
}
.table td {
    padding: 12px;
    border-top: 1px solid var(--color-border-light) !important;
    vertical-align: middle;
}
.table tbody tr:hover td { background: var(--color-bg-soft); }

/* Status pills */
.status-pill--active { background: var(--color-success-bg); border-color: transparent; color: var(--color-success-fg); }
.status-pill--paused { background: var(--color-bg-soft); color: var(--color-muted); }
.status-pill--error { background: var(--color-danger-bg); border-color: transparent; color: var(--color-danger-fg); }
.status-pill--paid { background: var(--color-success-bg); border-color: transparent; color: var(--color-success-fg); }
.status-pill--created { background: var(--color-warning-bg); border-color: transparent; color: var(--color-warning-fg); }
.status-pill--trial { background: var(--color-warning-bg); border-color: transparent; color: var(--color-warning-fg); }
.status-pill--cancelled { background: var(--color-bg-soft); color: var(--color-muted); }
.status-pill--completed, .status-pill--up { background: var(--color-success-bg); border-color: transparent; color: var(--color-success-fg); }
.status-pill--running, .status-pill--needs_reconnect { background: var(--color-warning-bg); border-color: transparent; color: var(--color-warning-fg); }
.status-pill--failed, .status-pill--down { background: var(--color-danger-bg); border-color: transparent; color: var(--color-danger-fg); }
.status-pill--disconnected { background: var(--color-bg-soft); color: var(--color-muted); }
.status-pill--critical { background: var(--color-danger-bg); border-color: transparent; color: var(--color-danger-fg); }
.status-pill--warning { background: var(--color-warning-bg); border-color: transparent; color: var(--color-warning-fg); }
.status-pill--notice { background: var(--color-bg-soft); color: var(--color-muted); }
.status-pill--sm { min-height: auto; padding: 3px 10px; font-size: 11px; }

/* Severity-aware stat values inside dashboard-panel dl */
.dashboard-panel dd.stat-danger { color: var(--color-danger-fg); font-weight: 700; }
.dashboard-panel dd.stat-warning { color: var(--color-warning-fg); font-weight: 700; }
.dashboard-panel dd.stat-ok { color: var(--color-success-fg); }

/* SEO issue detail cell: separate the raw fact/expectation text from the message */
.issue-detail-extra {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--color-bg-soft);
    border-radius: 6px;
    color: var(--color-muted);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-line;
}
.issue-detail-extra strong { color: #3f4d62; }

.ledger-amount.is-zero { color: var(--color-muted); }

/* Overview tab: at-a-glance status summary */
.overview-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.overview-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.overview-summary-item:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-soft);
}
.overview-summary-label {
    color: var(--color-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* RSN landing and app screens */
.landing-page, .app-shell {
    color: #18212f;
}
html[data-theme="dark"] .landing-page, html[data-theme="dark"] .app-shell {
    color: #f1f2f7;
}
/* Personal cabinet / auth screens: soft canvas so white cards read as
   distinct surfaces instead of blending into an all-white page. The
   marketing landing page keeps a white base — it already alternates
   band colors for rhythm, so it's excluded here. */
body:has(.app-shell), body:has(.auth-shell) {
    background-color: var(--color-bg-page);
}
.landing-header, .app-header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 24px var(--container-pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}
.landing-brand, .brand-link {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.01em;
    color: #18212f;
    text-decoration: none;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.landing-header nav, .app-header nav {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.landing-header nav a, .app-header nav a {
    color: #425066;
    text-decoration: none;
    font-weight: 600;
}
.landing-header .nav-cta {
    color: #ffffff;
    background: var(--gradient-brand);
    padding: 9px 14px;
    border-radius: 6px;
    transition: filter .15s var(--ease);
}
.landing-header .nav-cta:hover {
    filter: brightness(0.94);
    color: #ffffff;
}
.account-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-ink) !important;
    font-weight: 600 !important;
    transition: background-color .15s var(--ease);
}
.account-nav-link:hover {
    background: var(--color-border-light);
}
.account-nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.account-nav-email {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-nav-sep {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
}
.account-nav-balance {
    color: var(--color-primary-dark);
    font-weight: 700;
}
.hero-band {
    background:
        radial-gradient(900px circle at 88% 4%, rgba(4, 166, 251, 0.12), transparent 62%),
        radial-gradient(760px circle at 6% 96%, rgba(4, 53, 232, 0.07), transparent 60%);
}
.landing-hero {
    max-width: var(--container-max);
    margin: 0 auto;
    min-height: 560px;
    padding: 58px var(--container-pad) 72px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.95fr);
    gap: 56px;
    align-items: center;
}
.eyebrow {
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}
.hero-copy h1 {
    margin: 0;
    max-width: 720px;
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}
.hero-lead {
    margin: 24px 0 30px;
    max-width: 560px;
    color: #536176;
    font-size: 19px;
    line-height: 1.65;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.product-grid .icon-chip {
    margin-bottom: 10px;
}
.hero-product {
    position: relative;
    border: 1px solid #d8e0ea;
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.product-topbar {
    height: 42px;
    background: #f4f7fa;
    border-bottom: 1px solid #d8e0ea;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
}
.product-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.product-topbar span:nth-child(1) { background: #ff5f57; }
.product-topbar span:nth-child(2) { background: #febc2e; }
.product-topbar span:nth-child(3) { background: #28c840; }
.product-row {
    padding: 22px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e8edf3;
}
.product-row b, .product-grid b {
    display: block;
    font-size: 16px;
}
.product-row small, .product-grid small {
    display: block;
    margin-top: 5px;
    color: #6a7688;
}
.product-row em {
    align-self: start;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 999px;
    padding: 5px 10px;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}
.product-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.product-grid > div, .dashboard-panel, .empty-state, .activation-note {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
}
.product-grid > div {
    padding: 16px;
}
.landing-section, .landing-cta {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px var(--container-pad);
}
.problem-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 64px;
    border-top: 1px solid #e7edf3;
}
.section-band {
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, #f2f6fb 100%);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}
.landing-section h2, .landing-cta h2 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.problem-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.problem-list li {
    padding: 14px 16px;
    background: #f4f7fa;
    border-radius: 8px;
    color: #3f4d62;
}
.steps-grid, .features-grid, .dashboard-grid {
    display: grid;
    gap: 16px;
}
.steps-grid {
    position: relative;
    grid-template-columns: repeat(3, 1fr);
}
.steps-grid::before {
    content: '';
    position: absolute;
    top: 42px;
    left: 42px;
    right: 42px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
}
.features-grid, .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
}
.steps-grid article, .features-grid article {
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
}
.steps-grid span {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #ffffff;
    font-weight: 700;
}
.steps-grid h3, .features-grid h3 {
    margin: 18px 0 8px;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.dashboard-panel h3 {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}
.steps-grid p, .features-grid p, .dashboard-panel p, .activation-note p, .page-lead {
    color: #657286;
    line-height: 1.6;
}
.help-content section[id] {
    scroll-margin-top: 100px;
}
.help-qa {
    padding: 18px 20px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}
.help-qa + .help-qa {
    margin-top: 20px;
}
.help-qa h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}
.help-qa p {
    margin: 0;
}
.cta-band {
    background: #f4f7fa;
    border-top: 1px solid var(--color-border-light);
}
.landing-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-top: 64px;
    padding-bottom: 64px;
}
.app-shell {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad) 72px;
}
.app-shell-narrow {
    max-width: 760px;
}
.app-shell .app-header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: 8px;
}
.page-title-row, .project-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin: 34px 0 24px;
}
.page-title-row h1, .project-dashboard-head h1, .app-shell h1 {
    margin: 0 0 8px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.page-title-row p, .project-dashboard-head p {
    color: #657286;
}
.empty-state, .activation-note {
    padding: 28px;
}
.empty-state h2, .activation-note h2 {
    margin-top: 0;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 1100px) {
    .project-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1400px) {
    .project-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.project-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.project-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 44px;
}
.project-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.project-indicator--on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.project-indicator--off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.14); }
.uptime-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    width: 100%;
}
.uptime-bar {
    flex: 1 1 0;
    min-width: 3px;
    height: 100%;
    border-radius: 3px;
    cursor: default;
}
.uptime-bar--up { background: #22c55e; }
.uptime-bar--down { background: #ef4444; }
.uptime-bars-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-muted);
}
.project-card-toolbar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
.project-card-menu {
    position: relative;
}
.project-card-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 1px;
    transition: background .15s ease, color .15s ease;
}
.project-card-menu:hover .project-card-menu-trigger,
.project-card-menu:focus-within .project-card-menu-trigger {
    background: var(--color-bg-soft);
    color: var(--color-ink);
}
.project-card-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 5;
    min-width: 180px;
    margin-top: 2px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.project-card-menu:hover .project-card-menu-dropdown,
.project-card-menu:focus-within .project-card-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.project-card-menu-label {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
}
.project-card-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-ink);
    font-size: 13px;
    cursor: pointer;
}
.project-card-menu-item:hover {
    background: var(--color-bg-soft);
}
.project-card-menu-item.is-active {
    color: var(--color-primary);
    font-weight: 600;
}
.project-card-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.folder-section + .folder-section {
    margin-top: 8px;
}
.folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 24px 0 12px;
}
.folder-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.folder-header .folder-count {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 500;
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.btn-icon:hover {
    background: var(--color-bg-soft);
    color: var(--color-ink);
}
.project-dashboard-head h1 { display: flex; align-items: flex-start; gap: 12px; }
.project-dashboard-head h1 .project-indicator { width: 12px; height: 12px; margin-top: 6px; }
.project-name-editable {
    display: inline-block;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    margin: -2px -6px;
    outline: none;
    cursor: text;
}
.project-name-editable:hover {
    background: var(--color-bg-soft);
}
.project-name-editable:focus {
    background: var(--color-bg-soft);
    box-shadow: 0 0 0 2px var(--color-border);
}
.project-hero {
    gap: 28px;
    margin-bottom: 22px;
}
.project-hero-main { min-width: 0; }
.project-hero .back-link { margin-bottom: 8px; }
.project-url {
    display: inline-block;
    color: var(--color-muted);
    font-size: 14px;
    text-decoration: none;
    word-break: break-all;
}
.project-url:hover { color: var(--color-primary); }
.project-hero-status {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.project-hero-meta { color: var(--color-muted); font-size: 12px; }
.project-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.project-kpi {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.project-kpi:hover { transform: translateY(-2px); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.project-kpi-label { color: var(--color-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.project-kpi strong { color: var(--color-ink); font-size: 28px; line-height: 1.15; letter-spacing: -.03em; }
.project-kpi strong.stat-danger { color: var(--color-danger-fg); }
.project-kpi small { overflow: hidden; color: var(--color-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-overview-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 16px; }
.project-overview-grid .dashboard-panel + .dashboard-panel { margin-top: 0; }
.data-value-break { overflow-wrap: anywhere; }
.project-message-empty {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
}
.project-message-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.project-message-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.project-message-text {
    color: var(--color-ink);
    flex: 1;
}
.project-message-time {
    color: var(--color-muted);
    font-size: 13px;
    flex-shrink: 0;
}
.project-card-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--color-border-light);
}
.project-domain {
    color: #18212f;
    font-weight: 700;
    text-decoration: none;
}
.project-url, .project-date {
    color: #69768a;
    font-size: 13px;
}
.project-url {
    word-break: break-all;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    color: #3f4d62;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-large {
    margin-top: 4px;
}
.project-card-divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--color-border-light);
}
.project-card-ticker {
    position: relative;
    min-height: 34px;
    font-size: 13px;
    color: var(--color-body);
}
.project-ticker-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}
.project-ticker-item.is-active {
    opacity: 1;
    visibility: visible;
}
.project-ticker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-muted);
    flex-shrink: 0;
}
.project-ticker-dot--up { background: var(--color-success-fg); }
.project-ticker-dot--down { background: var(--color-danger-fg); }
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}
.dashboard-panel {
    padding: 24px;
}
.dashboard-panel + .dashboard-panel {
    margin-top: 16px;
}
.dashboard-panel dl {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 13px 16px;
}
.dashboard-panel dt {
    color: var(--color-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: 2px;
}
.dashboard-panel dd {
    margin: 0;
    font-weight: 500;
}
.project-form {
    margin-top: 24px;
}

/* Billing: compact invoice page + payment method */
.app-shell-invoice {
    max-width: 37.5vw;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .app-shell-invoice {
        max-width: 100%;
    }
}
.payment-method-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.payment-method-option {
    display: block;
    cursor: pointer;
    border: 1px solid var(--color-border-light);
    border-radius: 14px;
    padding: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.payment-method-option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.payment-method-option.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.payment-method-card {
    display: flex;
    align-items: center;
    gap: 14px;
}
.payment-method-logo {
    width: 88px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}
.payment-method-logo--kaspi {
    border-radius: var(--radius-sm);
}
.payment-method-card p {
    margin: 0 0 6px;
    font-size: 13.5px;
}
.payment-method-card p:first-child {
    font-weight: 700;
}
.payment-method-card p:last-child {
    margin-bottom: 0;
    color: var(--color-muted);
}
.activation-code-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.activation-code-form input[type="text"] {
    flex: 1 1 220px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.activation-code-form .btn {
    border-radius: var(--radius-sm) !important;
}

/* Account layout */
.account-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    gap: 24px;
}
.account-sidebar {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
    padding: 8px;
    position: sticky;
    top: 112px;
}
.account-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.account-sidebar-link {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
}
.account-sidebar-link:hover {
    background: var(--color-bg-soft);
    color: var(--color-ink);
}
.account-sidebar-link.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.account-sidebar-link--danger {
    color: var(--color-danger-fg);
}
.account-sidebar-link--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-fg);
}
.account-content > .dashboard-panel,
.account-content > .dashboard-grid {
    margin-top: 16px;
}
.account-content > .dashboard-panel:first-child {
    margin-top: 0;
}
.dashboard-grid > .dashboard-panel {
    display: flex;
    flex-direction: column;
}
.account-form {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.account-form > button {
    margin-top: auto;
    align-self: flex-start;
}
.account-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.notif-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.notif-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.notif-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: #e8f4fe;
    color: #29a1e0;
}
html[data-theme="dark"] .notif-panel-icon {
    background: rgba(41, 161, 224, .16);
}
.notif-panel-icon svg {
    width: 22px;
    height: 22px;
}
.notif-panel-heading h3 {
    margin: 0 0 2px;
}
.notif-panel-sub {
    margin: 0;
    color: var(--color-muted);
    font-size: 13.5px;
}
.notif-account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.notif-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.notif-account-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.notif-account-info strong {
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-account-username {
    color: var(--color-muted);
    font-size: 12.5px;
}
.notif-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 20px;
}
.notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
}
.notif-item + .notif-item {
    border-top: 1px solid var(--color-border-light);
}
.notif-item:hover {
    background: var(--color-bg-soft);
}
.notif-item-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-ink);
}
.notif-item-desc {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--color-muted);
}
.notif-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    flex-shrink: 0;
}
.notif-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.notif-switch-track {
    position: absolute;
    inset: 0;
    background: var(--color-border);
    border-radius: 999px;
    transition: background .15s ease;
}
.notif-switch-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .15s ease;
}
.notif-switch input:checked + .notif-switch-track {
    background: var(--color-primary);
}
.notif-switch input:checked + .notif-switch-track::before {
    transform: translateX(16px);
}
.notif-switch input:focus-visible + .notif-switch-track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.notif-actions {
    justify-content: space-between;
}
.notif-pending-box {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
@media (max-width: 820px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
    .account-sidebar {
        position: static;
    }
    .account-sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Tabs (project workspace: sticky sidebar nav on the left, content blocks on the right) */
.tabs {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: start;
    gap: 24px;
}
.tabs-nav {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    position: sticky;
    top: 112px;
    z-index: 1;
}
.tabs-nav-item {
    display: block;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.tabs-nav-item:hover {
    color: var(--color-ink);
}
.tabs-nav-item.is-active {
    background: #ffffff;
    color: var(--color-ink);
    box-shadow: var(--shadow-xs);
}
/* Project-level navigation (Обзор/Проблемы/Страницы/Настройки) — same visual
   language as .tabs-nav-item, laid out as a horizontal row of real links
   instead of a sidebar, so it doesn't depend on the [data-tabs] JS panel switcher. */
.project-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding: 8px;
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.project-nav-item {
    display: inline-block;
    white-space: nowrap;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.project-nav-item:hover {
    color: var(--color-ink);
}
.project-nav-item.is-active {
    background: #ffffff;
    color: var(--color-ink);
    box-shadow: var(--shadow-xs);
}
/* Все блоки видны одновременно — левое меню только скроллит к нужному. */
.tabs-panel {
    grid-column: 2;
    min-width: 0;
    scroll-margin-top: 100px;
}
.tabs-panel + .tabs-panel {
    margin-top: 16px;
}
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
@media (max-width: 820px) {
    .tabs {
        grid-template-columns: 1fr;
    }
    .tabs-nav {
        grid-row: auto;
        position: static;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .tabs-nav-item {
        white-space: nowrap;
    }
    .tabs-panel {
        grid-column: 1;
    }
}
@media (min-width: 1400px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .landing-hero, .problem-section, .steps-grid, .features-grid, .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .steps-grid::before {
        display: none;
    }
    .landing-hero {
        min-height: 0;
        padding-top: 34px;
    }
    .landing-cta, .page-title-row, .project-dashboard-head {
        flex-direction: column;
        align-items: stretch;
    }
    .project-grid {
        grid-template-columns: 1fr;
    }
    .project-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-overview-grid { grid-template-columns: 1fr; }
    .project-hero-status { align-items: flex-start; }
}
@media (max-width: 520px) {
    .project-kpis { grid-template-columns: 1fr; }
    .project-kpi { padding: 15px; }
    .project-kpi strong { font-size: 24px; }
    .dashboard-panel dl { grid-template-columns: 1fr; gap: 4px; }
    .dashboard-panel dd { margin-bottom: 10px; }
}

/* Sticky header with scroll shadow */
.project-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.project-header.is-scrolled {
    border-bottom-color: var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

/* Icon chip used in feature/step/problem cards */
.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, #eef5ff 0%, var(--color-primary-light) 100%);
    box-shadow: inset 0 0 0 1px rgba(4, 100, 251, 0.12);
    color: var(--color-primary);
    flex-shrink: 0;
}
.icon-chip svg { width: 21px; height: 21px; stroke-width: 1.75; }
.icon-chip--muted {
    background: linear-gradient(160deg, #fbfcfd 0%, var(--color-border-light) 100%);
    box-shadow: inset 0 0 0 1px rgba(24, 33, 47, 0.06);
    color: var(--color-muted);
}

/* Card hover polish */
.steps-grid article, .features-grid article {
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.steps-grid article:hover, .features-grid article:hover {
    box-shadow: var(--shadow-md);
    border-color: #cdd8e3;
    transform: translateY(-2px);
}
.project-card {
    transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.project-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: #cdd8e3;
}
.problem-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Footer */
.project-footer {
    border-top: 1px solid var(--color-border-light);
    margin-top: 8px;
}
.project-footer .footer-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 28px var(--container-pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--color-muted);
    font-size: 13px;
}
.project-footer a {
    color: var(--color-muted);
    text-decoration: none;
    font-weight: 600;
}
.project-footer a:hover { color: var(--color-primary); }
.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-ink);
    font-weight: 700;
}
.footer-phone svg { width: 15px; height: 15px; color: var(--color-primary); }

/* Header phone link */
.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-body) !important;
    font-weight: 600 !important;
}
.header-phone svg { width: 15px; height: 15px; color: var(--color-primary); }

/* Capability block (detailed service breakdown) */
.capability-block {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: start;
    padding: 56px 0;
    border-top: 1px solid var(--color-border-light);
}
.capability-block:first-of-type { border-top: none; }
.capability-intro h2 {
    margin: 0 0 14px;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.capability-intro p {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 420px;
}
.capability-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 28px;
}
.capability-list li {
    display: flex;
    gap: 14px;
}
.capability-list .icon-chip {
    width: 38px;
    height: 38px;
}
.capability-list .icon-chip svg { width: 18px; height: 18px; }
.capability-list h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}
.capability-list p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pricing-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-xs);
    padding: 32px 28px;
}
.pricing-card--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    position: relative;
}
.pricing-badge {
    position: absolute;
    top: -13px;
    left: 28px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 12px;
    border-radius: 999px;
}
.pricing-card h3 {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
}
.pricing-card .pricing-tagline {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 13.5px;
}
.pricing-price {
    margin: 20px 0 0;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}
.pricing-price span {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-muted);
}
.pricing-features {
    list-style: none;
    margin: 24px 0 28px;
    padding: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    flex: 1;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: var(--color-body);
    line-height: 1.4;
}
.pricing-features li svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.pricing-card > .btn {
    margin-top: auto;
    width: 100%;
    text-align: center;
}
.pricing-note {
    text-align: center;
    color: var(--color-muted);
    font-size: 13.5px;
    margin-top: 24px;
}

/* Contact links (used inside landing-cta) */
.contact-links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.contact-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
}
.contact-phone .icon-chip {
    width: 40px;
    height: 40px;
}
.contact-phone small {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-muted);
}

@media (max-width: 980px) {
    .capability-block {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .capability-list {
        grid-template-columns: 1fr;
    }
    .contact-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Auth pages */
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.auth-shell .project-header { position: static; background: transparent; backdrop-filter: none; }
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 64px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 36px 32px;
}
.auth-card h1 {
    margin: 0 0 6px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}
.auth-card > p.text-muted {
    margin: 0 0 24px;
}
.auth-card .btn-primary { width: 100%; }
.auth-card form { margin-top: 4px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--color-ink-muted);
    font-size: var(--fs-sm);
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border-light);
}
.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f8f9fb !important;
    border: 1.5px solid #cfd8e3 !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08) !important;
    color: #1f2937 !important;
}
.btn-google:hover, .btn-google:focus {
    background: #ffffff !important;
    border-color: #4285F4 !important;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3) !important;
    transform: translateY(-1px);
}
.btn-google:active { transform: translateY(1px); }
.btn-google svg { flex: none; }
.auth-links {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.auth-links .btn-link { padding: 0 !important; }

/* Error pages */
.error-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}
.error-shell .error-code {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0 0 12px;
}
.error-shell h1 {
    margin: 0 0 12px;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}
.error-shell p {
    margin: 0 0 26px;
    color: var(--color-muted);
    max-width: 440px;
}

@media (max-width: 820px) {
    .project-footer .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .auth-card {
        padding: 28px 22px;
    }
}

/* Public free SEO check widget */
.seo-check-section {
    padding-top: 48px;
}
.seo-check-widget {
    max-width: 780px;
    margin: 0 auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(24, 33, 47, 0.04);
}
.seo-check-intro h2 {
    margin: 4px 0 8px;
}
.seo-check-intro p {
    color: var(--color-muted);
    margin: 0 0 20px;
}
.seo-check-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.seo-check-input-row {
    display: flex;
    gap: 10px;
}
.seo-check-input {
    flex: 1 1 auto;
    min-width: 0;
}
.seo-check-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.seo-check-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: seo-check-spin 0.7s linear infinite;
}
.seo-check-submit.is-loading .seo-check-spinner {
    display: inline-block;
}
.seo-check-submit.is-loading .seo-check-submit-label {
    opacity: 0.85;
}
@keyframes seo-check-spin {
    to { transform: rotate(360deg); }
}
.seo-check-message {
    margin: 0;
    font-size: 14px;
    min-height: 1.4em;
}
.seo-check-message--error { color: var(--color-danger-fg); }
.seo-check-message--info { color: var(--color-muted); }
.seo-check-message--warning { color: var(--color-warning-fg); }

.seo-check-result {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
}
.seo-check-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.seo-check-result-head h3 {
    margin: 0;
    font-size: 18px;
}
.seo-check-result-meta {
    color: var(--color-muted);
    font-size: 13px;
}
.seo-check-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.seo-check-summary-item {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}
.seo-check-summary-item b {
    display: block;
    font-size: 22px;
    line-height: 1.2;
}
.seo-check-summary-item small {
    color: var(--color-muted);
}
.seo-check-summary-item--critical b { color: var(--color-danger-fg); }
.seo-check-summary-item--warnings b { color: var(--color-warning-fg); }
.seo-check-summary-item--passed b { color: var(--color-success-fg); }

.seo-check-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.seo-check-fact-pill {
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--color-bg-soft);
    color: var(--color-body);
    border: 1px solid var(--color-border-light);
}
.seo-check-fact-pill--ok { background: var(--color-success-bg); color: var(--color-success-fg); border-color: transparent; }
.seo-check-fact-pill--bad { background: var(--color-danger-bg); color: var(--color-danger-fg); border-color: transparent; }

.seo-check-issues {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.seo-check-issue {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    align-items: flex-start;
}
.seo-check-issue-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    margin-top: 2px;
}
.seo-check-issue-badge--critical { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.seo-check-issue-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.seo-check-issue-badge--notice { background: var(--color-bg-soft); color: var(--color-muted); }
.seo-check-issue-body strong {
    display: block;
    color: var(--color-ink);
}
.seo-check-issue-body p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

.seo-check-hidden {
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}
.seo-check-hidden strong {
    display: block;
    margin-bottom: 4px;
}
.seo-check-hidden p {
    margin: 0 0 12px;
    color: var(--color-muted);
    font-size: 14px;
}

.seo-check-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .seo-check-widget {
        padding: 22px 18px;
        border-radius: 14px;
    }
    .seo-check-input-row {
        flex-direction: column;
    }
    .seo-check-submit {
        justify-content: center;
    }
    .seo-check-summary {
        grid-template-columns: 1fr 1fr;
    }
}

/* Billing */
.token-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 4px;
}
.token-summary-cell {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--color-bg-soft);
}
.token-summary-cell .token-summary-label {
    display: block;
    font-size: 12.5px;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.token-summary-cell .token-summary-value {
    font-size: 22px;
    font-weight: 700;
}
.token-summary-cell.token-summary-total {
    border-color: var(--color-primary);
}

.package-grid, .plan-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.package-card, .plan-choice-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plan-choice-card.is-current {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}
.package-card .package-tokens, .plan-choice-card .plan-choice-name {
    font-size: 17px;
    font-weight: 700;
}
.package-card .package-price, .plan-choice-card .plan-choice-price {
    color: var(--color-muted);
    font-size: 14px;
}
.package-card .package-price {
    margin-bottom: 8px;
}

.ledger-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ledger-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-amount { font-weight: 700; text-align: right; white-space: nowrap; }
.ledger-amount.is-credit { color: var(--color-success-fg); }
.ledger-amount.is-debit { color: var(--color-danger-fg); }
.ledger-date { color: var(--color-muted); font-size: 12.5px; white-space: nowrap; }

.feature-check-list { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; flex: 1 0 auto; }
.feature-check-list li::before { content: "✓ "; color: var(--color-success-fg); font-weight: 700; }
.feature-check-list li.is-locked { color: var(--color-muted); }
.feature-check-list li.is-locked::before { content: "— "; color: var(--color-muted); }

.plan-choice-card > form,
.plan-choice-card > a.btn,
.plan-choice-card > .plan-current-badge {
    margin-top: auto;
}
.package-card > form,
.plan-choice-card > form,
.plan-choice-card > a.btn {
    display: flex;
}
.package-card > form > .btn,
.plan-choice-card > form > .btn,
.plan-choice-card > a.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.plan-current-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.tokens-explainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.tokens-explainer-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    padding: 20px;
}
.tokens-explainer-card h3 {
    margin: 0 0 8px;
    font-size: 15.5px;
}
.tokens-explainer-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13.5px;
    line-height: 1.55;
}

.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.integration-card {
    position: relative;
    display: flex;
    gap: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #ffffff;
    padding: 20px;
}
.integration-card .icon-chip { flex: none; }
.integration-card h3 {
    margin: 0 0 6px;
    font-size: 15.5px;
}
.integration-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 13.5px;
    line-height: 1.55;
}
.integration-card--soon { opacity: 0.7; }
.integration-soon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    background: var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
}

@media (max-width: 720px) {
    .token-summary-grid { grid-template-columns: 1fr; }
    .ledger-row { grid-template-columns: 1fr; text-align: left; }
    .ledger-amount { text-align: left; }
}

/* RSN 2026 — dark product system */
:root {
    --color-primary: #d9ff43;
    --color-primary-dark: #c4ee24;
    --color-primary-light: rgba(217,255,67,.13);
    --gradient-brand: linear-gradient(135deg, #efff8f 0%, #d9ff43 48%, #a9df13 100%);
    --color-ink: #f2f5ef;
    --color-body: #c7cdc5;
    --color-muted: #899188;
    --color-muted-2: #a3aaa1;
    --color-border: #2c312d;
    --color-border-light: #222724;
    --color-bg: #111412;
    --color-bg-soft: #181c19;
    --color-bg-page: #0b0d0c;
    --color-success-bg: rgba(86,211,128,.13);
    --color-success-fg: #7ee3a1;
    --color-warning-bg: rgba(255,190,74,.13);
    --color-warning-fg: #ffc96b;
    --color-danger-bg: rgba(255,99,99,.13);
    --color-danger-fg: #ff8888;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --shadow-xs: 0 1px 0 rgba(255,255,255,.025);
    --shadow-sm: 0 8px 24px rgba(0,0,0,.18);
    --shadow-md: 0 18px 45px rgba(0,0,0,.28);
    --shadow-lg: 0 36px 90px rgba(0,0,0,.45);
    --shadow-brand: 0 12px 34px rgba(181,231,28,.14);
}

html { background: #0b0d0c; }
body, html { font-family: 'Manrope', sans-serif; background: var(--color-bg-page); color: var(--color-body); }
body { background-image: radial-gradient(circle at 75% -10%, rgba(217,255,67,.055), transparent 32%); }
h1, h2, h3, h4, .brand-link, .landing-brand { font-family: 'Space Grotesk', sans-serif; color: var(--color-ink); letter-spacing: -.035em; }
a { color: var(--color-primary); }
::selection { background: var(--color-primary); color: #10130f; }
:focus-visible { outline-color: var(--color-primary); }

.brand-link, .landing-brand { display:inline-flex; align-items:center; gap:10px; color:#f6f8f3 !important; font-weight:700; letter-spacing:-.05em; }
.brand-mark { width:17px; height:17px; display:inline-block; border:4px solid var(--color-primary); border-radius:50% 50% 50% 12%; transform:rotate(-18deg); box-shadow:0 0 24px rgba(217,255,67,.35); }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 0 5px rgba(217,255,67,.10); }

.btn { border:1px solid transparent !important; border-radius:999px !important; letter-spacing:-.01em; }
.btn-default, .btn-google { background:#191d1a !important; color:#edf1eb !important; border-color:#303631 !important; }
.btn-default:hover, .btn-google:hover { background:#232824 !important; color:#fff !important; }
.btn-link { color:#aeb5ac !important; }
.btn-lg { border-radius:999px !important; }

.form-control { background:#121513 !important; border-color:#303630 !important; color:#f3f6f1 !important; min-height:46px; }
.form-control::placeholder { color:#666e67; }
.form-control:focus { border-color:var(--color-primary) !important; box-shadow:0 0 0 3px rgba(217,255,67,.1) !important; }

.project-header { border-color:var(--color-border-light) !important; background:rgba(11,13,12,.78) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.project-header nav a { color:#aeb5ad; }
.project-header nav a:hover { color:#fff; }
.app-header { border:1px solid var(--color-border-light) !important; border-radius:18px; margin:16px auto 0; max-width:var(--container-max); width:calc(100% - 32px); padding-left:20px !important; padding-right:10px !important; box-shadow:0 12px 40px rgba(0,0,0,.22); }
.account-nav-link { background:#171a18; border:1px solid #292e2a; border-radius:999px; padding:5px 8px 5px 5px !important; }
.account-nav-avatar { background:var(--color-primary) !important; color:#10130f !important; }

.landing-page { background:transparent; }
.landing-header { max-width:1520px; }
.hero-band { overflow:hidden; border-bottom:1px solid var(--color-border-light); background:transparent; position:relative; }
.hero-band::before { content:""; position:absolute; width:680px; height:680px; right:-100px; top:-180px; background:radial-gradient(circle, rgba(217,255,67,.12), transparent 65%); pointer-events:none; }
.landing-hero { min-height:780px; align-items:center; position:relative; }
.hero-copy { max-width:760px; }
.eyebrow { color:#acb3aa !important; font-size:12px !important; letter-spacing:.13em !important; }
.hero-copy h1 { font-size:clamp(58px,7vw,108px) !important; line-height:.91 !important; letter-spacing:-.075em !important; max-width:920px; margin-top:26px !important; }
.hero-lead { color:#a5ada4 !important; font-size:clamp(17px,1.5vw,21px) !important; max-width:610px !important; }
.hero-product { background:rgba(17,20,18,.86) !important; border:1px solid #333a34 !important; box-shadow:0 45px 100px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035) !important; transform:rotate(2deg); border-radius:28px !important; }
.product-topbar { background:#181c19 !important; border-color:#292f2a !important; }
.product-topbar span { background:#4a514a !important; }
.product-topbar span:first-child { background:var(--color-primary) !important; }
.product-row, .product-grid > div { border-color:#292e2a !important; }
.product-row em { background:var(--color-primary) !important; color:#111 !important; }
.icon-chip { background:rgba(217,255,67,.1) !important; color:var(--color-primary) !important; border-color:rgba(217,255,67,.12) !important; }

.landing-section { padding-top:110px !important; padding-bottom:110px !important; }
.landing-section h2 { font-size:clamp(38px,4.8vw,72px) !important; line-height:1 !important; }
.section-band { background:#0f1210 !important; border-color:#202421 !important; }
.seo-check-widget, .capability-block, .pricing-card, .integration-card, .tokens-explainer-card, .steps-grid article {
    background:#121513 !important; border-color:#292f2a !important; box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.seo-check-widget { border-radius:30px !important; padding:clamp(28px,5vw,72px) !important; background:linear-gradient(145deg,#171b18,#101311) !important; }
.seo-check-input-row { background:#0d0f0e; border:1px solid #303630; border-radius:999px; padding:7px; }
.seo-check-input { border:none !important; background:transparent !important; padding-left:20px !important; }
.problem-list li, .capability-list li { border-color:#262b27 !important; }
.steps-grid article span { background:var(--color-primary) !important; color:#10130f !important; }
.pricing-card--featured { border-color:var(--color-primary) !important; box-shadow:0 0 0 1px var(--color-primary), 0 30px 70px rgba(0,0,0,.3) !important; transform:translateY(-10px); }
.pricing-badge { background:var(--color-primary) !important; color:#111 !important; }
.cta-band { background:var(--color-primary) !important; }
.landing-cta h2, .landing-cta p, .contact-phone, .contact-phone small { color:#10130f !important; }
.cta-band .btn-primary { background:#10130f !important; color:#fff !important; }
.cta-band .icon-chip { background:rgba(0,0,0,.1) !important; color:#10130f !important; }

.app-shell { max-width:1520px !important; padding-top:54px !important; }
.page-title-row h1, .project-dashboard-head h1 { font-size:clamp(38px,5vw,66px) !important; letter-spacing:-.06em !important; }
.project-card, .dashboard-panel, .activation-note, .empty-state, .account-card, .billing-card, .content-card, .auth-card, .account-sidebar {
    background:#121513 !important; border:1px solid #292e2a !important; border-radius:20px !important; box-shadow:0 18px 48px rgba(0,0,0,.18) !important;
}
.project-card { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.project-card:hover { transform:translateY(-4px); border-color:#424a43 !important; box-shadow:0 24px 60px rgba(0,0,0,.3) !important; }
.project-domain { color:#f4f7f1 !important; }
.tabs-nav { background:#111412 !important; border:1px solid #292e2a !important; border-radius:16px !important; padding:5px !important; gap:4px; }
.tabs-nav-item { color:#899188 !important; border:none !important; border-radius:11px !important; }
.tabs-nav-item.is-active { color:#fff !important; background:var(--color-primary) !important; }
.overview-summary-item { background:#171a18; border-color:#2a302b !important; }
.overview-summary-item:hover { background:#1b201c !important; border-color:#4a524b !important; }
.token-summary-cell, .package-card, .plan-choice-card { background:#161a17 !important; border-color:#2a302b !important; }
.plan-choice-card.is-current { border-color:var(--color-primary) !important; box-shadow:0 0 0 1px var(--color-primary) !important; }

.auth-shell { min-height:100vh; background:radial-gradient(circle at 50% 15%,rgba(217,255,67,.09),transparent 28%),#0b0d0c !important; }
.auth-header { background:transparent !important; border:none !important; }
.auth-card { width:min(100%,480px) !important; padding:clamp(28px,5vw,52px) !important; }
.auth-card h1 { font-size:46px !important; overflow-wrap:break-word; }
.auth-card .btn-primary, .auth-card .btn-google { width:100%; justify-content:center; }
.auth-divider::before { border-color:#292e2a !important; }
.auth-divider span { background:#121513 !important; color:#737b74 !important; }

@media (max-width: 900px) {
    .landing-hero { min-height:auto; padding-top:100px !important; padding-bottom:80px !important; }
    .hero-product { transform:none; }
    .landing-section { padding-top:76px !important; padding-bottom:76px !important; }
    .pricing-card--featured { transform:none; }
}
@media (max-width: 640px) {
    .app-header { width:calc(100% - 20px); margin-top:10px; border-radius:15px; }
    .account-nav-email, .account-nav-sep, .account-nav-balance { display:none !important; }
    .hero-copy h1 { font-size:54px !important; }
    .seo-check-input-row { border-radius:18px; background:transparent; border:none; padding:0; }
    .seo-check-input { border:1px solid #303630 !important; border-radius:14px !important; background:#0d0f0e !important; }
    .seo-check-submit { border-radius:14px !important; }
    .tabs-nav { border-radius:14px !important; }
}

/* Light theme final cascade (the legacy dark skin above remains the dark fallback). */
html:not([data-theme="dark"]){color-scheme:light;--color-primary:#635bff;--color-primary-dark:#5147e5;--color-primary-light:#eeecff;--gradient-brand:linear-gradient(135deg,#765fff 0%,#635bff 48%,#1687ff 100%);--color-ink:#15171f;--color-body:#3f4655;--color-muted:#737b8d;--color-muted-2:#626b7e;--color-border:#dde1eb;--color-border-light:#e9ebf2;--color-bg:#fff;--color-bg-soft:#f3f4f8;--color-bg-page:#f6f7fb;--color-success-bg:#edf3ff;--color-success-fg:#2875d9;--shadow-brand:0 14px 34px rgba(99,91,255,.22)}
html:not([data-theme="dark"]),html:not([data-theme="dark"]) body{background:#f6f7fb}html:not([data-theme="dark"]) body{background-image:radial-gradient(circle at 76% -10%,rgba(99,91,255,.09),transparent 34%)}
html:not([data-theme="dark"]) .brand-link,html:not([data-theme="dark"]) .landing-brand{color:#15171f!important}html:not([data-theme="dark"]) .brand-mark{border-color:#635bff;box-shadow:0 0 22px rgba(99,91,255,.25)}
html:not([data-theme="dark"]) .project-header{background:rgba(255,255,255,.82)!important;border-color:#e5e7ef!important}html:not([data-theme="dark"]) .project-header nav a{color:#626a7a}html:not([data-theme="dark"]) .account-nav-link{background:#f3f4f8;border-color:#e1e4ec}
html:not([data-theme="dark"]) .btn-default,html:not([data-theme="dark"]) .btn-google{background:#fff!important;color:#20232d!important;border-color:#dfe2eb!important}html:not([data-theme="dark"]) .form-control{background:#fff!important;border-color:#dcdfea!important;color:#15171f!important}
html:not([data-theme="dark"]) .hero-product,html:not([data-theme="dark"]) .seo-check-widget,html:not([data-theme="dark"]) .capability-block,html:not([data-theme="dark"]) .pricing-card,html:not([data-theme="dark"]) .integration-card,html:not([data-theme="dark"]) .tokens-explainer-card,html:not([data-theme="dark"]) .steps-grid article,html:not([data-theme="dark"]) .project-card,html:not([data-theme="dark"]) .dashboard-panel,html:not([data-theme="dark"]) .activation-note,html:not([data-theme="dark"]) .empty-state,html:not([data-theme="dark"]) .account-card,html:not([data-theme="dark"]) .billing-card,html:not([data-theme="dark"]) .content-card,html:not([data-theme="dark"]) .auth-card,html:not([data-theme="dark"]) .account-sidebar{background:#fff!important;border-color:#e2e5ed!important;box-shadow:0 18px 48px rgba(32,37,58,.07)!important}
html:not([data-theme="dark"]) .hero-product{background:rgba(255,255,255,.91)!important}html:not([data-theme="dark"]) .seo-check-widget{background:linear-gradient(145deg,#fff,#f8f8fc)!important}html:not([data-theme="dark"]) .product-topbar{background:#f4f5f8!important;border-color:#e5e7ee!important}html:not([data-theme="dark"]) .product-row,html:not([data-theme="dark"]) .product-grid>div{border-color:#e7e9f0!important}
html:not([data-theme="dark"]) .section-band{background:#f0f2f7!important;border-color:#e3e6ee!important}html:not([data-theme="dark"]) .seo-check-input-row{background:#fff;border-color:#dfe2eb}html:not([data-theme="dark"]) .project-domain{color:#171923!important}html:not([data-theme="dark"]) .tabs-nav{background:#eef0f5!important;border-color:#e1e4eb!important}html:not([data-theme="dark"]) .overview-summary-item,html:not([data-theme="dark"]) .token-summary-cell,html:not([data-theme="dark"]) .package-card,html:not([data-theme="dark"]) .plan-choice-card{background:#f8f9fb!important;border-color:#e2e5ed!important}
html:not([data-theme="dark"]) .plan-choice-card.is-current{border-color:var(--color-primary)!important;box-shadow:0 0 0 1px var(--color-primary)!important}
html:not([data-theme="dark"]) .auth-shell{background:radial-gradient(circle at 50% 15%,rgba(99,91,255,.11),transparent 30%),#f6f7fb!important}html:not([data-theme="dark"]) .auth-divider span{background:#fff!important}
html:not([data-theme="dark"]) .hero-lead{color:#5f6879!important}html:not([data-theme="dark"]) .eyebrow{color:#635bff!important}html:not([data-theme="dark"]) .icon-chip{background:#eeecff!important;color:#635bff!important;border-color:#e2ddff!important}html:not([data-theme="dark"]) .nav-cta{color:#fff!important;-webkit-text-fill-color:#fff!important}
@media(max-width:640px){html:not([data-theme="dark"]) .seo-check-input{background:#fff!important;border-color:#dcdfea!important}}

html[data-theme="dark"]{--gradient-brand:linear-gradient(135deg,#8d84ff 0%,#756cff 50%,#2995ff 100%)}
html[data-theme="dark"] .landing-brand,html[data-theme="dark"] .brand-link{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="dark"] .nav-cta{background:var(--gradient-brand);color:#fff!important;-webkit-text-fill-color:#fff!important}
html[data-theme="dark"] .eyebrow{color:#9b95ff!important}html[data-theme="dark"] .live-dot{background:#8178ff;box-shadow:0 0 0 5px rgba(129,120,255,.12)}
html[data-theme="dark"] .hero-lead{color:#9da3b1!important}html[data-theme="dark"] .icon-chip{background:rgba(129,120,255,.13)!important;color:#9b95ff!important;border-color:rgba(129,120,255,.2)!important}
html[data-theme="dark"] .product-grid>div,html[data-theme="dark"] .problem-list li{background:#151820!important;color:#c7cbd6!important;border-color:#2b2f3a!important}
html[data-theme="dark"] .product-row small,html[data-theme="dark"] .product-grid small{color:#9299a8!important}html[data-theme="dark"] .product-row em{background:rgba(129,120,255,.14)!important;color:#a49eff!important}
.btn-primary,.nav-cta{color:#fff!important;-webkit-text-fill-color:#fff!important}.auth-links .btn-link{color:#60697a!important}.hero-actions .btn-link{color:#6d7585!important}
html[data-theme="dark"] .auth-links .btn-link,html[data-theme="dark"] .hero-actions .btn-link{color:#a5abba!important}
.hero-copy h1{font-size:clamp(52px,5.6vw,86px)!important;line-height:.94!important}
@media(max-width:640px){.hero-copy h1{font-size:48px!important;line-height:.96!important}}

/* How it works — clear three-step route */
.steps-grid{gap:22px;isolation:isolate}.steps-grid::before{display:none}
.steps-grid article{position:relative;min-height:260px;padding:30px!important;overflow:visible;background:linear-gradient(145deg,#fff 0%,#fafaff 100%)!important;border:1px solid #e0e3ed!important;box-shadow:0 18px 45px rgba(38,43,68,.08)!important}
.steps-grid article::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:16px 16px 0 0;background:var(--gradient-brand)}
.steps-grid article:not(:last-child)::after{content:"→";position:absolute;z-index:2;top:50%;right:-34px;width:46px;height:46px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid #e1e3ee;border-radius:50%;background:#fff;color:#635bff;font-size:20px;font-weight:700;box-shadow:0 8px 22px rgba(48,53,82,.12)}
.step-meta{display:flex;align-items:center;gap:12px}.steps-grid .step-meta span{width:auto;height:auto;padding:0;background:none!important;color:#635bff!important;font:700 13px/1 'Space Grotesk',sans-serif;letter-spacing:.08em}.step-meta small{color:#7b8394;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.steps-grid h3{margin:52px 0 10px;font-size:24px}.steps-grid p{margin:0;color:#626b7c;max-width:360px}
html[data-theme="dark"] .steps-grid article{background:linear-gradient(145deg,#151820,#111319)!important;border-color:#2b2f3a!important}html[data-theme="dark"] .steps-grid article:not(:last-child)::after{background:#171a22;border-color:#323642;color:#9b95ff}html[data-theme="dark"] .steps-grid .step-meta span{color:#9b95ff!important}html[data-theme="dark"] .step-meta small{color:#858c9d}html[data-theme="dark"] .steps-grid p{color:#9da3b1}
@media(max-width:900px){.steps-grid article{min-height:0}.steps-grid article:not(:last-child)::after{content:"↓";top:auto;right:auto;bottom:-34px;left:50%;transform:translateX(-50%)}.steps-grid h3{margin-top:34px}}

/* Capability sections — two deliberate product panels */
.capability-block{position:relative;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:clamp(36px,5vw,76px);padding:clamp(34px,4vw,58px)!important;margin:0 0 26px;border:1px solid #e0e3ed!important;border-radius:28px;background:linear-gradient(145deg,#fff 0%,#fafaff 100%)!important;box-shadow:0 22px 60px rgba(38,43,68,.08)!important;overflow:hidden}
.capability-block::before{content:"";position:absolute;left:0;top:36px;bottom:36px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#635bff,#1687ff)}
.capability-block:nth-child(2){background:linear-gradient(145deg,#f9f8ff 0%,#fff 62%)!important}.capability-block:nth-child(2)::before{background:linear-gradient(180deg,#1687ff,#635bff)}
.landing-section .capability-intro h2{margin:12px 0 18px;font-size:clamp(36px,3.3vw,52px)!important;line-height:1.02!important;letter-spacing:-.05em!important}.capability-intro>p:last-child{margin:0;font-size:15px;line-height:1.7}
.capability-list{gap:14px}.capability-list li{min-height:112px;padding:18px;border:1px solid #e6e8f0!important;border-radius:16px;background:rgba(255,255,255,.72);align-items:flex-start}.capability-list .icon-chip{flex:0 0 40px}.capability-list h4{font-size:14px;line-height:1.35}.capability-list p{font-size:12.5px;line-height:1.55}
html[data-theme="dark"] .capability-block,html[data-theme="dark"] .capability-block:nth-child(2){background:linear-gradient(145deg,#151820,#111319)!important;border-color:#2b2f3a!important;box-shadow:0 22px 60px rgba(0,0,0,.24)!important}html[data-theme="dark"] .capability-list li{background:rgba(25,28,36,.76);border-color:#2d313d!important}
@media(max-width:900px){.capability-block{grid-template-columns:1fr;padding:30px 24px!important}.capability-list{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.capability-list{grid-template-columns:1fr}.landing-section .capability-intro h2{font-size:36px!important}.capability-list li{min-height:0}}

/* Final CTA — compact conversion panel */
.cta-band{padding:18px var(--container-pad) 58px;background:transparent!important;border:0!important}
.landing-cta{position:relative;max-width:calc(var(--container-max) - (var(--container-pad) * 2));min-height:250px;margin:0 auto;padding:clamp(38px,5vw,68px)!important;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:radial-gradient(circle at 85% 20%,rgba(41,149,255,.28),transparent 34%),linear-gradient(135deg,#302887 0%,#5147e5 48%,#315fd2 100%);box-shadow:0 28px 70px rgba(55,48,150,.22);overflow:hidden}
.landing-cta::after{content:"";position:absolute;width:260px;height:260px;right:-90px;bottom:-160px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025)}
.landing-cta>div:first-child{position:relative;z-index:1;max-width:680px}.landing-cta h2{margin:0;font-size:clamp(34px,3.6vw,54px)!important;line-height:1.02!important;letter-spacing:-.05em!important;color:#fff!important}.landing-cta>div:first-child p{color:rgba(255,255,255,.72)!important;font-size:15px}
.landing-cta .contact-links{position:relative;z-index:1;width:300px;flex:0 0 300px;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px}.landing-cta .contact-phone{width:100%;padding:10px 16px 10px 10px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(11,13,30,.16);color:#fff!important;backdrop-filter:blur(10px)}.landing-cta .contact-phone>span:last-child{white-space:nowrap}.landing-cta .contact-phone small{color:rgba(255,255,255,.64)!important}.landing-cta .contact-phone .icon-chip{background:rgba(255,255,255,.13)!important;color:#fff!important;border-color:rgba(255,255,255,.1)!important}.landing-cta .btn-commercial{width:100%;white-space:nowrap;padding:16px 24px!important;text-align:center}
html[data-theme="dark"] .cta-band{background:transparent!important}html[data-theme="dark"] .landing-cta{background:radial-gradient(circle at 85% 20%,rgba(41,149,255,.22),transparent 34%),linear-gradient(135deg,#211d5c,#37307f 52%,#243d77)}
@media(max-width:980px){.landing-cta{align-items:flex-start;flex-direction:column}.landing-cta .contact-links{width:100%;flex-basis:auto}}
@media(max-width:640px){.cta-band{padding-left:16px;padding-right:16px}.landing-cta{border-radius:22px}.landing-cta .contact-links{align-items:stretch}.landing-cta .contact-phone{width:100%}.landing-cta .btn-commercial{width:100%;text-align:center}.landing-cta h2{font-size:36px!important}}

/* Compact authenticated header */
.app-shell .app-header{position:sticky;z-index:50;top:12px;width:100%;max-width:none;min-height:64px;margin:12px 0 34px;padding:8px 10px 8px 18px!important;border:1px solid #e2e5ed!important;border-radius:16px;background:rgba(255,255,255,.9)!important;box-shadow:0 10px 30px rgba(31,36,55,.08)!important}
.app-shell .app-header .brand-link{font-size:18px}.app-shell .app-header .brand-mark{width:14px;height:14px;border-width:3px}.app-shell .app-header nav{gap:10px}.app-shell .app-header nav>a:not(.account-nav-link){padding:8px 10px;border-radius:9px;font-size:13px}.app-shell .app-header nav>a:not(.account-nav-link):hover{background:var(--color-bg-soft)}
.app-shell .account-nav-link{min-height:42px;padding:5px 10px 5px 5px!important;border-radius:12px}.app-shell .account-nav-avatar{width:30px;height:30px}.app-shell .theme-toggle{margin:0 2px}
html[data-theme="dark"] .app-shell .app-header{background:rgba(16,18,24,.9)!important;border-color:#292d37!important;box-shadow:0 10px 30px rgba(0,0,0,.24)!important}
@media(max-width:640px){.app-shell .app-header{top:8px;margin:8px 0 26px;padding-left:12px!important}.app-shell .app-header nav>a:not(.account-nav-link){display:none}}

/* Commercial accent: warm amber, never a system status color */
.btn.btn-commercial{background-color:#f4772f!important;background-image:linear-gradient(135deg,#ff9a4d,#f4772f)!important;color:#000000!important;box-shadow:0 12px 28px rgba(238,111,39,.24)!important}.btn.btn-commercial:hover,.btn.btn-commercial:focus{background-color:#df6422!important;background-image:linear-gradient(135deg,#f58a3a,#df6422)!important;color:#fff!important}

/* One authenticated header geometry everywhere — wide landing-page variant */
.app-header{position:sticky!important;z-index:50;top:12px!important;width:calc(100% - 32px)!important;max-width:var(--container-max)!important;min-height:90px;margin:12px auto 38px!important;padding:16px 12px 16px 20px!important;border-radius:18px!important}
.app-header .brand-link{font-size:20px}.app-header .brand-mark{width:16px;height:16px;border-width:3px}.app-header nav{gap:12px}.app-header nav>a:not(.account-nav-link){padding:9px 11px;border-radius:9px;font-size:14px}.app-header nav>a:not(.account-nav-link):hover{background:var(--color-bg-soft)}
.app-header .account-nav-link{min-height:46px;padding:6px 12px 6px 6px!important;border-radius:14px}.app-header .account-nav-avatar{width:32px;height:32px}.app-header .theme-toggle{margin:0 2px}
.app-shell{padding-top:0!important}.app-shell .app-header{width:calc(100% + (var(--container-pad) * 2))!important;max-width:var(--container-max)!important;min-height:90px!important;margin:12px calc(var(--container-pad) * -1) 38px!important;padding:16px 12px 16px 20px!important;border-radius:18px!important}
@media(max-width:640px){.app-header{top:8px!important;width:calc(100% - 20px)!important;min-height:66px!important;margin:8px auto 26px!important;padding:9px 10px 9px 12px!important}.app-shell .app-header{width:calc(100% + (var(--container-pad) * 2) - 20px)!important;min-height:66px!important;margin-left:calc((var(--container-pad) * -1) + 10px)!important;margin-right:0!important;padding:9px 10px 9px 12px!important;border-radius:15px!important}.app-header nav>a:not(.account-nav-link){display:none}}

/* Final invariant: app header is viewport-based, never container-based */
.app-header.app-header{box-sizing:border-box!important;position:sticky!important;z-index:50;top:8px!important;left:auto!important;right:auto!important;width:calc(100vw - 16px)!important;max-width:none!important;height:90px!important;min-height:90px!important;margin:8px calc(50% - 50vw + 8px) 38px!important;padding:16px 12px 16px 20px!important;border:1px solid var(--color-border-light)!important;border-radius:18px!important;background:rgba(255,255,255,.9)!important;box-shadow:0 12px 34px rgba(31,36,55,.1)!important}
html[data-theme="dark"] .app-header.app-header{background:rgba(16,18,24,.9)!important;border-color:#292d37!important;box-shadow:0 12px 34px rgba(0,0,0,.26)!important}
@media(max-width:640px){.app-header.app-header{width:calc(100vw - 16px)!important;height:66px!important;min-height:66px!important;margin:8px calc(50% - 50vw + 8px) 26px!important;padding:9px 10px 9px 12px!important;border-radius:15px!important}}

/* Header navigation: logo, then primary menu, account actions pushed to the far right */
.app-header .app-nav{display:flex;flex:1;min-width:0;justify-content:space-between;align-items:center;margin-left:18px}.app-nav-primary,.app-nav-actions{display:flex;align-items:center;gap:10px}.app-nav-primary a{display:inline-flex;align-items:center;padding:9px 11px;border-radius:9px;color:var(--color-body);font-size:14px;font-weight:600;text-decoration:none}.app-nav-primary a:hover{background:var(--color-bg-soft);color:var(--color-ink)}
@media(max-width:640px){.app-header .app-nav{justify-content:flex-end;margin-left:auto}.app-nav-primary{display:none}.app-nav-actions{gap:7px}}

/* Header sizing tokens — identical on landing and every app screen */
.app-header.app-header{height:90px!important;min-height:90px!important;padding:16px 12px 16px 20px!important}
.app-header.app-header .brand-link{gap:9px!important;font-family:'Space Grotesk',sans-serif!important;font-size:20px!important;font-weight:700!important;line-height:1!important;letter-spacing:-.04em!important}
.app-header.app-header .brand-mark{width:16px!important;height:16px!important;border-width:3px!important;flex:0 0 16px}
.app-header.app-header .app-nav-primary a,.app-header.app-header .account-nav-link,.app-header.app-header .account-nav-email,.app-header.app-header .account-nav-balance{font-family:'Manrope',sans-serif!important;font-size:14px!important;font-weight:600!important;line-height:20px!important;letter-spacing:-.01em!important}
.app-header.app-header .account-nav-link{height:46px!important;min-height:46px!important;padding:6px 12px 6px 6px!important}.app-header.app-header .account-nav-avatar{width:32px!important;height:32px!important;flex:0 0 32px;font-size:13px!important;line-height:32px!important}.app-header.app-header .theme-toggle{flex:0 0 auto!important}
.app-header.app-header{left:50%!important;width:calc(100vw - 48px)!important;max-width:1480px!important;margin:8px 0 38px!important;transform:translateX(-50%)!important}
@media(max-width:640px){.app-header.app-header{height:66px!important;min-height:66px!important;padding:9px 10px 9px 12px!important}.app-header.app-header .brand-link{font-size:18px!important}.app-header.app-header .brand-mark{width:14px!important;height:14px!important;flex-basis:14px}.app-header.app-header .account-nav-link{height:42px!important;min-height:42px!important}}
@media(max-width:640px){.app-header.app-header{left:50%!important;width:calc(100vw - 16px)!important;max-width:none!important;margin-top:8px!important;transform:translateX(-50%)!important}}

/* Safe header centering: no transforms inside app-shell */
.landing-page>.app-header.app-header{left:auto!important;width:calc(100% - 48px)!important;max-width:1480px!important;margin:8px auto 38px!important;transform:none!important}
.app-shell>.app-header.app-header{left:auto!important;width:calc(100% + (var(--container-pad) * 2) - 48px)!important;max-width:none!important;margin:8px 0 38px calc((var(--container-pad) * -1) + 24px)!important;transform:none!important}
@media(max-width:640px){.landing-page>.app-header.app-header{width:calc(100% - 16px)!important;margin-left:auto!important;margin-right:auto!important}.app-shell>.app-header.app-header{width:calc(100% + (var(--container-pad) * 2) - 16px)!important;margin-left:calc((var(--container-pad) * -1) + 8px)!important;margin-right:0!important}}

/* RSN identity: compact monogram with a connected signal node */
.brand-mark{display:block;width:38px;height:38px;flex:0 0 38px;overflow:visible;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important}
.brand-mark__tile{fill:#635bff}
.brand-mark__letter{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand-mark__signal{fill:#b8ff5a;stroke:#635bff;stroke-width:1.4}
.landing-brand:hover .brand-mark__tile,.brand-link:hover .brand-mark__tile{fill:#5148ed}

/* Public navigation: logo, then primary menu, account actions pushed to the far right */
.public-nav{display:flex;flex:1;min-width:0;align-items:center;justify-content:space-between;gap:12px;margin-left:18px}.public-nav-links,.public-nav-actions{display:flex;align-items:center;gap:4px}.public-nav-actions{gap:12px}.public-nav-links a,.public-nav-login{padding:9px 11px;border-radius:9px;font-size:14px;font-weight:600;text-decoration:none}.public-nav-links a:hover,.public-nav-login:hover{background:var(--color-bg-soft)}.public-nav .nav-cta{white-space:nowrap}
.public-nav-toggle{display:none;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid var(--color-border-light);border-radius:12px;background:var(--color-surface);color:var(--color-ink);cursor:pointer}
.public-nav-toggle-icon{width:19px;height:19px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.public-page{min-height:100vh}.public-page-hero{max-width:1120px;margin:0 auto;padding:120px var(--container-pad) 96px;text-align:center}.public-page-hero h1{max-width:960px;margin:18px auto 24px;font-size:clamp(50px,6.5vw,92px);line-height:.94;letter-spacing:-.065em}.public-page-hero>p:last-child{max-width:720px;margin:0 auto;color:var(--color-muted);font-size:19px;line-height:1.7}
.public-feature-grid,.public-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1280px;margin:0 auto;padding:0 var(--container-pad) 112px}.public-feature-grid article,.public-story-grid article{padding:32px;border:1px solid var(--color-border-light);border-radius:22px;background:var(--color-surface);box-shadow:0 18px 48px rgba(32,37,58,.05)}.public-feature-grid h2,.public-story-grid h2{margin:26px 0 10px;font-size:23px;letter-spacing:-.035em}.public-feature-grid p,.public-story-grid p{margin:0;color:var(--color-muted);line-height:1.7}.public-story-grid article small{color:var(--color-primary);font-weight:800}.public-story-grid article h2{margin-top:48px}
.public-pricing-section{max-width:1280px;margin:0 auto;padding:0 var(--container-pad) 112px}.public-pricing-section .pricing-card{display:flex;flex-direction:column}.public-pricing-section .pricing-features{flex:1}.public-pricing-section .pricing-card>.btn{width:100%;text-align:center}
.public-integration-list{display:grid;gap:18px;max-width:1120px;margin:0 auto;padding:0 var(--container-pad) 112px}.public-integration-list article{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:38px 42px;border:1px solid var(--color-border-light);border-radius:24px;background:var(--color-surface)}.public-integration-list article>div{max-width:760px}.public-integration-list h2{margin:9px 0 12px;font-size:32px}.public-integration-list p{margin:0;color:var(--color-muted);line-height:1.7}.public-card-label{color:var(--color-primary);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.public-integration-list .icon-chip{width:56px;height:56px;flex:0 0 56px}
.public-contact-card,.public-page-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1120px;margin:0 auto 112px;padding:48px;border-radius:28px;background:var(--color-bg-soft);border:1px solid var(--color-border-light)}.public-contact-card h2,.public-page-cta h2{margin:8px 0 10px;font-size:clamp(30px,4vw,48px)}.public-contact-card p{margin:0;color:var(--color-muted)}.public-contact-card>div:last-child{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.public-contact-card>div:last-child a{font-size:18px;font-weight:700}.public-page-cta{margin-bottom:64px;background:linear-gradient(135deg,#302887,#5147e5);border:0;color:#fff}.public-page-cta .eyebrow,.public-page-cta h2{color:#fff!important}.public-page-cta h2{margin-bottom:0}.public-page-cta .btn{white-space:nowrap;background:#fff!important;color:#302887!important}
html[data-theme="dark"] .public-feature-grid article,html[data-theme="dark"] .public-story-grid article,html[data-theme="dark"] .public-integration-list article{background:#111418;border-color:#292e2a}html[data-theme="dark"] .public-contact-card{background:#111418;border-color:#292e2a}
.public-faq{max-width:820px;margin:0 auto;padding:0 var(--container-pad) 112px}.public-faq .eyebrow{display:block;text-align:center}.public-faq h2{margin:8px 0 36px;text-align:center;font-size:clamp(28px,3.5vw,40px)}
.faq-list{display:flex;flex-direction:column;gap:12px}.faq-list details{padding:22px 26px;border:1px solid var(--color-border-light);border-radius:16px;background:var(--color-surface)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";flex:none;font-size:22px;font-weight:400;color:var(--color-primary);transition:transform .18s ease}.faq-list details[open] summary::after{transform:rotate(45deg)}.faq-list p{margin:14px 0 0;color:var(--color-muted);line-height:1.7}
html[data-theme="dark"] .faq-list details{background:#111418;border-color:#292e2a}
@media(max-width:980px){.public-nav-toggle{display:inline-flex}.public-nav-links{position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px var(--container-pad) 16px;background:var(--color-surface);border-bottom:1px solid var(--color-border-light);box-shadow:0 24px 48px rgba(32,37,58,.14);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;pointer-events:none}.public-nav-links.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.public-nav-links a{padding:13px 14px;border-radius:10px}.public-feature-grid,.public-story-grid{grid-template-columns:repeat(2,1fr)}.public-page-cta,.public-contact-card{margin-left:var(--container-pad);margin-right:var(--container-pad)}}
@media(max-width:640px){.public-nav-login{display:none}.public-nav .nav-cta{padding:10px 13px!important;font-size:13px}.public-page-hero{padding-top:76px;padding-bottom:64px}.public-page-hero h1{font-size:46px}.public-page-hero>p:last-child{font-size:16px}.public-feature-grid,.public-story-grid{grid-template-columns:1fr;padding-bottom:72px}.public-feature-grid article,.public-story-grid article{padding:26px}.public-integration-list{padding-bottom:72px}.public-integration-list article{align-items:flex-start;padding:28px}.public-integration-list h2{font-size:26px}.public-contact-card,.public-page-cta{align-items:flex-start;flex-direction:column;margin-bottom:64px;padding:30px;border-radius:22px}.public-contact-card>div:last-child{align-items:flex-start}.public-page-cta .btn{width:100%;text-align:center}.public-faq{padding-bottom:72px}.faq-list details{padding:18px 20px}}
.brand-mark__tile,.brand-mark__signal{transition:fill .18s ease}
html[data-theme="dark"] .brand-mark__tile{fill:#817aff}
html[data-theme="dark"] .brand-mark__signal{fill:#d9ff43;stroke:#171920}
.app-header.app-header .brand-mark{width:38px!important;height:38px!important;flex:0 0 38px!important}
@media(max-width:640px){.brand-mark,.app-header.app-header .brand-mark{width:34px!important;height:34px!important;flex-basis:34px!important}}

/* Theme switch: one circular icon button */
.theme-toggle.theme-toggle{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;padding:0!important;border:1px solid #dfe2eb!important;border-radius:12px!important;background:#fff!important;color:#635bff!important;box-shadow:0 5px 16px rgba(37,42,65,.1)!important;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.theme-toggle.theme-toggle:hover{background:#f1efff!important;border-color:#cbc6ff!important;transform:translateY(-1px)}
.theme-toggle-icon{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.theme-toggle-icon--moon{display:none}
html[data-theme="dark"] .theme-toggle.theme-toggle{background:#191c24!important;border-color:#343846!important;color:#9b95ff!important;box-shadow:0 5px 16px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .theme-toggle.theme-toggle:hover{background:#222631!important;border-color:#4a4f60!important}
html[data-theme="dark"] .theme-toggle-icon--sun{display:none}
html[data-theme="dark"] .theme-toggle-icon--moon{display:block}
@media(max-width:640px){.theme-toggle.theme-toggle{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important}}

/* Console link: square icon button, same size as the theme switch */
.console-nav-btn.console-nav-btn{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;padding:0!important;border:1px solid #dfe2eb!important;border-radius:12px!important;background:#fff!important;color:#635bff!important;box-shadow:0 5px 16px rgba(37,42,65,.1)!important;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;text-decoration:none!important}
.console-nav-btn.console-nav-btn:hover{background:#f1efff!important;border-color:#cbc6ff!important;transform:translateY(-1px)}
.console-nav-btn-icon{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .console-nav-btn.console-nav-btn{background:#191c24!important;border-color:#343846!important;color:#9b95ff!important;box-shadow:0 5px 16px rgba(0,0,0,.22)!important}
html[data-theme="dark"] .console-nav-btn.console-nav-btn:hover{background:#222631!important;border-color:#4a4f60!important}
@media(max-width:640px){.console-nav-btn.console-nav-btn{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important}}

/* Public marketing pages follow the landing-page type and commercial accents. */
.public-page .public-page-hero h1{font-weight:800}
.public-page h2{font-weight:700}
html .public-page .pricing-card--featured{border-color:#f4772f!important;box-shadow:0 0 0 1px #f4772f,0 30px 70px rgba(238,111,39,.14)!important}
.public-page .pricing-badge{background:linear-gradient(135deg,#ff9a4d,#f4772f)!important;color:#fff!important}

/*
 * ===== Project Workspace / Phase 3 — Project Health =====
 * Three separate visual vocabularies on purpose (see Phase 1 discovery
 * report §21):
 *   .health-hero--*     project state (ProjectHealthState)   — new/critical/...
 *   .severity-badge--*  severity (Severity)                  — critical/warning/notice/good
 *   .subscription-status--* project lifecycle (Project::status) — active/paused
 * None of these reuse .status-pill--critical/warning/notice, which already
 * means something else (SEO issue counts, operation status) elsewhere on
 * this same page.
 */

.health-hero {
    margin-bottom: 22px;
    padding: 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.health-hero--critical { background: var(--color-danger-bg); border-color: transparent; }
.health-hero--needs_attention, .health-hero--stale, .health-hero--error { background: var(--color-warning-bg); border-color: transparent; }
.health-hero--healthy { background: var(--color-success-bg); border-color: transparent; }
.health-hero--new, .health-hero--partial_data, .health-hero--analyzing { background: var(--color-primary-light); border-color: transparent; }
.health-hero-title {
    margin: 0 0 8px;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--color-ink);
}
.health-hero--critical .health-hero-title { color: var(--color-danger-fg); }
.health-hero-message {
    margin: 0;
    max-width: 62ch;
    color: var(--color-body);
    font-size: 15px;
}
.health-hero-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted);
}
.health-hero-evidence li::before { content: '·'; margin-right: 8px; color: var(--color-border); }
.health-hero-evidence li:first-child::before { content: none; }
.health-hero-since-last {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
}

.section-heading {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink);
}

.recommendations { margin-bottom: 22px; }
.recommendations-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}
.recommendations-heading-row .section-heading { margin-bottom: 0; }
.problems-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.problems-link:hover { color: var(--color-primary-dark); }
.problems-link-count { color: var(--color-muted); font-weight: 500; }
.recommendation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.recommendation-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.recommendation-card--primary {
    grid-column: 1 / -1;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
.recommendation-title { margin: 0; font-size: 16px; color: var(--color-ink); }
.recommendation-card--secondary .recommendation-title { font-size: 15px; }
.recommendation-description { margin: 0; color: var(--color-body); font-size: 14px; }
.recommendation-reason { margin: 0; color: var(--color-muted); font-size: 13px; }
.recommendation-evidence {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted);
}
.operation-cost {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.recommendation-actions form { margin: 0; }

.severity-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.severity-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.severity-badge--critical { background: var(--color-danger-bg); color: var(--color-danger-fg); }
.severity-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.severity-badge--notice { background: var(--color-primary-light); color: var(--color-primary-dark); }
.severity-badge--good { background: var(--color-success-bg); color: var(--color-success-fg); }

.severity-text--critical { color: var(--color-danger-fg); font-weight: 700; }
.severity-text--warning { color: var(--color-warning-fg); font-weight: 700; }
.severity-text--notice { color: var(--color-primary-dark); font-weight: 700; }
.severity-text--good { color: var(--color-success-fg); }

.coverage-grid { margin-bottom: 22px; }
.coverage-rows {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.coverage-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.coverage-row:hover { transform: translateY(-2px); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.coverage-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.coverage-value { font-size: 14px; font-weight: 600; color: var(--color-ink); }

.recent-activity { margin-bottom: 22px; }
.incident-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.incident-item { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.incident-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-muted); }
.incident-item--down .incident-dot { background: var(--color-danger-fg); }
.incident-item--up .incident-dot { background: var(--color-success-fg); }
.incident-text { flex: 1; color: var(--color-ink); }
.incident-meta { color: var(--color-muted); font-size: 13px; flex-shrink: 0; }

.empty-state-block { padding: 4px 0 14px; }
.empty-state-block p { margin: 0 0 6px; }

.advanced-disclosure {
    margin-top: 8px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.advanced-disclosure > summary {
    cursor: pointer;
    padding: 14px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
    list-style: none;
}
.advanced-disclosure > summary::-webkit-details-marker { display: none; }
.advanced-disclosure-hint { margin-left: 6px; color: var(--color-primary); font-weight: 700; }
.advanced-disclosure[open] > summary { border-bottom: 1px solid var(--color-border-light); }
.advanced-disclosure > .tabs { border: none; border-radius: 0; }

.subscription-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}
.subscription-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.subscription-status--active { background: var(--color-success-bg); border-color: transparent; color: var(--color-success-fg); }
.subscription-status--paused { background: var(--color-bg-soft); color: var(--color-muted); }
.subscription-status--error { background: var(--color-danger-bg); border-color: transparent; color: var(--color-danger-fg); }
.subscription-status--sm { min-height: auto; padding: 3px 10px; font-size: 11px; }

@media (max-width: 820px) {
    .recommendation-card--primary { grid-column: 1; }
    .coverage-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .health-hero { padding: 18px 20px; }
    .health-hero-title { font-size: 19px; }
    .recommendation-list { grid-template-columns: 1fr; }
    .coverage-rows { grid-template-columns: 1fr; }
}

/*
 * ===== Project Workspace / Phase 4 — Problems Workspace =====
 * Dense backlog list, not another card wall (brief §14).
 */

.problem-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 18px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-ink); }
.chip.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.chip-count { font-variant-numeric: tabular-nums; opacity: .8; }

.problem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.problem-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.problem-row:hover { border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.severity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.severity-dot--critical { background: var(--color-danger-fg); }
.severity-dot--warning { background: var(--color-warning-fg); }
.severity-dot--notice { background: var(--color-primary); }
.severity-dot--good { background: var(--color-success-fg); }
.problem-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.problem-row-title { font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.problem-row-meta { font-size: 12px; color: var(--color-muted); }
.problem-row-chevron { color: var(--color-muted); font-size: 18px; flex-shrink: 0; }
.problem-new-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

.affected-url-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.affected-url-list li { font-size: 13px; overflow-wrap: anywhere; }
.url-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.url-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 13px;
    text-decoration: none;
}
.url-pagination a.is-active { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }

@media (max-width: 620px) {
    .problem-filters { flex-direction: column; align-items: stretch; }
    .problem-row-title { white-space: normal; }
}

/*
 * ===== Project Workspace / Phase 5 — Pages Intelligence Workspace =====
 * Reuses .problem-list/.problem-row/.chip/.severity-dot/.severity-badge/
 * .url-pagination/.empty-state-block from Phase 4 — only page-specific
 * additions (search metrics column, trend arrows, search box) live here.
 */

.pages-summary {
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.pages-summary strong { color: var(--color-ink); font-size: 16px; }

.page-search {
    display: flex;
    gap: 8px;
}
.page-search input[type="text"] {
    min-width: 220px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 13px;
}

.page-row-search {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-muted);
    text-align: right;
    white-space: nowrap;
}
.page-row-nodata { color: var(--color-border); font-style: italic; }
.page-row-trend { font-weight: 700; }
.page-row-trend--up { color: var(--color-success-fg); }
.page-row-trend--down { color: var(--color-danger-fg); }

@media (max-width: 720px) {
    .page-row { flex-wrap: wrap; }
    .page-row-search { flex-basis: 100%; text-align: left; padding-left: 22px; }
}

/*
 * ===== Project Workspace / Phase 6 — Action / Execution Layer =====
 */

.action-list { display: flex; flex-direction: column; gap: 12px; }
.action-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.action-item-body { min-width: 0; }
.action-item-body p { margin: 4px 0 0; }
.action-item form { flex-shrink: 0; margin: 0; }
.action-unavailable { flex-shrink: 0; font-size: 12px; color: var(--color-muted); font-style: italic; }

.fix-preview { display: flex; flex-direction: column; gap: 18px; }
.fix-preview-field { display: flex; flex-direction: column; gap: 6px; }
.fix-preview-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.fix-preview-before, .fix-preview-after {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}
.fix-preview-before { background: var(--color-bg-soft); color: var(--color-muted); }
.fix-preview-after { background: var(--color-success-bg); color: var(--color-ink); border: 1px solid transparent; }
.fix-preview-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(0,0,0,.08);
    color: var(--color-muted);
    vertical-align: middle;
}

@media (max-width: 620px) {
    .action-item { flex-direction: column; align-items: stretch; }
}
.public-page .public-page-cta .btn-commercial{background-color:#f4772f!important;background-image:linear-gradient(135deg,#ff9a4d,#f4772f)!important;color:#fff!important}