/*
 * DigitalCostBot — design tokens.
 * Source of truth: DigitalCostBot Brandbook v1.0, section 06 "Цветовая система"
 * and section 10 "Digital UI-система". Values mirror
 * 07_Guidelines_and_Tokens/digitalcostbot-brand-tokens.css from the brand package.
 * Do not introduce accent hues outside this palette (brandbook section 12).
 */
:root {
    /* Core palette */
    --navy-950: #0b132b; /* Midnight Navy, deep surfaces */
    --navy-900: #14213d; /* Midnight Navy, primary text and logo */
    --navy-800: #1c2e52;
    --blue-600: #2563eb; /* Digital Blue — CTA, links, active state */
    --blue-700: #1d4ed8; /* Digital Blue hover */
    --blue-500: #3b82f6;
    --blue-100: #dbeafe;
    --blue-50: #eff6ff;
    --cyan-400: #22d3ee; /* Orbit Cyan — gradient, AI node, focus */
    --cyan-100: #cffafe;
    --teal-700: #0f766e; /* Control Teal — bot, success, confirmation */
    --teal-100: #ccfbf1;

    /* Interface status colours */
    --green-700: #067647;
    --green-100: #d1fadf;
    --red-700: #dc2626;
    --red-100: #fee4e2;
    --amber-700: #d97706;
    --amber-100: #fef0c7;

    /* Neutrals */
    --ink: #0f172a; /* body text */
    --muted: #475569; /* Slate — secondary text */
    --line: #e2e8f0; /* Border */
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --page: #f8fafc; /* Cloud — interface background */

    /* Brand gradient: 135deg Digital Blue -> Orbit Cyan. Never re-mix. */
    --brand-gradient: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 20px 55px rgba(20, 33, 61, 0.14);

    /* Radii: buttons 10px, cards 12-16px, modals 16px */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --container: 1180px;

    /* Motion: 160-240ms ease-out */
    --motion-fast: 160ms;
    --motion-base: 200ms;
    --motion-slow: 240ms;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Brandbook §07. Inter is the brand typeface; the package ships no font
       files, so drop a self-hosted woff2 into public/assets/fonts/ and add an
       @font-face rule here. The CSP already allows font-src 'self'. */
    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--page);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 2px;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgba(228, 231, 236, 0.85);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
}

.header-inner,
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--navy-900);
    font-weight: 760;
    letter-spacing: -0.02em;
}

.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: white;
    background: var(--blue-600);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
    font-size: 16px;
}

.main-nav,
.locale-switcher {
    display: flex;
    align-items: center;
}

.main-nav {
    gap: 22px;
    color: #475467;
    font-size: 14px;
    font-weight: 650;
}

.nav-toggle {
    display: none;
}

.main-nav > a:hover,
.nav-button:hover {
    color: var(--blue-600);
}

.main-nav > form {
    margin: 0;
}

.nav-button {
    padding: 0;
    border: 0;
    color: #475467;
    background: none;
    cursor: pointer;
    font-weight: 650;
}

.nav-cta {
    padding: 9px 14px;
    border-radius: 10px;
    color: white !important;
    background: var(--navy-900);
}

.locale-switcher {
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
}

.locale-switcher form {
    margin: 0;
}

.locale-switcher a,
.locale-switcher button {
    min-width: 31px;
    padding: 5px 7px;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.locale-switcher a.is-active,
.locale-switcher button.is-active {
    color: var(--blue-600);
    background: var(--blue-50);
}

.hero {
    overflow: hidden;
    padding: 96px 0 88px;
    background:
        radial-gradient(circle at 78% 12%, rgba(59, 130, 246, 0.16), transparent 31%),
        radial-gradient(circle at 12% 80%, rgba(15, 118, 110, 0.1), transparent 29%),
        linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(500px, 1.06fr);
    align-items: center;
    gap: 72px;
}

.eyebrow,
.card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-700);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 680px;
    margin: 18px 0;
    color: var(--navy-950);
    font-size: clamp(46px, 6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-lead {
    max-width: 620px;
    margin: 0;
    color: #475467;
    font-size: 19px;
    line-height: 1.62;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.button {
    display: inline-flex;
    /* Brandbook §10: buttons are 40-44px tall with a 10px radius. */
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 640;
    transition: transform var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.button--primary {
    color: white;
    background: var(--blue-600);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.23);
}

.button--primary:hover:not(:disabled) {
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}

.button--ghost {
    border-color: var(--line);
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.78);
}

.button--large {
    min-height: 54px;
    padding-inline: 24px;
}

.button--full {
    width: 100%;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.stage-note {
    display: flex;
    max-width: 620px;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
    color: var(--muted);
    font-size: 13px;
}

.live-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

.hero-visual {
    position: relative;
}

.hero-visual::before {
    position: absolute;
    z-index: 0;
    inset: 9% -7% -9% 13%;
    border-radius: 42px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(15, 118, 110, 0.08));
    content: "";
    filter: blur(1px);
    transform: rotate(3deg);
}

.visual-window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(208, 213, 221, 0.8);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-lg);
}

.window-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 20px;
    color: var(--muted);
    font-size: 12px;
}

.window-top > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d5dd;
}

.window-top b {
    margin-left: auto;
    color: #344054;
}

.metric-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.metric {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fcfdff;
}

.metric small {
    grid-column: 1 / -1;
    color: var(--muted);
}

.metric strong {
    color: var(--navy-900);
    font-size: 22px;
}

.metric em {
    align-self: end;
    color: var(--green-700);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.ai-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(37, 99, 235, 0.24);
    border-radius: 13px;
    color: #344054;
    background: var(--blue-50);
    font-size: 13px;
}

.ai-entry > span:nth-child(2) {
    flex: 1;
}

.ai-spark {
    color: var(--blue-600);
}

kbd {
    padding: 2px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    color: var(--muted);
    background: white;
    font: 11px ui-monospace, monospace;
}

.recognized-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    font-size: 13px;
}

.recognized-row > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.recognized-row small {
    color: var(--muted);
}

.recognized-row i {
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--green-700);
    background: var(--green-100);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.service-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: white;
    background: var(--teal-700);
    font-weight: 800;
}

.mini-chart {
    display: flex;
    height: 88px;
    align-items: end;
    gap: 11px;
    margin-top: 23px;
    padding: 0 8px;
    border-bottom: 1px solid var(--line);
}

.bar {
    flex: 1;
    min-width: 20px;
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
}

.bar-1 { height: 35%; }
.bar-2 { height: 58%; }
.bar-3 { height: 44%; }
.bar-4 { height: 76%; }
.bar-5 { height: 62%; }
.bar-6 { height: 86%; background: linear-gradient(180deg, #2dd4bf, var(--teal-700)); }

.features-section {
    padding: 76px 0 94px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.feature-card,
.dashboard-card,
.auth-card,
.installer-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.feature-card {
    padding: 26px;
}

.feature-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 20px;
    font-weight: 800;
}

.feature-card h2 {
    margin: 18px 0 8px;
    color: var(--navy-900);
    font-size: 19px;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.auth-section,
.empty-state {
    display: grid;
    min-height: calc(100vh - 145px);
    place-items: center;
    padding: 64px 20px;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.1), transparent 42%),
        var(--page);
}

.auth-card {
    width: min(100%, 480px);
    padding: 36px;
    box-shadow: 0 18px 50px rgba(20, 33, 61, 0.1);
}

.auth-heading h1,
.dashboard-heading h1,
.empty-state h1 {
    margin: 12px 0 8px;
    color: var(--navy-950);
    letter-spacing: -0.035em;
}

.auth-heading p,
.empty-state p {
    margin: 0;
    color: var(--muted);
}

.auth-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 680;
}

.field input,
.field select {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: var(--ink);
    background: white;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    font-size: 14px;
    font-weight: 500;
}

.field input:hover,
.field select:hover {
    border-color: var(--muted);
}

.field input:focus,
.field select:focus {
    border-color: var(--blue-500);
    outline: 3px solid rgba(59, 130, 246, 0.12);
}

.field small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.password-control {
    position: relative;
    display: block;
}

.password-control input {
    padding-right: 46px;
}

.password-control button {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-control button:hover {
    color: var(--blue-600);
    background: var(--blue-50);
}

.alert {
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
}

.alert--danger {
    border-color: #fecdca;
    color: var(--red-700);
    background: #fef3f2;
}

.alert--success {
    border-color: #abefc6;
    color: var(--green-700);
    background: #ecfdf3;
}

.alert--info {
    border-color: #b2ddff;
    color: #175cd3;
    background: #eff8ff;
}

.global-alert {
    padding-top: 18px;
}

.global-alert .alert {
    margin: 0;
}

.verification-banner {
    border-bottom: 1px solid #fedf89;
    color: #93370d;
    background: #fffaeb;
}

.verification-inner {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
}

.verification-inner > span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.verification-inner form {
    margin: 0;
}

.verification-inner button {
    padding: 6px 10px;
    border: 1px solid #fdb022;
    border-radius: 8px;
    color: #93370d;
    background: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.auth-card--wide {
    width: min(100%, 760px);
}

.auth-section--top {
    place-items: start center;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field--full {
    grid-column: 1 / -1;
}

.field .field-error {
    color: var(--red-700);
}

.auth-inline-link {
    justify-self: end;
    margin-top: -8px;
    color: var(--blue-600);
    font-size: 12px;
    font-weight: 700;
}

.auth-footer {
    margin: 24px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.auth-footer a {
    color: var(--blue-600);
    font-weight: 750;
}

.status-badge--warning {
    color: var(--amber-700);
    background: var(--amber-100);
}

.workspace-quick-switch {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.workspace-quick-switch select {
    min-width: 0;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    color: white;
    background: #253858;
}

.workspace-quick-switch .button {
    min-height: 42px;
    color: white;
    background: rgba(255, 255, 255, 0.08);
}

.roadmap-list li.is-done > span {
    border-color: #abefc6;
    color: var(--green-700);
    background: var(--green-100);
}

.page-section {
    min-height: calc(100vh - 145px);
    padding: 62px 0 88px;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.page-heading h1 {
    margin: 10px 0 8px;
    color: var(--navy-950);
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -0.045em;
}

.page-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.settings-card,
.workspace-list-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
}

.settings-card--soft {
    background: linear-gradient(145deg, #ffffff, #f6f9ff);
}

.settings-card__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.settings-card__heading h2,
.settings-card__heading p {
    margin: 0;
}

.settings-card__heading h2 {
    color: var(--navy-900);
    font-size: 18px;
}

.settings-card__heading p {
    color: var(--muted);
    font-size: 12px;
}

.settings-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 20px;
    font-weight: 800;
}

.workspace-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 20px;
}

.workspace-list-card {
    position: sticky;
    top: 92px;
}

.workspace-list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.workspace-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.workspace-list__item.is-active {
    border-color: #b2ddff;
    background: var(--blue-50);
}

.workspace-list__item strong,
.workspace-list__item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-list__item strong {
    color: var(--navy-900);
    font-size: 13px;
}

.workspace-list__item small {
    color: var(--muted);
    font-size: 10px;
}

.workspace-list__item form {
    margin: 0;
}

.workspace-list__item button,
.workspace-list__item i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: var(--blue-600);
    background: white;
    cursor: pointer;
    font-style: normal;
    font-weight: 800;
}

.workspace-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: white;
    background: linear-gradient(135deg, var(--teal-700), var(--blue-600));
    font-size: 13px;
    font-weight: 800;
}

.workspace-settings-stack {
    display: grid;
    gap: 20px;
}

.dashboard-section {
    min-height: calc(100vh - 145px);
    padding: 70px 0 92px;
}

.dashboard-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.dashboard-heading h1 {
    font-size: clamp(30px, 4vw, 44px);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.status-badge .live-dot {
    margin-top: 0;
}

.status-badge--ok {
    color: var(--green-700);
    background: var(--green-100);
}

.status-badge--danger {
    color: var(--red-700);
    background: var(--red-100);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
    gap: 20px;
}

.dashboard-card {
    padding: 28px;
}

.dashboard-card--primary {
    color: white;
    border: 0;
    background:
        radial-gradient(circle at 92% 10%, rgba(59, 130, 246, 0.5), transparent 32%),
        linear-gradient(145deg, var(--navy-950), var(--navy-800));
    box-shadow: 0 20px 45px rgba(20, 33, 61, 0.18);
}

.dashboard-card--primary .card-kicker {
    color: #93c5fd;
}

.dashboard-card h2 {
    margin: 13px 0 7px;
    font-size: 24px;
    letter-spacing: -0.025em;
}

.dashboard-card > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.system-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 32px;
}

.system-facts > div {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
}

.system-facts small,
.system-facts strong {
    display: block;
}

.system-facts small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}

.system-facts strong {
    margin-top: 5px;
    font-size: 14px;
}

.roadmap-list {
    display: grid;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.roadmap-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 11px;
}

.roadmap-list li.is-current {
    background: var(--blue-50);
}

.roadmap-list > li > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: white;
    font-size: 11px;
    font-weight: 800;
}

.roadmap-list strong,
.roadmap-list small {
    display: block;
}

.roadmap-list strong {
    color: var(--navy-900);
    font-size: 13px;
}

.roadmap-list small {
    color: var(--muted);
    font-size: 10px;
}

.empty-state {
    text-align: center;
}

.empty-code {
    color: var(--blue-600);
    font-size: 70px;
    font-weight: 850;
    letter-spacing: -0.07em;
}

.empty-state .button {
    margin-top: 22px;
}

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: white;
    font-size: 12px;
}

.footer-inner {
    min-height: 72px;
}

@media (max-width: 960px) {
    .hero-grid,
    .dashboard-grid,
    .settings-grid,
    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        gap: 54px;
    }

    .hero-copy {
        max-width: 720px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .workspace-list-card {
        position: static;
    }
}

@media (max-width: 720px) {
    .main-nav {
        gap: 6px;
    }

    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .header-inner {
        align-items: center;
        padding: 16px 0;
    }

    .has-js .nav-toggle {
        display: grid;
        width: 40px;
        height: 40px;
        margin-left: auto;
        place-content: center;
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: white;
        cursor: pointer;
    }

    .nav-toggle span {
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--navy-900);
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .main-nav {
        position: absolute;
        top: calc(100% + 1px);
        right: 14px;
        left: 14px;
        display: grid;
        align-items: stretch;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: white;
        box-shadow: var(--shadow-lg);
    }

    .has-js .main-nav.is-open {
        display: grid;
    }

    .main-nav > a,
    .main-nav > form .nav-button {
        width: 100%;
        padding: 10px 12px;
        border-radius: 9px;
        text-align: left;
    }

    .main-nav > a:hover,
    .main-nav > form .nav-button:hover {
        background: var(--blue-50);
    }

    .main-nav > form {
        display: block;
    }

    .locale-switcher {
        justify-content: flex-start;
        margin-top: 4px;
    }

    .locale-switcher form {
        width: auto;
    }

    .has-js .main-nav:not(.is-open) {
        display: none;
    }

    .brand > span:last-child {
        display: none;
    }

    .hero {
        padding: 68px 0 66px;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero h1 {
        font-size: clamp(42px, 14vw, 62px);
    }

    .hero-lead {
        font-size: 17px;
    }

    .visual-window {
        padding: 15px;
        border-radius: 18px;
    }

    .metric-row,
    .system-facts {
        grid-template-columns: 1fr;
    }

    .recognized-row {
        grid-template-columns: auto 1fr auto;
    }

    .recognized-row i {
        display: none;
    }

    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-heading,
    .verification-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .verification-inner {
        padding: 12px 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field--full {
        grid-column: auto;
    }

    .workspace-quick-switch {
        align-items: stretch;
        flex-direction: column;
    }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 16px 0;
    }

    .auth-card {
        padding: 26px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Stage 3: financial workspace */
textarea {
    font: inherit;
}

.main-nav {
    gap: 16px;
}

.heading-actions,
.dashboard-heading__actions,
.reminder-actions,
.recurring-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.finance-page {
    background:
        radial-gradient(circle at 88% 2%, rgba(59, 130, 246, 0.08), transparent 26%),
        var(--page);
}

.finance-layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.68fr) minmax(0, 1.32fr);
    align-items: start;
    gap: 22px;
}

.finance-layout--recurring {
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr);
}

.entry-card,
.filter-card,
.records-card,
.directory-card,
.recurring-card,
.recurring-intro,
.stat-card,
.reminder-panel,
.analytics-card,
.stage-strip {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
}

.entry-card {
    position: sticky;
    top: 92px;
    overflow: hidden;
    padding: 25px;
}

.entry-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-600), var(--cyan-400), var(--teal-700));
    content: "";
}

.entry-card__heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}

.entry-card__heading h2 {
    margin: 3px 0 0;
    color: var(--navy-900);
    font-size: 20px;
    letter-spacing: -0.025em;
}

.entry-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: var(--blue-600);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
    font-size: 20px;
    font-weight: 800;
}

.entry-form {
    display: grid;
    gap: 15px;
}

.entry-form textarea {
    width: 100%;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: var(--ink);
    background: white;
    line-height: 1.5;
}

.entry-form textarea:focus {
    border-color: var(--blue-500);
    outline: 3px solid rgba(59, 130, 246, 0.12);
}

.money-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
}

.money-fields--frequency {
    grid-template-columns: 100px minmax(0, 1fr);
}

.entry-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 19px 0 0;
    padding: 12px;
    border-radius: 11px;
    color: #475467;
    background: linear-gradient(135deg, var(--blue-50), var(--cyan-100));
    font-size: 11px;
}

.entry-hint span {
    color: var(--teal-700);
}

.records-stack,
.recurring-stack {
    display: grid;
    min-width: 0;
    gap: 16px;
}

.filter-card {
    display: grid;
    grid-template-columns: minmax(130px, 1.4fr) repeat(2, minmax(120px, 0.8fr)) minmax(130px, 1fr) minmax(120px, 0.8fr) auto;
    align-items: end;
    gap: 9px;
    padding: 15px;
}

.compact-field {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.compact-field > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compact-field input,
.compact-field select,
.directory-create input,
.directory-create select,
.directory-edit input,
.vendor-edit input,
.vendor-edit select,
.dashboard-heading__actions select {
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    color: var(--ink);
    background: white;
    font-size: 12px;
}

.filter-card .button {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
}

.records-card {
    overflow: hidden;
}

.records-card__head,
.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.records-card__head {
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.records-card__head h2,
.panel-heading h2 {
    margin: 3px 0 0;
    color: var(--navy-900);
    font-size: 19px;
    letter-spacing: -0.02em;
}

.records-card__head > small {
    color: var(--muted);
    font-size: 10px;
}

.expense-list {
    display: grid;
}

.expense-row {
    display: grid;
    grid-template-columns: 8px minmax(160px, 1.4fr) minmax(100px, 0.8fr) minmax(110px, auto) auto;
    align-items: center;
    gap: 13px;
    min-height: 72px;
    padding: 12px 18px;
    border-bottom: 1px solid #eef1f5;
    transition: background 140ms ease;
}

.expense-row:last-child {
    border-bottom: 0;
}

.expense-row:hover {
    background: #fbfcfe;
}

.expense-row.is-void {
    opacity: 0.58;
}

.record-color {
    display: block;
    width: 8px;
    height: 38px;
    border-radius: 999px;
    background: var(--record-color, #98a2b3);
}

.expense-row__main,
.recent-row > span:nth-child(2) {
    min-width: 0;
}

.expense-row__main strong,
.expense-row__main small,
.recent-row strong,
.recent-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-row__main strong,
.recent-row strong {
    color: #24324a;
    font-size: 13px;
}

.expense-row__main small,
.recent-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.category-chip {
    overflow: hidden;
    padding: 5px 8px;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.expense-amount {
    color: var(--navy-900);
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.row-actions form,
.row-actions a,
.row-actions button,
.icon-button {
    margin: 0;
}

.row-actions a,
.row-actions button,
.icon-button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.row-actions a:hover,
.row-actions button:hover,
.icon-button:hover {
    color: var(--blue-600);
    background: var(--blue-50);
}

.compact-empty {
    padding: 58px 24px;
    color: var(--muted);
    text-align: center;
}

.compact-empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 15px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 22px;
}

.compact-empty h3,
.compact-empty p {
    margin: 0;
}

.compact-empty h3 {
    color: var(--navy-900);
    font-size: 16px;
}

.compact-empty p {
    margin-top: 5px;
    font-size: 12px;
}

.compact-empty--small {
    padding: 30px 18px;
}

.standalone-error {
    display: block;
    margin-top: -9px;
    color: var(--red-700);
    font-size: 11px;
}

.button--danger-ghost {
    border-color: #fecdca;
    color: var(--red-700);
    background: #fff;
}

/* Directories */
.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.directory-card {
    overflow: hidden;
    padding: 23px;
}

.directory-card--wide {
    grid-column: 1 / -1;
}

.directory-card__head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.directory-card__head h2,
.directory-card__head p {
    margin: 0;
}

.directory-card__head h2 {
    color: var(--navy-900);
    font-size: 18px;
}

.directory-card__head p {
    color: var(--muted);
    font-size: 11px;
}

.directory-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
}

.directory-icon--blue { color: var(--blue-600); background: var(--blue-50); }
.directory-icon--teal { color: var(--teal-700); background: #ecfdf9; }
.directory-icon--violet { color: var(--teal-700); background: var(--cyan-100); }

.directory-create,
.directory-edit,
.vendor-edit {
    display: grid;
    align-items: center;
    gap: 8px;
}

.directory-create {
    grid-template-columns: minmax(0, 1fr) 42px 40px;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.directory-create--project {
    grid-template-columns: minmax(0, 1.2fr) minmax(80px, 0.7fr) 42px 40px;
}

.directory-create--vendor {
    grid-template-columns: minmax(130px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto;
}

.directory-create input[type="color"],
.directory-edit input[type="color"] {
    width: 42px;
    padding: 4px;
    cursor: pointer;
}

.directory-create button,
.directory-edit button,
.vendor-edit button {
    min-height: 40px;
    padding: 7px 11px;
    border: 0;
    border-radius: 9px;
    color: white;
    background: var(--navy-900);
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
}

.directory-list,
.vendor-list {
    display: grid;
    gap: 7px;
}

.directory-item,
.vendor-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 7px;
    border: 1px solid #eef1f5;
    border-radius: 11px;
}

.directory-item.is-archived,
.vendor-item.is-archived {
    opacity: 0.5;
    background: #f9fafb;
}

.directory-edit {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.directory-edit--project {
    grid-template-columns: 38px minmax(0, 1fr) minmax(70px, 0.55fr) 38px;
}

.text-action {
    padding: 7px 9px;
    border: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.text-action:hover {
    color: var(--blue-600);
}

.vendor-edit {
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
}

/* Recurring payments */
.recurring-intro {
    padding: 17px 19px;
    color: #344054;
    background: linear-gradient(135deg, #ecfdf3, #f0fdf9);
}

.recurring-intro > div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.recurring-intro .live-dot {
    margin: 0;
}

.recurring-intro p {
    margin: 5px 0 0 18px;
    color: var(--muted);
    font-size: 10px;
}

.recurring-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
}

.recurring-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--blue-600);
    content: "";
}

.recurring-card.is-due::before { background: #d92d20; }
.recurring-card.is-paused::before { background: #f79009; }
.recurring-card.is-paused { opacity: 0.75; }

.recurring-card__top,
.recurring-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.recurring-identity {
    justify-content: flex-start;
    min-width: 0;
}

.recurring-logo {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
    font-size: 15px;
    font-weight: 800;
}

.recurring-identity h2,
.recurring-identity p {
    margin: 0;
}

.recurring-identity h2 {
    overflow: hidden;
    color: var(--navy-900);
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recurring-identity p {
    color: var(--muted);
    font-size: 10px;
}

.recurring-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-top: 19px;
}

.recurring-metrics > div {
    padding: 12px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.recurring-metrics small,
.recurring-metrics strong {
    display: block;
}

.recurring-metrics small {
    color: var(--muted);
    font-size: 9px;
}

.recurring-metrics strong {
    margin-top: 4px;
    color: var(--navy-900);
    font-size: 12px;
}

.recurring-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 13px;
    color: var(--muted);
    font-size: 10px;
}

.recurring-actions {
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef1f5;
}

.recurring-actions form {
    margin: 0;
}

.recurring-actions .button {
    min-height: 37px;
    padding: 8px 12px;
    font-size: 10px;
}

/* Financial dashboard */
.dashboard-section--finance {
    padding-top: 55px;
    background:
        radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.1), transparent 27%),
        var(--page);
}

.dashboard-heading > div:first-child > p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-heading__actions form {
    margin: 0;
}

.has-js .workspace-submit {
    display: none;
}

.dashboard-heading__actions select {
    min-height: 46px;
    max-width: 190px;
    font-weight: 650;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.stat-card {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
}

.stat-card--accent {
    color: white;
    border: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.45), transparent 45%),
        linear-gradient(145deg, var(--navy-950), var(--navy-800));
    box-shadow: 0 16px 35px rgba(20, 33, 61, 0.16);
}

.stat-icon {
    display: grid;
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 17px;
    font-weight: 800;
}

.stat-card--accent .stat-icon {
    color: white;
    background: rgba(255, 255, 255, 0.12);
}

.stat-icon--teal { color: var(--teal-700); background: #ecfdf9; }
.stat-icon--violet { color: var(--teal-700); background: var(--cyan-100); }
.stat-icon--amber { color: #b54708; background: #fffaeb; }

.stat-card > div {
    min-width: 0;
}

.stat-card small,
.stat-card strong,
.stat-card p {
    display: block;
    margin: 0;
}

.stat-card small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
}

.stat-card strong {
    overflow: hidden;
    margin-top: 4px;
    color: var(--navy-900);
    font-size: clamp(17px, 2vw, 24px);
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-card p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.stat-card--accent small,
.stat-card--accent p { color: rgba(255, 255, 255, 0.62); }
.stat-card--accent strong { color: white; }

.currency-note {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #475467;
    background: #eef4ff;
    font-size: 10px;
}

.reminder-panel,
.analytics-card {
    padding: 22px;
}

.reminder-panel {
    margin-top: 17px;
    border-color: #fedf89;
    background: linear-gradient(145deg, white, #fffdf7);
}

.panel-heading > a {
    color: var(--blue-600);
    font-size: 10px;
    font-weight: 750;
}

.reminder-list {
    display: grid;
    gap: 7px;
    margin-top: 15px;
}

.reminder-row {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px;
    border: 1px solid #f2f4f7;
    border-radius: 11px;
    background: white;
}

.reminder-row.is-overdue {
    border-color: #fecdca;
}

.reminder-date {
    display: grid;
    width: 42px;
    height: 42px;
    place-content: center;
    border-radius: 11px;
    color: var(--amber-700);
    background: var(--amber-100);
    text-align: center;
}

.reminder-row.is-overdue .reminder-date {
    color: var(--red-700);
    background: var(--red-100);
}

.reminder-date b,
.reminder-date small {
    display: block;
    line-height: 1;
}

.reminder-date b { font-size: 15px; }
.reminder-date small { margin-top: 3px; font-size: 8px; }

.reminder-row > div:nth-child(2) strong,
.reminder-row > div:nth-child(2) small {
    display: block;
}

.reminder-row > div:nth-child(2) strong { color: var(--navy-900); font-size: 12px; }
.reminder-row > div:nth-child(2) small { color: var(--muted); font-size: 9px; }
.reminder-amount { color: var(--navy-900); font-size: 12px; white-space: nowrap; }
.reminder-actions form { margin: 0; }
.reminder-actions .button { min-height: 35px; padding: 7px 11px; font-size: 9px; }

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin-top: 17px;
}

.category-bars,
.recent-list {
    display: grid;
    gap: 12px;
    margin-top: 19px;
}

.category-bar > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: #344054;
    font-size: 11px;
}

.category-bar > div span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.category-bar > div span i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--category-color);
}

.category-bar > div strong {
    color: var(--navy-900);
    font-size: 10px;
}

.category-bar > span {
    display: block;
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef1f5;
}

.category-bar > span i {
    display: block;
    height: 100%;
    width: var(--category-width, 0%);
    border-radius: inherit;
    background: var(--category-color);
}

.recent-list {
    gap: 4px;
}

.recent-row {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 10px;
}

.recent-row:hover {
    background: var(--surface-soft);
}

.recent-row .record-color {
    width: 7px;
    height: 32px;
}

.recent-row > b {
    color: var(--navy-900);
    font-size: 11px;
    white-space: nowrap;
}

.stage-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    margin-top: 17px;
    padding: 17px 21px;
}

.stage-strip > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stage-strip > span {
    color: #d0d5dd;
}

.stage-number {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.stage-number.is-done { border-color: #abefc6; color: var(--green-700); background: var(--green-100); }
.stage-number.is-current { border-color: #b2ddff; color: var(--blue-600); background: var(--blue-50); }
.stage-strip strong,
.stage-strip small { display: block; }
.stage-strip strong { color: var(--navy-900); font-size: 11px; }
.stage-strip small { color: var(--muted); font-size: 9px; }

@media (max-width: 1080px) {
    .finance-layout,
    .finance-layout--recurring {
        grid-template-columns: 1fr;
    }

    .entry-card {
        position: static;
    }

    .entry-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entry-form > .field:first-of-type,
    .entry-form > .button,
    .entry-form > .entry-hint,
    .entry-form > .standalone-error {
        grid-column: 1 / -1;
    }

    .filter-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .directory-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .directory-card--wide {
        grid-column: auto;
    }

    .directory-create--vendor,
    .vendor-edit {
        grid-template-columns: 1fr 1fr;
    }

    .reminder-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .reminder-actions {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 720px) {
    .main-nav {
        gap: 6px;
    }

    .heading-actions,
    .dashboard-heading__actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-heading__actions select {
        width: 100%;
        max-width: none;
    }

    .entry-form,
    .filter-card,
    .stat-grid,
    .recurring-metrics {
        grid-template-columns: 1fr;
    }

    .entry-form > .field:first-of-type,
    .entry-form > .button,
    .entry-form > .entry-hint,
    .entry-form > .standalone-error {
        grid-column: auto;
    }

    .money-fields,
    .money-fields--frequency {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .filter-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-field--search,
    .filter-card .button {
        grid-column: 1 / -1;
    }

    .expense-row {
        grid-template-columns: 7px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px;
    }

    .expense-row .category-chip {
        grid-column: 2;
        justify-self: start;
    }

    .expense-row .expense-amount {
        grid-column: 3;
        grid-row: 1;
    }

    .expense-row .row-actions,
    .expense-row > .status-badge {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
    }

    .record-color {
        grid-row: 1 / 3;
        height: 48px;
    }

    .directory-create--project,
    .directory-create--vendor,
    .vendor-edit,
    .directory-edit--project {
        grid-template-columns: 1fr;
    }

    .directory-create--project input[type="color"],
    .directory-edit--project input[type="color"] {
        width: 100%;
    }

    .directory-item--stack,
    .vendor-item {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .recurring-card__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .recurring-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .recurring-actions form,
    .recurring-actions .button {
        width: 100%;
    }

    .reminder-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .reminder-amount {
        grid-column: 2;
    }

    .reminder-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .stage-strip {
        grid-template-columns: 1fr;
    }

    .stage-strip > span {
        display: none;
    }
}

/* Stage 4: Telegram and AI */
.integrations-page {
    background:
        radial-gradient(circle at 88% 0%, rgba(59, 130, 246, 0.12), transparent 24%),
        radial-gradient(circle at 3% 38%, rgba(34, 211, 238, 0.07), transparent 22%),
        var(--page);
}

.integrations-heading {
    align-items: center;
}

.integration-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.integration-status-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
}

.integration-status-card::after {
    position: absolute;
    right: -18px;
    bottom: -28px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(152, 162, 179, 0.07);
    content: "";
}

.integration-status-card.is-ready::after {
    background: rgba(18, 183, 106, 0.08);
}

.integration-status-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 850;
}

.integration-status-icon--telegram { color: #0877b9; background: #e9f6ff; }
.integration-status-icon--link { color: var(--teal-700); background: #ecfdf9; }
.integration-status-icon--ai { color: var(--teal-700); background: var(--cyan-100); }

.integration-status-card small,
.integration-status-card strong,
.integration-status-card p {
    display: block;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.integration-status-card small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.integration-status-card strong {
    margin-top: 3px;
    color: var(--navy-900);
    font-size: 13px;
}

.integration-status-card p {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.status-dot {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d0d5dd;
}

.integration-status-card.is-ready .status-dot {
    background: #12b76a;
    box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

.integrations-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
    align-items: start;
    gap: 20px;
}

.integrations-main,
.integrations-sidebar {
    display: grid;
    gap: 20px;
}

.integrations-sidebar {
    position: sticky;
    top: 92px;
}

.integration-card {
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
}

.integration-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.integration-card__head--split {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.integration-card__head h2,
.integration-card__head p,
.ai-flow-card h2,
.command-card h2 {
    margin: 0;
}

.integration-card__head h2,
.ai-flow-card h2,
.command-card h2 {
    color: var(--navy-900);
    font-size: 19px;
    letter-spacing: -0.025em;
}

.integration-card__head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.integration-card__icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 850;
}

.integration-card__icon--telegram {
    color: white;
    background: var(--blue-600);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

.integration-card__icon--alias { color: var(--teal-700); background: #ecfdf9; font-size: 13px; }
.integration-card__icon--ai { color: var(--teal-700); background: var(--cyan-100); }

.connect-card {
    position: relative;
    overflow: hidden;
}

.connect-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cyan-400), var(--blue-600), var(--teal-700));
    content: "";
}

.connect-card > form:last-child {
    margin-top: 18px;
}

.connected-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #abefc6;
    border-radius: 13px;
    background: linear-gradient(135deg, #f6fef9, #ecfdf3);
}

.connected-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: white;
    background: var(--blue-600);
    font-size: 14px;
    font-weight: 850;
}

.connected-profile strong,
.connected-profile small {
    display: block;
}

.connected-profile strong { color: var(--navy-900); font-size: 13px; }
.connected-profile small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.telegram-example {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 13px;
    color: #344054;
    background: linear-gradient(135deg, var(--blue-50), var(--cyan-100));
}

.telegram-example > span {
    color: var(--teal-700);
    font-size: 18px;
}

.telegram-example small,
.telegram-example strong,
.telegram-example p {
    display: block;
    margin: 0;
}

.telegram-example small { color: var(--muted); font-size: 9px; }
.telegram-example strong { margin-top: 3px; color: var(--navy-900); font: 750 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.telegram-example p { margin-top: 4px; color: var(--teal-700); font-size: 9px; font-weight: 700; }

.integration-empty {
    padding: 36px 20px;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    background: var(--surface-soft);
    text-align: center;
}

.integration-empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 15px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 21px;
}

.integration-empty h3,
.integration-empty p { margin: 0; }
.integration-empty h3 { color: var(--navy-900); font-size: 16px; }
.integration-empty p { max-width: 480px; margin: 6px auto 0; color: var(--muted); font-size: 11px; }
.integration-empty .button { margin-top: 16px; }

.connect-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.connect-steps li {
    padding: 13px;
    border: 1px solid #eef1f5;
    border-radius: 12px;
    background: var(--surface-soft);
}

.connect-steps li > span {
    display: grid;
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 9px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 10px;
    font-weight: 850;
}

.connect-steps strong,
.connect-steps p { display: block; margin: 0; }
.connect-steps strong { color: var(--navy-900); font-size: 11px; }
.connect-steps p { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }

.deep-link-ready {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid #b2ddff;
    border-radius: 13px;
    background: #eff8ff;
}

.deep-link-ready > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--green-700);
    background: var(--green-100);
    font-weight: 850;
}

.deep-link-ready strong,
.deep-link-ready p { display: block; margin: 0; }
.deep-link-ready strong { color: var(--navy-900); font-size: 12px; }
.deep-link-ready p { margin-top: 2px; color: var(--muted); font-size: 9px; }

.alias-count {
    display: grid;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    place-items: center;
    border-radius: 10px;
    color: var(--teal-700);
    background: #ecfdf9;
    font-size: 11px;
    font-weight: 850;
}

.alias-create {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.8fr) auto;
    align-items: end;
    gap: 9px;
    padding: 13px;
    border-radius: 13px;
    background: var(--surface-soft);
}

.alias-create label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.alias-create label > span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.alias-create input,
.alias-create select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    color: var(--ink);
    background: white;
    font-size: 12px;
}

.alias-create .button { min-height: 42px; padding: 8px 13px; font-size: 11px; }

.alias-list {
    display: grid;
    gap: 6px;
    max-height: 430px;
    margin-top: 14px;
    overflow: auto;
}

.alias-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) auto minmax(130px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 9px;
    border: 1px solid #eef1f5;
    border-radius: 11px;
}

.alias-token {
    overflow: hidden;
    padding: 5px 8px;
    border-radius: 8px;
    color: #344054;
    background: #f2f4f7;
    font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alias-arrow { color: var(--muted); font-size: 11px; }
.alias-vendor { min-width: 0; }
.alias-vendor strong,
.alias-vendor small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alias-vendor strong { color: var(--navy-900); font-size: 11px; }
.alias-vendor small { color: var(--muted); font-size: 8px; }

.alias-source {
    padding: 4px 7px;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
}

.alias-source.is-manual { color: var(--blue-600); background: var(--blue-50); }
.alias-row form { margin: 0; }
.alias-lock { display: grid; width: 30px; place-items: center; color: var(--muted); }

.ai-flow-card {
    color: white;
    border: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.45), transparent 38%),
        linear-gradient(155deg, var(--navy-950), #1d3156);
    box-shadow: 0 18px 42px rgba(20, 33, 61, 0.18);
}

.ai-flow-card .card-kicker { color: #93c5fd; }
.ai-flow-card h2 { margin-top: 8px; color: white; }

.ai-flow {
    display: grid;
    gap: 6px;
    margin-top: 18px;
}

.ai-flow > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.055);
}

.ai-flow > div > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.18);
    font-size: 10px;
    font-weight: 850;
}

.ai-flow > div.is-ai > span { color: var(--cyan-100); background: rgba(34, 211, 238, 0.27); }
.ai-flow p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 9px; }
.ai-flow > i { margin-left: 22px; color: rgba(255, 255, 255, 0.3); font-size: 9px; font-style: normal; }

.privacy-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    font-size: 8px;
}

.command-card h2 { margin-top: 8px; }
.command-card dl { display: grid; gap: 5px; margin: 16px 0 0; }
.command-card dl > div { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; background: var(--surface-soft); }
.command-card dt { color: var(--blue-600); font: 750 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.command-card dd { margin: 0; color: var(--muted); font-size: 9px; }

.admin-integrations {
    margin-top: 24px;
    padding-top: 28px;
    border-top: 1px solid #d0d5dd;
}

.admin-integrations__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.admin-integrations__head h2,
.admin-integrations__head p { margin: 0; }
.admin-integrations__head h2 { margin-top: 6px; color: var(--navy-900); font-size: 23px; letter-spacing: -0.03em; }
.admin-integrations__head p { margin-top: 4px; color: var(--muted); font-size: 11px; }

.security-pill {
    padding: 7px 10px;
    border: 1px solid #abefc6;
    border-radius: 999px;
    color: var(--green-700);
    background: #ecfdf3;
    font: 750 9px ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}

.admin-integration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-config-card {
    border-color: #d8e1ef;
}

.admin-config-form {
    display: grid;
    gap: 14px;
}

.admin-config-form > .button {
    justify-self: start;
}

.toggle-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    cursor: pointer;
}

.toggle-field input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--blue-600);
}

.toggle-field strong,
.toggle-field small { display: block; }
.toggle-field strong { color: var(--navy-900); font-size: 11px; }
.toggle-field small { margin-top: 3px; color: var(--muted); font-size: 8px; }

.admin-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eef1f5;
}

.admin-config-actions form { margin: 0; }
.admin-config-actions .button { min-height: 38px; padding: 8px 11px; font-size: 9px; }

@media (max-width: 1080px) {
    .integrations-layout {
        grid-template-columns: 1fr;
    }

    .integrations-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .integration-status-grid,
    .admin-integration-grid {
        grid-template-columns: 1fr;
    }

    .connect-steps {
        grid-template-columns: 1fr;
    }

    .connect-steps li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
    }

    .connect-steps li > span {
        margin-bottom: 0;
    }
}

@media (max-width: 720px) {
    .integrations-sidebar {
        grid-template-columns: 1fr;
    }

    .integration-card {
        padding: 20px 16px;
    }

    .connected-profile,
    .deep-link-ready {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .connected-profile .status-badge,
    .deep-link-ready .button {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .alias-create {
        grid-template-columns: 1fr;
    }

    .alias-row {
        grid-template-columns: minmax(80px, 0.8fr) auto minmax(110px, 1fr) auto;
    }

    .alias-source {
        display: none;
    }

    .admin-integrations__head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Stage 5: analytics, plans, payments, and administration */
.nav-more {
    position: relative;
}

.nav-more summary {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
    color: #475467;
    cursor: pointer;
    list-style: none;
}

.nav-more summary::-webkit-details-marker {
    display: none;
}

.nav-more summary span {
    color: var(--muted);
    font-size: 12px;
    transition: transform 160ms ease;
}

.nav-more[open] summary span {
    transform: rotate(180deg);
}

.nav-more__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: 210px;
    gap: 3px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: white;
    box-shadow: var(--shadow-lg);
}

.nav-more__menu a,
.nav-more__menu .nav-button {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    text-align: left;
}

.nav-more__menu a:hover,
.nav-more__menu .nav-button:hover {
    color: var(--blue-600);
    background: var(--blue-50);
}

.nav-more__menu form {
    margin: 0;
}

.page-heading__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button--soft {
    border-color: #c7d7fe;
    color: var(--blue-700);
    background: #eef4ff;
}

.alert--warning {
    border-color: #fedf89;
    color: #93370d;
    background: #fffaeb;
}

.analytics-page,
.billing-page,
.admin-page {
    background:
        radial-gradient(circle at 92% 0%, rgba(37, 99, 235, 0.09), transparent 25%),
        radial-gradient(circle at 8% 24%, rgba(15, 118, 110, 0.055), transparent 22%),
        var(--page);
}

.home-pricing {
    padding: 78px 0 92px;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08), transparent 32%),
        #f8fafc;
}

.home-pricing .pricing-heading {
    margin-top: 0;
}

.home-pricing .pricing-card > .button {
    width: 100%;
    margin-top: auto;
}

.analytics-filter-card,
.analytics-kpi,
.analytics-chart-card,
.breakdown-card,
.current-plan-card,
.usage-card,
.pricing-card,
.order-status-card,
.billing-security-note,
.admin-card,
.admin-plan-card,
.admin-table-card,
.admin-metrics article {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
}

.analytics-filter-card {
    padding: 18px;
}

.analytics-presets {
    display: flex;
    gap: 6px;
    margin-bottom: 13px;
}

.analytics-presets a {
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    color: #475467;
    background: #fcfcfd;
    font-size: 12px;
    font-weight: 750;
}

.analytics-presets a:hover {
    border-color: #b2ddff;
    color: var(--blue-600);
    background: var(--blue-50);
}

.analytics-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(125px, 0.75fr)) repeat(4, minmax(125px, 1fr)) auto;
    align-items: end;
    gap: 9px;
}

.analytics-filter label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.analytics-filter label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.analytics-filter input,
.analytics-filter select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 9px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    color: var(--ink);
    background: white;
    font-size: 13px;
}

.analytics-filter .button {
    min-height: 42px;
    padding: 8px 13px;
    font-size: 13px;
}

.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.analytics-kpi {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    overflow: hidden;
    padding: 18px;
}

.analytics-kpi > span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 12px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-weight: 850;
}

.analytics-kpi--accent {
    color: white;
    border: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, 0.62), transparent 42%),
        linear-gradient(145deg, var(--navy-950), #1b3159);
    box-shadow: 0 18px 38px rgba(20, 33, 61, 0.18);
}

.analytics-kpi--accent > span {
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.11);
}

.analytics-kpi small,
.analytics-kpi strong,
.analytics-kpi p {
    display: block;
    margin: 0;
}

.analytics-kpi small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

.analytics-kpi strong {
    overflow: hidden;
    margin-top: 4px;
    color: var(--navy-900);
    font-size: clamp(18px, 2vw, 25px);
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-kpi strong.is-up { color: var(--red-700); }
.analytics-kpi strong.is-down { color: var(--green-700); }

.analytics-kpi p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.analytics-kpi--accent small,
.analytics-kpi--accent p { color: rgba(255, 255, 255, 0.62); }
.analytics-kpi--accent strong { color: white; }

.analytics-chart-card {
    margin-top: 18px;
    padding: 22px;
}

.analytics-chart-card .panel-heading > small {
    color: var(--muted);
    font: 750 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.monthly-chart {
    display: flex;
    min-height: 290px;
    align-items: stretch;
    gap: 9px;
    margin-top: 22px;
    padding: 18px 4px 0;
    overflow-x: auto;
}

.monthly-bar {
    display: grid;
    min-width: 65px;
    flex: 1 0 65px;
    grid-template-rows: 26px 190px auto;
    align-items: end;
    gap: 8px;
    text-align: center;
}

.monthly-bar > strong {
    overflow: hidden;
    color: #475467;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-bar > span {
    display: flex;
    height: 190px;
    align-items: flex-end;
    padding: 0 8px;
    border-bottom: 1px solid #d0d5dd;
    background: linear-gradient(180deg, rgba(242, 244, 247, 0.25), rgba(242, 244, 247, 0.6));
}

.monthly-bar > span > i {
    width: 100%;
    height: var(--bar-height);
    min-height: 2px;
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, #60a5fa, var(--blue-600));
    box-shadow: 0 7px 15px rgba(37, 99, 235, 0.16);
}

.monthly-bar > small {
    color: var(--muted);
    font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.breakdown-card {
    min-width: 0;
    padding: 20px;
}

.breakdown-list {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.breakdown-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.breakdown-row > div span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breakdown-row > div span i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--breakdown-color);
}

.breakdown-row > div strong {
    color: var(--navy-900);
    font-size: 12px;
    white-space: nowrap;
}

.breakdown-track {
    display: block;
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #f2f4f7;
}

.breakdown-track i {
    display: block;
    width: var(--breakdown-width);
    height: 100%;
    border-radius: inherit;
    background: var(--breakdown-color);
}

.breakdown-row > small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.billing-overview {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 18px;
}

.current-plan-card,
.usage-card {
    padding: 24px;
}

.current-plan-card {
    color: white;
    border: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(34, 211, 238, 0.42), transparent 36%),
        linear-gradient(145deg, var(--navy-950), #1f3152);
    box-shadow: 0 20px 42px rgba(20, 33, 61, 0.2);
}

.current-plan-card__top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
}

.plan-orb {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    color: var(--cyan-100);
    background: rgba(34, 211, 238, 0.18);
    font-size: 20px;
}

.current-plan-card small,
.current-plan-card h2,
.current-plan-card p { display: block; margin: 0; }
.current-plan-card__top small { color: #93c5fd; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.current-plan-card h2 { margin-top: 3px; color: white; font-size: 25px; }
.current-plan-card p { margin-top: 5px; color: rgba(255, 255, 255, 0.68); font-size: 12px; }

.current-plan-card dl {
    display: grid;
    gap: 8px;
    margin: 22px 0 0;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.current-plan-card dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.current-plan-card dt { color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.current-plan-card dd { margin: 0; color: white; font-size: 12px; font-weight: 700; text-align: right; }
.current-plan-card .status-badge { color: #a6f4c5; background: rgba(18, 183, 106, 0.13); }

.usage-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.usage-row > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #475467;
    font-size: 12px;
}

.usage-row > div strong { color: var(--navy-900); }

.usage-row > span {
    display: block;
    height: 7px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.usage-row > span i {
    display: block;
    width: var(--usage-width);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

.billing-alert {
    margin-top: 16px;
}

.pricing-heading {
    max-width: 660px;
    margin: 48px auto 22px;
    text-align: center;
}

.pricing-heading h2,
.pricing-heading p { margin: 0; }
.pricing-heading h2 { margin-top: 7px; color: var(--navy-950); font-size: 29px; letter-spacing: -0.035em; }
.pricing-heading p { margin-top: 7px; color: var(--muted); font-size: 13px; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.pricing-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 24px;
}

.pricing-card.is-featured {
    border-color: #a4bcfd;
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14);
    transform: translateY(-6px);
}

.pricing-card.is-current::after {
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(18, 183, 106, 0.35);
    border-radius: 12px;
    content: "";
    pointer-events: none;
}

.pricing-popular {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 5px 10px;
    border-radius: 0 0 9px 9px;
    color: white;
    background: var(--blue-600);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.pricing-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
}

.pricing-icon {
    display: grid;
    width: 41px;
    height: 41px;
    place-items: center;
    border-radius: 12px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-size: 18px;
}

.pricing-card__head h3,
.pricing-card__head p { margin: 0; }
.pricing-card__head h3 { color: var(--navy-900); font-size: 18px; }
.pricing-card__head p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.pricing-amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 24px;
}

.pricing-amount strong { color: var(--navy-950); font-size: 29px; letter-spacing: -0.04em; }
.pricing-amount span { color: var(--muted); font-size: 12px; }

.pricing-features {
    display: grid;
    gap: 9px;
    margin: 20px 0 24px;
    padding: 18px 0 0;
    border-top: 1px solid #eef1f5;
    color: #344054;
    font-size: 12px;
    list-style: none;
}

.pricing-features li::first-letter { color: var(--green-700); }
.pricing-features li.is-muted { color: var(--muted); }

.pricing-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.pricing-actions form,
.pricing-actions .button,
.pricing-static { width: 100%; }
.pricing-actions .button { min-height: 42px; padding: 8px 11px; font-size: 12px; }
.pricing-static { margin-top: auto; cursor: default; }

.billing-security-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 22px;
    padding: 17px 20px;
}

.billing-security-note > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    color: var(--green-700);
    background: var(--green-100);
}

.billing-security-note strong,
.billing-security-note p { display: block; margin: 0; }
.billing-security-note strong { color: var(--navy-900); font-size: 12px; }
.billing-security-note p { margin-top: 3px; color: var(--muted); font-size: 12px; }

.order-status-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    padding: 16px 19px;
}

.order-status-card > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    color: var(--amber-700);
    background: var(--amber-100);
    font-weight: 850;
}

.order-status-card--paid > span { color: var(--green-700); background: var(--green-100); }
.order-status-card small,
.order-status-card strong,
.order-status-card p { display: block; margin: 0; }
.order-status-card small { color: var(--muted); font-size: 11px; }
.order-status-card strong { color: var(--navy-900); font-size: 13px; }
.order-status-card p { color: var(--muted); font-size: 12px; }

.payment-redirect-page {
    min-height: calc(100vh - 145px);
    background:
        radial-gradient(circle at 50% 25%, rgba(37, 99, 235, 0.13), transparent 35%),
        var(--page);
}

.payment-redirect-shell {
    width: min(100%, 520px);
    padding: 46px;
    text-align: center;
}

.payment-redirect-shell h1 { margin: 10px 0; color: var(--navy-950); font-size: 30px; letter-spacing: -0.04em; }
.payment-redirect-shell > p { margin: 0 0 22px; color: var(--muted); }
.payment-redirect-shell form { display: grid; }
.payment-redirect-shell .text-link { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 13px; }

.payment-loader {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 22px;
}

.payment-loader span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue-600);
    animation: payment-pulse 900ms ease-in-out infinite alternate;
}

.payment-loader span:nth-child(2) { animation-delay: 160ms; }
.payment-loader span:nth-child(3) { animation-delay: 320ms; }

@keyframes payment-pulse {
    from { opacity: 0.25; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-5px); }
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.admin-metrics article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 16px;
}

.admin-metrics article > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: var(--blue-600);
    background: var(--blue-50);
    font-weight: 850;
}

.admin-metrics article.is-revenue { color: white; border: 0; background: linear-gradient(145deg, var(--navy-950), #253858); }
.admin-metrics article.is-revenue > span { color: #a6f4c5; background: rgba(18, 183, 106, 0.13); }
.admin-metrics small,
.admin-metrics strong { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.admin-metrics small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.admin-metrics strong { color: var(--navy-900); font-size: 21px; }
.admin-metrics .is-revenue small { color: rgba(255, 255, 255, 0.55); }
.admin-metrics .is-revenue strong { color: white; }

.admin-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.45fr);
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}

.admin-card {
    padding: 23px;
}

.admin-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    margin-bottom: 20px;
}

.admin-card__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    color: white;
    background: var(--blue-600);
    font-weight: 850;
}

.admin-card__icon--violet { background: linear-gradient(135deg, var(--navy-800), var(--blue-600)); }
.admin-card__head h2,
.admin-card__head p { margin: 0; }
.admin-card__head h2 { margin-top: 4px; color: var(--navy-900); font-size: 18px; }
.admin-card__head p { margin-top: 3px; color: var(--muted); font-size: 12px; }

.robokassa-form,
.grant-form {
    display: grid;
    gap: 14px;
}

.form-grid--two {
    gap: 12px;
}

.toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.callback-grid {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #e1e7ef;
    border-radius: 11px;
    background: var(--surface-soft);
}

.callback-grid label {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.callback-grid label > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.callback-grid code { overflow: hidden; color: #344054; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-form-actions { display: flex; gap: 8px; }
.robokassa-card > form:last-child { margin-top: 10px; }

.grant-card {
    position: sticky;
    top: 94px;
}

.grant-card .admin-card__head { grid-template-columns: auto 1fr; }
.grant-form .button { margin-top: 2px; }
.admin-note { margin-top: 14px; padding: 10px; border-radius: 9px; color: #475467; background: var(--blue-50); font-size: 12px; }

.admin-plans-section {
    margin-top: 28px;
}

.admin-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.admin-plan-card {
    display: grid;
    gap: 14px;
    padding: 19px;
}

.admin-plan-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.admin-plan-card__head > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-600);
    background: var(--blue-50);
}

.admin-plan-card h3,
.admin-plan-card small { display: block; margin: 0; }
.admin-plan-card h3 { color: var(--navy-900); font-size: 15px; }
.admin-plan-card small { color: var(--muted); font-size: 11px; }

.mini-toggle input {
    position: absolute;
    opacity: 0;
}

.mini-toggle i {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #d0d5dd;
    cursor: pointer;
}

.mini-toggle i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    content: "";
    transition: transform 160ms ease;
}

.mini-toggle input:checked + i { background: var(--green-700); }
.mini-toggle input:checked + i::after { transform: translateX(14px); }

.plan-limit-inputs {
    display: grid;
    gap: 7px;
    padding: 11px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.plan-limit-inputs label {
    display: grid;
    grid-template-columns: 1fr 92px;
    align-items: center;
    gap: 9px;
}

.plan-limit-inputs label span { color: #475467; font-size: 12px; }
.plan-limit-inputs input { width: 100%; min-height: 38px; padding: 6px 8px; border: 1px solid #d0d5dd; border-radius: 7px; background: white; font-size: 12px; }

.admin-tables-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
    gap: 16px;
    margin-top: 20px;
}

.admin-table-card {
    min-width: 0;
    padding: 20px;
}

.table-scroll {
    margin-top: 14px;
    overflow-x: auto;
}

.admin-table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-table-card th {
    padding: 8px;
    border-bottom: 1px solid #d0d5dd;
    color: var(--muted);
    text-align: left;
    text-transform: uppercase;
}

.admin-table-card td {
    padding: 10px 8px;
    border-bottom: 1px solid #eef1f5;
    color: #344054;
    vertical-align: top;
}

.admin-table-card td strong,
.admin-table-card td small,
.admin-table-card td span { display: block; }
.admin-table-card td small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.plan-code,
.order-pill {
    display: inline-flex !important;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-code--pro { color: var(--blue-700); background: var(--blue-50); }
.plan-code--business,
.plan-code--owner { color: var(--blue-700); background: var(--blue-50); }
.order-pill--paid { color: var(--green-700); background: var(--green-100); }
.order-pill--pending { color: var(--amber-700); background: var(--amber-100); }
.order-pill--canceled,
.order-pill--failed { color: var(--red-700); background: var(--red-100); }

@media (max-width: 1120px) {
    .analytics-filter {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .analytics-filter .button {
        grid-column: span 2;
    }

    .analytics-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-primary-grid,
    .admin-tables-grid {
        grid-template-columns: 1fr;
    }

    .grant-card {
        position: static;
    }
}

@media (max-width: 900px) {
    .breakdown-grid,
    .pricing-grid,
    .admin-plan-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.is-featured {
        transform: none;
    }

    .billing-overview {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        max-width: 680px;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 720px) {
    .nav-more {
        width: 100%;
    }

    .nav-more summary {
        width: 100%;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: 9px;
    }

    .nav-more__menu {
        position: static;
        width: 100%;
        margin-top: 3px;
        border: 0;
        border-left: 2px solid #dbeafe;
        border-radius: 0;
        box-shadow: none;
    }

    .analytics-filter,
    .analytics-kpis,
    .admin-metrics,
    .toggle-grid,
    .form-grid--two {
        grid-template-columns: 1fr;
    }

    .analytics-filter .button {
        grid-column: auto;
    }

    .analytics-kpi,
    .analytics-chart-card,
    .breakdown-card,
    .current-plan-card,
    .usage-card,
    .pricing-card,
    .admin-card,
    .admin-plan-card,
    .admin-table-card {
        padding: 18px 15px;
    }

    .monthly-chart {
        min-height: 245px;
    }

    .monthly-bar {
        grid-template-rows: 22px 150px auto;
    }

    .monthly-bar > span {
        height: 150px;
    }

    .current-plan-card dl > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .current-plan-card dd {
        text-align: left;
    }

    .callback-grid label {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .admin-card__head {
        grid-template-columns: auto 1fr;
    }

    .admin-card__head > .status-badge {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .payment-redirect-shell {
        padding: 34px 22px;
    }
}

/* ==========================================================================
   Public marketing and legal pages
   Brandbook v1.0 §10: cards 12-16px radius, buttons 40-44px tall,
   shadows only on active layers, animation 160-240ms ease-out.
   ========================================================================== */

.skip-link {
    position: absolute;
    z-index: 100;
    top: -100px;
    left: 12px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--navy-900);
    font-weight: 600;
    transition: top var(--motion-fast) var(--easing);
}

.skip-link:focus {
    top: 12px;
}

.brand-logo,
.footer-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.brand-logo {
    height: 40px;
}

.public-page h1,
.legal-page h1 {
    margin: 0;
    color: var(--navy-900);
    /* Brandbook §07: H1 display 40-48px SemiBold. */
    font-size: clamp(29px, 4.4vw, 44px);
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: -0.03em;
}

.public-hero {
    padding: 54px 0 40px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--blue-50), var(--surface));
}

.public-hero__inner {
    max-width: 780px;
}

.public-lead {
    margin: 18px 0 26px;
    /* Concept §6.3: 65-75 characters per line. */
    max-width: 68ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.62;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.breadcrumbs a {
    color: var(--blue-600);
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.public-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}

.public-section:last-of-type {
    border-bottom: 0;
}

.public-section__inner {
    max-width: 780px;
}

.public-section h2,
.legal-block h2 {
    margin: 0 0 14px;
    color: var(--navy-900);
    /* Brandbook §07: H2 section 28-32px SemiBold. */
    font-size: clamp(21px, 2.6vw, 29px);
    font-weight: 640;
    letter-spacing: -0.02em;
}

.public-section p,
.legal-page p {
    max-width: 68ch;
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.68;
}

.public-list,
.legal-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-list li,
.legal-list li {
    position: relative;
    max-width: 68ch;
    padding: 7px 0 7px 27px;
    color: var(--ink);
    line-height: 1.6;
}

.public-list li::before,
.legal-list li::before {
    position: absolute;
    top: 15px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-gradient);
    content: "";
}

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    padding: 4px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--motion-base) var(--easing);
}

.faq-item[open] {
    border-color: var(--blue-500);
}

.faq-item summary {
    /* Brandbook §10: tap targets from 44px. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
    color: var(--navy-900);
    cursor: pointer;
    font-weight: 600;
}

.faq-item summary:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 2px;
}

.faq-item p {
    margin: 0 0 14px;
}

.related-list {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 10px;
    list-style: none;
}

.related-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--navy-900);
    background: var(--surface);
    font-weight: 550;
    gap: 12px;
    transition: border-color var(--motion-base) var(--easing), transform var(--motion-base) var(--easing);
}

.related-list a:hover {
    border-color: var(--blue-500);
    transform: translateX(3px);
}

.public-cta {
    padding: 52px 0;
    color: #fff;
    background: linear-gradient(140deg, var(--navy-950), var(--navy-800));
}

.public-cta__inner {
    max-width: 640px;
    text-align: center;
}

.public-cta h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(21px, 2.6vw, 29px);
    font-weight: 640;
    letter-spacing: -0.02em;
}

.public-cta p {
    max-width: none;
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
}

.public-cta .button--primary {
    background: var(--surface);
    color: var(--navy-900);
}

/* Legal documents ------------------------------------------------------- */

.legal-page {
    padding: 42px 0 60px;
}

.legal-inner {
    max-width: 780px;
}

.legal-updated {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.legal-intro {
    margin: 22px 0 30px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue-600);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.legal-block {
    margin-bottom: 30px;
}

.legal-related {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.legal-related h2 {
    margin: 0 0 12px;
    color: var(--navy-900);
    font-size: 17px;
}

.legal-related ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 8px 22px;
    list-style: none;
}

.legal-related a {
    color: var(--blue-600);
}

.legal-related a:hover {
    text-decoration: underline;
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
    color: rgba(255, 255, 255, 0.72);
    background: var(--navy-950);
}

.site-footer .footer-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 34px 0;
    gap: 26px;
}

.footer-brand {
    flex: 1 1 240px;
}

.footer-logo {
    height: 26px;
    margin-bottom: 10px;
}

.footer-brand p {
    margin: 0;
    font-size: 14px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-note {
    margin: 0;
    font-size: 13px;
}

@media (max-width: 720px) {
    .public-hero {
        padding: 34px 0 28px;
    }

    .site-footer .footer-inner {
        flex-direction: column;
        gap: 20px;
    }
}

/* Auto-renewal control on the billing page ------------------------------- */

.auto-renew {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.auto-renew__state {
    margin: 0 0 10px;
    color: var(--navy-900);
    font-weight: 600;
}

.auto-renew__hint {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.consent-field {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
}

.consent-field input {
    /* Brandbook §10: tap targets from 44px — the padded label carries the hit area. */
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--blue-600);
}