:root {
    --branda-bg: #f5f6f8;
    --branda-surface: #ffffff;
    --branda-surface-raised: #ffffff;
    --branda-surface-soft: #f8f9fb;
    --branda-surface-muted: #f1f3f6;
    --branda-sidebar: #10141f;
    --branda-sidebar-soft: #171c29;
    --branda-border: #d8dee8;
    --branda-border-soft: #e8ecf2;
    --branda-text: #151923;
    --branda-heading: #0d1220;
    --branda-muted: #687386;
    --branda-muted-strong: #475467;
    --branda-primary: #3157d5;
    --branda-primary-strong: #243fa6;
    --branda-primary-soft: #edf2ff;
    --branda-accent: #0f766e;
    --branda-success: #2f7d4f;
    --branda-warning: #a16207;
    --branda-danger: #b42318;
    --branda-success-soft: #eef8f2;
    --branda-warning-soft: #fff7e6;
    --branda-danger-soft: #fff1f1;
    --branda-info-soft: #edf6ff;
    --branda-radius-xs: 5px;
    --branda-radius-sm: 7px;
    --branda-radius-md: 9px;
    --branda-radius-lg: 12px;
    --branda-radius-xl: 16px;
    --branda-space-1: 4px;
    --branda-space-2: 8px;
    --branda-space-3: 12px;
    --branda-space-4: 16px;
    --branda-space-5: 20px;
    --branda-space-6: 24px;
    --branda-font-xs: 0.75rem;
    --branda-font-sm: 0.84rem;
    --branda-font-md: 0.92rem;
    --branda-font-lg: 1.05rem;
    --branda-font-xl: 1.35rem;
    --branda-font-display: clamp(1.75rem, 2.5vw, 2.35rem);
    --branda-shadow: 0 20px 48px rgba(16, 24, 40, 0.08);
    --branda-shadow-soft: 0 10px 26px rgba(16, 24, 40, 0.05);
    --branda-shadow-line: 0 1px 0 rgba(16, 24, 40, 0.04);
    --branda-sidebar-width: 272px;
}

/* Feature feedback */
.feedback-heading {
    align-items: flex-start;
}

.feedback-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.feedback-layout,
.feedback-detail-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.4fr);
    gap: 20px;
    align-items: start;
}

.feedback-detail-layout {
    grid-template-columns: minmax(0, 1.35fr) 340px;
}

.feedback-form-card,
.feedback-list-card,
.feedback-thread-card,
.feedback-side-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.06);
    padding: 22px;
}

.feedback-form-card .form-control,
.feedback-form-card .form-select,
.feedback-reply-form .form-control {
    min-height: 48px;
    border-color: rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: #fbfcff;
}

.feedback-form-card textarea.form-control,
.feedback-reply-form textarea.form-control {
    min-height: 142px;
}

.feedback-count {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

.feedback-list {
    display: grid;
    gap: 12px;
}

.feedback-item {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.feedback-item:hover {
    border-color: rgba(61, 88, 214, 0.35);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.feedback-item-title {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}

.feedback-item-meta,
.feedback-item-side small,
.feedback-original-head,
.feedback-reply-meta,
.feedback-empty p {
    color: #64748b;
}

.feedback-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.feedback-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.feedback-status-submitted {
    background: #eef2ff;
    color: #3d58d6;
}

.feedback-status-review {
    background: #fff7ed;
    color: #b45309;
}

.feedback-status-planned {
    background: #ecfdf5;
    color: #047857;
}

.feedback-status-closed {
    background: #f1f5f9;
    color: #475569;
}

.feedback-empty {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 28px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: #fbfcff;
    text-align: center;
}

.feedback-empty-small {
    min-height: 160px;
}

.feedback-empty h3 {
    margin: 10px 0 4px;
    font-size: 20px;
    font-weight: 900;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eef2ff;
    color: #3d58d6;
    font-size: 26px;
    font-weight: 900;
}

.feedback-original {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.feedback-original-head,
.feedback-reply-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.feedback-original p,
.feedback-reply p {
    margin: 0;
    color: #1f2937;
    line-height: 1.65;
}

.feedback-thread {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.feedback-reply {
    padding: 16px;
    border-left: 3px solid #3d58d6;
    border-radius: 14px;
    background: #f8fafc;
}

.feedback-reply-form {
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.feedback-side-card {
    position: sticky;
    top: 22px;
}

.feedback-detail-stat {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.feedback-detail-stat:last-child {
    border-bottom: 0;
}

.feedback-detail-stat span {
    color: #64748b;
    font-weight: 700;
}

.feedback-detail-stat strong {
    text-align: right;
    color: #111827;
    font-weight: 900;
}

.founder-feedback-detail-grid {
    align-items: start;
}

.founder-feedback-message {
    padding: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    color: #1f2937;
    line-height: 1.7;
}

.founder-feedback-thread {
    display: grid;
    gap: 12px;
}

.founder-feedback-reply {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid #3157d5;
    border-radius: 14px;
    background: #fbfcff;
}

.founder-feedback-reply div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.founder-feedback-reply strong {
    color: #111827;
    font-weight: 900;
}

.founder-feedback-reply span,
.founder-feedback-reply small {
    color: #687386;
}

.founder-feedback-reply p {
    margin: 0;
    color: #1f2937;
    line-height: 1.65;
}

@media (max-width: 1100px) {
    .feedback-layout,
    .feedback-detail-layout {
        grid-template-columns: 1fr;
    }

    .feedback-side-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .feedback-item,
    .feedback-original-head,
    .feedback-reply-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .feedback-item-side {
        align-items: flex-start;
    }
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    background: var(--branda-bg);
    color: var(--branda-text);
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--branda-primary);
}

a:hover {
    color: var(--branda-primary-strong);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--branda-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--branda-space-5);
    height: 100vh;
    padding: 18px 16px;
    background: linear-gradient(180deg, var(--branda-sidebar) 0%, #0b101a 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

.app-content {
    min-width: 0;
    background:
        radial-gradient(circle at top left, rgba(49, 87, 213, 0.08), transparent 28rem),
        var(--branda-bg);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--branda-space-4);
    min-height: 68px;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(216, 222, 232, 0.86);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--branda-shadow-line);
    backdrop-filter: blur(16px);
}

.app-main {
    max-width: 1480px;
    padding: 28px;
}

.auth-main {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at 16% 12%, rgba(0, 113, 227, 0.13), transparent 30rem),
        radial-gradient(circle at 84% 8%, rgba(142, 142, 147, 0.13), transparent 28rem),
        linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 58%, #ffffff 100%);
}

.auth-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    min-height: 100vh;
}

.auth-brand-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;
    overflow: hidden;
    padding: clamp(32px, 6vw, 72px);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 245, 247, 0.62)),
        #fbfbfd;
    color: #1d1d1f;
}

.auth-brand-panel::before {
    content: "";
    position: absolute;
    inset: 12% 8% auto auto;
    width: min(48vw, 520px);
    height: min(48vw, 520px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 34%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(229, 229, 234, 0.48)),
        radial-gradient(circle at 30% 24%, rgba(0, 113, 227, 0.22), transparent 44%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 44px 110px rgba(0, 0, 0, 0.10);
    transform: rotate(-8deg);
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    inset: auto auto 10% 10%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 113, 227, 0.14), transparent 68%);
    filter: blur(2px);
}

.auth-brand,
.auth-brand-copy,
.auth-proof-grid,
.auth-onboarding-list,
.auth-security-note {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    color: #1d1d1f;
    text-decoration: none;
}

.auth-brand > span:first-child {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: #1d1d1f;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.auth-brand-copy {
    max-width: 650px;
}

.auth-kicker,
.auth-form-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0071e3;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-kicker::before,
.auth-form-head span::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0071e3;
    box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.10);
}

.auth-brand-copy h1 {
    max-width: 680px;
    margin: 18px 0 20px;
    color: #1d1d1f;
    font-size: clamp(3rem, 6.6vw, 6.6rem);
    font-weight: 930;
    line-height: 0.91;
    letter-spacing: -0.06em;
}

.auth-brand-copy p {
    max-width: 600px;
    margin: 0;
    color: #6e6e73;
    font-size: clamp(1.02rem, 1.6vw, 1.24rem);
    line-height: 1.7;
}

.auth-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.auth-proof-grid div,
.auth-onboarding-list div {
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        0 18px 48px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(22px);
}

.auth-proof-grid strong,
.auth-onboarding-list strong {
    display: block;
    color: #1d1d1f;
    font-size: 0.98rem;
    font-weight: 850;
}

.auth-proof-grid span,
.auth-onboarding-list small {
    display: block;
    margin-top: 5px;
    color: #6e6e73;
    line-height: 1.5;
}

.auth-onboarding-list {
    display: grid;
    gap: 12px;
    max-width: 660px;
}

.auth-onboarding-list div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: start;
}

.auth-onboarding-list div > span {
    grid-row: span 2;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 14px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-weight: 900;
}

.auth-security-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 620px;
    padding: 16px;
    border: 1px solid rgba(0, 113, 227, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(22px);
}

.auth-security-note span {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 5px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0.12);
}

.auth-security-note p {
    margin: 0;
    color: #515154;
    line-height: 1.6;
}

.auth-form-panel {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: clamp(24px, 5vw, 72px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 245, 247, 0.72)),
        transparent;
}

.auth-form-card {
    width: min(100%, 500px);
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 28px 90px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(26px);
}

.auth-form-head {
    margin-bottom: 28px;
}

.auth-form-head span {
    color: var(--branda-primary);
}

.auth-form-head span::before {
    background: var(--branda-primary);
    box-shadow: 0 0 0 6px rgba(49, 87, 213, 0.10);
}

.auth-form-head h2 {
    margin: 12px 0 8px;
    color: #1d1d1f;
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 920;
    line-height: 1;
    letter-spacing: -0.045em;
}

.auth-form-head p {
    margin: 0;
    color: #6e6e73;
    line-height: 1.65;
}

.auth-form {
    display: grid;
    gap: 16px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-field label {
    color: #1d1d1f;
    font-size: 0.84rem;
    font-weight: 850;
}

.auth-field input {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    color: #1d1d1f;
    font-size: 0.98rem;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field input::placeholder {
    color: #8e8e93;
}

.auth-field input:focus {
    border-color: rgba(0, 113, 227, 0.58);
    box-shadow: 0 0 0 5px rgba(0, 113, 227, 0.12);
}

.auth-field small {
    color: #6e6e73;
    line-height: 1.5;
}

.auth-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: #0071e3;
    color: #ffffff;
    font-weight: 780;
    box-shadow: 0 16px 34px rgba(0, 113, 227, 0.24);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-primary-btn:hover {
    transform: translateY(-1px);
    background: #0077ed;
    box-shadow: 0 20px 42px rgba(0, 113, 227, 0.28);
}

.auth-switch {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    color: #6e6e73;
    font-weight: 650;
}

.auth-switch a {
    color: #0071e3;
    font-weight: 780;
    text-decoration: none;
}

.workspace-switcher {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--branda-radius-lg);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.workspace-label {
    color: #8d98aa;
    font-size: var(--branda-font-xs);
    font-weight: 720;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workspace-switcher strong {
    color: #ffffff;
    font-size: var(--branda-font-sm);
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sidebar .app-brand {
    color: #ffffff;
}

.app-sidebar .brand-mark {
    background: #ffffff;
    color: #10141f;
    box-shadow: none;
}

.brand-subtext {
    display: block;
    color: #8d98aa;
    font-size: 0.72rem;
    font-weight: 680;
    letter-spacing: 0.02em;
}

.app-sidebar .app-navlinks {
    display: grid;
    gap: 4px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-sidebar .app-navlink {
    display: grid;
    gap: 1px;
    justify-content: start;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--branda-radius-md);
    color: #c3cad6;
    text-align: left;
}

.app-sidebar .app-navlink span {
    font-size: var(--branda-font-sm);
    font-weight: 760;
}

.app-sidebar .app-navlink small {
    color: #7f8999;
    font-size: 0.72rem;
    line-height: 1.2;
}

.app-sidebar .app-navlink:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.app-sidebar .app-navlink.active {
    background: #ffffff;
    border-color: #ffffff;
    color: #111827;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}

.app-sidebar .app-navlink.active small {
    color: #667085;
}

.sidebar-foot {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aeb7c6;
    font-size: var(--branda-font-xs);
    font-weight: 700;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #32d583;
    box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.12);
}

.topbar-search {
    flex: 1 1 auto;
    min-width: 0;
}

.global-command {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 720px);
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-line);
}

.command-kicker {
    color: var(--branda-primary);
    font-size: var(--branda-font-xs);
    font-weight: 820;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.global-command input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--branda-text);
    font-size: var(--branda-font-sm);
    background: transparent;
}

.global-command-readonly input {
    color: var(--branda-muted);
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.app-drawer {
    display: none;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--branda-space-5);
    margin-bottom: var(--branda-space-6);
}

.page-header-title {
    margin: 0;
    color: var(--branda-heading);
    font-size: var(--branda-font-display);
    font-weight: 780;
    line-height: 1.08;
}

.page-header-subtitle,
.section-subtitle {
    max-width: 760px;
    color: var(--branda-muted);
    font-size: var(--branda-font-sm);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--branda-space-4);
    padding: var(--branda-space-4) var(--branda-space-5);
    border-bottom: 1px solid var(--branda-border-soft);
}

.section-header h2 {
    margin: 0;
    font-size: var(--branda-font-lg);
    font-weight: 760;
}

.ui-card,
.card,
.surface-panel,
.ops-table-card {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: var(--branda-surface);
    box-shadow: var(--branda-shadow-soft);
}

.ui-card {
    padding: var(--branda-space-5);
}

.ui-card-muted {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.ui-badge,
.badge,
.status-pill,
.next-action-pill,
.score-badge,
.platform-pill,
.filter-pill {
    border-radius: 999px;
    font-weight: 740;
    letter-spacing: 0;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--branda-border-soft);
    background: var(--branda-surface-soft);
    color: var(--branda-muted-strong);
    font-size: var(--branda-font-xs);
}

.ui-badge-success,
.badge.text-bg-success {
    border-color: rgba(47, 125, 79, 0.18) !important;
    background: var(--branda-success-soft) !important;
    color: var(--branda-success) !important;
}

.ui-badge-warning,
.badge.text-bg-warning {
    border-color: rgba(161, 98, 7, 0.2) !important;
    background: var(--branda-warning-soft) !important;
    color: var(--branda-warning) !important;
}

.ui-badge-danger,
.badge.text-bg-danger {
    border-color: rgba(180, 35, 24, 0.18) !important;
    background: var(--branda-danger-soft) !important;
    color: var(--branda-danger) !important;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--branda-border-soft);
    background: #ffffff;
    color: var(--branda-muted-strong);
    font-size: var(--branda-font-sm);
    text-decoration: none;
}

.filter-pill.active,
.filter-pill:hover {
    border-color: #cad6ff;
    background: var(--branda-primary-soft);
    color: var(--branda-primary-strong);
}

.search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--branda-border);
    border-radius: var(--branda-radius-md);
    background: #ffffff;
}

.search-input input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
}

.table-shell {
    overflow: hidden;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.table-shell .table-responsive {
    border-radius: 0;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: var(--branda-space-6);
    border: 1px dashed var(--branda-border);
    border-radius: var(--branda-radius-lg);
    background: #fbfcfe;
    color: var(--branda-muted);
    text-align: center;
}

.side-panel {
    width: min(420px, 100%);
    border-left: 1px solid var(--branda-border-soft);
    background: #ffffff;
    box-shadow: -18px 0 42px rgba(16, 24, 40, 0.08);
}

.creator-db-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.creator-db-shell-wide {
    display: block;
}

.creator-db-main {
    min-width: 0;
}

.creator-db-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.creator-saved-views {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding-bottom: 2px;
}

.creator-view-divider {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: var(--branda-border);
}

.creator-insight-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.creator-insight-bar > div {
    min-height: 92px;
    padding: 14px;
    border-right: 1px solid var(--branda-border-soft);
}

.creator-insight-bar > div:last-child {
    border-right: 0;
}

.creator-insight-bar span,
.creator-table-toolbar span,
.drawer-score-card span,
.drawer-grid span {
    display: block;
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.creator-insight-bar strong {
    display: block;
    margin-top: 5px;
    color: var(--branda-heading);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-insight-bar small {
    display: block;
    margin-top: 5px;
    color: var(--branda-muted);
    line-height: 1.3;
}

.creator-filter-panel,
.creator-table-card,
.creator-profile-drawer {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.creator-filter-panel {
    margin-bottom: 14px;
    padding: 12px;
}

.creator-filter-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(130px, 0.65fr) minmax(130px, 0.7fr) minmax(110px, 0.55fr) minmax(170px, 0.8fr) auto auto;
    gap: 8px;
    align-items: center;
}

.creator-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--branda-border);
    border-radius: var(--branda-radius-md);
    background: #ffffff;
}

.creator-search-input span {
    color: var(--branda-primary);
    font-size: var(--branda-font-xs);
    font-weight: 820;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.creator-search-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

.creator-table-card {
    overflow: hidden;
}

.creator-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--branda-border-soft);
}

.creator-table-toolbar h2 {
    margin: 0;
    font-size: var(--branda-font-lg);
    font-weight: 780;
}

.creator-table-legend {
    display: flex;
    align-items: center;
    gap: 12px;
}

.creator-table-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--branda-font-xs);
    text-transform: none;
    letter-spacing: 0;
}

.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--branda-muted);
}

.legend-dot.synced {
    background: var(--branda-success);
}

.legend-dot.muted {
    background: #bac3d0;
}

.creator-data-table {
    min-width: 980px;
    font-size: 0.86rem;
}

.creator-data-table thead th {
    padding: 0.72rem 0.85rem;
    background: #fbfcfe;
    color: #667085;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.creator-data-table tbody td {
    padding: 0.75rem 0.85rem;
}

.creator-data-table tbody tr:hover,
.creator-row-active {
    background: #f7faff;
}

.creator-row-active td:first-child {
    box-shadow: inset 3px 0 0 var(--branda-primary);
}

.creator-muted,
.creator-cell-note {
    color: var(--branda-muted);
    font-size: 0.76rem;
}

.creator-cell-note {
    margin-top: 2px;
}

.platform-instagram {
    border-color: #f3d4ea;
    background: #fff6fc;
    color: #a23378;
}

.platform-tiktok {
    border-color: #d7dde8;
    background: #f7f8fb;
    color: #1f2937;
}

.platform-youtube {
    border-color: #ffd0d0;
    background: #fff5f5;
    color: #b42318;
}

.creator-score {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 110px;
    padding: 4px 8px;
    border: 1px solid #d8e3ff;
    border-radius: 999px;
    background: #f5f8ff;
    color: var(--branda-primary-strong);
}

.creator-score span {
    font-weight: 820;
}

.creator-score strong {
    font-size: 0.76rem;
}

.creator-profile-drawer {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 110px);
    overflow: auto;
}

.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--branda-border-soft);
}

.drawer-header h2 {
    margin: 3px 0 3px;
    color: var(--branda-heading);
    font-size: 1.22rem;
    font-weight: 800;
}

.drawer-header p {
    margin: 0;
    color: var(--branda-muted);
    font-size: var(--branda-font-sm);
}

.drawer-score-card {
    display: grid;
    gap: 5px;
    margin: 14px;
    padding: 14px;
    border: 1px solid #d8e3ff;
    border-radius: var(--branda-radius-lg);
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.drawer-score-card strong {
    color: var(--branda-heading);
    font-size: 1.25rem;
    font-weight: 820;
}

.drawer-score-card small {
    color: var(--branda-muted);
}

.drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 14px 14px;
}

.drawer-grid div {
    padding: 11px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-md);
    background: #fbfcfe;
}

.drawer-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--branda-heading);
    font-weight: 790;
}

.drawer-section {
    padding: 14px;
    border-top: 1px solid var(--branda-border-soft);
}

.drawer-section-title {
    margin-bottom: 9px;
    color: var(--branda-heading);
    font-size: var(--branda-font-sm);
    font-weight: 790;
}

.drawer-list {
    display: grid;
    gap: 8px;
}

.drawer-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-md);
    background: #fbfcfe;
    color: var(--branda-text);
    text-decoration: none;
}

.drawer-list-item:hover {
    border-color: #cbd8ff;
    color: var(--branda-text);
}

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

.drawer-list-item small,
.drawer-list-item em {
    color: var(--branda-muted);
    font-size: 0.76rem;
    font-style: normal;
}

.drawer-note,
.drawer-empty {
    padding: 12px;
    border: 1px dashed var(--branda-border);
    border-radius: var(--branda-radius-md);
    background: #fbfcfe;
    color: var(--branda-muted);
}

.drawer-empty-large {
    display: grid;
    gap: 5px;
    margin: 14px;
    min-height: 180px;
    align-content: center;
    text-align: center;
}

.drawer-empty-large strong {
    color: var(--branda-heading);
}

.pipeline-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-line);
}

.view-toggle a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--branda-radius-md);
    color: var(--branda-muted);
    font-size: var(--branda-font-sm);
    font-weight: 740;
    text-decoration: none;
}

.view-toggle a.active,
.view-toggle a:hover {
    background: var(--branda-sidebar);
    color: #ffffff;
}

.pipeline-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.pipeline-summary > div {
    min-height: 92px;
    padding: 14px;
    border-right: 1px solid var(--branda-border-soft);
}

.pipeline-summary > div:last-child {
    border-right: 0;
}

.pipeline-summary span,
.pipeline-table-head span {
    display: block;
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pipeline-summary strong {
    display: block;
    margin-top: 5px;
    color: var(--branda-heading);
    font-size: 1.32rem;
    font-weight: 820;
    line-height: 1.1;
}

.pipeline-summary small {
    display: block;
    margin-top: 5px;
    color: var(--branda-muted);
}

.urgent-strip {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #e4e9f2;
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.urgent-strip strong {
    display: block;
    color: var(--branda-heading);
    font-weight: 800;
}

.urgent-strip span {
    color: var(--branda-muted);
    font-size: var(--branda-font-sm);
}

.urgent-task-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.urgent-task {
    display: grid;
    gap: 2px;
    flex: 0 0 230px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-md);
    background: #fbfcfe;
    color: var(--branda-text);
    text-decoration: none;
}

.urgent-task:hover {
    border-color: #cbd8ff;
    color: var(--branda-text);
}

.urgent-task.warning {
    border-color: rgba(161, 98, 7, 0.2);
    background: var(--branda-warning-soft);
}

.urgent-task.danger {
    border-color: rgba(180, 35, 24, 0.18);
    background: var(--branda-danger-soft);
}

.urgent-task.muted {
    flex-basis: auto;
    color: var(--branda-muted);
}

.urgent-task span {
    color: var(--branda-heading);
    font-weight: 770;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.urgent-task small {
    color: var(--branda-muted);
    font-size: 0.76rem;
}

.pipeline-table-card,
.pipeline-lane {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.pipeline-table-card {
    overflow: hidden;
}

.pipeline-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--branda-border-soft);
}

.pipeline-table-head h2 {
    margin: 0;
    font-size: var(--branda-font-lg);
    font-weight: 800;
}

.pipeline-table {
    min-width: 1080px;
    font-size: 0.86rem;
}

.pipeline-table thead th {
    padding: 0.72rem 0.85rem;
    background: #fbfcfe;
    color: #667085;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.pipeline-table tbody td {
    padding: 0.78rem 0.85rem;
}

.stage-pill,
.due-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.22rem 0.55rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--branda-muted-strong);
    font-size: var(--branda-font-xs);
    font-weight: 760;
    white-space: nowrap;
}

.due-pill.success {
    border-color: rgba(47, 125, 79, 0.16);
    background: var(--branda-success-soft);
    color: var(--branda-success);
}

.due-pill.warning {
    border-color: rgba(161, 98, 7, 0.2);
    background: var(--branda-warning-soft);
    color: var(--branda-warning);
}

.due-pill.danger {
    border-color: rgba(180, 35, 24, 0.18);
    background: var(--branda-danger-soft);
    color: var(--branda-danger);
}

.pipeline-kanban {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(285px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.pipeline-lane {
    min-height: 520px;
    overflow: hidden;
}

.pipeline-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 12px;
    border-bottom: 1px solid var(--branda-border-soft);
    background: #fbfcfe;
}

.pipeline-lane-head strong {
    color: var(--branda-heading);
    font-size: var(--branda-font-sm);
}

.pipeline-lane-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--branda-muted-strong);
    font-size: var(--branda-font-xs);
    font-weight: 800;
}

.pipeline-lane-body {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.pipeline-card {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    color: var(--branda-text);
    text-decoration: none;
    box-shadow: var(--branda-shadow-line);
}

.pipeline-card:hover {
    border-color: #cbd8ff;
    color: var(--branda-text);
    box-shadow: var(--branda-shadow-soft);
}

.pipeline-card-head,
.pipeline-card-foot,
.pipeline-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pipeline-card-head strong {
    color: var(--branda-heading);
    font-weight: 800;
    line-height: 1.25;
}

.pipeline-card p {
    min-height: 36px;
    margin: 0;
    color: var(--branda-muted);
    font-size: var(--branda-font-sm);
    line-height: 1.35;
}

.pipeline-card-meta,
.pipeline-card-foot {
    color: var(--branda-muted);
    font-size: 0.78rem;
}

.pipeline-card-foot em {
    color: var(--branda-primary-strong);
    font-style: normal;
    font-weight: 760;
}

.pipeline-card-progress span {
    color: var(--branda-muted-strong);
    font-size: 0.78rem;
    font-weight: 740;
}

.pipeline-card-progress div {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.pipeline-card-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--branda-primary);
}

.creator-record-page {
    display: grid;
    gap: 18px;
}

.creator-record-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.creator-record-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.creator-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--branda-sidebar);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 850;
    box-shadow: var(--branda-shadow-soft);
}

.creator-record-identity h1 {
    margin: 0;
    color: var(--branda-heading);
    font-size: var(--branda-font-display);
    font-weight: 820;
    line-height: 1.05;
}

.creator-record-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--branda-muted);
}

.creator-record-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.creator-record-sidebar {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 86px;
}

.relationship-card,
.record-panel,
.record-section {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.relationship-card {
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border-color: #d8e3ff;
}

.relationship-card-head span,
.record-panel-title,
.record-section-head span,
.record-metric-strip span,
.platform-metric-stats span,
.deliverable-metrics span {
    display: block;
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.relationship-card-head strong {
    display: block;
    margin-top: 6px;
    color: var(--branda-heading);
    font-size: 2rem;
    font-weight: 850;
    line-height: 1;
}

.relationship-card-head em {
    display: block;
    margin-top: 4px;
    color: var(--branda-muted);
    font-style: normal;
}

.record-score-breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}

.record-score-breakdown div,
.record-kv div,
.platform-metric-stats div,
.deliverable-metrics div {
    padding: 9px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-md);
    background: #fbfcfe;
}

.record-score-breakdown strong,
.record-kv strong,
.platform-metric-stats strong,
.deliverable-metrics strong {
    display: block;
    margin-top: 3px;
    color: var(--branda-heading);
    font-weight: 790;
    overflow-wrap: anywhere;
}

.record-panel {
    padding: 14px;
}

.record-panel-title {
    margin-bottom: 10px;
    color: var(--branda-heading);
}

.record-kv {
    display: grid;
    gap: 7px;
}

.record-account-form {
    display: grid;
    gap: 8px;
}

.add-social-top-panel {
    padding: 16px;
}

.record-account-form-inline {
    grid-template-columns: minmax(180px, 240px) minmax(240px, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
}

.record-account-form-inline .btn {
    min-height: 46px;
    white-space: nowrap;
}

.creator-record-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.record-metric-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.record-metric-strip > div {
    min-height: 92px;
    padding: 14px;
    border-right: 1px solid var(--branda-border-soft);
}

.record-metric-strip > div:last-child {
    border-right: 0;
}

.record-metric-strip strong {
    display: block;
    margin-top: 5px;
    color: var(--branda-heading);
    font-size: 1.2rem;
    font-weight: 820;
    line-height: 1.1;
}

.record-metric-strip small {
    display: block;
    margin-top: 5px;
    color: var(--branda-muted);
}

.record-section {
    overflow: hidden;
}

.record-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--branda-border-soft);
}

.record-section-head h2 {
    margin: 0;
    color: var(--branda-heading);
    font-size: var(--branda-font-lg);
    font-weight: 820;
}

.platform-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    padding: 14px;
}

.platform-metric-card {
    display: grid;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: #fbfcfe;
}

.platform-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.platform-metric-head em {
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
    font-style: normal;
    font-weight: 760;
}

.platform-metric-card > a {
    color: var(--branda-heading);
    font-weight: 820;
    text-decoration: none;
}

.platform-metric-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.relationship-timeline,
.deliverable-record-list {
    display: grid;
    gap: 0;
}

.timeline-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--branda-border-soft);
    color: var(--branda-text);
    text-decoration: none;
}

.timeline-item:last-child,
.deliverable-record-item:last-child {
    border-bottom: 0;
}

.timeline-item:hover {
    background: #f7faff;
    color: var(--branda-text);
}

.timeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--branda-primary);
    box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.1);
}

.timeline-item strong,
.deliverable-main strong {
    display: block;
    color: var(--branda-heading);
    font-weight: 800;
}

.timeline-item small,
.deliverable-main span,
.deliverable-main small {
    display: block;
    color: var(--branda-muted);
    font-size: 0.8rem;
}

.timeline-money {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.deliverable-record-item {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--branda-border-soft);
}

.deliverable-main {
    color: var(--branda-text);
    text-decoration: none;
    min-width: 0;
}

.deliverable-main:hover strong {
    color: var(--branda-primary);
}

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

.deliverable-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.record-note-block,
.record-empty {
    margin: 14px;
    padding: 14px;
    border: 1px dashed var(--branda-border);
    border-radius: var(--branda-radius-lg);
    background: #fbfcfe;
    color: var(--branda-muted);
}

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 72px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(223, 229, 238, 0.9);
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
    backdrop-filter: blur(14px);
}

.app-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--branda-text);
    letter-spacing: 0;
    text-decoration: none;
    min-width: 0;
}

.app-brand:hover {
    color: var(--branda-text);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #101828;
    color: #ffffff;
    font-weight: 700;
    box-shadow: var(--branda-shadow-soft);
}

.brand-lockup {
    display: inline-grid;
    gap: 0;
    min-width: 0;
    line-height: 1;
    text-decoration: none;
}

.brand-lockup .brand-name {
    color: inherit;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand-lockup .brand-byline {
    color: currentColor;
    font-family: Nyala, Georgia, "Times New Roman", serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
    opacity: 0.72;
    text-align: right;
    white-space: nowrap;
}

.brand-lockup .brand-subtext {
    margin-top: 3px;
}

.app-brand-lockup {
    color: #ffffff;
}

.auth-brand-lockup {
    color: #1d1d1f;
}

.public-brand-lockup,
.demo-brand-lockup,
.footer-brand-lockup {
    color: #111827;
}

.app-nav-shell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.app-navlinks {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background: #f4f6f9;
    border: 1px solid var(--branda-border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app-navlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 9px;
    color: var(--branda-muted);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.nav-pills .app-navlink {
    color: var(--branda-muted);
}

.app-navlink:hover,
.nav-pills .app-navlink:hover {
    background: #ffffff;
    color: var(--branda-text);
    text-decoration: none;
}

.app-navlink.active,
.nav-pills .app-navlink.active {
    background: #172033;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.14);
}

.app-account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.app-user-chip {
    display: inline-flex;
    align-items: center;
    max-width: 170px;
    min-height: 34px;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--branda-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--branda-muted);
    font-size: 0.82rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-logout-btn {
    min-height: 34px;
}

.app-main {
    max-width: 1460px;
}

.ops-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0.35rem 0 0.2rem;
}

.ops-eyebrow {
    color: #7a8494;
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ops-title {
    color: #111827;
    font-size: clamp(1.85rem, 2.7vw, 2.6rem);
    font-weight: 780;
    line-height: 1.05;
}

.ops-subtitle {
    max-width: 760px;
    color: var(--branda-muted);
    font-size: 0.98rem;
}

.ops-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.workspace-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.workspace-tab {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #667085;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.workspace-tab:hover {
    background: #ffffff;
    border-color: var(--branda-border-soft);
    color: #111827;
}

.workspace-tab.active {
    background: #ffffff;
    border-color: var(--branda-border);
    color: #111827;
    box-shadow: var(--branda-shadow-soft);
}

.insight-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--branda-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.insight-strip-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.insight-cell {
    min-height: 104px;
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--branda-border-soft);
}

.insight-cell:last-child {
    border-right: 0;
}

.insight-cell span,
.ops-callout span {
    display: block;
    color: var(--branda-muted);
    font-size: 0.75rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.insight-cell strong {
    display: block;
    margin-top: 0.3rem;
    color: #111827;
    font-size: 1.45rem;
    font-weight: 780;
    line-height: 1.08;
}

.insight-cell small {
    display: block;
    margin-top: 0.35rem;
    color: var(--branda-muted);
    line-height: 1.35;
}

.surface-panel,
.ops-table-card {
    border: 1px solid var(--branda-border-soft);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--branda-shadow-soft);
}

.surface-panel {
    padding: 1rem;
}

.ops-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--branda-border-soft);
}

.ops-table {
    font-size: 0.92rem;
}

.ops-table thead th {
    background: #fbfcfe;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.06em;
}

.ops-table tbody td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.record-title {
    color: #2446b5;
    font-weight: 780;
    text-decoration: none;
}

.record-title:hover {
    color: #172033;
}

.record-meta {
    margin-top: 2px;
    color: var(--branda-muted);
    font-size: 0.82rem;
}

.platform-pill,
.status-pill,
.next-action-pill,
.score-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 2px 3px 2px 0;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 999px;
    background: #f8fafc;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 740;
    white-space: nowrap;
}

.score-badge {
    border-color: #d8e3ff;
    background: #f5f8ff;
    color: #2446b5;
}

.score-badge.muted {
    border-color: var(--branda-border-soft);
    background: #f8fafc;
    color: var(--branda-muted);
}

.next-action-pill {
    border-color: #dbe3ef;
    background: #ffffff;
}

.ops-callout {
    min-width: 220px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 9px;
    background: #fbfcfe;
}

.ops-callout strong {
    display: block;
    margin-top: 0.15rem;
    color: #111827;
}

.focus-list {
    display: grid;
    gap: 9px;
}

.focus-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #fbfcfe;
}

.focus-list strong {
    min-width: 32px;
    color: #111827;
    font-size: 1.15rem;
}

.focus-list span {
    color: var(--branda-muted);
}

.progress-mini {
    min-width: 150px;
}

.progress-mini span {
    color: #475467;
    font-size: 0.82rem;
    font-weight: 730;
}

.progress-mini div {
    height: 6px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.progress-mini i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #172033;
}

.text-muted {
    color: var(--branda-muted) !important;
}

.text-uppercase.small {
    color: var(--branda-muted) !important;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--branda-text);
    letter-spacing: 0;
}

.h3,
h1.h3 {
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    font-weight: 750;
}

.card {
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: var(--branda-surface);
    box-shadow: var(--branda-shadow-soft);
}

.card.shadow-sm {
    box-shadow: var(--branda-shadow-soft) !important;
}

.card-body {
    padding: 1.35rem;
}

.row.g-3 .card.h-100 .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 132px;
}

.card .small,
.table .small {
    line-height: 1.35;
}

.metric-card {
    border-color: #e6ebf4;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.metric-card .card-body {
    min-height: 132px;
}

.command-card {
    border-color: #dbe5ff;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.command-form .input-group {
    border: 1px solid #d9e3f6;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.command-form .form-control,
.command-form .btn {
    border-radius: 0;
    border: 0;
}

.command-form .form-control {
    min-height: 56px;
    background: #ffffff;
}

.command-result {
    padding-top: 1rem;
    border-top: 1px solid var(--branda-border-soft);
}

.command-table {
    border: 1px solid var(--branda-border-soft);
}

.detail-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    overflow: hidden;
}

.detail-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--branda-border-soft);
}

.detail-list-item:last-child {
    border-bottom: 0;
}

.detail-list-item span {
    color: var(--branda-muted);
    font-weight: 650;
}

.detail-list-item strong {
    color: var(--branda-text);
    text-align: right;
}

.post-mini-list {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.client-access-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.post-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #fbfcff;
    color: var(--branda-text);
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.post-mini-item:hover {
    border-color: #b9c8ff;
    background: #f7faff;
    color: var(--branda-text);
    box-shadow: var(--branda-shadow-soft);
}

.post-mini-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--branda-text);
    text-decoration: none;
}

.post-mini-main:hover {
    color: var(--branda-text);
}

.post-mini-item strong {
    font-weight: 750;
}

.post-mini-actions {
    flex: 0 0 auto;
}

.price-check-card {
    min-width: 0;
    max-width: none;
    padding: 0.85rem;
    border: 1px solid #dbe7f3;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 5px 14px rgba(31, 42, 68, 0.05);
}

.price-check-card-compact {
    padding: 0.8rem;
}

.price-check-head,
.campaign-posts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.price-check-summary {
    color: #2d3a4d;
    font-weight: 750;
    line-height: 1.35;
    font-size: 0.94rem;
}

.price-check-points {
    display: grid;
    gap: 5px;
    margin-top: 0.65rem;
}

.price-check-points-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-check-points div {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 7px;
    background: #ffffff;
    color: var(--branda-muted);
    font-size: 0.83rem;
    line-height: 1.35;
}

.campaign-kol-list {
    display: grid;
    gap: 0;
}

.campaign-kol-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) minmax(280px, 1.1fr) minmax(300px, 1.2fr);
    gap: 18px;
    align-items: start;
    padding: 1.15rem;
    border-bottom: 1px solid var(--branda-border-soft);
}

.campaign-kol-card:last-child {
    border-bottom: 0;
}

.campaign-kol-profile {
    min-width: 0;
}

.campaign-kol-profile > a {
    font-size: 1.05rem;
}

.campaign-kol-facts {
    display: grid;
    gap: 8px;
}

.campaign-kol-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #fbfcff;
}

.campaign-kol-facts span {
    color: var(--branda-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.campaign-kol-facts strong {
    color: var(--branda-text);
    text-align: right;
}

.campaign-posts-panel {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.empty-post-state {
    padding: 0.85rem;
    border: 1px dashed var(--branda-border);
    border-radius: 8px;
    color: var(--branda-muted);
    background: #fbfcff;
}

.score-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.score-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #fbfcff;
}

.score-grid span {
    color: var(--branda-muted);
    font-weight: 650;
}

.score-grid strong {
    color: var(--branda-text);
}

.score-explanation {
    max-height: 220px;
    overflow: auto;
    padding: 0.85rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #f8fafc;
    color: #526071;
}

.radar-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--branda-border-soft);
    border-radius: 8px;
    background: #fbfcff;
    color: var(--branda-muted);
    font-weight: 700;
}

.radar-rule span {
    color: var(--branda-primary);
    font-weight: 800;
}

.display-6,
.h2 {
    color: #111827;
    line-height: 1.08;
}

.display-6 {
    font-size: clamp(1.75rem, 2.2vw, 2.4rem);
}

.h2 {
    font-size: clamp(1.35rem, 1.9vw, 1.85rem);
}

.btn {
    border-radius: 8px;
    font-weight: 650;
    letter-spacing: 0;
    min-height: 42px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.btn-sm {
    min-height: 34px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.btn-primary {
    background: var(--branda-primary);
    border-color: var(--branda-primary);
    box-shadow: 0 8px 18px rgba(49, 95, 220, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--branda-primary-strong);
    border-color: var(--branda-primary-strong);
}

.btn-outline-primary {
    color: var(--branda-primary);
    border-color: #9ab2ff;
    background: #ffffff;
}

.btn-outline-primary:hover {
    background: var(--branda-primary);
    border-color: var(--branda-primary);
}

.btn-outline-secondary {
    color: #526071;
    border-color: #aeb8c6;
    background: #ffffff;
}

.btn-outline-secondary:hover {
    color: #202733;
    background: #f3f6fa;
    border-color: #8e9aad;
}

.btn-outline-danger {
    background: #ffffff;
}

.form-label {
    color: #394456;
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 46px;
    border-color: var(--branda-border);
    border-radius: 8px;
    color: var(--branda-text);
    background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: #8ba7ff;
    box-shadow: 0 0 0 0.2rem rgba(49, 95, 220, 0.12);
}

.table-responsive {
    border-radius: 8px;
    overflow: auto;
    background: #ffffff;
}

.table {
    color: var(--branda-text);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f7faff;
}

.table thead th {
    position: static;
    background: #f8fafd;
    border-bottom: 1px solid var(--branda-border);
    color: #111827;
    font-size: 0.8rem;
    font-weight: 750;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.9rem 1.1rem;
    letter-spacing: 0.03em;
}

.table tbody td {
    border-color: var(--branda-border-soft);
    padding: 1.05rem 1.1rem;
    vertical-align: middle;
}

.table tbody tr {
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.table-hover tbody tr:hover {
    background-color: var(--bs-table-hover-bg);
}

.table a.fw-semibold {
    color: var(--branda-primary);
    font-weight: 750 !important;
}

.table a.fw-semibold:hover {
    color: var(--branda-primary-strong);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.table td.text-end,
.table th.text-end,
.table td:last-child,
.table th:last-child {
    white-space: nowrap;
}

.table td .btn + form,
.table td form + .btn,
.table td form.d-inline {
    margin-left: 0.25rem;
}

.table .btn-sm {
    min-width: 58px;
    border-radius: 7px;
    font-weight: 700;
}

.table tbody td:first-child {
    min-width: 220px;
}

.table tbody td:first-child .small {
    margin-top: 2px;
    color: #66758a !important;
}

.card > .table-responsive:first-child .table thead th:first-child {
    border-top-left-radius: 8px;
}

.card > .table-responsive:first-child .table thead th:last-child {
    border-top-right-radius: 8px;
}

.card > .table-responsive:first-child .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.card > .table-responsive:first-child .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.badge.text-bg-light {
    background: #f2f5f9 !important;
    border: 1px solid #e6ebf2;
    color: #263244 !important;
    font-weight: 700;
}

.badge.text-bg-warning {
    color: #5b3b00 !important;
}

.alert {
    border: 0;
    border-radius: 8px;
    box-shadow: var(--branda-shadow-soft);
}

.alert-success {
    color: #14523a;
    background: var(--branda-success-soft);
}

.alert-danger {
    color: #7f1d1d;
    background: var(--branda-danger-soft);
}

.tooltip {
    --bs-tooltip-bg: #172033;
    --bs-tooltip-color: #ffffff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 240px;
    font-size: 0.8rem;
    letter-spacing: 0;
}

.tooltip-inner {
    padding: 0.48rem 0.65rem;
    border-radius: 7px;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
}

#campaign-performance-chart,
#activity-chart {
    min-height: 320px;
}

@media (max-width: 1199.98px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
        height: auto;
        padding: 14px 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-sidebar .app-brand,
    .workspace-switcher,
    .sidebar-foot {
        display: none;
    }

    .app-sidebar .app-navlinks {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 1px;
    }

    .app-sidebar .app-navlink {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 12px;
    }

    .app-sidebar .app-navlink small {
        display: none;
    }

    .app-topbar {
        top: 0;
    }

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

    .insight-cell {
        border-bottom: 1px solid var(--branda-border-soft);
    }

    .insight-cell:nth-child(2n) {
        border-right: 0;
    }

    .campaign-kol-card {
        grid-template-columns: 1fr;
    }

    .price-check-points-compact {
        grid-template-columns: 1fr;
    }

    .creator-db-shell {
        grid-template-columns: 1fr;
    }

    .creator-profile-drawer {
        position: static;
        max-height: none;
    }

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

    .creator-insight-bar > div {
        border-bottom: 1px solid var(--branda-border-soft);
    }

    .creator-insight-bar > div:nth-child(2n) {
        border-right: 0;
    }

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

    .pipeline-hero {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .pipeline-summary > div {
        border-bottom: 1px solid var(--branda-border-soft);
    }

    .pipeline-summary > div:nth-child(2n) {
        border-right: 0;
    }

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

    .creator-record-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .creator-record-grid {
        grid-template-columns: 1fr;
    }

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

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

    .record-metric-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .deliverable-record-item {
        grid-template-columns: 1fr;
    }

    .deliverable-actions {
        justify-items: start;
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        align-items: stretch;
        flex-direction: column;
        padding: 12px 16px;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
        overflow-x: auto;
    }

    .topbar-actions .btn {
        white-space: nowrap;
    }

    .global-command {
        width: 100%;
    }

    .app-main {
        padding: 18px 14px 28px;
    }

    .page-header,
    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-navbar {
        position: static;
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .app-navbar-inner {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .app-nav-shell {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .app-navlinks {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .app-account-actions {
        width: 100%;
        justify-content: space-between;
    }

    .app-user-chip {
        max-width: none;
        flex: 1 1 auto;
    }

    .app-navlink {
        white-space: nowrap;
        flex: 1 0 auto;
    }

    .d-flex.align-items-center.justify-content-between.mb-4 {
        align-items: flex-start !important;
        gap: 14px;
        flex-direction: column;
    }

    .ops-hero,
    .ops-table-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ops-actions,
    .ops-actions .btn {
        width: 100%;
    }

    .insight-strip,
    .insight-strip-compact {
        grid-template-columns: 1fr;
    }

    .insight-cell {
        border-right: 0;
    }

    .d-flex.align-items-center.justify-content-between.mb-4 > .btn,
    .d-flex.align-items-center.justify-content-between.mb-4 > div:last-child {
        width: 100%;
    }

    .table thead th,
    .table tbody td {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .table tbody td:first-child {
        min-width: 180px;
    }

    .campaign-kol-card {
        padding: 1rem;
    }

    .post-mini-item,
    .post-mini-main,
    .campaign-posts-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .post-mini-actions,
    .post-mini-actions form,
    .post-mini-actions .btn,
    .campaign-posts-head .btn {
        width: 100%;
    }

    .creator-db-hero,
    .creator-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .creator-insight-bar,
    .creator-filter-form,
    .drawer-grid {
        grid-template-columns: 1fr;
    }

    .creator-insight-bar > div {
        border-right: 0;
    }

    .creator-table-legend {
        flex-wrap: wrap;
    }

    .creator-data-table {
        min-width: 860px;
    }

    .pipeline-summary {
        grid-template-columns: 1fr;
    }

    .pipeline-summary > div {
        border-right: 0;
    }

    .pipeline-table-head,
    .pipeline-card-head,
    .pipeline-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .pipeline-kanban {
        grid-auto-columns: minmax(260px, 88vw);
    }

    .pipeline-table {
        min-width: 980px;
    }

    .creator-record-identity {
        align-items: flex-start;
    }

    .creator-record-sidebar,
    .record-metric-strip,
    .platform-metric-stats,
    .deliverable-metrics {
        grid-template-columns: 1fr;
    }

    .timeline-item {
        grid-template-columns: 18px minmax(0, 1fr);
    }

.timeline-money {
        grid-column: 2;
        justify-items: start;
    }
}

.report-page {
    display: grid;
    gap: 22px;
}

.report-hero,
.report-panel,
.report-metric {
    background: #fff;
    border: 1px solid var(--branda-border);
    border-radius: var(--branda-radius-lg);
    box-shadow: var(--branda-shadow-soft);
}

.report-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 30px;
}

.report-eyebrow,
.report-section-head span {
    color: var(--branda-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-hero h1 {
    max-width: 900px;
    margin: 8px 0 8px;
    color: var(--branda-ink);
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 850;
    letter-spacing: 0;
}

.report-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--branda-muted);
    font-size: 1.05rem;
}

.report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.report-meta span {
    padding: 7px 11px;
    border: 1px solid var(--branda-border-soft);
    border-radius: 999px;
    background: var(--branda-surface);
    color: var(--branda-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.report-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 310px;
}

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

.report-metric {
    min-height: 128px;
    padding: 18px;
}

.report-metric span,
.report-metric small {
    display: block;
    color: var(--branda-muted);
}

.report-metric span {
    font-size: 0.82rem;
    font-weight: 750;
}

.report-metric strong {
    display: block;
    margin: 12px 0 5px;
    color: var(--branda-ink);
    font-size: 1.75rem;
    font-weight: 850;
    letter-spacing: 0;
}

.report-metric small {
    font-size: 0.8rem;
}

.report-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.report-panel {
    padding: 22px;
}

.report-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.report-section-head h2 {
    margin: 4px 0 0;
    color: var(--branda-ink);
    font-size: 1.2rem;
    font-weight: 850;
}

.report-insight-list,
.report-recommendation-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-insight-list li,
.report-recommendation-list li {
    position: relative;
    padding: 12px 14px 12px 38px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius);
    background: var(--branda-surface);
    color: var(--branda-ink);
    line-height: 1.45;
}

.report-insight-list li::before,
.report-recommendation-list li::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--branda-accent);
}

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

.report-performer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius);
    background: #fff;
}

.report-performer-muted {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.report-performer .rank {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--branda-ink);
    color: #fff;
    font-weight: 800;
}

.report-performer strong,
.report-performer span {
    display: block;
}

.report-performer strong {
    color: var(--branda-ink);
}

.report-performer span {
    color: var(--branda-muted);
    font-size: 0.82rem;
}

.report-table {
    --bs-table-bg: transparent;
}

.report-table thead th {
    border-bottom: 1px solid var(--branda-border);
    background: var(--branda-surface);
    color: var(--branda-muted);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
    border-color: var(--branda-border-soft);
}

.report-content-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.report-content-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius);
    background: var(--branda-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.report-content-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: var(--branda-shadow-soft);
    transform: translateY(-1px);
}

.report-content-card strong,
.report-content-card span {
    display: block;
}

.report-content-card strong {
    color: var(--branda-ink);
}

.report-content-card span {
    color: var(--branda-muted);
    font-size: 0.84rem;
}

.report-content-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-content-metrics span {
    padding: 6px 9px;
    border: 1px solid var(--branda-border-soft);
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
}

.report-content-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--branda-border-soft);
}

.report-empty {
    padding: 18px;
    border: 1px dashed var(--branda-border);
    border-radius: var(--branda-radius);
    background: var(--branda-surface);
    color: var(--branda-muted);
}

.agency-workflow {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.workflow-header,
.workflow-card {
    border: 1px solid var(--branda-border);
    border-radius: var(--branda-radius-lg);
    background: #fff;
    box-shadow: var(--branda-shadow-soft);
}

.workflow-header {
    padding: 22px;
}

.workflow-header h2 {
    margin: 4px 0 4px;
    color: var(--branda-ink);
    font-size: 1.45rem;
    font-weight: 850;
}

.workflow-header p {
    max-width: 760px;
    margin: 0;
    color: var(--branda-muted);
}

.workflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
}

.workflow-card {
    padding: 18px;
}

.workflow-wide {
    grid-column: 1 / -1;
}

.workflow-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.workflow-card-head span,
.workflow-card-head strong {
    display: block;
}

.workflow-card-head span {
    color: var(--branda-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.workflow-card-head strong {
    margin-top: 3px;
    color: var(--branda-ink);
    font-size: 1.02rem;
}

.workflow-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius);
    background: var(--branda-surface);
}

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

.workflow-relationship-form textarea,
.workflow-relationship-form button {
    grid-column: 1 / -1;
}

.workflow-task-list,
.workflow-note-list,
.workflow-timeline {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.workflow-task,
.workflow-note,
.workflow-timeline-item {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius);
    background: #fff;
}

.workflow-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.workflow-task.overdue {
    border-color: rgba(220, 38, 38, 0.28);
    background: #fff7f7;
}

.workflow-task.soon {
    border-color: rgba(245, 158, 11, 0.3);
    background: #fffbeb;
}

.workflow-task.done {
    background: #f8fafc;
    opacity: 0.8;
}

.workflow-task strong,
.workflow-task p,
.workflow-task small,
.workflow-note p,
.workflow-note small,
.workflow-timeline-item strong,
.workflow-timeline-item p,
.workflow-timeline-item small {
    display: block;
}

.workflow-task strong,
.workflow-timeline-item strong {
    color: var(--branda-ink);
    font-weight: 800;
}

.workflow-task p,
.workflow-timeline-item p,
.workflow-note p {
    margin: 5px 0;
    color: var(--branda-muted);
    line-height: 1.45;
}

.workflow-task small,
.workflow-note small,
.workflow-timeline-item small {
    color: var(--branda-muted);
    font-size: 0.78rem;
}

.workflow-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 850;
}

.workflow-status.done {
    background: #ecfdf5;
    color: #047857;
}

.workflow-note {
    padding: 13px;
}

.workflow-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
}

.workflow-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--branda-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.workflow-empty {
    padding: 14px;
    border: 1px dashed var(--branda-border);
    border-radius: var(--branda-radius);
    background: var(--branda-surface);
    color: var(--branda-muted);
}

@media (max-width: 1199.98px) {
    .report-metric-grid,
    .report-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 991.98px) {
    .report-hero,
    .report-two-col {
        grid-template-columns: 1fr;
    }

    .report-hero {
        flex-direction: column;
    }

    .report-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .report-hero,
    .report-panel {
        padding: 18px;
    }

    .report-metric-grid,
    .report-content-grid {
        grid-template-columns: 1fr;
    }

    .report-actions,
    .report-actions .btn,
    .report-actions form {
        width: 100%;
    }

    .report-performer,
    .report-performer-muted {
        grid-template-columns: 1fr;
    }

    .report-performer .text-end {
        text-align: left !important;
    }

    .workflow-form-row,
    .workflow-relationship-form,
    .workflow-task {
        grid-template-columns: 1fr;
    }
}

/* Production polish layer */
* {
    scrollbar-width: thin;
    scrollbar-color: #c7d0df transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #c7d0df;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #9aa8bb;
    background-clip: padding-box;
}

::selection {
    background: rgba(49, 87, 213, 0.16);
}

.app-content {
    background:
        radial-gradient(circle at 5% 0%, rgba(49, 87, 213, 0.08), transparent 24rem),
        linear-gradient(180deg, #f7f8fb 0%, #f3f5f8 100%);
}

.app-main {
    width: 100%;
}

.card,
.ui-card,
.surface-panel,
.ops-table-card,
.creator-filter-panel,
.creator-table-card,
.creator-profile-drawer,
.pipeline-table-card,
.pipeline-lane,
.record-section,
.record-panel,
.relationship-card,
.workflow-card,
.report-panel,
.report-metric {
    border-color: rgba(216, 222, 232, 0.88);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 36px rgba(16, 24, 40, 0.045);
}

.card,
.ui-card,
.surface-panel,
.ops-table-card {
    overflow: hidden;
}

.card:hover,
.ui-card:hover,
.workflow-card:hover,
.report-metric:hover,
.platform-metric-card:hover,
.pipeline-lane:hover {
    border-color: rgba(177, 188, 206, 0.95);
}

.btn {
    --bs-btn-padding-y: 0.58rem;
    --bs-btn-padding-x: 0.9rem;
    border-radius: 9px;
    font-weight: 760;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.search-input:focus-within,
.global-command:focus-within,
.creator-search-input:focus-within {
    outline: 0;
    border-color: rgba(49, 87, 213, 0.58);
    box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.1);
}

.btn-primary {
    box-shadow: 0 10px 18px rgba(49, 87, 213, 0.16);
}

.btn-primary:hover {
    box-shadow: 0 14px 24px rgba(49, 87, 213, 0.2);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}

.btn.is-loading,
form.is-submitting .btn[type="submit"] {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn.is-loading::after,
form.is-submitting .btn[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    color: #ffffff;
    animation: branda-spin 0.72s linear infinite;
}

.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-outline-danger.is-loading::after,
form.is-submitting .btn-outline-primary[type="submit"]::after,
form.is-submitting .btn-outline-secondary[type="submit"]::after,
form.is-submitting .btn-outline-danger[type="submit"]::after {
    color: var(--branda-primary);
}

form[data-fetch-form].is-submitting .btn[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff !important;
}

form[data-fetch-form].is-submitting .btn-outline-primary[type="submit"],
form[data-fetch-form].is-submitting .btn-outline-secondary[type="submit"],
form[data-fetch-form].is-submitting .btn-outline-danger[type="submit"] {
    color: var(--branda-primary) !important;
}

form[data-fetch-form].is-submitting .btn[type="submit"]::after {
    display: none;
}

.btn-loading-dot {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: branda-spin 0.72s linear infinite;
}

.fetch-loading-note {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    color: var(--branda-muted);
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
}

.sync-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sync-inline-status.is-running::before {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid var(--branda-primary);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: branda-spin 0.72s linear infinite;
}

@keyframes branda-spin {
    to {
        transform: rotate(360deg);
    }
}

.form-label {
    margin-bottom: 0.42rem;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 760;
}

.form-control,
.form-select {
    min-height: 42px;
    border-color: #d7deea;
    border-radius: 9px;
    font-size: 0.92rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

textarea.form-control {
    min-height: 96px;
}

.form-control::placeholder {
    color: #98a2b3;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: #f4f6f9;
    color: #667085;
    cursor: not-allowed;
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: rgba(180, 35, 24, 0.52);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
}

.badge,
.ui-badge,
.status-pill,
.stage-pill,
.due-pill,
.next-action-pill,
.platform-pill,
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}

.badge.text-bg-light,
.stage-pill,
.due-pill,
.status-pill {
    border-color: #e4e9f1;
    background: #f5f7fb !important;
    color: #344054 !important;
}

.badge.text-bg-primary {
    border-color: rgba(49, 87, 213, 0.18) !important;
    background: var(--branda-primary-soft) !important;
    color: var(--branda-primary-strong) !important;
}

.table-responsive {
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
}

.card > .table-responsive {
    border: 0;
}

.table {
    font-size: 0.9rem;
    --bs-table-hover-bg: #f8fbff;
}

.table thead th,
.ops-table thead th,
.creator-data-table thead th,
.pipeline-table thead th,
.report-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 42px;
    padding: 0.72rem 1rem;
    background: #f8fafc;
    color: #475467;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.table tbody td,
.ops-table tbody td,
.creator-data-table tbody td,
.pipeline-table tbody td,
.report-table tbody td {
    padding: 0.78rem 1rem;
}

.table tbody tr,
.ops-table tbody tr,
.creator-data-table tbody tr,
.pipeline-table tbody tr {
    transition: background-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.table-hover tbody tr:hover,
.creator-data-table tbody tr:hover,
.pipeline-table tbody tr:hover,
.ops-table tbody tr:hover {
    background: #f8fbff;
    box-shadow: inset 3px 0 0 rgba(49, 87, 213, 0.58);
}

.table .btn-sm,
.post-mini-actions .btn-sm,
.campaign-posts-head .btn-sm {
    min-height: 34px;
    padding: 0.36rem 0.66rem;
}

.empty-state,
.record-empty,
.drawer-empty,
.drawer-empty-large,
.empty-post-state,
.report-empty,
.workflow-empty {
    position: relative;
    border-color: #d9e2ef;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92)),
        repeating-linear-gradient(135deg, rgba(49, 87, 213, 0.035) 0 9px, transparent 9px 18px);
    color: #667085;
    font-size: 0.92rem;
}

.empty-state::before,
.record-empty::before,
.drawer-empty-large::before,
.empty-post-state::before,
.report-empty::before,
.workflow-empty::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 9px;
    border: 1px solid #d7deea;
    border-radius: 9px;
    background:
        linear-gradient(90deg, #d7deea 38%, transparent 38% 62%, #d7deea 62%) center / 14px 10px no-repeat,
        #ffffff;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}

.drawer-empty::before {
    display: none;
}

.creator-profile-drawer {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
    overflow: auto;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.creator-profile-drawer:hover {
    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.08);
}

.drawer-list-item,
.post-mini-item,
.report-content-card,
.platform-metric-card,
.campaign-kol-card,
.pipeline-card,
.workflow-task,
.workflow-note,
.workflow-timeline-item {
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.drawer-list-item:hover,
.post-mini-item:hover,
.platform-metric-card:hover,
.campaign-kol-card:hover,
.workflow-task:hover,
.workflow-note:hover,
.workflow-timeline-item:hover {
    border-color: rgba(49, 87, 213, 0.22);
    background-color: #fbfdff;
}

.metric-card,
.report-metric {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.metric-card .h2,
.metric-card .display-6,
.report-metric strong,
.creator-insight-bar strong,
.pipeline-summary strong {
    letter-spacing: -0.01em;
}

.app-navlink,
.topbar-actions .btn,
.workspace-switcher,
.global-command {
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.app-navlink:hover {
    transform: translateX(1px);
}

.app-user-chip {
    border: 1px solid var(--branda-border-soft);
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 0.82rem;
    font-weight: 760;
}

.alert {
    border: 1px solid transparent;
}

.alert-success {
    border-color: rgba(47, 125, 79, 0.18);
}

.alert-danger {
    border-color: rgba(180, 35, 24, 0.18);
}

@media (max-width: 1199.98px) {
    .app-shell {
        grid-template-columns: 232px minmax(0, 1fr);
    }

    .app-sidebar {
        padding: 14px 12px;
    }

    .app-sidebar .app-navlink small,
    .brand-subtext {
        display: none;
    }

    .app-sidebar .app-navlink {
        min-height: 42px;
    }
}

@media (max-width: 991.98px) {
    .app-shell {
        display: block;
    }

    .mobile-topbar-brand {
        display: inline-flex;
    }

    .app-sidebar {
        position: relative;
        height: auto;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .app-sidebar .app-navlinks {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .app-sidebar .app-navlink {
        min-width: 142px;
    }

    .sidebar-foot {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .app-logout-btn {
        width: auto !important;
    }

    .app-topbar {
        top: 0;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 13.5px;
    }

    .app-main {
        padding: 16px 12px 26px;
    }

    .app-sidebar {
        gap: 12px;
    }

    .workspace-switcher {
        display: none;
    }

    .app-topbar {
        gap: 10px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .topbar-actions .app-user-chip {
        display: none;
    }

    .btn {
        min-height: 40px;
    }

    .table-responsive {
        margin-inline: -2px;
        border-radius: var(--branda-radius-md);
    }

    .table thead th,
    .table tbody td,
    .ops-table thead th,
    .ops-table tbody td,
    .creator-data-table thead th,
    .creator-data-table tbody td,
    .pipeline-table thead th,
    .pipeline-table tbody td {
        padding: 0.68rem 0.78rem;
    }

    .creator-profile-drawer {
        position: static;
        max-height: none;
    }
}

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

/* Posts library density */
.post-library-table {
    font-size: 0.82rem;
}

.post-library-table thead th {
    white-space: nowrap;
    padding: 0.68rem 0.58rem;
}

.post-library-table tbody td {
    padding: 0.72rem 0.58rem;
    vertical-align: middle;
    white-space: nowrap;
}

.post-library-table tfoot td {
    position: sticky;
    bottom: 0;
    padding: 0.8rem 0.58rem;
    border-top: 1px solid #cfd8e6;
    background: linear-gradient(180deg, #f8fbff, #eef4ff);
    color: #172033;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 -10px 24px rgba(16, 24, 40, 0.06);
}

.post-library-table tfoot td:first-child strong {
    display: block;
    font-size: 0.86rem;
}

.post-library-table tfoot td:first-child span {
    display: block;
    color: #667085;
    font-size: 0.74rem;
    font-weight: 650;
}

.post-library-table .post-identity-cell {
    min-width: 190px;
    max-width: 260px;
}

.post-library-table .compact-link-cell {
    min-width: 142px;
    max-width: 190px;
}

.post-library-table .record-title,
.post-library-table .compact-link-cell > a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.post-library-table .record-meta {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
}

.post-library-table .btn-sm {
    min-height: 30px;
    padding: 0.28rem 0.5rem;
}

.social-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(16, 24, 40, 0.08);
    background: #fff;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}

.social-logo svg {
    width: 17px;
    height: 17px;
    display: block;
}

.social-logo-instagram {
    color: #d62976;
    background: linear-gradient(135deg, rgba(245, 133, 41, 0.12), rgba(214, 41, 118, 0.12), rgba(79, 91, 213, 0.1));
}

.social-logo-youtube {
    color: #ff0033;
    background: rgba(255, 0, 51, 0.08);
}

.social-logo-tiktok {
    color: #101828;
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.14), rgba(254, 44, 85, 0.12));
}

.social-logo path,
.social-logo rect {
    fill: currentColor;
}

.social-logo .social-logo-cut {
    fill: #fff;
}

@media (max-width: 1199.98px) {
    .post-library-table {
        min-width: 1180px;
    }
}

/* Founder cockpit */
.founder-body {
    background: #eef2f7;
}

.founder-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
}

.founder-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 16px;
    background: #0b1220;
    color: #f8fafc;
}

.founder-sidebar .app-brand {
    color: #fff;
}

.founder-sidebar .brand-mark {
    background: #fff;
    color: #0b1220;
}

.founder-sidebar .brand-subtext {
    color: #9aa4b2;
}

.founder-nav {
    display: grid;
    gap: 6px;
}

.founder-nav a,
.founder-nav span {
    display: block;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 12px;
    color: #b8c0cc;
    font-weight: 760;
    text-decoration: none;
}

.founder-nav a.active {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.founder-main {
    padding: 28px;
}

.founder-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid #dbe3ef;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.06);
}

.founder-topbar h1 {
    margin: 0 0 8px;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3.05rem);
    font-weight: 860;
    letter-spacing: -0.02em;
}

.founder-topbar p {
    max-width: 760px;
    margin: 0;
    color: #667085;
}

.founder-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.founder-control {
    min-width: 170px;
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    padding: 8px 10px;
    background: #fff;
}

.founder-control span,
.founder-updated span {
    display: block;
    margin-bottom: 4px;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 820;
    text-transform: uppercase;
}

.founder-ghost-btn {
    border: 1px solid #d5deea;
    border-radius: 14px;
    padding: 0 15px;
    background: #fff;
    color: #344054;
    font-weight: 820;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.founder-ghost-btn:hover {
    border-color: #b8c5d8;
    background: #f8fafc;
    transform: translateY(-1px);
}

.founder-updated {
    min-width: 150px;
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    padding: 9px 12px;
    background: #f8fafc;
}

.founder-updated strong {
    color: #1d2939;
    font-size: 0.86rem;
}

.founder-section {
    margin-bottom: 22px;
}

.founder-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.founder-section-head h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 1.15rem;
    font-weight: 850;
}

.founder-section-head p {
    margin: 0;
    color: #667085;
    font-size: 0.9rem;
}

.founder-exec-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.founder-exec-card {
    min-height: 132px;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.055);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.founder-exec-card:hover {
    border-color: #c3cede;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}

.founder-exec-card > div:first-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
}

.founder-exec-card span {
    color: #667085;
    font-size: 0.72rem;
    font-weight: 820;
    text-transform: uppercase;
}

.founder-exec-card strong {
    display: block;
    margin: 12px 0 5px;
    color: #111827;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.founder-exec-card small {
    display: block;
    color: #667085;
    font-weight: 650;
    line-height: 1.35;
}

.founder-hero,
.founder-panel,
.founder-metric-grid article {
    border: 1px solid #dbe3ef;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.06);
}

.founder-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 18px;
}

.founder-hero-command {
    align-items: flex-start;
}

.founder-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #111827;
}

.founder-hero p {
    max-width: 780px;
    margin: 0;
    color: #667085;
    font-size: 1rem;
}

.founder-hero-meta {
    min-width: 180px;
    align-self: flex-start;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    padding: 12px 14px;
    background: #f8fafc;
}

.founder-hero-meta span,
.founder-metric-grid span,
.founder-panel-head span {
    display: block;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 760;
}

.founder-hero-meta strong {
    display: block;
    margin-top: 4px;
    color: #1d2939;
}

.founder-range-card {
    width: 230px;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    padding: 13px;
    background: #f8fafc;
}

.founder-range-card label {
    display: block;
    margin-bottom: 8px;
    color: #475467;
    font-size: 0.75rem;
    font-weight: 820;
    text-transform: uppercase;
}

.founder-range-card small {
    display: block;
    margin-top: 8px;
    color: #667085;
    font-weight: 650;
}

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

.founder-metric-grid-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.founder-metric-grid article {
    border-radius: 18px;
    padding: 17px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.founder-metric-grid article:hover {
    border-color: #c8d3e3;
    box-shadow: 0 20px 44px rgba(16, 24, 40, 0.09);
    transform: translateY(-1px);
}

.founder-metric-grid strong {
    display: block;
    margin: 7px 0 4px;
    color: #111827;
    font-size: 1.78rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.founder-metric-grid small {
    color: #667085;
    font-weight: 650;
}

.payment-status-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.payment-status-card {
    display: block;
    min-height: 132px;
    padding: 16px;
    color: #111827;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #dbe3ef;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.payment-status-card:hover,
.payment-status-card.active {
    color: #111827;
    transform: translateY(-2px);
    border-color: #9fb1d8;
    box-shadow: 0 24px 56px rgba(16, 24, 40, 0.11);
}

.payment-status-card.active {
    background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%);
    outline: 2px solid rgba(63, 91, 214, 0.16);
}

.payment-status-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.payment-status-top span {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-status-top em {
    min-width: 30px;
    padding: 3px 8px;
    color: #111827;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
    text-align: center;
    background: #f2f5fa;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}

.payment-status-card strong {
    display: block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 1.18rem;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.payment-status-card small {
    display: block;
    color: #667085;
    font-weight: 650;
    line-height: 1.35;
}

.payment-status-waiting_confirmation.active {
    border-color: #e8b547;
    outline-color: rgba(232, 181, 71, 0.2);
}

.payment-status-successful.active {
    border-color: #3ba272;
    outline-color: rgba(59, 162, 114, 0.18);
}

.payment-status-failed.active {
    border-color: #d94a58;
    outline-color: rgba(217, 74, 88, 0.18);
}

.founder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    gap: 18px;
    margin-bottom: 18px;
}

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

.founder-panel {
    border-radius: 20px;
    overflow: hidden;
}

.founder-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e4eaf2;
}

.founder-panel-head.compact {
    padding: 14px 16px;
}

.founder-panel-head.compact h3,
.founder-chart-card h3 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 840;
}

.founder-panel-head h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 1.06rem;
    font-weight: 830;
}

.founder-chart {
    height: 340px;
    padding: 12px;
}

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

.founder-chart-card {
    padding: 16px;
}

.founder-mini-chart {
    height: 230px;
    margin-top: 8px;
}

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

.founder-health {
    border-radius: 999px;
    padding: 0.38rem 0.62rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.founder-health.good {
    background: #e9f8ef;
    color: #267247;
}

.founder-health.warning {
    background: #fff5db;
    color: #946200;
}

.founder-data-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
    padding: 0.35rem 0.58rem;
    font-size: 0.72rem;
    font-weight: 820;
    text-transform: capitalize;
}

.founder-exec-card .founder-data-pill {
    flex-shrink: 0;
    padding: 0.26rem 0.46rem;
    font-size: 0.64rem;
}

.founder-data-pill.exact {
    background: #e9f8ef;
    color: #267247;
}

.founder-data-pill.approximate {
    background: #eef4ff;
    color: #3157b7;
}

.founder-data-pill.insufficient_data {
    background: #fff5db;
    color: #946200;
}

.founder-health-list,
.founder-status-list,
.founder-activity-list,
.founder-quality-list {
    display: grid;
    gap: 10px;
    padding: 16px 20px 20px;
}

.founder-health-list div,
.founder-status-list div,
.founder-activity-list div,
.founder-quality-list div {
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    padding: 12px;
    background: #fbfcff;
}

.founder-health-list div,
.founder-status-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.founder-health-list strong,
.founder-status-list strong {
    color: #111827;
    font-weight: 830;
}

.founder-quality-list div {
    display: grid;
    gap: 8px;
}

.founder-quality-list strong {
    color: #1d2939;
    font-weight: 830;
}

.founder-quality-list small {
    color: #667085;
    line-height: 1.45;
}

.founder-quality-compact {
    padding: 0;
}

.founder-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

.founder-signal-grid div {
    border: 1px solid #e4eaf2;
    border-radius: 15px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}

.founder-signal-grid span,
.founder-signal-grid small {
    display: block;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 720;
}

.founder-signal-grid strong {
    display: block;
    margin: 7px 0 5px;
    color: #111827;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: -0.01em;
}

.founder-signal-grid-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.founder-table {
    font-size: 0.86rem;
}

.founder-table thead th {
    padding: 0.82rem 1rem;
    color: #667085;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.founder-table tbody td {
    padding: 0.92rem 1rem;
}

.founder-table td strong,
.founder-activity-list strong {
    display: block;
    color: #1d2939;
}

.founder-table td small,
.founder-activity-list small {
    display: block;
    margin-top: 3px;
    color: #667085;
}

.founder-activity-list span {
    display: block;
    margin-top: 4px;
    color: #475467;
}

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

.founder-table-card {
    min-height: 220px;
}

.founder-apify-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.founder-apify-tabs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    color: #667085;
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.founder-apify-tabs a:hover,
.founder-apify-tabs a.active {
    border-color: rgba(54, 91, 214, .35);
    color: #1d2939;
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(54, 91, 214, .1);
}

.founder-apify-tabs span {
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.founder-apify-tabs strong {
    color: #1d2939;
    font-size: 1.28rem;
}

.founder-actor-list div {
    align-items: flex-start;
    gap: 8px;
}

.founder-actor-list span {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.founder-actor-list small {
    flex-basis: 100%;
}

.founder-filter-panel {
    padding: 18px;
}

.founder-filter-panel label {
    display: block;
    margin-bottom: 6px;
    color: #667085;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.founder-apify-table th,
.founder-apify-table td {
    vertical-align: top;
}

.founder-url-cell {
    min-width: 260px;
    max-width: 360px;
}

.founder-url-cell a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #365bd6;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.founder-url-cell a:hover {
    text-decoration: underline;
}

.founder-apify-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 850;
    text-transform: capitalize;
}

.founder-apify-badge.success {
    color: #116149;
    background: #dff8ed;
}

.founder-apify-badge.danger {
    color: #9f1239;
    background: #ffe4e6;
}

.founder-apify-badge.warning {
    color: #92400e;
    background: #fef3c7;
}

.founder-apify-badge.muted {
    color: #475467;
    background: #eef2f7;
}

.founder-empty-mini {
    display: grid;
    gap: 6px;
    margin: 16px;
    border: 1px dashed #d5deea;
    border-radius: 16px;
    padding: 18px;
    background: #fbfcff;
}

.founder-empty-mini strong {
    color: #1d2939;
    font-weight: 840;
}

.founder-empty-mini span {
    color: #667085;
    line-height: 1.45;
}

.gateway-settings-form {
    padding: 22px;
}

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

.gateway-field {
    min-width: 0;
}

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

.gateway-field-inline {
    padding: 16px;
    border: 1px solid var(--branda-border-soft);
    border-radius: var(--branda-radius-lg);
    background: var(--branda-surface-soft);
}

.gateway-field .form-text,
.gateway-field .form-check-label {
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
}

.gateway-checklist strong {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Subscription management */
.subscription-usage-row {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.subscription-usage-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #1d2939;
}

.subscription-usage-row span {
    color: #667085;
    font-weight: 700;
}

.subscription-usage-row .progress {
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
}

.subscription-usage-row .progress-bar {
    border-radius: 999px;
    background: #365bd6;
}

.subscription-feature-list {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    padding-left: 18px;
    color: #475467;
}

.subscription-plan-card {
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.subscription-plan-card:hover {
    transform: translateY(-2px);
    border-color: #c3cede;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
}

.subscription-plan-popular {
    border-color: rgba(54, 91, 214, 0.32);
    box-shadow: 0 18px 42px rgba(54, 91, 214, 0.1);
}

.import-template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.import-template-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fbff;
    color: #475467;
    font-size: .8rem;
    font-weight: 750;
}

/* Public home */
.public-home {
    background: #080a0f;
    color: #f8fafc;
}

.public-home a {
    text-decoration: none;
}

.public-home-apple {
    background: #fbfbfd;
    color: #1d1d1f;
}

.public-home-apple .apple-nav {
    min-height: 66px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(251, 251, 253, 0.78);
    backdrop-filter: blur(24px);
}

.public-home-apple .public-brand > span:first-child {
    background: #1d1d1f;
    color: #ffffff;
}

.public-home-apple .public-brand .brand-lockup,
.public-home-apple .public-nav-links a {
    color: #1d1d1f;
}

.public-home-apple .public-nav-links a {
    opacity: 0.78;
    transition: opacity 160ms ease, color 160ms ease;
}

.public-home-apple .public-nav-links a:hover {
    opacity: 1;
    color: #0071e3;
}

.public-home-apple .public-nav-links .public-nav-cta {
    border: 0;
    border-radius: 999px;
    background: #0071e3;
    color: #ffffff;
    opacity: 1;
}

.apple-hero {
    position: relative;
    overflow: hidden;
    padding: 150px clamp(22px, 6vw, 96px) 88px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 12%, rgba(0, 113, 227, 0.16), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
}

.apple-client-proof {
    width: min(calc(100% - 48px), 1240px);
    margin: 0 auto;
    padding: 72px 0 68px;
    border-bottom: 1px solid rgba(29, 29, 31, 0.1);
    text-align: center;
}

.apple-client-proof-copy {
    max-width: 650px;
    margin: 0 auto 42px;
}

.apple-client-proof-copy h2 {
    max-width: 640px;
    margin: 12px auto 0;
    color: #1d1d1f;
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: 0;
}

.apple-client-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 20px;
}

.apple-client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 92px;
    padding: 12px 16px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 180ms ease, transform 180ms ease;
}

.apple-client-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.68;
    transition: filter 180ms ease, opacity 180ms ease;
}

.apple-client-logo:hover,
.apple-client-logo:focus-visible {
    background: rgba(0, 113, 227, 0.045);
    transform: translateY(-2px);
}

.apple-client-logo:hover img,
.apple-client-logo:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
}

.apple-client-logo-pusako img,
.apple-client-logo-sohoney img {
    max-height: 68px;
}

.apple-client-logo-wookey img {
    max-height: 48px;
}

.apple-client-testimonial {
    position: relative;
    max-width: 940px;
    margin: 58px auto 0;
    padding: 48px 56px 44px;
    overflow: hidden;
    border: 1px solid rgba(29, 29, 31, 0.1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(29, 29, 31, 0.07);
    text-align: left;
}

.apple-client-testimonial::before {
    content: "\201C";
    position: absolute;
    top: 18px;
    right: 34px;
    color: rgba(0, 113, 227, 0.1);
    font-family: Georgia, serif;
    font-size: 8rem;
    line-height: 1;
    pointer-events: none;
}

.apple-client-testimonial blockquote,
.apple-client-testimonial p {
    margin: 0;
}

.apple-client-testimonial blockquote {
    position: relative;
    z-index: 1;
}

.apple-client-testimonial p {
    max-width: 820px;
    color: #1d1d1f;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 650;
    line-height: 1.42;
    letter-spacing: 0;
}

.apple-client-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.apple-testimonial-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    padding: 6px;
    border: 1px solid rgba(29, 29, 31, 0.1);
    border-radius: 50%;
    background: #ffffff;
}

.apple-testimonial-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.apple-client-testimonial figcaption > span:last-child {
    display: grid;
    gap: 2px;
}

.apple-client-testimonial figcaption strong {
    color: #1d1d1f;
    font-size: 1rem;
    font-weight: 750;
}

.apple-client-testimonial figcaption small {
    color: #6e6e73;
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    .apple-client-testimonial {
        margin-top: 36px;
        padding: 32px 24px 28px;
    }

    .apple-client-testimonial::before {
        top: 12px;
        right: 18px;
        font-size: 5.5rem;
    }

    .apple-client-testimonial p {
        font-size: 1.12rem;
        line-height: 1.5;
    }

    .apple-client-testimonial figcaption {
        align-items: flex-start;
        margin-top: 24px;
    }
}

.apple-hero::after {
    content: "";
    position: absolute;
    inset: auto 12% 6% 12%;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.13), transparent 66%);
    filter: blur(30px);
    pointer-events: none;
}

.apple-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
}

.apple-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0071e3;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.apple-hero h1,
.apple-section h2,
.apple-final-cta h2 {
    margin: 14px auto 0;
    color: #1d1d1f;
    font-weight: 930;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.apple-hero h1 {
    max-width: 1060px;
    font-size: clamp(3.8rem, 9vw, 8.6rem);
}

.apple-hero p {
    max-width: 760px;
    margin: 28px auto 0;
    color: #6e6e73;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.52;
}

.apple-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.apple-primary-btn,
.apple-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 760;
}

.apple-primary-btn {
    background: #0071e3;
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 113, 227, 0.22);
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.apple-primary-btn:hover {
    background: #0077ed;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 22px 44px rgba(0, 113, 227, 0.28);
}

.apple-link-btn {
    color: #0071e3;
}

.apple-product-stage {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin: 78px auto 0;
    perspective: 1600px;
}

.apple-product-window {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 50px 120px rgba(0, 0, 0, 0.16);
    text-align: left;
    transform: rotateX(6deg);
    backdrop-filter: blur(26px);
}

.apple-window-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(245, 245, 247, 0.8);
}

.apple-window-top span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d2d2d7;
}

.apple-window-top strong {
    margin-left: 10px;
    color: #6e6e73;
    font-size: 0.86rem;
    font-weight: 760;
}

.apple-product-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 460px;
}

.apple-product-layout aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 22px;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(250, 250, 252, 0.9);
}

.apple-product-layout aside b {
    color: #1d1d1f;
    font-size: 1.1rem;
    font-weight: 900;
}

.apple-product-layout aside small {
    margin-bottom: 16px;
    color: #8e8e93;
    font-weight: 700;
}

.apple-product-layout aside em {
    padding: 12px 14px;
    border-radius: 14px;
    color: #6e6e73;
    font-style: normal;
    font-weight: 780;
}

.apple-product-layout aside em.active {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.apple-product-layout section {
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(0, 113, 227, 0.08), transparent 20rem),
        #ffffff;
}

.apple-command {
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    background: rgba(245, 245, 247, 0.86);
    color: #8e8e93;
    font-weight: 760;
}

.apple-metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.apple-metric-row article {
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: #fbfbfd;
}

.apple-metric-row span,
.apple-table b,
.apple-table span {
    color: #6e6e73;
}

.apple-metric-row strong {
    display: block;
    margin-top: 6px;
    color: #1d1d1f;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.apple-table {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    background: #ffffff;
}

.apple-table > div {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.7fr;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.apple-table > div:last-child {
    border-bottom: 0;
}

.apple-table strong {
    color: #0071e3;
}

.apple-section {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 96px 0;
}

.apple-feature-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 48px;
    align-items: center;
}

.apple-section h2,
.apple-final-cta h2 {
    max-width: 820px;
    font-size: clamp(2.7rem, 6vw, 5.8rem);
}

.apple-section p,
.apple-final-cta p {
    max-width: 680px;
    margin: 24px 0 0;
    color: #6e6e73;
    font-size: clamp(1.08rem, 1.8vw, 1.36rem);
    line-height: 1.58;
}

.apple-feature-card,
.apple-glass-panel,
.apple-workflow-grid article {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 247, 0.82)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 80px rgba(0, 0, 0, 0.08);
}

.apple-feature-card {
    padding: 34px;
}

.apple-mini-record {
    display: grid;
    gap: 18px;
    padding: 30px;
    border-radius: 28px;
    background: #1d1d1f;
    color: #ffffff;
}

.apple-mini-record strong {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.apple-mini-record > span {
    color: #a1a1a6;
}

.apple-mini-record div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.apple-mini-record small {
    color: #a1a1a6;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.apple-mini-record b {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 1.25rem;
}

.apple-scrape-section {
    width: min(1220px, calc(100% - 48px));
    padding-top: 72px;
    padding-bottom: 72px;
}

.apple-scrape-showcase,
.apple-post-metric-board {
    display: grid;
    grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
    gap: 18px;
    margin-top: 42px;
}

.apple-input-demo,
.apple-scrape-results,
.apple-post-url-card,
.apple-post-metric-grid {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 245, 247, 0.82)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 80px rgba(0, 0, 0, 0.08);
}

.apple-input-demo,
.apple-post-url-card {
    display: grid;
    align-content: space-between;
    min-height: 300px;
    padding: 30px;
}

.apple-input-demo > span,
.apple-post-url-card > span,
.apple-scrape-results span,
.apple-post-metric-grid span {
    color: #86868b;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.apple-input-demo div {
    display: grid;
    gap: 12px;
}

.apple-input-demo strong {
    width: max-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    font-size: 0.88rem;
    font-weight: 850;
}

.apple-input-demo b,
.apple-post-url-card strong {
    color: #1d1d1f;
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    font-weight: 930;
    line-height: 0.98;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}

.apple-input-demo small,
.apple-post-url-card small {
    color: #6e6e73;
    font-size: 1rem;
    line-height: 1.65;
}

.apple-scrape-results,
.apple-post-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    padding: 0;
    background: rgba(0, 0, 0, 0.07);
}

.apple-scrape-results article,
.apple-post-metric-grid article {
    display: grid;
    align-content: center;
    min-height: 148px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.94);
}

.apple-scrape-results strong,
.apple-post-metric-grid strong {
    display: block;
    margin-top: 10px;
    color: #1d1d1f;
    font-size: clamp(1.65rem, 3.2vw, 2.65rem);
    font-weight: 930;
    letter-spacing: -0.045em;
}

.apple-post-scrape {
    width: min(1280px, calc(100% - 48px));
}

.apple-post-url-card {
    background:
        radial-gradient(circle at top right, rgba(0, 113, 227, 0.14), transparent 18rem),
        #1d1d1f;
}

.apple-post-url-card > span,
.apple-post-url-card small {
    color: #a1a1a6;
}

.apple-post-url-card strong {
    color: #ffffff;
}

.apple-workflow {
    width: min(1320px, calc(100% - 48px));
}

.apple-section-head {
    text-align: center;
}

.apple-section-head h2,
.apple-section-head p {
    margin-left: auto;
    margin-right: auto;
}

.apple-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 42px;
}

.apple-workflow-grid article {
    padding: 28px;
}

.apple-workflow-grid span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: #f5f5f7;
    color: #0071e3;
    font-weight: 900;
}

.apple-workflow-grid h3 {
    margin: 22px 0 12px;
    color: #1d1d1f;
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.apple-workflow-grid p {
    margin: 0;
    font-size: 1rem;
}

.apple-intelligence {
    width: min(1180px, calc(100% - 48px));
}

.apple-glass-panel {
    padding: clamp(34px, 6vw, 72px);
    text-align: center;
}

.apple-glass-panel p {
    margin-left: auto;
    margin-right: auto;
}

.apple-signal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.apple-signal-grid div {
    padding: 18px;
    border-radius: 20px;
    background: #fbfbfd;
}

.apple-signal-grid strong,
.apple-signal-grid span {
    display: block;
}

.apple-signal-grid strong {
    color: #1d1d1f;
    font-weight: 900;
}

.apple-signal-grid span {
    margin-top: 6px;
    color: #6e6e73;
}

.apple-final-cta {
    padding: 112px 24px 128px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.13), transparent 26rem),
        #f5f5f7;
}

.apple-final-cta h2,
.apple-final-cta p {
    margin-left: auto;
    margin-right: auto;
}

.apple-final-cta .apple-primary-btn {
    margin-top: 32px;
}

.public-nav {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 32px), 1440px);
    min-height: 64px;
    gap: 18px;
    padding: 10px 14px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(9, 12, 18, 0.78);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    flex: 0 0 auto;
    min-width: 0;
    text-decoration: none;
}

.public-brand > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ffffff;
    color: #070a10;
    font-weight: 900;
}

.public-brand .brand-name {
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.public-brand .brand-byline {
    font-size: 0.66rem;
}

.public-footer-brand .brand-name {
    font-size: 1.02rem;
}

.public-footer-brand .brand-byline {
    font-size: 0.68rem;
}

.public-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.public-nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    color: rgba(248, 250, 252, 0.74);
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.public-nav-links a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.public-nav-links .public-nav-login {
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.public-nav-links .public-nav-cta {
    min-width: max-content;
    padding: 0 18px;
    background: #ffffff;
    color: #070a10;
    box-shadow: inset 0 -1px 0 rgba(7, 10, 16, 0.12);
}

.public-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
    gap: 42px;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 132px max(24px, calc((100vw - 1180px) / 2)) 84px;
    background:
        linear-gradient(180deg, rgba(8, 10, 15, 0.08) 0%, rgba(8, 10, 15, 1) 90%),
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 24rem),
        radial-gradient(circle at 80% 8%, rgba(129, 140, 248, 0.14), transparent 24rem),
        #080a0f;
}

.public-parallax-layer {
    position: absolute;
    pointer-events: none;
}

.public-parallax-grid {
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}

.public-parallax-orbit {
    width: 420px;
    height: 120px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015));
    transform: rotate(-14deg);
}

.public-parallax-orbit-a {
    top: 18%;
    right: -130px;
}

.public-parallax-orbit-b {
    bottom: 10%;
    left: -180px;
}

.public-hero-copy,
.public-product-frame,
.public-section,
.public-final-cta {
    position: relative;
    z-index: 2;
}

.public-eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.76rem;
    font-weight: 860;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-hero h1 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 6.2vw, 6.6rem);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.public-hero p {
    max-width: 600px;
    margin: 24px 0 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: 1.08rem;
    line-height: 1.68;
}

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

.public-primary-btn,
.public-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 14px;
    font-weight: 840;
}

.public-primary-btn {
    background: #ffffff;
    color: #070a10;
    box-shadow: 0 22px 44px rgba(255, 255, 255, 0.12);
}

.public-secondary-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.public-primary-btn:hover {
    color: #070a10;
    transform: translateY(-1px);
}

.public-secondary-btn:hover {
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

.public-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.public-trust-row span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.78rem;
    font-weight: 720;
}

.public-product-frame {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    color: #111827;
    box-shadow: 0 44px 120px rgba(0, 0, 0, 0.38);
}

.public-product-top {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.public-product-top span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
}

.public-product-top strong {
    margin-left: 8px;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 820;
}

.public-product-body {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 480px;
}

.public-product-body aside {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px;
    background: #0f172a;
    color: #ffffff;
}

.public-product-body aside b {
    font-size: 1.05rem;
}

.public-product-body aside small {
    margin-bottom: 18px;
    color: #94a3b8;
    font-weight: 720;
}

.public-product-body aside em {
    display: block;
    padding: 10px;
    border-radius: 12px;
    color: #cbd5e1;
    font-style: normal;
    font-weight: 780;
}

.public-product-body aside em:first-of-type {
    background: #ffffff;
    color: #0f172a;
}

.public-product-body section {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.public-command {
    min-height: 46px;
    padding: 13px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #ffffff;
    color: #64748b;
    font-weight: 760;
}

.public-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #ffffff;
}

.public-stats article {
    padding: 14px;
    border-right: 1px solid #e5e7eb;
}

.public-stats article:last-child {
    border-right: 0;
}

.public-stats span,
.public-table b {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 860;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-stats strong {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 900;
}

.public-table {
    overflow: hidden;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #ffffff;
}

.public-table > div {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.7fr 0.8fr;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.public-table > div:last-child {
    border-bottom: 0;
}

.public-table span {
    min-width: 0;
    overflow: hidden;
    color: #1f2937;
    font-size: 0.88rem;
    font-weight: 730;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-section {
    padding: 104px max(24px, calc((100vw - 1180px) / 2));
}

.public-section-head {
    max-width: 840px;
    margin-bottom: 32px;
}

.public-section h2,
.public-final-cta h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 4vw, 4.6rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.public-section-head p,
.public-workflow-copy p,
.public-proof-card p,
.public-final-cta p {
    max-width: 760px;
    margin: 18px 0 0;
    color: rgba(226, 232, 240, 0.74);
    font-size: 1rem;
    line-height: 1.7;
}

.public-matrix {
    background:
        linear-gradient(180deg, #080a0f 0%, #0d111a 50%, #080a0f 100%);
}

.public-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.public-matrix-grid article,
.public-workflow-steps article,
.public-proof-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.public-matrix-grid article {
    position: relative;
    min-height: 292px;
    padding: 24px;
    overflow: hidden;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.public-matrix-grid article:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-2px);
}

.public-matrix-grid span {
    display: block;
    color: rgba(248, 250, 252, 0.58);
    font-size: 0.74rem;
    font-weight: 860;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.public-matrix-grid span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.36);
    vertical-align: 1px;
}

.public-matrix-grid h3,
.public-workflow-steps h3 {
    margin: 20px 0 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 880;
    letter-spacing: -0.02em;
}

.public-matrix-grid p,
.public-workflow-steps p {
    margin: 14px 0 0;
    color: rgba(226, 232, 240, 0.72);
    line-height: 1.62;
}

.public-matrix-priority {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        #121722 !important;
    box-shadow: 0 34px 90px rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 0, 0, 0.28) !important;
}

.public-matrix-priority::after {
    content: "Brandaflow fit";
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #10141f;
    background: #ffffff;
    font-size: 0.74rem;
    font-weight: 860;
}

.public-matrix-priority span {
    color: #ffffff;
}

.public-matrix-priority span::before {
    background: #ffffff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.public-workflow {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 38px;
    align-items: start;
    background:
        linear-gradient(180deg, #080a0f 0%, #111827 52%, #080a0f 100%);
}

.public-workflow-copy {
    position: sticky;
    top: 130px;
}

.public-workflow-steps {
    display: grid;
    gap: 16px;
}

.public-workflow-steps article {
    padding: 24px;
    background: rgba(255, 255, 255, 0.072);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.public-workflow-steps article:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.095);
    transform: translateY(-2px);
}

.public-workflow-steps strong {
    color: rgba(248, 250, 252, 0.48);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.public-proof {
    background: #080a0f;
}

.public-proof-card {
    padding: 42px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
        #0d121b;
}

.public-proof-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.public-proof-metrics div {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.public-proof-metrics strong {
    display: block;
    color: #ffffff;
    font-weight: 860;
}

.public-proof-metrics span {
    display: block;
    margin-top: 8px;
    color: rgba(226, 232, 240, 0.68);
    line-height: 1.5;
}

.public-final-cta {
    display: grid;
    justify-items: center;
    padding: 104px 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.08), transparent 26rem),
        #ffffff;
    color: #070a10;
    text-align: center;
}

.public-final-cta h2 {
    max-width: 860px;
    color: #070a10;
}

.public-final-cta p {
    color: #475569;
}

.public-final-cta .public-primary-btn {
    margin-top: 28px;
    background: #070a10;
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(7, 10, 16, 0.18);
}

.pricing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: end;
    overflow: hidden;
    padding: 150px max(24px, calc((100vw - 1180px) / 2)) 68px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.13), transparent 24rem),
        radial-gradient(circle at 82% 16%, rgba(129, 140, 248, 0.16), transparent 25rem),
        #080a0f;
}

.pricing-hero-copy {
    position: relative;
    z-index: 2;
}

.pricing-hero h1 {
    max-width: 840px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 6.1rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.pricing-hero p {
    max-width: 680px;
    margin: 22px 0 0;
    color: rgba(226, 232, 240, 0.74);
    font-size: 1.08rem;
    line-height: 1.7;
}

.pricing-hero-note {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.pricing-hero-note span,
.pricing-badge {
    display: inline-flex;
    color: rgba(248, 250, 252, 0.68);
    font-size: 0.72rem;
    font-weight: 860;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-hero-note strong {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 880;
}

.pricing-hero-note p {
    margin-top: 8px;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pricing-grid-section {
    padding: 34px max(24px, calc((100vw - 1180px) / 2)) 92px;
    background: linear-gradient(180deg, #080a0f 0%, #0d111a 100%);
}

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

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 620px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.pricing-card:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-3px);
}

.pricing-card-featured {
    border-color: rgba(255, 255, 255, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        #111827;
}

.pricing-badge {
    width: max-content;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 10px;
    color: #111827;
    background: #ffffff;
    letter-spacing: 0;
    text-transform: none;
}

.pricing-card-head h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.pricing-card-head p {
    min-height: 58px;
    margin: 10px 0 0;
    color: rgba(226, 232, 240, 0.68);
    line-height: 1.5;
}

.pricing-price {
    margin-top: 24px;
}

.pricing-price strong {
    display: block;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.pricing-price span,
.pricing-yearly {
    color: rgba(226, 232, 240, 0.62);
    font-size: 0.9rem;
    font-weight: 720;
}

.pricing-yearly {
    min-height: 28px;
    margin: 8px 0 18px;
}

.pricing-card .public-primary-btn,
.pricing-card .public-secondary-btn {
    width: 100%;
    min-height: 46px;
}

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

.pricing-feature-list li {
    position: relative;
    padding-left: 22px;
    color: rgba(226, 232, 240, 0.76);
    line-height: 1.45;
}

.pricing-feature-list li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

.pricing-compare {
    padding: 96px max(24px, calc((100vw - 1180px) / 2));
    background: #080a0f;
}

.pricing-compare-table {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.pricing-compare-row {
    display: grid;
    grid-template-columns: 1.1fr repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

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

.pricing-compare-head {
    min-height: 58px;
    background: rgba(255, 255, 255, 0.05);
}

.pricing-compare-row strong {
    color: #ffffff;
    font-weight: 880;
}

.pricing-compare-row span {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.9rem;
    font-weight: 720;
}

.pricing-compare-head span {
    color: rgba(248, 250, 252, 0.62);
    font-size: 0.72rem;
    font-weight: 860;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-final {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.contact-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: end;
    overflow: hidden;
    padding: 150px max(24px, calc((100vw - 1180px) / 2)) 76px;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.13), transparent 24rem),
        radial-gradient(circle at 84% 20%, rgba(129, 140, 248, 0.14), transparent 25rem),
        #080a0f;
}

.contact-hero-copy,
.contact-signal-card {
    position: relative;
    z-index: 2;
}

.contact-hero h1 {
    max-width: 860px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 6vw, 6.1rem);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.contact-hero p {
    max-width: 660px;
    margin: 22px 0 0;
    color: rgba(226, 232, 240, 0.74);
    font-size: 1.08rem;
    line-height: 1.7;
}

.contact-signal-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.contact-signal-card span,
.contact-office-card span {
    display: inline-flex;
    color: rgba(248, 250, 252, 0.68);
    font-size: 0.72rem;
    font-weight: 860;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-signal-card strong {
    display: block;
    margin-top: 12px;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 880;
}

.contact-signal-card p {
    margin-top: 10px;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.92rem;
    line-height: 1.55;
}

.contact-office-section {
    padding: 96px max(24px, calc((100vw - 1180px) / 2));
    background: linear-gradient(180deg, #080a0f 0%, #0d111a 100%);
}

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

.contact-office-card {
    display: grid;
    align-content: space-between;
    min-height: 330px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.contact-office-card:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.075);
    transform: translateY(-2px);
}

.contact-office-featured {
    border-color: rgba(255, 255, 255, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
        #111827;
}

.contact-office-card h3 {
    max-width: 650px;
    margin: 14px 0 0;
    color: #ffffff;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.03em;
}

.contact-office-card h3 a {
    color: #ffffff;
}

.contact-office-card h3 a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.contact-office-address {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-office-address p {
    margin: 10px 0 0;
    color: rgba(226, 232, 240, 0.72);
    line-height: 1.65;
}

.contact-phone-section {
    padding: 82px max(24px, calc((100vw - 1180px) / 2));
    background:
        radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.08), transparent 26rem),
        #ffffff;
}

.contact-phone-card {
    display: grid;
    justify-items: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.contact-phone-card .public-eyebrow {
    color: #64748b;
}

.contact-phone-card h2 {
    margin: 0;
    color: #070a10;
    font-size: clamp(2.2rem, 4vw, 4.6rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.contact-phone-card p {
    max-width: 620px;
    margin: 18px 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
}

.contact-phone-card .public-primary-btn {
    margin-top: 28px;
    background: #070a10;
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(7, 10, 16, 0.18);
}

.public-pricing-apple .pricing-hero,
.public-contact-apple .contact-hero {
    background:
        radial-gradient(circle at 50% 12%, rgba(0, 113, 227, 0.14), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
}

.public-pricing-apple .pricing-hero {
    grid-template-columns: minmax(0, 1fr) 340px;
    padding-top: 150px;
    padding-bottom: 72px;
}

.public-pricing-apple .pricing-hero h1,
.public-contact-apple .contact-hero h1 {
    color: #1d1d1f;
    font-size: clamp(3.6rem, 8vw, 7.4rem);
    font-weight: 930;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.public-pricing-apple .pricing-hero p,
.public-contact-apple .contact-hero p {
    color: #6e6e73;
    font-size: clamp(1.1rem, 1.9vw, 1.42rem);
    line-height: 1.58;
}

.public-pricing-apple .pricing-hero-note,
.public-contact-apple .contact-signal-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 80px rgba(0, 0, 0, 0.10);
    backdrop-filter: blur(26px);
}

.public-pricing-apple .pricing-hero-note span,
.public-contact-apple .contact-signal-card span,
.public-contact-apple .contact-office-card span,
.public-pricing-apple .pricing-badge {
    color: #0071e3;
}

.public-pricing-apple .pricing-badge-flexible {
    color: #5b3a00;
    border-color: rgba(255, 159, 10, 0.24);
    background: rgba(255, 159, 10, 0.12);
}

.pricing-pass-credit {
    margin: auto 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #1d1d1f;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.55;
}

.public-pricing-apple .pricing-hero-note strong,
.public-contact-apple .contact-signal-card strong {
    color: #1d1d1f;
}

.public-pricing-apple .pricing-hero-note p,
.public-contact-apple .contact-signal-card p {
    color: #6e6e73;
}

.public-pricing-apple .pricing-grid-section,
.public-contact-apple .contact-office-section {
    background: #f5f5f7;
}

.public-pricing-apple .pricing-grid {
    gap: 16px;
}

.public-pricing-apple .pricing-card,
.public-contact-apple .contact-office-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 247, 0.82)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 80px rgba(0, 0, 0, 0.08);
}

.public-pricing-apple .pricing-card {
    min-height: 600px;
    border-radius: 32px;
}

.public-pricing-apple .pricing-card:hover,
.public-contact-apple .contact-office-card:hover {
    border-color: rgba(0, 113, 227, 0.20);
    background: #ffffff;
    transform: translateY(-3px);
}

.public-pricing-apple .pricing-card-featured,
.public-contact-apple .contact-office-featured {
    border-color: rgba(0, 113, 227, 0.26);
    background:
        radial-gradient(circle at top right, rgba(0, 113, 227, 0.13), transparent 18rem),
        #ffffff;
}

.public-pricing-apple .pricing-badge {
    border-color: rgba(0, 113, 227, 0.16);
    background: rgba(0, 113, 227, 0.08);
}

.public-pricing-apple .pricing-card-head h2,
.public-pricing-apple .pricing-price strong,
.public-pricing-apple .pricing-compare-row strong,
.public-contact-apple .contact-office-card h3,
.public-contact-apple .contact-office-card h3 a {
    color: #1d1d1f;
}

.public-pricing-apple .pricing-card-head p,
.public-pricing-apple .pricing-price span,
.public-pricing-apple .pricing-yearly,
.public-pricing-apple .pricing-feature-list li,
.public-pricing-apple .pricing-compare-row span,
.public-contact-apple .contact-office-address p {
    color: #6e6e73;
}

.public-pricing-apple .pricing-price strong {
    font-size: 2.25rem;
}

.public-pricing-apple .pricing-card .apple-primary-btn,
.public-pricing-apple .pricing-card .apple-link-btn {
    width: 100%;
}

.public-pricing-apple .pricing-card .apple-link-btn {
    border: 1px solid rgba(0, 113, 227, 0.18);
    background: rgba(0, 113, 227, 0.06);
}

.public-pricing-apple .pricing-feature-list li::before {
    background: #34c759;
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.12);
}

.public-pricing-apple .pricing-compare {
    background: #ffffff;
}

.public-pricing-apple .pricing-compare .public-section-head h2 {
    color: #1d1d1f;
}

.public-pricing-apple .pricing-compare .public-section-head p {
    color: #6e6e73;
}

.public-pricing-apple .pricing-compare-table {
    border-color: rgba(0, 0, 0, 0.08);
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.08);
}

.public-pricing-apple .pricing-compare-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.public-pricing-apple .pricing-compare-head {
    background: #f5f5f7;
}

.public-pricing-apple .pricing-compare-head span {
    color: #86868b;
}

.public-pricing-apple .pricing-final {
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.13), transparent 26rem),
        #f5f5f7;
}

.public-pricing-apple .pricing-final h2,
.public-contact-apple .contact-phone-card h2 {
    color: #1d1d1f;
}

.public-pricing-apple .pricing-final p,
.public-contact-apple .contact-phone-card p {
    color: #6e6e73;
}

.public-contact-apple .contact-hero {
    padding-top: 150px;
    padding-bottom: 76px;
}

.public-contact-apple .contact-office-card {
    border-radius: 32px;
}

.public-contact-apple .contact-office-address {
    border-top-color: rgba(0, 0, 0, 0.07);
}

.public-contact-apple .contact-phone-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.12), transparent 26rem),
        #ffffff;
}

.public-contact-apple .contact-phone-card .apple-primary-btn {
    margin-top: 28px;
}

.public-features-apple {
    overflow-x: hidden;
    background: #fbfbfd;
    color: #1d1d1f;
}

.features-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(420px, 0.97fr);
    gap: clamp(32px, 5vw, 78px);
    align-items: center;
    min-height: 860px;
    padding: 154px clamp(24px, 6vw, 96px) 86px;
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 12%, rgba(0, 113, 227, 0.16), transparent 29rem),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
}

.features-hero-copy {
    position: relative;
    z-index: 2;
}

.features-hero h1 {
    max-width: 880px;
    margin: 16px 0 0;
    color: #1d1d1f;
    font-size: clamp(3.8rem, 8.2vw, 8.2rem);
    font-weight: 930;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.features-hero p {
    max-width: 720px;
    margin: 28px 0 0;
    color: #6e6e73;
    font-size: clamp(1.1rem, 1.8vw, 1.42rem);
    line-height: 1.58;
}

.features-hero .apple-hero-actions {
    justify-content: flex-start;
}

.features-hero-device,
.features-browser-card,
.features-scrape-card,
.features-post-card,
.features-kanban-card,
.features-report-card,
.features-signal-stack {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 245, 247, 0.78)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 34px 100px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(26px);
}

.features-hero-device {
    min-height: 520px;
    padding: 22px;
    transform: rotate(-1deg);
}

.features-device-top,
.features-browser-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 18px;
    color: #6e6e73;
    font-size: 0.84rem;
    font-weight: 820;
}

.features-device-top span,
.features-browser-top span {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #d1d1d6;
}

.features-device-top strong,
.features-browser-top b {
    margin-left: auto;
    color: #1d1d1f;
}

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

.features-device-grid article {
    min-height: 190px;
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.82);
}

.features-device-grid small,
.features-result-grid small,
.features-metric-grid small,
.features-report-metrics small {
    display: block;
    color: #86868b;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-device-grid strong {
    display: block;
    margin-top: 18px;
    color: #1d1d1f;
    font-size: clamp(2rem, 3.7vw, 3.2rem);
    font-weight: 920;
    line-height: 1;
    letter-spacing: -0.05em;
}

.features-device-grid span {
    display: block;
    margin-top: 12px;
    color: #6e6e73;
}

.features-flow {
    display: grid;
    gap: 34px;
    padding: 72px clamp(20px, 5vw, 72px);
    background: #f5f5f7;
}

.features-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
    min-height: 640px;
    padding: clamp(28px, 5vw, 72px);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 38px;
    background:
        radial-gradient(circle at top left, rgba(0, 113, 227, 0.08), transparent 24rem),
        rgba(255, 255, 255, 0.86);
    box-shadow: 0 26px 88px rgba(0, 0, 0, 0.07);
}

.features-row-reverse {
    grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
}

.features-visual {
    min-width: 0;
}

.features-copy {
    max-width: 620px;
}

.features-row-reverse .features-copy {
    justify-self: end;
}

.features-copy h2 {
    margin: 14px 0 0;
    color: #1d1d1f;
    font-size: clamp(2.5rem, 5vw, 5.2rem);
    font-weight: 930;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.features-copy p {
    margin: 24px 0 0;
    color: #6e6e73;
    font-size: 1.12rem;
    line-height: 1.75;
}

.features-copy ul {
    display: grid;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.features-copy li {
    position: relative;
    padding-left: 28px;
    color: #515154;
    line-height: 1.65;
}

.features-copy li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #0071e3;
    box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.1);
}

.features-browser-card,
.features-scrape-card,
.features-post-card,
.features-kanban-card,
.features-report-card,
.features-signal-stack {
    padding: clamp(22px, 3.5vw, 34px);
}

.features-mini-toolbar {
    display: flex;
    gap: 10px;
    overflow: hidden;
    margin: 8px 0 18px;
}

.features-mini-toolbar strong,
.features-mini-toolbar em {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d1d1f;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}

.features-mini-toolbar em {
    color: #6e6e73;
    background: rgba(255, 255, 255, 0.58);
}

.features-mini-table {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    background: #ffffff;
}

.features-mini-table > div {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 0 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.features-mini-table > div:first-child {
    min-height: 52px;
    border-top: 0;
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-mini-table span {
    color: #515154;
}

.features-mini-table strong {
    color: #0071e3;
}

.features-scrape-card > span,
.features-post-card > span {
    display: inline-flex;
    color: #86868b;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-input-line {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.features-input-line b,
.features-input-line strong,
.features-post-card > strong {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    background: #ffffff;
    color: #1d1d1f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.features-result-grid,
.features-metric-grid,
.features-report-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.features-result-grid article,
.features-metric-grid article,
.features-report-metrics article {
    padding: 18px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
}

.features-result-grid strong,
.features-metric-grid b,
.features-report-metrics b {
    display: block;
    margin-top: 10px;
    color: #1d1d1f;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.features-post-card > strong {
    display: block;
    margin-top: 16px;
    color: #0071e3;
}

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

.features-kanban-card {
    display: grid;
    gap: 14px;
}

.features-kanban-card div {
    display: grid;
    gap: 7px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    background: #ffffff;
}

.features-kanban-card strong {
    color: #0071e3;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-kanban-card span {
    color: #1d1d1f;
    font-size: 1.38rem;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.features-kanban-card small {
    color: #6e6e73;
}

.features-report-head {
    display: grid;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.features-report-head span {
    color: #0071e3;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-report-head strong {
    color: #1d1d1f;
    font-size: 1.8rem;
    font-weight: 920;
    letter-spacing: -0.04em;
}

.features-report-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: #f5f5f7;
    color: #515154;
}

.features-report-line span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #34c759;
}

.features-signal-stack {
    display: grid;
    gap: 14px;
}

.features-signal-stack article {
    padding: 22px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 22px;
    background: #ffffff;
}

.features-signal-stack span {
    display: block;
    color: #86868b;
    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-signal-stack strong {
    display: block;
    margin-top: 10px;
    color: #1d1d1f;
    font-size: 2rem;
    font-weight: 920;
    letter-spacing: -0.05em;
}

.features-signal-stack small {
    display: block;
    margin-top: 7px;
    color: #6e6e73;
}

.features-final-cta {
    padding: 112px 24px 128px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.14), transparent 27rem),
        #ffffff;
    text-align: center;
}

.features-final-cta h2 {
    max-width: 980px;
    margin: 14px auto 0;
    color: #1d1d1f;
    font-size: clamp(3rem, 7vw, 6.4rem);
    font-weight: 930;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.features-final-cta p {
    max-width: 720px;
    margin: 24px auto 30px;
    color: #6e6e73;
    font-size: 1.2rem;
    line-height: 1.65;
}

.social-profile-card .table-responsive {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.social-profile-table {
    min-width: 1880px;
}

.social-profile-table th,
.social-profile-table td {
    white-space: nowrap;
}

.social-profile-table .record-title {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.social-note-cell {
    max-width: 240px;
    color: var(--muted);
    white-space: normal !important;
}

.fake-audience-cell {
    display: grid;
    gap: 6px;
    min-width: 210px;
}

.fake-audience-badge {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.2;
}

.fake-audience-badge.success {
    border-color: rgba(47, 125, 79, 0.22);
    background: #eef8f2;
    color: #2f7d4f;
}

.fake-audience-badge.warning {
    border-color: rgba(161, 98, 7, 0.24);
    background: #fff7e6;
    color: #a16207;
}

.fake-audience-badge.danger {
    border-color: rgba(180, 35, 24, 0.22);
    background: #fff1f1;
    color: #b42318;
}

.fake-audience-cell small {
    display: block;
    max-width: 220px;
    color: var(--branda-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: normal;
}

.blog-hero {
    position: relative;
    min-height: 520px;
    padding: 170px clamp(24px, 6vw, 96px) 90px;
    overflow: hidden;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.blog-hero h1 {
    max-width: 860px;
    margin: 12px 0 0;
    color: #070a10;
    font-size: clamp(3.2rem, 8vw, 7.8rem);
    font-weight: 920;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.blog-hero p {
    max-width: 720px;
    margin: 28px 0 0;
    color: #475569;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.55;
}

.blog-grid-section {
    padding: 80px clamp(24px, 6vw, 96px) 110px;
}

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

.blog-card {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.blog-card-image {
    display: block;
    margin: -12px -12px 4px;
    overflow: hidden;
    border-radius: 18px;
    background: #eef2ff;
    aspect-ratio: 16 / 9;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.035);
}

.blog-card-meta,
.blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 760;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.blog-card-meta span {
    color: #2f55d4;
}

.blog-card h2 {
    margin: 24px 0 14px;
    color: #070a10;
    font-size: 1.65rem;
    font-weight: 880;
    line-height: 1.08;
}

.blog-card p {
    margin: 0;
    color: #475569;
    line-height: 1.7;
}

.blog-card-foot {
    margin-top: 28px;
    text-transform: none;
    letter-spacing: 0;
}

.blog-card-foot a,
.blog-back-link {
    color: #2f55d4;
    font-weight: 800;
    text-decoration: none;
}

.blog-article {
    max-width: 920px;
    margin: 0 auto;
    padding: 160px 24px 70px;
}

.blog-reading-shell {
    width: min(1240px, calc(100% - 48px));
    margin: 56px auto 96px;
    display: grid;
    grid-template-columns: minmax(0, 820px) 320px;
    gap: 48px;
    align-items: start;
}

.blog-reading-shell .blog-article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 36px;
}

.blog-article-premium {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.blog-article h1 {
    margin: 18px 0;
    color: #070a10;
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 920;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.blog-article-dek {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-size: 1.35rem;
    line-height: 1.6;
}

.blog-article-body {
    margin-top: 50px;
    color: #172033;
    font-size: 1.12rem;
    line-height: 1.9;
}

.blog-article-body p {
    margin-bottom: 26px;
}

.blog-article-body h2 {
    margin: 44px 0 16px;
    color: #070a10;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.blog-featured-figure,
.blog-inline-figure {
    margin: 40px 0;
}

.blog-featured-figure img,
.blog-inline-figure img {
    display: block;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    box-shadow: 0 20px 56px rgba(15, 23, 42, 0.1);
}

.blog-inline-figure figcaption {
    margin-top: 12px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.blog-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 8px;
}

.blog-tag-row span {
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
}

.blog-reading-aside {
    position: sticky;
    top: 24px;
}

.blog-reading-aside > div {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.blog-reading-aside a {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid #e2e8f0;
    color: #070a10;
    text-decoration: none;
}

.blog-reading-aside a strong {
    font-size: 0.95rem;
    line-height: 1.4;
}

.blog-reading-aside a small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-related {
    max-width: 1120px;
    margin: 0 auto 100px;
    padding: 0 24px;
}

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

.blog-related-list a {
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 18px;
    background: #ffffff;
    color: #070a10;
    text-decoration: none;
}

.blog-related-list small {
    display: block;
    margin-top: 6px;
    color: #64748b;
}

.public-blog-apple {
    background: #fbfbfd;
    color: #1d1d1f;
}

.public-blog-apple .blog-hero {
    min-height: auto;
    padding: 150px clamp(22px, 6vw, 96px) 76px;
    border-bottom: 0;
    background:
        radial-gradient(circle at 50% 10%, rgba(0, 113, 227, 0.14), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
    text-align: center;
}

.public-blog-apple .blog-hero h1 {
    max-width: 1030px;
    margin: 14px auto 0;
    color: #1d1d1f;
    font-size: clamp(3.6rem, 8vw, 7.2rem);
    font-weight: 930;
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.public-blog-apple .blog-hero p {
    max-width: 760px;
    margin: 28px auto 0;
    color: #6e6e73;
    font-size: clamp(1.08rem, 1.8vw, 1.38rem);
    line-height: 1.58;
}

.public-blog-apple .blog-grid-section {
    padding: 42px max(24px, calc((100vw - 1240px) / 2)) 104px;
    background: #f5f5f7;
}

.public-blog-apple .blog-grid {
    gap: 18px;
}

.public-blog-apple .blog-card {
    min-height: 390px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(245, 245, 247, 0.82)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 80px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px);
}

.public-blog-apple .blog-card:hover {
    border-color: rgba(0, 113, 227, 0.20);
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 36px 96px rgba(0, 0, 0, 0.11);
}

.public-blog-apple .blog-card-image {
    margin: -10px -10px 6px;
    border-radius: 24px;
    background: #e5e5ea;
}

.public-blog-apple .blog-card-meta,
.public-blog-apple .blog-card-foot {
    color: #86868b;
}

.public-blog-apple .blog-card-meta span,
.public-blog-apple .blog-card-foot a,
.public-blog-apple .blog-back-link {
    color: #0071e3;
}

.public-blog-apple .blog-card h2 {
    color: #1d1d1f;
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}

.public-blog-apple .blog-card p {
    color: #6e6e73;
}

.public-blog-apple .blog-reading-shell {
    width: min(1240px, calc(100% - 48px));
    margin: 112px auto 96px;
}

.public-blog-apple .blog-article-premium {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 34px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 245, 247, 0.82)),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 28px 90px rgba(0, 0, 0, 0.09);
}

.public-blog-apple .blog-article h1 {
    color: #1d1d1f;
    font-size: clamp(3rem, 6vw, 5.8rem);
    letter-spacing: -0.055em;
}

.public-blog-apple .blog-article-dek,
.public-blog-apple .blog-article-body,
.public-blog-apple .blog-article-body p {
    color: #515154;
}

.public-blog-apple .blog-article-body {
    font-size: 1.16rem;
}

.public-blog-apple .blog-article-body h2 {
    color: #1d1d1f;
}

.public-blog-apple .blog-tag-row span {
    border-color: rgba(0, 113, 227, 0.14);
    background: rgba(0, 113, 227, 0.06);
    color: #0071e3;
}

.public-blog-apple .blog-featured-figure img,
.public-blog-apple .blog-inline-figure img {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 26px 72px rgba(0, 0, 0, 0.11);
}

.public-blog-apple .blog-inline-figure figcaption {
    color: #86868b;
}

.public-blog-apple .blog-reading-aside > div {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 24px 70px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(24px);
}

.public-blog-apple .blog-reading-aside a {
    border-top-color: rgba(0, 0, 0, 0.07);
    color: #1d1d1f;
}

.public-blog-apple .blog-reading-aside a:hover strong {
    color: #0071e3;
}

.public-blog-apple .blog-reading-aside a small {
    color: #86868b;
}

.public-apple-footer {
    background: #f5f7fb;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    color: #667085;
    padding: 42px clamp(22px, 5vw, 72px) 26px;
}

.public-apple-footer-inner {
    align-items: flex-start;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1180px;
}

.public-footer-brand {
    align-items: center;
    color: #111827;
    display: inline-flex;
    gap: 10px;
    text-decoration: none;
}

.public-footer-brand > span:first-child {
    align-items: center;
    background: #111827;
    border-radius: 12px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.public-apple-footer p {
    font-size: 14px;
    line-height: 1.6;
    margin: 14px 0 0;
    max-width: 390px;
}

.public-apple-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    justify-content: flex-end;
    max-width: 560px;
}

.public-apple-footer nav a {
    color: #475467;
    font-weight: 700;
    text-decoration: none;
}

.public-apple-footer nav a:hover {
    color: #111827;
}

.public-apple-footer-bottom {
    align-items: center;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    justify-content: space-between;
    margin: 32px auto 0;
    max-width: 1180px;
    padding-top: 20px;
}

.public-privacy-apple {
    background: #f5f7fb;
}

.privacy-hero {
    align-items: center;
    display: grid;
    min-height: 560px;
    overflow: hidden;
    padding: 150px clamp(24px, 7vw, 110px) 90px;
    position: relative;
}

.privacy-hero::after {
    background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, 0.12), transparent 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.privacy-hero-copy {
    margin: 0 auto;
    max-width: 920px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.privacy-hero h1 {
    color: #101828;
    font-size: clamp(48px, 7vw, 92px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 12px 0 22px;
}

.privacy-hero p {
    color: #667085;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 760px;
}

.privacy-hero small {
    color: #98a2b3;
    display: inline-flex;
    font-weight: 700;
    margin-top: 28px;
}

.privacy-shell {
    align-items: start;
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1180px;
    padding: 0 clamp(22px, 5vw, 72px) 88px;
}

.privacy-summary-card,
.privacy-content-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.privacy-summary-card {
    padding: 28px;
    position: sticky;
    top: 110px;
}

.privacy-summary-card span {
    color: #667085;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.privacy-summary-card strong {
    color: #101828;
    display: block;
    font-size: 24px;
    line-height: 1.25;
}

.privacy-summary-card p {
    color: #667085;
    line-height: 1.6;
    margin: 18px 0 0;
}

.privacy-content-card {
    padding: clamp(28px, 4vw, 54px);
}

.privacy-content-card section + section {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin-top: 34px;
    padding-top: 34px;
}

.privacy-content-card h2 {
    color: #101828;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 14px;
}

.privacy-content-card p {
    color: #667085;
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 14px;
}

.info-hero {
    min-height: 520px;
}

.info-summary-card .apple-link-btn {
    display: inline-flex;
    margin-top: 22px;
}

.info-intro {
    margin-bottom: 32px;
}

.info-intro > span {
    color: #0071e3;
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.info-intro h2 {
    margin-bottom: 12px;
}

.billing-faq-list {
    border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.billing-faq-list details {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.billing-faq-list summary {
    align-items: center;
    color: #101828;
    cursor: pointer;
    display: flex;
    font-size: 1.08rem;
    font-weight: 760;
    gap: 16px;
    justify-content: space-between;
    list-style: none;
    padding: 22px 2px;
}

.billing-faq-list summary::-webkit-details-marker {
    display: none;
}

.billing-faq-list summary::after {
    align-items: center;
    background: #f2f4f7;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    color: #475467;
    content: "+";
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 1.25rem;
    height: 30px;
    justify-content: center;
    line-height: 1;
}

.billing-faq-list details[open] summary::after {
    content: "-";
}

.billing-faq-list details p {
    margin: -4px 48px 22px 2px;
}

.info-contact-band {
    align-items: center;
    background: #101828;
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 40px;
    padding: 24px;
}

.info-contact-band div {
    display: grid;
    gap: 4px;
}

.info-contact-band strong {
    font-size: 1.08rem;
}

.info-contact-band span {
    color: rgba(255, 255, 255, 0.68);
}

.info-contact-band .apple-primary-btn {
    flex: 0 0 auto;
}

.security-control-strip {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 44px;
}

.security-control-strip div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 0 20px 28px;
}

.security-control-strip div:first-child {
    padding-left: 0;
}

.security-control-strip div + div {
    border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.security-control-strip span {
    color: #0071e3;
    font-size: 0.75rem;
    font-weight: 800;
}

.security-control-strip strong {
    color: #101828;
    font-size: 1rem;
}

.security-control-strip small {
    color: #667085;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .info-hero {
        min-height: auto;
    }

    .billing-faq-list summary {
        align-items: flex-start;
        font-size: 1rem;
    }

    .billing-faq-list details p {
        margin-right: 2px;
    }

    .info-contact-band {
        align-items: stretch;
        flex-direction: column;
    }

    .info-contact-band .apple-primary-btn {
        justify-content: center;
        width: 100%;
    }

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

    .security-control-strip div,
    .security-control-strip div:first-child {
        padding: 18px 0;
    }

    .security-control-strip div + div {
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.1);
    }
}

.demo-workspace-page {
    background: #eef2f7;
    color: #101828;
}

.demo-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
}

.demo-sidebar {
    background: #0b1020;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100vh;
    padding: 28px 22px;
    position: sticky;
    top: 0;
}

.demo-brand {
    align-items: center;
    color: #fff;
    display: flex;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.demo-brand > span:first-child {
    align-items: center;
    background: #fff;
    border-radius: 14px;
    color: #0b1020;
    display: flex;
    font-weight: 900;
    grid-row: span 2;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.demo-brand-lockup {
    color: #fff;
    min-width: 0;
}

.demo-brand-lockup .brand-name,
.demo-brand-lockup .brand-byline {
    color: #fff;
}

.demo-brand-lockup .brand-subtext {
    color: #98a2b3;
    font-size: 0.78rem;
    font-weight: 700;
}

.demo-workspace-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 18px;
}

.demo-workspace-card span,
.demo-sidebar-cta span {
    color: #98a2b3;
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.demo-workspace-card strong {
    display: block;
    font-size: 18px;
    margin-top: 8px;
}

.demo-workspace-card small {
    color: #cbd5e1;
    display: block;
    line-height: 1.5;
    margin-top: 8px;
}

.demo-sidebar nav {
    display: grid;
    gap: 8px;
}

.demo-sidebar nav a {
    border-radius: 14px;
    color: #cbd5e1;
    font-weight: 800;
    padding: 13px 14px;
    text-decoration: none;
}

.demo-sidebar nav a:hover,
.demo-sidebar nav a.active {
    background: #fff;
    color: #101828;
}

.demo-sidebar-cta {
    margin-top: auto;
}

.demo-sidebar-cta a {
    align-items: center;
    background: #fff;
    border-radius: 16px;
    color: #101828;
    display: flex;
    font-weight: 900;
    justify-content: center;
    margin-top: 12px;
    min-height: 48px;
    text-decoration: none;
}

.demo-main {
    min-width: 0;
    padding: 24px clamp(22px, 4vw, 56px) 70px;
}

.demo-topbar {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 32px;
}

.demo-search {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    display: flex;
    min-height: 58px;
    padding: 0 18px;
}

.demo-search span {
    color: #3f5bd5;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    margin-right: 14px;
    text-transform: uppercase;
}

.demo-search input {
    background: transparent;
    border: 0;
    color: #667085;
    font-size: 16px;
    outline: 0;
    width: 100%;
}

.demo-actions {
    display: flex;
    gap: 10px;
}

.demo-hero {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 340px;
    margin-bottom: 24px;
}

.demo-hero > div:first-child,
.demo-live-card,
.demo-panel,
.demo-final-cta {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.demo-hero > div:first-child {
    min-width: 0;
    overflow: hidden;
    padding: clamp(32px, 5vw, 64px);
}

.demo-hero h1 {
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.98;
    margin: 10px 0 22px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.demo-hero p {
    color: #667085;
    font-size: 20px;
    line-height: 1.6;
    max-width: 760px;
}

.demo-live-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

.demo-live-card span,
.demo-table-head span,
.demo-section-head .apple-eyebrow {
    color: #667085;
}

.demo-live-card strong {
    font-size: 30px;
    line-height: 1.1;
}

.demo-live-card p {
    color: #667085;
    line-height: 1.6;
    margin: 14px 0 0;
}

.demo-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

.demo-metrics article {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-right: 0;
    padding: 24px;
}

.demo-metrics article:first-child {
    border-radius: 24px 0 0 0;
}

.demo-metrics article:nth-child(4) {
    border-radius: 0 24px 0 0;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.demo-metrics article:nth-child(5) {
    border-radius: 0 0 0 24px;
}

.demo-metrics article:last-child {
    border-radius: 0 0 24px 0;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.demo-metrics span,
.demo-metrics small {
    color: #667085;
    display: block;
    font-weight: 700;
}

.demo-metrics strong {
    display: block;
    font-size: 30px;
    font-weight: 900;
    margin: 8px 0 3px;
}

.demo-panel {
    margin-bottom: 24px;
    overflow: hidden;
}

.demo-section-head {
    align-items: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    justify-content: space-between;
    padding: 30px;
}

.demo-section-head h2 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    margin: 6px 0 0;
}

.demo-pill {
    background: #eef2ff;
    border-radius: 999px;
    color: #3f5bd5;
    font-weight: 900;
    padding: 10px 14px;
}

.demo-table {
    overflow-x: auto;
}

.demo-table-row {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr 0.6fr 0.7fr 0.7fr;
    min-width: 980px;
    padding: 18px 30px;
}

.demo-table-row + .demo-table-row {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.demo-table-row:hover {
    background: #f8fafc;
}

.demo-table-head {
    background: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.demo-table-row strong {
    color: #3154d4;
}

.demo-table-row b {
    background: #ecfdf3;
    border-radius: 999px;
    color: #087443;
    display: inline-flex;
    font-size: 13px;
    justify-content: center;
    padding: 7px 10px;
}

.demo-kanban {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(190px, 1fr));
    overflow-x: auto;
    padding: 30px;
}

.demo-kanban article,
.demo-report-grid article {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    padding: 18px;
}

.demo-kanban article span {
    color: #3f5bd5;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.demo-kanban article strong {
    display: block;
    font-size: 18px;
    line-height: 1.25;
}

.demo-kanban article p,
.demo-kanban article small {
    color: #667085;
}

.demo-progress {
    background: #e4e7ec;
    border-radius: 999px;
    height: 8px;
    margin: 18px 0 10px;
    overflow: hidden;
}

.demo-progress span {
    background: linear-gradient(90deg, #3f5bd5, #7c3aed);
    display: block;
    height: 100%;
}

.demo-report-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 30px;
}

.demo-report-grid article > span {
    color: #667085;
    font-weight: 800;
}

.demo-report-grid article > strong {
    display: block;
    font-size: 26px;
    margin: 10px 0 18px;
}

.demo-report-grid article div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}

.demo-report-grid small {
    color: #667085;
}

.demo-report-grid b {
    text-align: right;
}

.demo-final-cta {
    padding: clamp(34px, 5vw, 64px);
    text-align: center;
}

.demo-final-cta h2 {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin: 10px auto 24px;
    max-width: 900px;
}

.auth-form-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
}

.auth-form-meta a {
    color: #3154d4;
    font-weight: 800;
    text-decoration: none;
}

.auth-form-meta a:hover {
    color: #1d3db6;
    text-decoration: underline;
}

.subscription-page-header {
    align-items: flex-end;
}

.subscription-boost-banner {
    align-items: center;
    background: linear-gradient(110deg, #f7f9ff 0%, #ffffff 72%);
    border: 1px solid rgba(49, 84, 212, 0.2);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin-bottom: 20px;
    padding: 18px 20px;
}

.subscription-boost-icon {
    align-items: center;
    background: #3154d4;
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-size: 17px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.subscription-boost-banner strong,
.subscription-boost-banner p {
    display: block;
}

.subscription-boost-banner strong {
    color: #101828;
    font-size: 17px;
    margin: 3px 0 2px;
}

.subscription-boost-banner p {
    color: #667085;
    margin: 0;
}

.subscription-header-actions {
    display: flex;
    gap: 10px;
}

.subscription-current-card {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
    padding: 28px;
}

.subscription-current-main h2 {
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    margin: 10px 0;
}

.subscription-current-main p {
    color: #667085;
    font-size: 17px;
    margin: 0;
}

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

.subscription-current-grid article {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 18px;
}

.subscription-current-grid span,
.subscription-current-grid small {
    color: #667085;
    display: block;
    font-weight: 700;
}

.subscription-current-grid strong {
    display: block;
    font-size: 22px;
    font-weight: 900;
    margin: 8px 0 2px;
}

.subscription-usage-grid {
    display: grid;
    gap: 14px;
}

.subscription-billing-table thead th {
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscription-billing-table tbody tr:hover {
    background: #fbfcff;
}

.subscription-invoice-document {
    margin: 0 auto;
    max-width: 980px;
    padding: clamp(24px, 4vw, 48px);
}

.subscription-invoice-head {
    align-items: flex-start;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    justify-content: space-between;
    padding-bottom: 28px;
}

.subscription-invoice-head .brand-mark {
    display: inline-flex;
    margin-bottom: 18px;
}

.subscription-invoice-head h2 {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0;
}

.subscription-invoice-head p {
    color: #667085;
    margin: 8px 0 0;
}

.subscription-invoice-meta {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

.subscription-invoice-meta article {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 16px;
}

.subscription-invoice-meta span {
    color: #667085;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.subscription-invoice-meta strong {
    color: #101828;
}

.subscription-invoice-payments {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    margin-top: 34px;
    padding-top: 28px;
}

.subscription-invoice-payments h3 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 16px;
}

.blog-editor-panel {
    padding: 24px;
}

.blog-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.blog-title-input {
    min-height: 64px;
    font-size: 1.75rem;
    font-weight: 850;
    letter-spacing: 0;
}

.blog-body-editor {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.75;
    resize: vertical;
}

.blog-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.blog-wysiwyg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.blog-editor-toolbar div {
    display: grid;
    gap: 4px;
}

.blog-editor-toolbar strong,
.blog-editor-card .form-label {
    color: #0f172a;
    font-weight: 850;
}

.blog-editor-toolbar span,
.blog-editor-card small {
    color: #64748b;
}

.blog-wysiwyg-editor {
    min-height: 560px;
    padding: 34px;
    color: #111827;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
        radial-gradient(circle at top right, rgba(63, 91, 214, 0.08), transparent 34%);
    border: 1px solid #dbe3ef;
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 60px rgba(15, 23, 42, 0.06);
    outline: none;
}

.blog-wysiwyg-editor:focus {
    border-color: #9fb1d8;
    box-shadow: 0 0 0 4px rgba(63, 91, 214, 0.1), 0 24px 60px rgba(15, 23, 42, 0.08);
}

.blog-wysiwyg-editor:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-size: 1.05rem;
}

.blog-wysiwyg-block {
    max-width: 760px;
    margin: 0 auto 18px;
    outline: none;
}

.blog-wysiwyg-editor p.blog-wysiwyg-block {
    color: #334155;
    font-size: 1.08rem;
    line-height: 1.85;
}

.blog-wysiwyg-editor h2.blog-wysiwyg-block {
    margin-top: 34px;
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.blog-wysiwyg-image {
    max-width: 760px;
    margin: 30px auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.blog-wysiwyg-image img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.blog-wysiwyg-image figcaption {
    padding: 12px 16px;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 650;
    background: #f8fafc;
}

.blog-editor-side {
    display: grid;
    gap: 16px;
}

.blog-editor-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
}

.blog-featured-preview {
    display: grid;
    place-items: center;
    min-height: 160px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #ffffff;
    color: #64748b;
}

.blog-featured-preview img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

@media (max-width: 1050px) {
    .public-home-apple .public-nav {
        gap: 18px;
    }

    .apple-hero {
        padding-top: 126px;
    }

    .apple-product-window {
        transform: none;
    }

    .apple-product-layout,
    .apple-feature-split,
    .apple-scrape-showcase,
    .apple-post-metric-board {
        grid-template-columns: 1fr;
    }

    .apple-product-layout aside {
        display: none;
    }

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

    .auth-screen {
        grid-template-columns: 1fr;
    }

    .auth-brand-panel,
    .auth-form-panel {
        min-height: auto;
    }

    .auth-brand-panel {
        padding: 32px;
    }

    .auth-brand-copy h1 {
        max-width: 760px;
    }

    .public-hero,
    .public-workflow {
        grid-template-columns: 1fr;
    }

    .public-product-frame {
        max-width: 760px;
    }

    .public-matrix-grid,
    .public-proof-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-hero {
        grid-template-columns: 1fr;
    }

    .features-hero,
    .features-row,
    .features-row-reverse {
        grid-template-columns: 1fr;
    }

    .features-row-reverse .features-copy {
        justify-self: start;
    }

    .features-hero {
        min-height: auto;
    }

    .features-hero-device {
        transform: none;
    }

    .contact-hero {
        grid-template-columns: 1fr;
    }

    .blog-grid,
    .blog-related-list {
        grid-template-columns: 1fr 1fr;
    }

    .blog-reading-shell,
    .blog-editor-grid {
        grid-template-columns: 1fr;
    }

    .blog-reading-aside {
        position: static;
    }

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

    .contact-office-grid {
        grid-template-columns: 1fr;
    }

    .public-matrix-priority {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .subscription-boost-banner {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .subscription-boost-banner .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .public-home-apple .public-nav {
        position: fixed;
        align-items: center;
        width: calc(100% - 20px);
        min-height: 62px;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .public-home-apple .public-brand {
        gap: 8px;
        min-width: 0;
    }

    .public-home-apple .public-brand > span:first-child {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 11px;
    }

    .public-home-apple .public-brand .brand-lockup {
        min-width: 0;
        max-width: 158px;
    }

    .public-home-apple .public-brand .brand-name {
        display: block;
        overflow: hidden;
        font-size: .91rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-home-apple .public-brand .brand-byline {
        display: block;
        overflow: hidden;
        font-size: .59rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-home-apple .public-nav-links {
        justify-content: flex-end;
        gap: 6px;
    }

    .public-home-apple .public-nav-links a:not(.public-nav-login):not(.public-nav-cta) {
        display: none;
    }

    .public-home-apple .public-nav-links .public-nav-login {
        min-height: 36px;
        padding: 0 8px;
        font-size: .78rem;
    }

    .public-home-apple .public-nav-links .public-nav-cta {
        min-height: 38px;
        padding: 0 12px;
        font-size: .78rem;
        line-height: 1.05;
        white-space: nowrap;
    }

    @media (max-width: 430px) {
        .public-home-apple .public-brand .brand-lockup {
            max-width: 145px;
        }

        .public-home-apple .public-nav-links .public-nav-login {
            display: none;
        }

        .public-home-apple .public-nav-links .public-nav-cta {
            min-width: 78px;
            padding: 0 11px;
            font-size: 0;
        }

        .public-home-apple .public-nav-links .public-nav-cta::after {
            content: 'Try free';
            font-size: .78rem;
            line-height: 1;
        }
    }

    .apple-hero {
        padding: 112px 18px 64px;
    }

    .apple-client-proof {
        width: calc(100% - 36px);
        padding: 52px 0 48px;
    }

    .apple-client-proof-copy {
        margin-bottom: 28px;
    }

    .apple-client-proof-copy h2 {
        font-size: 1.75rem;
        line-height: 1.12;
    }

    .apple-client-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
    }

    .apple-client-logo {
        height: 78px;
        padding: 10px 12px;
    }

    .apple-client-logo:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 6px);
        justify-self: center;
    }

    .apple-client-logo img {
        max-height: 46px;
        filter: grayscale(.55);
        opacity: 0.82;
    }

    .apple-client-logo-pusako img,
    .apple-client-logo-sohoney img {
        max-height: 58px;
    }

    .apple-hero h1,
    .apple-section h2,
    .apple-final-cta h2 {
        letter-spacing: -0.04em;
    }

    .apple-hero-actions {
        flex-direction: column;
    }

    .apple-primary-btn,
    .apple-link-btn {
        width: 100%;
        max-width: 320px;
    }

    .apple-product-stage {
        margin-top: 44px;
    }

    .apple-product-layout section {
        padding: 18px;
    }

    .apple-metric-row,
    .apple-workflow-grid,
    .apple-signal-grid,
    .apple-mini-record div {
        grid-template-columns: 1fr;
    }

    .apple-table {
        overflow-x: auto;
    }

    .apple-table > div {
        min-width: 520px;
    }

    .apple-section,
    .apple-workflow,
    .apple-intelligence,
    .apple-scrape-section,
    .apple-post-scrape {
        width: calc(100% - 28px);
        padding: 64px 0;
    }

    .apple-scrape-showcase,
    .apple-post-metric-board {
        margin-top: 28px;
    }

    .apple-input-demo,
    .apple-post-url-card {
        min-height: 240px;
        padding: 24px;
        border-radius: 24px;
    }

    .apple-scrape-results,
    .apple-post-metric-grid {
        grid-template-columns: 1fr;
        border-radius: 24px;
    }

    .apple-feature-card,
    .apple-glass-panel,
    .apple-workflow-grid article {
        border-radius: 24px;
    }

    .apple-final-cta {
        padding: 76px 18px 92px;
    }

    .public-blog-apple .blog-hero {
        padding: 112px 18px 58px;
    }

    .public-blog-apple .blog-hero h1,
    .public-blog-apple .blog-article h1 {
        letter-spacing: -0.04em;
    }

    .public-blog-apple .blog-grid-section {
        padding: 28px 14px 76px;
    }

    .public-blog-apple .blog-card {
        border-radius: 24px;
    }

    .public-blog-apple .blog-reading-shell {
        width: calc(100% - 28px);
        margin-top: 104px;
    }

    .public-blog-apple .blog-article-premium {
        border-radius: 24px;
    }

    .auth-brand-panel {
        gap: 28px;
        padding: 24px;
    }

    .auth-brand-copy h1 {
        letter-spacing: -0.035em;
    }

    .auth-proof-grid {
        grid-template-columns: 1fr;
    }

    .auth-onboarding-list div {
        grid-template-columns: 1fr;
    }

    .auth-form-panel {
        padding: 18px;
    }

    .auth-form-card {
        border-radius: 22px;
    }

    .auth-switch {
        align-items: center;
        flex-direction: column;
    }

    .public-nav {
        position: absolute;
        align-items: flex-start;
    }

    .public-nav-links {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .public-nav-links a:not(.public-nav-login):not(.public-nav-cta) {
        display: none;
    }

    .public-hero {
        padding-top: 128px;
    }

    .public-product-body {
        grid-template-columns: 1fr;
    }

    .public-product-body aside {
        display: none;
    }

    .public-stats,
    .public-matrix-grid,
    .public-proof-metrics {
        grid-template-columns: 1fr;
    }

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

    .features-hero {
        padding: 112px 18px 58px;
    }

    .features-hero h1,
    .features-copy h2,
    .features-final-cta h2 {
        letter-spacing: -0.04em;
    }

    .features-flow {
        gap: 18px;
        padding: 28px 14px 64px;
    }

    .features-row {
        min-height: auto;
        padding: 24px;
        border-radius: 26px;
    }

    .features-hero-device,
    .features-browser-card,
    .features-scrape-card,
    .features-post-card,
    .features-kanban-card,
    .features-report-card,
    .features-signal-stack {
        border-radius: 24px;
    }

    .features-device-grid,
    .features-result-grid,
    .features-metric-grid,
    .features-report-metrics,
    .features-input-line {
        grid-template-columns: 1fr;
    }

    .features-mini-table {
        overflow-x: auto;
    }

    .features-mini-table > div {
        min-width: 620px;
    }

    .features-final-cta {
        padding: 76px 18px 92px;
    }

    .blog-grid,
    .blog-related-list {
        grid-template-columns: 1fr;
    }

    .blog-card {
        min-height: auto;
    }

    .blog-reading-shell {
        width: calc(100% - 28px);
        margin-top: 110px;
        gap: 22px;
    }

    .blog-reading-shell .blog-article {
        padding: 24px;
    }

    .blog-article h1 {
        letter-spacing: -0.03em;
    }

    .blog-editor-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .pricing-card {
        min-height: auto;
    }

    .pricing-compare-table {
        overflow-x: auto;
    }

    .pricing-compare-row {
        min-width: 820px;
    }

    .public-matrix-priority {
        grid-column: auto;
    }

    .public-table {
        overflow-x: auto;
    }

    .public-table > div {
        min-width: 560px;
    }

    .public-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .public-workflow-copy {
        position: static;
    }
}

@media (max-width: 1199.98px) {
    .subscription-current-card {
        grid-template-columns: 1fr;
    }

    .demo-shell {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .demo-hero {
        grid-template-columns: 1fr;
    }

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

    .demo-metrics article,
    .demo-metrics article:nth-child(4) {
        border-radius: 0;
        border-right: 1px solid rgba(15, 23, 42, 0.08);
    }

    .demo-metrics article:first-child {
        border-radius: 24px 0 0 0;
    }

    .demo-metrics article:nth-child(2) {
        border-radius: 0 24px 0 0;
    }

    .demo-metrics article:nth-child(7) {
        border-radius: 0 0 0 24px;
    }

    .demo-metrics article:last-child {
        border-radius: 0 0 24px 0;
    }

    .demo-report-grid {
        grid-template-columns: 1fr;
    }

    .privacy-shell {
        grid-template-columns: 1fr;
    }

    .privacy-summary-card {
        position: static;
    }

    .founder-shell {
        grid-template-columns: 220px minmax(0, 1fr);
    }

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

    .founder-topbar {
        display: block;
    }

    .founder-actions {
        justify-content: flex-start;
        margin-top: 18px;
    }

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

    .founder-apify-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .founder-grid,
    .founder-grid-even {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .subscription-page-header,
    .subscription-invoice-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .subscription-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .subscription-current-grid,
    .subscription-invoice-meta {
        grid-template-columns: 1fr;
    }

    .demo-shell {
        display: block;
    }

    .demo-sidebar {
        height: auto;
        position: relative;
    }

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

    .demo-main {
        padding: 18px;
    }

    .demo-topbar {
        grid-template-columns: 1fr;
    }

    .demo-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .demo-hero h1 {
        font-size: 44px;
    }

    .demo-metrics {
        grid-template-columns: 1fr;
    }

    .demo-metrics article,
    .demo-metrics article:first-child,
    .demo-metrics article:nth-child(2),
    .demo-metrics article:nth-child(7),
    .demo-metrics article:last-child {
        border-radius: 0;
    }

    .demo-metrics article:first-child {
        border-radius: 22px 22px 0 0;
    }

    .demo-metrics article:last-child {
        border-radius: 0 0 22px 22px;
    }

    .demo-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .public-apple-footer-inner,
    .public-apple-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .public-apple-footer nav {
        justify-content: flex-start;
    }

    .privacy-hero {
        min-height: auto;
        padding: 128px 22px 64px;
    }

    .privacy-hero h1 {
        font-size: 44px;
    }

    .privacy-shell {
        padding: 0 18px 64px;
    }

    .privacy-summary-card,
    .privacy-content-card {
        border-radius: 22px;
    }

    .founder-shell {
        display: block;
    }

    .founder-sidebar {
        position: relative;
        height: auto;
    }

    .founder-main {
        padding: 16px;
    }

    .founder-hero,
    .founder-metric-grid {
        display: block;
    }

    .founder-exec-grid,
    .founder-chart-grid,
    .founder-table-grid,
    .founder-apify-tabs {
        grid-template-columns: 1fr;
    }

    .founder-actions {
        display: grid;
    }

    .founder-ghost-btn {
        min-height: 42px;
    }

    .founder-range-card {
        width: 100%;
        margin-top: 16px;
    }

    .founder-metric-grid article {
        margin-bottom: 12px;
    }

    .founder-signal-grid {
        grid-template-columns: 1fr;
    }
}

/* Sidebar scrolling polish: keep navigation reachable as the menu grows. */
@media (min-width: 992px) {
    .app-sidebar,
    .founder-sidebar {
        overflow: hidden;
    }

    .app-sidebar .app-brand,
    .founder-sidebar .app-brand,
    .workspace-switcher,
    .sidebar-foot {
        flex: 0 0 auto;
    }

    .app-sidebar .app-navlinks,
    .founder-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-right: 4px;
        scrollbar-width: thin;
        scrollbar-color: rgba(203, 213, 225, 0.42) transparent;
    }

    .app-sidebar .app-navlinks::-webkit-scrollbar,
    .founder-nav::-webkit-scrollbar {
        width: 6px;
    }

    .app-sidebar .app-navlinks::-webkit-scrollbar-track,
    .founder-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .app-sidebar .app-navlinks::-webkit-scrollbar-thumb,
    .founder-nav::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(203, 213, 225, 0.28);
    }

    .app-sidebar .app-navlinks:hover::-webkit-scrollbar-thumb,
    .founder-nav:hover::-webkit-scrollbar-thumb {
        background: rgba(203, 213, 225, 0.48);
    }
}

@media (max-width: 991.98px) {
    .app-sidebar,
    .founder-sidebar {
        overflow: visible;
    }

    .app-sidebar .app-navlinks,
    .founder-nav {
        max-height: none;
        overflow-y: visible;
    }
}

.payment-proof-shell {
    display: grid;
    grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.12fr);
    gap: 24px;
    align-items: start;
}

.payment-proof-summary,
.payment-proof-upload {
    border: 1px solid var(--branda-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.payment-proof-summary {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.payment-bank-card {
    overflow: hidden;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.22), transparent 12rem),
        linear-gradient(135deg, #7f1d1d 0%, #b91c1c 52%, #e11d48 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(185, 28, 28, 0.22);
}

.payment-bank-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cimb-syariah-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cimb-symbol {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: #fff;
    color: #b91c1c;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.cimb-syariah-logo strong,
.cimb-syariah-logo small {
    display: block;
    line-height: 1.05;
}

.cimb-syariah-logo strong {
    font-size: 0.98rem;
    font-weight: 850;
}

.cimb-syariah-logo small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 740;
}

.payment-bank-detail {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.payment-bank-detail span,
.payment-total-card span,
.payment-proof-meta span {
    color: var(--branda-muted);
    font-size: var(--branda-font-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.payment-bank-detail > span {
    color: rgba(255, 255, 255, 0.72);
}

.payment-bank-detail > strong {
    font-size: 1.05rem;
}

.copyable-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin-top: 4px;
    padding: 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    text-align: left;
}

.copyable-account span {
    color: #fff;
    font-size: 1.32rem;
    font-weight: 880;
    letter-spacing: 0.02em;
}

.copyable-account small {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.84);
    font-weight: 800;
}

.payment-total-card,
.payment-proof-note {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--branda-border-soft);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.payment-total-card strong {
    color: var(--branda-ink);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.payment-total-card p,
.payment-proof-note span,
.payment-upload-head p,
.payment-existing-proof p {
    margin: 0;
    color: var(--branda-muted);
}

.payment-proof-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payment-proof-meta article {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--branda-border-soft);
    border-radius: 18px;
    background: #fff;
}

.payment-proof-meta strong {
    overflow-wrap: anywhere;
    color: var(--branda-ink);
    font-weight: 850;
}

.payment-proof-upload {
    padding: 26px;
}

.payment-upload-head {
    margin-bottom: 20px;
}

.payment-upload-head span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(49, 87, 213, 0.1);
    color: var(--branda-primary);
    font-size: var(--branda-font-xs);
    font-weight: 860;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.payment-upload-head h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 880;
    letter-spacing: -0.04em;
}

.payment-file-drop {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 210px;
    padding: 28px;
    border: 1.5px dashed rgba(49, 87, 213, 0.36);
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(49, 87, 213, 0.08), transparent 16rem),
        #f8fafc;
    color: var(--branda-ink);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.payment-file-drop:hover {
    border-color: rgba(49, 87, 213, 0.72);
    background: #fff;
    transform: translateY(-1px);
}

.payment-file-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.payment-file-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 18px;
    background: var(--branda-primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
}

.payment-file-drop strong {
    font-size: 1.05rem;
    font-weight: 850;
}

.payment-file-drop small,
.payment-file-name {
    color: var(--branda-muted);
}

.payment-file-name {
    margin-top: 12px;
    font-size: var(--branda-font-sm);
    font-weight: 740;
}

.payment-existing-proof {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(217, 119, 6, 0.2);
    border-radius: 16px;
    background: rgba(255, 251, 235, 0.72);
}

.payment-proof-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width: 1199.98px) {
    .payment-proof-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .payment-proof-summary,
    .payment-proof-upload {
        padding: 14px;
        border-radius: 18px;
    }

    .payment-bank-card-top,
    .copyable-account,
    .payment-proof-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-proof-meta {
        grid-template-columns: 1fr;
    }
}

/* Payment proof refinement: clearer state, calmer spacing, no cramped cards. */
.payment-proof-shell {
    grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 1fr);
}

.payment-proof-summary,
.payment-proof-upload {
    align-self: start;
}

.payment-total-card {
    gap: 10px;
    padding: 20px;
}

.payment-total-card strong {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    font-size: clamp(2rem, 3.2vw, 2.65rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.payment-proof-meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
}

.payment-proof-meta article {
    min-height: 112px;
}

.payment-proof-meta article:nth-child(3) {
    grid-column: 1 / -1;
    min-height: auto;
}

.payment-proof-meta article:nth-child(3) strong {
    font-size: 1rem;
}

.payment-status-pill {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}

.payment-status-pill i {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 900;
}

.payment-status-pill.status-pending {
    border: 1px solid rgba(217, 119, 6, 0.24);
    background: #fffbeb;
    color: #92400e;
}

.payment-status-pill.status-pending i {
    background: #f59e0b;
    color: #fff;
}

.payment-status-pill.status-waiting_confirmation {
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: #eff6ff;
    color: #1d4ed8;
}

.payment-status-pill.status-waiting_confirmation i {
    background: #2563eb;
    color: #fff;
}

.payment-status-pill.status-successful {
    border: 1px solid rgba(22, 163, 74, 0.24);
    background: #ecfdf3;
    color: #15803d;
}

.payment-status-pill.status-successful i {
    background: #16a34a;
    color: #fff;
}

.payment-status-pill.status-failed,
.payment-status-pill.status-cancelled {
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: #fef2f2;
    color: #b91c1c;
}

.payment-status-pill.status-failed i,
.payment-status-pill.status-cancelled i {
    background: #dc2626;
    color: #fff;
}

.payment-status-pill.status-refunded {
    border: 1px solid rgba(100, 116, 139, 0.22);
    background: #f8fafc;
    color: #475569;
}

.payment-status-pill.status-refunded i {
    background: #64748b;
    color: #fff;
}

.payment-file-icon {
    font-size: 0.86rem;
    letter-spacing: 0.04em;
}

.payment-proof-note {
    background: #ffffff;
}

.payment-proof-note strong {
    color: var(--branda-ink);
}

.payment-proof-note span {
    font-size: 0.94rem;
    line-height: 1.65;
}

@media (max-width: 1199.98px) {
    .payment-proof-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .payment-proof-meta {
        grid-template-columns: 1fr;
    }

    .payment-proof-meta article:nth-child(3) {
        grid-column: auto;
    }

    .payment-total-card strong {
        font-size: clamp(1.8rem, 12vw, 2.35rem);
    }
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    background: rgba(242, 244, 247, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(15, 23, 42, 0.05);
}

.language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #64748b;
    text-decoration: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.language-switcher a:hover {
    transform: translateY(-1px);
}

.language-flag {
    display: block;
    width: 22px;
    height: 15px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.language-name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.language-switcher a:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.72);
}

.language-switcher a.active {
    color: #111827;
    border-color: rgba(148, 163, 184, 0.24);
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}

.app-language-switcher,
.founder-language-switcher {
    width: 100%;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

.app-topbar .app-language-switcher {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 3px;
    background: #f8fafc;
    border-color: #d8dee8;
    box-shadow: none;
}

.app-topbar .app-language-switcher a {
    color: #667085;
}

.app-topbar .app-language-switcher a:hover {
    color: #111827;
    background: #e9eef7;
}

.app-topbar .app-language-switcher a.active {
    color: #111827;
    border-color: rgba(148, 163, 184, 0.24);
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.11);
}

.mobile-nav-toggle,
.mobile-topbar-brand,
.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1100;
        display: flex;
        width: min(320px, 86vw);
        height: 100vh;
        min-height: 100vh;
        padding: 22px 18px;
        border-right: 1px solid rgba(255, 255, 255, 0.10);
        border-bottom: 0;
        box-shadow: 24px 0 70px rgba(15, 23, 42, 0.28);
        transform: translateX(-105%);
        transition: transform 220ms ease;
        will-change: transform;
    }

    .app-sidebar .app-brand {
        display: inline-flex;
    }

    .app-sidebar .app-navlinks {
        display: grid;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 2px 4px 8px 0;
    }

    .app-sidebar .app-navlink {
        min-width: 0;
        min-height: 48px;
        padding: 9px 10px;
    }

    .app-sidebar .app-navlink small {
        display: block;
    }

    .sidebar-foot {
        display: grid;
        grid-template-columns: 1fr;
        flex: 0 0 auto;
    }

    .app-logout-btn {
        width: 100% !important;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
        min-width: 88px;
        height: 42px;
        padding: 0 12px;
        border: 1px solid #d8dee8;
        border-radius: 13px;
        background: rgba(255, 255, 255, 0.9);
        color: #111827;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        cursor: pointer;
    }

    .mobile-nav-icon {
        display: inline-flex;
        flex-direction: column;
        gap: 3px;
        justify-content: center;
    }

    .mobile-nav-icon i {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-nav-label {
        color: #344054;
        font-size: 0.82rem;
        font-weight: 800;
    }

    .mobile-topbar-brand {
        align-items: center;
        gap: 9px;
        min-width: 0;
        color: #111827;
        text-decoration: none;
    }

    .mobile-topbar-brand .brand-mark {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        background: #111827;
        color: #ffffff;
    }

    .mobile-topbar-brand-lockup {
        color: #111827;
        min-width: 0;
    }

    .mobile-topbar-brand-lockup .brand-name {
        font-size: 0.98rem;
    }

    .mobile-topbar-brand-lockup .brand-byline {
        font-size: 0.62rem;
    }

    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(15, 23, 42, 0.34);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
    }

    body.app-nav-open {
        overflow: hidden;
    }

    body.app-nav-open .app-sidebar {
        transform: translateX(0);
    }

    body.app-nav-open .mobile-nav-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    body.app-nav-open .mobile-nav-icon i:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    body.app-nav-open .mobile-nav-icon i:nth-child(2) {
        opacity: 0;
    }

    body.app-nav-open .mobile-nav-icon i:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }
}

@media (max-width: 767.98px) {
    .app-topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        grid-column: 1;
        grid-row: 1;
    }

    .mobile-topbar-brand {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }

    .topbar-search {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .topbar-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow: visible;
    }

    .topbar-actions .btn,
    .topbar-actions .app-language-switcher {
        flex: 0 0 auto;
    }
}

.app-language-switcher a,
.founder-language-switcher a,
.demo-language-switcher a {
    color: rgba(255, 255, 255, 0.72);
}

.app-language-switcher a:hover,
.founder-language-switcher a:hover,
.demo-language-switcher a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}

.app-language-switcher a.active,
.founder-language-switcher a.active,
.demo-language-switcher a.active {
    color: #0f172a;
    background: #ffffff;
}

.public-language-switcher {
    background: rgba(242, 244, 247, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 3px 10px rgba(15, 23, 42, 0.04);
}

.demo-language-switcher {
    width: 100%;
    justify-content: center;
    margin: 12px 0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

.auth-language-wrap {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
}

.auth-language-switcher {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
}

@media (max-width: 991.98px) {
    .public-language-switcher {
        order: 99;
    }
}
.post-word-cloud {
    min-height: 260px;
    width: 100%;
}

.compact-empty-state {
    min-height: 120px;
    padding: 24px;
}

.compact-empty-state span {
    display: block;
    margin-top: 4px;
}