:root {
    --cd-navy: #1e2b3c;
    --cd-teal: #2b7a78;
    --cd-growth: #3aafa9;
    --cd-white: #ffffff;
    --cd-neutral-50: #f8f9fa;
    --cd-neutral-100: #eef3f4;
    --cd-neutral-200: #d8e2e4;
    --cd-muted: #667784;
    --cd-shadow: 0 10px 30px rgba(30, 43, 60, .07);
    --cd-navy-soft: #edf1f5;
    --cd-teal-soft: #e8f4f3;
    --cd-growth-soft: #edf8f3;
    --cd-sand-soft: #fff9ec;
}

body {
    background:
        radial-gradient(circle at 92% 2%, rgba(58, 175, 169, .11), transparent 30rem),
        radial-gradient(circle at 4% 38%, rgba(43, 122, 120, .055), transparent 24rem),
        linear-gradient(180deg, #fbfcfd 0%, #f6f9f9 100%) !important;
    color: var(--cd-navy) !important;
    font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.wrap {
    max-width: 1120px !important;
}

.nav {
    min-height: 86px;
    padding: 8px 18px;
    background: var(--cd-white);
    border-radius: 14px;
    border-bottom: 1px solid var(--cd-neutral-200);
    box-shadow: 0 6px 20px rgba(30, 43, 60, .04);
}

.brand {
    position: relative;
    width: 290px;
    height: 96px;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    background: url("claridelta-logo.jpg") center 55% / 240px auto no-repeat;
}

.brand::after {
    content: "See what changed. Understand what matters.";
    position: absolute;
    left: 25px;
    bottom: 0;
    width: 240px;
    text-align: center;
    color: var(--cd-teal);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
}

select {
    border-color: #b9c9cc !important;
    color: var(--cd-navy) !important;
}

button {
    border-color: var(--cd-teal) !important;
    background: var(--cd-teal) !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(43, 122, 120, .20);
}

button:hover {
    background: #236866 !important;
}

button:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(58, 175, 169, .42);
    outline-offset: 3px;
}

.status {
    border-color: #a7d6d3 !important;
    background: #edf8f7 !important;
    color: #195c5a !important;
}

.status.history {
    border-color: #f0d79b !important;
    background: #fffaf0 !important;
    color: #7a4b13 !important;
}

.hero,
.panel {
    border-color: var(--cd-neutral-200) !important;
    box-shadow: var(--cd-shadow) !important;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--cd-teal), var(--cd-growth));
}

.eyebrow,
.metric span,
.metric small,
.time,
.note {
    color: var(--cd-muted) !important;
}

h1,
h2,
h3,
.metric strong {
    color: var(--cd-navy);
    font-family: Montserrat, Inter, Roboto, system-ui, sans-serif;
    letter-spacing: -.015em;
}

.metric,
.story section {
    border-color: #dfe9e9 !important;
    background: linear-gradient(145deg, #ffffff, #f5faf9) !important;
}

.development {
    border-left-color: var(--cd-teal) !important;
}

.category {
    background: #e3f2f1 !important;
    color: #195c5a !important;
}

a {
    color: var(--cd-teal);
}

.brief-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cd-neutral-200);
    border-radius: 10px;
    background: var(--cd-neutral-50);
}

.brief-switch a {
    padding: 8px 11px;
    border-radius: 7px;
    color: var(--cd-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.brief-switch a[aria-current="page"] {
    color: var(--cd-white);
    background: var(--cd-navy);
}

.product-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .nav {
        align-items: flex-start;
    }

    .brand {
        width: 250px;
        height: 86px;
        background-size: 215px auto;
    }

    .brand::after {
        left: 17px;
        width: 215px;
        font-size: 9px;
    }

    .product-nav,
    .brief-switch {
        width: 100%;
    }

    .brief-switch a {
        flex: 1;
        text-align: center;
    }
}

.local-test-notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #d6b75f;
    border-radius: 10px;
    background: #fff8df;
    color: #654b08;
    font-size: 13px;
}

.local-beta-nav {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--cd-neutral-200);
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(12px);
    box-shadow: var(--cd-shadow);
}

.local-beta-nav > div {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.local-beta-nav a {
    padding: 7px 9px;
    border-radius: 7px;
    color: var(--cd-navy);
    text-decoration: none;
}

.local-beta-nav a:hover,
.local-beta-nav a[aria-current="page"] {
    background: #e7f3f2;
    color: var(--cd-teal);
}

.local-beta-nav .sign-out {
    margin-left: auto;
    color: #7a3d3d;
}

@media (max-width: 760px) {
    .wrap {
        width: 100% !important;
        padding: 12px !important;
    }

    .local-beta-nav {
        padding: 8px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .local-beta-nav > div {
        width: max-content;
        min-width: 100%;
        flex-wrap: nowrap;
    }

    .local-beta-nav a {
        white-space: nowrap;
    }

    .local-beta-nav .sign-out {
        margin-left: auto;
    }
}

/* Shared ClariDelta pastel surfaces */
.card:nth-child(4n+1) { background: var(--cd-teal-soft) !important; }
.card:nth-child(4n+2) { background: var(--cd-navy-soft) !important; }
.card:nth-child(4n+3) { background: var(--cd-growth-soft) !important; }
.card:nth-child(4n+4) { background: var(--cd-sand-soft) !important; }

input,
textarea,
select {
    background: rgba(255, 255, 255, .94) !important;
    border-color: #c7d6d7 !important;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #8fb5b4 !important;
}

@media (max-width: 900px) {
    .nav {
        align-items: stretch !important;
    }

    .controls,
    .controls form {
        width: 100%;
    }

    .controls select,
    .controls form select {
        min-width: 0;
        flex: 1;
    }
}

@media (max-width: 520px) {
    body { font-size: 14px !important; }
    h1 { font-size: clamp(24px, 8vw, 30px) !important; }
    h2 { font-size: clamp(19px, 6vw, 24px) !important; }

    .brand {
        width: 220px;
        height: 78px;
        background-size: 190px auto;
    }

    .brand::after {
        left: 15px;
        width: 190px;
        font-size: 8px;
    }

    button,
    select,
    input,
    textarea {
        min-height: 44px;
    }
}

.local-beta-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 18px 4px;
    border-top: 1px solid var(--cd-neutral-200);
    color: var(--cd-muted);
    font-size: 12px;
}

.local-beta-footer div {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.language-setting {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--cd-neutral-200);
    border-radius: 9px;
    background: #fff;
    color: var(--cd-teal);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.language-setting:hover {
    border-color: var(--cd-teal);
    background: #f0f8f7;
}

.language-selector {
    margin: 0;
}

.language-selector select {
    min-width: 132px;
    border-color: #b8cece;
    background: #fff;
    color: var(--cd-navy);
    font-weight: 700;
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}