:root {
    --app-bg: #f4f1ea;
    --app-surface: #fffdf8;
    --app-surface-strong: #f0eadf;
    --app-border: #d9cfbf;
    --app-ink: #1e2430;
    --app-muted: #5f6877;
    --app-accent: #0f766e;
    --app-accent-soft: #d7efe8;
    --app-danger: #9f1239;
    --app-warning: #9a6700;
}

body.app-shell {
    background:
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.10), transparent 28rem),
        linear-gradient(180deg, #fbf8f2 0%, var(--app-bg) 100%);
    color: var(--app-ink);
}

.app-header {
    border-bottom: 1px solid var(--app-border);
    background: rgba(255, 253, 248, 0.92);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 40;
}

.app-header-inner,
.app-body {
    display: grid;
    gap: 1.5rem;
}

.app-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 1rem 0;
}

.app-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-body {
    grid-template-columns: 16rem minmax(0, 1fr);
    padding: 2rem 0 3rem;
}

.app-sidebar,
.app-content > article,
.content-grid > article,
.metric-grid > article {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    box-shadow: 0 18px 40px rgba(30, 36, 48, 0.06);
}

.app-sidebar {
    padding: 1rem;
    position: sticky;
    top: 6rem;
    align-self: start;
}

.app-sidebar nav,
.sidebar-panel,
.summary-list,
.detail-grid,
.dropdown-panel {
    display: grid;
    gap: 0.75rem;
}

.app-sidebar nav a,
.sidebar-choice {
    display: block;
    padding: 0.7rem 0.85rem;
    border-radius: 0.8rem;
    color: var(--app-ink);
    text-decoration: none;
}

.app-sidebar nav a.is-current,
.app-sidebar nav a:hover,
.sidebar-choice:hover,
.sidebar-choice.current {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.sidebar-label,
.menu-eyebrow,
.eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header h1,
.metric-grid strong,
.wordmark span {
    font-family: "Space Grotesk", "Inter", sans-serif;
}

.lede,
.muted-copy,
small,
.menu-copy {
    color: var(--app-muted);
}

.metric-grid,
.content-grid {
    display: grid;
    gap: 1rem;
}

.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

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

.metric-grid > article,
.content-grid > article,
.app-content > article {
    padding: 1.25rem;
}

.metric-label {
    display: block;
    color: var(--app-muted);
    margin-bottom: 0.5rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 0.85rem;
}

.status-badge.subtle {
    background: var(--app-surface-strong);
    color: var(--app-ink);
}

.status-badge.warning {
    background: #fff2cf;
    color: var(--app-warning);
}

.banner {
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    margin-bottom: 1rem;
}

.banner.danger {
    background: #fde7ef;
    color: var(--app-danger);
    border: 1px solid #f8bbd0;
}

.filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 2fr repeat(2, minmax(0, 1fr)) auto auto;
    align-items: end;
    margin-bottom: 1rem;
}

.checkbox-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li,
.detail-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--app-border);
    padding-bottom: 0.75rem;
}

.detail-grid {
    margin: 0;
}

.detail-grid dt,
.detail-grid dd {
    margin: 0;
}

.dropdown-shell {
    margin: 0;
}

.dropdown-shell summary {
    cursor: pointer;
    list-style: none;
}

.dropdown-shell summary::-webkit-details-marker {
    display: none;
}

.dropdown-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
    min-width: 16rem;
}

.empty-copy {
    margin: 0;
    color: var(--app-muted);
}

@media (max-width: 960px) {
    .app-body,
    .content-grid,
    .metric-grid,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: static;
    }
}

/* The public landing page intentionally has its own visual language from the app shell. */
body.marketing-shell {
    --marketing-ink: #16261f;
    --marketing-paper: #f8f5ed;
    --marketing-moss: #1d5b47;
    --marketing-lime: #b8df74;
    --marketing-line: #d8d8c9;
    margin: 0;
    color: var(--marketing-ink);
    background: var(--marketing-paper);
    font-family: "DM Sans", sans-serif;
}

.marketing-shell h1,
.marketing-shell h2 { font-family: "Fraunces", serif; letter-spacing: -0.045em; }
.marketing-shell a { color: inherit; }
.marketing-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.5rem; }
.marketing-wordmark { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.marketing-wordmark img { width: 2rem; height: 2rem; border-radius: .55rem; }
.marketing-header nav, .marketing-actions, .hero-actions, .marketing-footer div { display: flex; align-items: center; gap: 1.25rem; }
.marketing-header nav a, .marketing-footer a { color: #516158; font-size: .92rem; text-decoration: none; }
.text-link { font-weight: 600; text-decoration: none; }
.compact-button, .marketing-button { display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; background: var(--marketing-moss); color: white; font-weight: 700; text-decoration: none; }
.compact-button { padding: .55rem .95rem; font-size: .88rem; }
.marketing-button { padding: .9rem 1.25rem; }
.marketing-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); gap: 5rem; align-items: center; min-height: 43rem; padding-block: 4rem 5rem; }
.marketing-kicker { margin: 0 0 1.25rem; color: var(--marketing-moss); font-family: "DM Mono", monospace; font-size: .74rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.marketing-kicker span { color: #728275; }
.hero-copy h1 { max-width: 13ch; margin: 0; font-size: clamp(3.1rem, 6vw, 5.75rem); line-height: .98; }
.hero-lede { max-width: 36rem; margin: 1.75rem 0; color: #536159; font-size: 1.15rem; line-height: 1.6; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3.5rem 0 0; }
.hero-metrics div { border-left: 1px solid var(--marketing-line); padding-left: 1rem; }
.hero-metrics dt { font-family: "Fraunces", serif; font-size: 1.7rem; font-weight: 700; }
.hero-metrics dd { margin: .2rem 0 0; color: #607067; font-size: .82rem; }
.queue-preview { padding: 1rem; border: 1px solid #27483a; border-radius: 1.35rem; background: #183b2f; color: #f7faeb; box-shadow: 1.4rem 1.4rem 0 #dce9b9; transform: rotate(2deg); }
.queue-topline, .queue-preview footer { display: flex; justify-content: space-between; padding: .8rem .5rem 1.15rem; font-family: "DM Mono", monospace; font-size: .74rem; }
.queue-topline strong { color: var(--marketing-lime); font-weight: 500; }
.queue-topline i { display: inline-block; width: .45rem; height: .45rem; margin-right: .3rem; border-radius: 50%; background: var(--marketing-lime); }
.queue-item { display: grid; grid-template-columns: 2.45rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: 1rem .5rem; border-top: 1px solid rgba(255,255,255,.15); }
.queue-item strong, .queue-item small { display: block; }
.queue-item small { margin-top: .18rem; color: #b2c7b9; font-size: .78rem; }
.queue-item b { color: #b2c7b9; letter-spacing: .1rem; }
.queue-initials { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #87b58a; color: #163429; font-size: .72rem; font-weight: 700; }
.queue-initials.rust { background: #d99f78; }
.queue-initials.gold { background: #d6cb76; }
.queue-preview footer { padding: 1.15rem .5rem .45rem; color: #b2c7b9; }
.queue-preview footer strong { color: #f7faeb; font-weight: 500; }
.marketing-section { padding: 7rem 0; }
.product-section { background: #e8ede2; }
.split-intro { display: grid; grid-template-columns: 1fr .8fr; gap: 4rem; align-items: end; }
.split-intro h2, .marketing-section h2, .marketing-cta h2 { max-width: 17ch; margin: 0; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.05; }
.split-intro > p, .section-lede { color: #536159; font-size: 1.08rem; line-height: 1.65; }
.capability-grid, .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.capability-grid article { min-height: 14rem; padding: 1.5rem; border: 1px solid var(--marketing-line); border-radius: .9rem; background: #f8f9f3; }
.capability-grid article > span, .workflow-steps span { color: var(--marketing-moss); font-family: "DM Mono", monospace; font-size: .75rem; }
.capability-grid h3, .workflow-steps h3, .pricing-grid h3 { margin: 2.5rem 0 .6rem; font-size: 1.2rem; }
.capability-grid p, .workflow-steps p, .pricing-grid p { color: #536159; line-height: 1.55; }
.workflow-section { background: #f8f5ed; }
.workflow-section h2, .pricing-heading h2 { margin-bottom: 1rem; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 0; margin: 4rem 0 0; list-style: none; }
.workflow-steps li { border-top: 2px solid var(--marketing-moss); padding-top: 1.25rem; }
.workflow-steps h3 { margin: 1rem 0 .5rem; }
.pricing-section { background: #162f26; color: #f4f6e9; }
.pricing-section .marketing-kicker { color: var(--marketing-lime); }
.pricing-section .section-lede, .pricing-grid p { color: #c5d1c8; }
.pricing-grid { grid-template-columns: repeat(5, 1fr); }
.pricing-grid article { display: flex; min-height: 16rem; flex-direction: column; padding: 1.4rem; border: 1px solid rgba(239,245,228,.25); border-radius: .9rem; }
.pricing-grid h3 { margin: 0; }
.price { margin: 1.5rem 0 .3rem; color: #f4f6e9 !important; font-family: "Fraunces", serif; font-size: 2.1rem; }
.price small { font-family: "DM Sans", sans-serif; font-size: .75rem; }
.pricing-grid a { margin-top: auto; color: var(--marketing-lime); font-weight: 700; text-decoration: none; }
.featured-plan { background: var(--marketing-lime); color: #183529; }
.featured-plan > p:first-child { color: #315b42; font-family: "DM Mono", monospace; font-size: .7rem; text-transform: uppercase; }
.featured-plan .price, .featured-plan p { color: #183529 !important; }
.featured-plan a { color: #183529; }
.faq-section { background: #e8ede2; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; }
.faq-grid details { padding: 1.2rem 1.3rem; border: 1px solid var(--marketing-line); border-radius: .8rem; background: #f8f9f3; }
.faq-grid summary { cursor: pointer; font-weight: 700; }
.faq-grid p { margin: 1rem 0 0; color: #536159; line-height: 1.55; }
.marketing-cta { padding-block: 7rem; text-align: center; }
.marketing-cta h2 { margin: 0 auto 2rem; }
.marketing-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--marketing-line); color: #65736a; font-size: .84rem; }
@media (max-width: 800px) {
    .marketing-header nav { display: none; }
    .marketing-hero, .split-intro { grid-template-columns: 1fr; gap: 3rem; }
    .marketing-hero { min-height: auto; padding-block: 3rem 4rem; }
    .queue-preview { max-width: 30rem; justify-self: center; }
    .capability-grid, .pricing-grid, .faq-grid { grid-template-columns: 1fr; }
    .workflow-steps { grid-template-columns: repeat(2, 1fr); }
    .hero-metrics { margin-top: 2.5rem; }
    .marketing-section { padding: 4.5rem 0; }
}
@media (max-width: 480px) {
    .marketing-header { min-height: 4.5rem; }
    .marketing-actions .text-link { display: none; }
    .hero-copy h1 { font-size: 3.2rem; }
    .workflow-steps { grid-template-columns: 1fr; }
    .marketing-footer { flex-direction: column; }
}