:root {
    --navy: #0E2A4D;
    --navy-2: #14365E;
    --blue: #0063F7;
    --blue-soft: #EAF2FF;
    --teal: #00C08B;
    --teal-soft: #E6FAF4;
    --grey-25: #FBFCFE;
    --grey-50: #F4F7FB;
    --grey-100: #E8EEF5;
    --grey-200: #D8E1EC;
    --grey-500: #6D7F94;
    --grey-700: #3F536B;
    --danger: #C84B4B;
    --danger-soft: #FFF0F0;
    --warning: #A86518;
    --warning-soft: #FFF6E8;
    --white: #FFFFFF;
    --shadow-sm: 0 8px 28px rgba(14, 42, 77, 0.06);
    --shadow-md: 0 18px 50px rgba(14, 42, 77, 0.10);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 11px;
    --interaction-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--grey-50);
    color: var(--navy);
    font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(216, 225, 236, 0.8);
    backdrop-filter: blur(14px);
}

.app-header__inner,
.app-footer__inner,
.page-shell {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
}

.app-header__inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand__logo {
    display: block;
    width: 190px;
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.product-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--grey-200);
    border-radius: 999px;
    color: var(--grey-700);
    background: var(--grey-25);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.header-link {
    color: var(--grey-700);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 160ms ease;
}

.header-link:hover {
    color: var(--blue);
}

.app-main {
    min-height: calc(100vh - 150px);
}

.page-shell {
    padding: 52px 0 72px;
}

.hero {
    padding: 44px;
    border: 1px solid rgba(216, 225, 236, 0.88);
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 99, 247, 0.10), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(0, 192, 139, 0.08), transparent 30%),
        var(--white);
    box-shadow: 0 6px 24px rgba(14, 42, 77, 0.045);
}

.hero__copy {
    max-width: 760px;
    margin-bottom: 34px;
}

.eyebrow,
.section-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero h1,
.results-heading h2,
.section-heading h2 {
    margin: 0;
    color: var(--navy);
    letter-spacing: -0.035em;
}

.hero h1 {
    max-width: 720px;
    font-size: clamp(2.65rem, 6vw, 4.7rem);
    line-height: 1.02;
    font-weight: 780;
}

.hero__copy p {
    max-width: 720px;
    margin: 22px 0 0;
    color: var(--grey-700);
    font-size: 1.08rem;
    line-height: 1.7;
}

.compare-form {
    padding: 22px;
    border: 1px solid var(--grey-100);
    border-radius: var(--radius-lg);
    background: rgba(244, 247, 251, 0.72);
}

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

.upload-card {
    position: relative;
    min-height: 252px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 54px 24px 24px;
    border: 1.5px dashed #BFCBDA;
    border-radius: 18px;
    background: var(--white);
    cursor: pointer;
    text-align: center;
    transition: border-color 180ms var(--interaction-ease),
        box-shadow 180ms var(--interaction-ease),
        transform 180ms var(--interaction-ease),
        background-color 180ms var(--interaction-ease);
}

.upload-card.is-dragging {
    border-color: var(--blue);
    background-color: var(--blue-soft);
    box-shadow: 0 0 0 3px rgba(0, 99, 247, 0.1), 0 6px 16px rgba(14, 42, 77, 0.06);
    transform: translateY(-2px);
}

.upload-card.has-file {
    border-style: solid;
    border-color: #89CDBB;
    background-color: #F7FCFA;
}

.upload-card.has-file.is-dragging {
    border-color: var(--blue);
    background-color: var(--blue-soft);
}

.upload-card:focus-within {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.upload-card.has-error {
    border-color: var(--danger);
    background-color: #FFFAFA;
}

.upload-card__topline {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-step {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 800;
}

.upload-label {
    color: var(--navy);
    font-size: 0.9rem;
    font-weight: 750;
}

.upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    left: 18px;
    top: 18px;
}

.upload-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    transition: color 180ms var(--interaction-ease),
        background-color 180ms var(--interaction-ease),
        transform 180ms var(--interaction-ease);
}

.upload-card.has-file .upload-icon {
    background: var(--teal-soft);
    color: #08775B;
}

.upload-card.is-dragging .upload-icon {
    transform: translateY(-2px);
}

.upload-glyph {
    transform-origin: center;
    transition: opacity 160ms ease, transform 200ms var(--interaction-ease);
}

.upload-glyph--selected {
    opacity: 0;
    transform: scale(0.9);
}

.upload-card.has-file .upload-glyph {
    opacity: 0;
    transform: scale(0.9);
}

.upload-card.has-file .upload-glyph--selected {
    opacity: 1;
    transform: scale(1);
}

.upload-icon svg,
.primary-button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.upload-title {
    color: var(--navy);
    font-weight: 750;
}

.upload-subtitle {
    margin-top: 4px;
    color: var(--grey-500);
    font-size: 0.86rem;
}

.upload-file {
    max-width: 100%;
    margin-top: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--grey-50);
    color: var(--grey-700);
    font-size: 0.78rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease;
}

.upload-card.has-file .upload-file {
    background: var(--teal-soft);
    color: #08775B;
}

.upload-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    margin-top: 16px;
}

.upload-file-status {
    max-width: 100%;
    min-height: 18px;
    color: var(--grey-500);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    transition: color 180ms ease;
}

.upload-card.has-file .upload-file-status {
    color: #08775B;
}

.upload-card.has-file .upload-file-status::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.upload-card.has-error .upload-file-status {
    color: #A33232;
}

.upload-card.is-confirming .upload-feedback {
    animation: file-confirmed 240ms var(--interaction-ease);
}

.compare-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 2px 0;
}

.compare-form__guidance {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.compare-readiness {
    color: var(--grey-700);
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 180ms ease;
}

.compare-form.is-ready .compare-readiness {
    color: #08775B;
}

.privacy-note {
    color: var(--grey-500);
    font-size: 0.8rem;
}

.primary-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 0;
    border-radius: 13px;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 99, 247, 0.16);
    font-weight: 750;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 160ms var(--interaction-ease),
        box-shadow 180ms var(--interaction-ease),
        background-color 180ms var(--interaction-ease), color 180ms ease;
}

.primary-button:focus-visible,
.header-link:focus-visible,
.brand:focus-visible,
.compact-uploader > summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

.primary-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 99, 247, 0.14);
}

.primary-button:disabled {
    background-color: #E3EAF3;
    color: #5E7086;
    box-shadow: inset 0 0 0 1px rgba(14, 42, 77, 0.04);
    cursor: not-allowed;
    transform: none;
}

.compare-form.is-submitting .primary-button {
    background-color: var(--navy-2);
    color: var(--white);
    cursor: progress;
    box-shadow: none;
}

.compare-form.is-submitting .upload-card {
    pointer-events: none;
}

.primary-button svg {
    width: 18px;
    height: 18px;
    transition: opacity 180ms ease, transform 180ms var(--interaction-ease);
}

.primary-button:disabled svg {
    opacity: 0.45;
}

.compare-form.is-ready .primary-button svg {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .upload-card:hover:not(.is-dragging):not(.has-error) {
        border-color: #7C9DC7;
        background-color: #FCFDFF;
        box-shadow: 0 4px 14px rgba(14, 42, 77, 0.06);
        transform: translateY(-1px);
    }

    .upload-card.has-file:hover:not(.is-dragging):not(.has-error) {
        border-color: #54A991;
        background-color: #F2FAF6;
    }

    .primary-button:hover:not(:disabled) {
        background-color: #005AE0;
        box-shadow: 0 6px 16px rgba(0, 99, 247, 0.2);
        transform: translateY(-1px);
    }

    .primary-button:hover:not(:disabled) svg {
        transform: translateX(2px);
    }

    .primary-button:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 99, 247, 0.14);
    }
}

@keyframes file-confirmed {
    from { opacity: 0.65; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes landing-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero__copy {
    animation: landing-enter 360ms var(--interaction-ease) both;
}

.hero > .compare-form {
    animation: landing-enter 360ms 50ms var(--interaction-ease) both;
}

.alert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 17px;
    border: 1px solid #F0C1C1;
    border-radius: 14px;
    background: var(--danger-soft);
    color: #873333;
}

.alert-card__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--danger);
    color: var(--white);
    font-weight: 800;
}

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

.alert-card div > span {
    margin-top: 2px;
    font-size: 0.9rem;
}

.results {
    margin-top: 56px;
}

.results-heading,
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.results-heading h2,
.section-heading h2 {
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 760;
}

.comparison-files {
    max-width: 620px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.comparison-file {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--grey-100);
    border-radius: 12px;
    background: var(--white);
}

.comparison-file--current {
    border-color: rgba(0, 99, 247, 0.22);
    background: #FBFDFF;
}

.comparison-file__label,
.metric-label {
    display: block;
    color: var(--grey-500);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comparison-file strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--navy);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comparison-files__arrow {
    color: var(--grey-500);
    font-weight: 750;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.summary-card,
.panel,
.analysis-card,
.critical-card,
.critical-summary-bar {
    border: 1px solid var(--grey-100);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.summary-card {
    min-height: 156px;
    padding: 20px;
    border-radius: var(--radius-md);
}

.summary-card--finish {
    background:
        linear-gradient(135deg, rgba(0, 99, 247, 0.06), transparent 62%),
        var(--white);
}

.summary-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--grey-700);
    font-size: 0.88rem;
    font-weight: 700;
}

.status-pill,
.status-chip,
.count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--grey-200);
    background: var(--grey-50);
    color: var(--grey-700);
}

.status-pill.is-late {
    border-color: #F3D1B0;
    background: var(--warning-soft);
    color: var(--warning);
}

.status-pill.is-early {
    border-color: #BFEEDF;
    background: var(--teal-soft);
    color: #08775B;
}

.status-pill.is-neutral {
    color: var(--grey-500);
}

.finish-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 14px;
}

.finish-flow strong {
    display: block;
    margin-top: 5px;
    color: var(--navy);
    font-size: 1.18rem;
    line-height: 1.2;
}

.finish-flow__arrow {
    padding-bottom: 2px;
    color: var(--blue);
    font-size: 1.3rem;
}

.metric-comparison {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 14px;
}

.metric-comparison strong,
.metric-large,
.metric-split strong {
    color: var(--navy);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.035em;
}

.metric-comparison span {
    color: var(--grey-500);
    font-size: 1.1rem;
}

.metric-caption {
    display: block;
    margin-top: 14px;
    color: var(--grey-500);
    font-size: 0.78rem;
    line-height: 1.45;
}

.metric-large {
    display: block;
    margin-top: 16px;
}

.metric-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.metric-split > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-split span {
    color: var(--grey-500);
    font-size: 0.76rem;
}

.metric-plus {
    color: var(--teal) !important;
}

.metric-minus {
    color: var(--danger) !important;
}

.content-grid {
    display: grid;
    grid-template-columns: 1.7fr 0.9fr;
    gap: 14px;
    margin-top: 14px;
}

.panel {
    padding: 22px;
    border-radius: var(--radius-md);
}

.panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.panel-heading h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 750;
}

.section-kicker {
    margin-bottom: 5px;
    font-size: 0.68rem;
}

.findings-list {
    display: flex;
    flex-direction: column;
}

.finding {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 13px 0;
    border-top: 1px solid var(--grey-100);
    color: var(--grey-700);
    line-height: 1.5;
}

.finding:first-child {
    border-top: 0;
    padding-top: 2px;
}

.finding__marker {
    width: 7px;
    height: 7px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.finding--critical .finding__marker {
    background: var(--warning);
}

.finding--clear .finding__marker {
    background: var(--teal);
}

.finding strong {
    color: var(--navy);
}

.schedule-stats {
    background:
        linear-gradient(180deg, rgba(14, 42, 77, 0.02), transparent),
        var(--white);
}

.snapshot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid var(--grey-100);
}

.snapshot-row:first-of-type {
    border-top: 0;
    padding-top: 2px;
}

.snapshot-row span {
    color: var(--grey-500);
    font-size: 0.86rem;
}

.snapshot-row strong {
    color: var(--navy);
    font-size: 0.92rem;
}

.analysis-section {
    margin-top: 54px;
}

.section-heading {
    align-items: end;
}

.section-heading p {
    max-width: 500px;
    margin: 0;
    color: var(--grey-500);
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: right;
}

.accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analysis-card,
.critical-card {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.analysis-card > summary,
.critical-card > summary,
.structural-item > summary {
    list-style: none;
}

.analysis-card > summary::-webkit-details-marker,
.critical-card > summary::-webkit-details-marker,
.structural-item > summary::-webkit-details-marker {
    display: none;
}

.analysis-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    cursor: pointer;
    transition: background 150ms ease;
}

.analysis-card > summary:hover,
.critical-card > summary:hover {
    background: var(--grey-25);
}

.analysis-card[open] > summary,
.critical-card[open] > summary {
    border-bottom: 1px solid var(--grey-100);
}

.analysis-card__title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.analysis-card__title > div {
    min-width: 0;
}

.analysis-card__title strong,
.critical-card > summary strong {
    display: block;
    color: var(--navy);
    font-size: 0.98rem;
}

.analysis-card__title span:not(.analysis-icon),
.critical-card > summary span:not(.chevron) {
    display: block;
    margin-top: 2px;
    color: var(--grey-500);
    font-size: 0.78rem;
}

.analysis-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-weight: 850;
}

.analysis-icon--blue {
    background: var(--blue-soft);
    color: var(--blue);
}

.analysis-icon--teal {
    background: var(--teal-soft);
    color: #058361;
}

.analysis-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.count-chip {
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    background: var(--grey-50);
    color: var(--grey-700);
}

.count-chip--add {
    background: var(--teal-soft);
    color: #08775B;
}

.count-chip--remove {
    background: var(--danger-soft);
    color: var(--danger);
}

.chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid #8090A3;
    border-bottom: 2px solid #8090A3;
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

.analysis-card[open] > summary .chevron,
.critical-card[open] > summary .chevron,
.structural-item[open] > summary .chevron {
    transform: rotate(225deg);
}

.analysis-card__body {
    padding: 18px 20px 22px;
    background: #FCFDFE;
}

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

.change-column {
    min-width: 0;
}

.change-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.change-column__head h4 {
    margin: 0;
    color: var(--navy);
    font-size: 0.88rem;
    font-weight: 750;
}

.change-column__head > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--grey-100);
    color: var(--grey-700);
    font-size: 0.76rem;
    font-weight: 800;
}

.task-list,
.structural-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--grey-100);
    border-radius: 11px;
    background: var(--white);
}

.task-id {
    color: var(--grey-500);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.task-row__main {
    min-width: 0;
}

.task-row__main strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 0.84rem;
}

.task-row__main span {
    display: block;
    margin-top: 2px;
    color: var(--grey-500);
    font-size: 0.72rem;
}

.status-chip {
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--grey-200);
    background: var(--grey-50);
    color: var(--grey-700);
}

.status-chip--critical {
    border-color: #F0D1A7;
    background: var(--warning-soft);
    color: var(--warning);
}

.empty-state {
    padding: 18px;
    border: 1px dashed var(--grey-200);
    border-radius: 11px;
    background: var(--white);
    color: var(--grey-500);
    font-size: 0.82rem;
    text-align: center;
}

.empty-state--large {
    padding: 26px;
}

.structural-item {
    overflow: hidden;
    border: 1px solid var(--grey-100);
    border-radius: 12px;
    background: var(--white);
}

.structural-item > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
}

.structural-item > summary:hover {
    background: var(--grey-25);
}

.structural-item[open] > summary {
    border-bottom: 1px solid var(--grey-100);
}

.structural-item__name {
    min-width: 0;
}

.structural-item__name strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 0.86rem;
}

.structural-item__name span {
    display: block;
    margin-top: 2px;
    color: var(--grey-500);
    font-size: 0.72rem;
}

.structural-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: var(--grey-25);
}

.detail-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--grey-100);
    border-radius: 10px;
    background: var(--white);
}

.detail-card--changed {
    border-color: rgba(0, 99, 247, 0.18);
    background: #FBFDFF;
}

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

.detail-card > span,
.detail-card small {
    display: block;
    color: var(--grey-500);
    font-size: 0.7rem;
}

.detail-card strong {
    display: block;
    margin: 4px 0;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 0.82rem;
}

.critical-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.critical-summary-bar > div {
    padding: 16px 18px;
    border-left: 1px solid var(--grey-100);
}

.critical-summary-bar > div:first-child {
    border-left: 0;
}

.critical-summary-bar span {
    display: block;
    color: var(--grey-500);
    font-size: 0.72rem;
}

.critical-summary-bar strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 1rem;
}

.critical-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    cursor: pointer;
}

.critical-table-wrap {
    overflow-x: auto;
    background: var(--white);
}

.critical-table {
    min-width: 860px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
    align-items: stretch;
    border-top: 1px solid var(--grey-100);
}

.critical-table:first-child {
    border-top: 0;
}

.critical-table--header {
    background: var(--grey-50);
    color: var(--grey-500);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.critical-table--header > div {
    padding: 11px 14px;
}

.critical-table--changed {
    background: #FBFDFF;
}

.critical-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
}

.critical-side--current {
    border-left: 1px solid var(--grey-100);
}

.critical-side strong {
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--navy);
    font-size: 0.82rem;
}

.critical-side > span:last-child:not(.task-id):not(.critical-empty) {
    margin-top: 3px;
    color: var(--grey-500);
    font-size: 0.72rem;
}

.critical-table__movement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-left: 1px solid var(--grey-100);
}

.movement-line,
.critical-empty {
    color: #A5B1BF;
    font-size: 0.76rem;
}

.critical-note {
    margin: 0;
    padding: 13px 20px 16px;
    border-top: 1px solid var(--grey-100);
    background: var(--grey-25);
    color: var(--grey-500);
    font-size: 0.75rem;
    line-height: 1.5;
}

.app-footer {
    padding: 0 0 34px;
}

.app-footer__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8898AA;
    font-size: 0.76rem;
}

.app-footer__dot {
    color: #B6C2D0;
}

@media (max-width: 1080px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-card--finish {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .page-shell {
        padding-top: 28px;
    }

    .hero {
        padding: 28px;
    }

    .upload-grid,
    .content-grid,
    .change-columns {
        grid-template-columns: 1fr;
    }

    .results-heading,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .comparison-files {
        width: 100%;
        max-width: none;
    }

    .section-heading p {
        max-width: none;
        text-align: left;
    }

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

    .critical-summary-bar > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--grey-100);
    }

    .critical-summary-bar > div:nth-child(4) {
        border-top: 1px solid var(--grey-100);
    }
}

@media (max-width: 640px) {
    .app-header__inner,
    .app-footer__inner,
    .page-shell {
        width: min(100% - 24px, 1220px);
    }

    .app-header__inner {
        min-height: 64px;
    }

    .brand__logo {
        width: 154px;
    }

    .product-pill {
        display: none;
    }

    .hero {
        padding: 22px 16px 18px;
        border-radius: 20px;
    }

    .hero h1 {
        font-size: 2.55rem;
    }

    .hero__copy p {
        font-size: 0.96rem;
    }

    .compare-form {
        padding: 12px;
    }

    .upload-card {
        min-height: 210px;
    }

    .compare-form__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button {
        width: 100%;
    }

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

    .summary-card--finish {
        grid-column: auto;
    }

    .comparison-files {
        grid-template-columns: 1fr;
    }

    .comparison-files__arrow {
        display: none;
    }

    .structural-item > summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .structural-item > summary > .status-pill {
        grid-column: 2;
    }

    .structural-item > summary > .chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .structural-detail {
        grid-template-columns: 1fr;
    }

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

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

    .critical-summary-bar > div {
        border-left: 0;
        border-top: 1px solid var(--grey-100);
    }

    .critical-summary-bar > div:first-child {
        border-top: 0;
    }
}
.compact-uploader {
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid var(--grey-100);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

    .compact-uploader > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 16px 20px;
        cursor: pointer;
        list-style: none;
    }

        .compact-uploader > summary::-webkit-details-marker {
            display: none;
        }

.compact-uploader__files {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

    .compact-uploader__files > div {
        min-width: 0;
    }

    .compact-uploader__files span {
        display: block;
        color: var(--grey-500);
        font-size: 0.68rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .compact-uploader__files strong {
        display: block;
        max-width: 360px;
        margin-top: 3px;
        overflow: hidden;
        color: var(--navy);
        font-size: 0.84rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.compact-uploader__arrow {
    color: var(--blue);
    font-weight: 800;
}

.compact-uploader__action {
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 750;
    transition: background-color 160ms ease, color 160ms ease;
}

.compact-uploader > summary:hover .compact-uploader__action {
    background-color: #DDEAFF;
}

.compact-uploader > summary:active .compact-uploader__action {
    background-color: #D1E2FF;
}

.compact-uploader[open] > summary {
    border-bottom: 1px solid var(--grey-100);
}

.compact-uploader__body {
    padding: 18px;
    background: var(--grey-25);
}

    .compact-uploader__body .upload-card {
        min-height: 150px;
    }

@media (max-width: 640px) {
    .compact-uploader > summary,
    .compact-uploader__files {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-uploader__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .hero__copy,
    .hero > .compare-form,
    .upload-card,
    .upload-icon,
    .upload-glyph,
    .upload-file,
    .upload-file-status,
    .upload-feedback,
    .compare-readiness,
    .primary-button,
    .primary-button svg,
    .header-link,
    .compact-uploader__action {
        animation: none !important;
        transition: none !important;
    }

    .upload-card,
    .upload-icon,
    .primary-button,
    .primary-button svg {
        transform: none !important;
    }
}


/* Reference landing design: scoped to the initial upload page. */
body.landing-page {
    background: #081723;
    color: #F5F8FC;
    background-image: radial-gradient(ellipse at 83% 5%, #102A43 0%, transparent 52%);
    /* Tie the navy wash to the viewport rather than expanding document height. */
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.landing-page .app-header {
    position: relative;
    background: #091A29;
    border-bottom: 1px solid #183246;
    backdrop-filter: none;
}
.landing-page .app-header__inner,
.landing-page .page-shell { width: min(1194px, calc(100% - 104px)); }
.landing-page .app-header__inner { min-height: 70px; }
.landing-page .brand {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.landing-page .brand__logo { width: 196px; max-height: 39px; }
.landing-page .product-pill {
    color: #E6EDF7;
    background: #122C44;
    border-color: #234562;
    font-weight: 400;
    font-size: .88rem;
    min-height: 36px;
    padding: 0 18px;
}
.landing-page .header-link { color: #E6EDF7; font-weight: 400; }
.landing-page .header-link:hover { color: #39BBFF; }
.landing-page .app-header__actions { gap: 30px; }
.landing-page .page-shell { padding: 48px 0 30px; }
.landing-page .app-main { min-height: calc(100vh - 70px); overflow: hidden; }
.landing-page .app-footer { display: none; }
.hero--landing {
    position: relative;
    isolation: isolate;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.hero-gantt {
    position: absolute;
    z-index: -1;
    width: 920px;
    height: auto;
    right: -140px;
    top: -34px;
    opacity: .88;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent, #000 30%);
}
.hero--landing .hero__copy { margin: 0 0 21px; padding: 0 26px; max-width: 790px; }
.hero--landing .eyebrow { color: #31B9F5; font-size: .74rem; letter-spacing: .22em; margin-bottom: 12px; }
.hero--landing h1 { color: #F8FAFC; font-size: clamp(2.5rem, 4.65vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 750; }
.hero__accent { color: #0099FF; }
.hero--landing .hero__copy p { color: #D3DFEA; font-size: 1.13rem; line-height: 1.45; margin-top: 15px; max-width: 700px; }
.hero--landing > .compare-form {
    position: relative;
    padding: 22px 29px 19px;
    background: #F5F9FE;
    border: 1px solid #DDE6EF;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.hero--landing .upload-grid { gap: 100px; }
.hero--landing .upload-card {
    --upload-color: #008CFF;
    --upload-tint: #EAF5FF;
    --upload-border: #76BFFF;
    height: 228px;
    min-height: 228px;
    padding: 88px 22px 23px;
    justify-content: flex-start;
    border-color: var(--upload-border);
    border-radius: 14px;
    background: #F0F7FF;
}
.hero--landing .upload-card--comparison .upload-step { color: #00B98C; background: #DDF7EF; }
.hero--landing .upload-card.has-file { --upload-color: #079776; --upload-tint: #DDF7EF; --upload-border: #71C9B1; }
.hero--landing .upload-card__topline { top: 15px; left: 23px; right: 18px; gap: 22px; text-align: left; }
.hero--landing .upload-step { width: 57px; height: 53px; flex: 0 0 57px; border-radius: 12px; color: var(--upload-color); background: var(--upload-tint); font-size: 1.7rem; font-weight: 750; }
.upload-card__heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero--landing .upload-label { color: #171E43; font-size: .98rem; font-weight: 650; }
.upload-description { color: #606D98; font-size: .9rem; line-height: 1.4; }
.hero--landing .upload-icon { width: 68px; height: 58px; margin-bottom: 8px; color: var(--upload-color); background: transparent; }
.hero--landing .upload-icon svg { width: 68px; height: 55px; stroke-width: 3; }
.hero--landing .upload-title { color: #151E42; font-size: .98rem; font-weight: 650; }
.hero--landing .upload-subtitle { color: var(--upload-color); font-size: .9rem; margin-top: 3px; }
.hero--landing .upload-feedback {
    position: absolute;
    inset: auto 14px 12px;
    width: auto;
    margin: 0;
    gap: 3px;
}
.hero--landing .upload-card:not(.has-file):not(.has-error) .upload-feedback {
    /* Keep instructions available to assistive technology without idle visual clutter. */
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.hero--landing .upload-card.has-file,
.hero--landing .upload-card.has-error { height: 276px; padding-bottom: 68px; }
.hero--landing .upload-file { max-width: 100%; padding: 3px 10px; }
.hero--landing .upload-card.has-file { border-color: #71C9B1; background: #EFFAF6; }
.hero--landing .upload-card.has-file .upload-icon { color: #079776; }
.hero--landing .upload-card.has-error { border-color: #C84B4B; background: #FFF5F5; }
.hero--landing .upload-card.is-dragging { border-color: var(--upload-color); background: var(--upload-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--upload-color) 15%, transparent); }
.hero--landing .upload-card:focus-within { outline-color: var(--upload-color); }
.upload-connector {
    position: absolute;
    top: 113px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #192442;
    background: #FFF;
    box-shadow: 0 5px 12px rgba(30, 60, 94, .13);
    border: 1px solid #DDE6EF;
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
.upload-connector:hover:not(:disabled) { background: #EAF5FF; box-shadow: 0 5px 14px rgba(30, 60, 94, .22); }
.upload-connector:focus-visible { outline: 2px solid #008CFF; outline-offset: 3px; }
.upload-connector:active:not(:disabled) { background: #D9EDFF; }
.upload-connector:disabled { opacity: .55; cursor: default; }
.upload-connector::before,
.upload-connector::after { content: ""; position: absolute; left: 50%; width: 1px; height: 76px; background: #CDDBEA; z-index: -1; }
.upload-connector::before { bottom: 100%; }
.upload-connector::after { top: 100%; }
.upload-connector svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero--landing .compare-form__footer { flex-direction: column; gap: 12px; padding-top: 25px; }
.hero--landing .primary-button { order: -1; width: min(476px, 100%); min-height: 48px; border-radius: 8px; font-size: 1.15rem; font-weight: 500; gap: 12px; background: #008CFF; }
.hero--landing .primary-button:disabled { color: #FFF; background: #A9BBD2; box-shadow: 0 3px 9px rgba(21, 58, 104, .12); opacity: 1; }
.hero--landing .compare-form.is-submitting .primary-button { background: #174A72; }
.hero--landing .compare-form__guidance { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; text-align: center; }
.hero--landing .compare-readiness,
.hero--landing .privacy-note { color: #66759A; font-size: .76rem; font-weight: 400; }
.hero--landing .compare-form__guidance::before { content: "i"; width: 17px; height: 17px; border: 1.5px solid #7483A4; border-radius: 50%; display: inline-grid; place-items: center; font-size: .68rem; font-weight: 700; margin-right: 6px; color: #66759A; }
.hero--landing .compare-form.is-ready .compare-readiness { color: #08775B; font-weight: 600; }
.landing-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 41px; }
.landing-features article { display: flex; gap: 22px; padding: 0 26px; border-right: 1px solid #193248; }
.landing-features article:first-child { padding-left: 0; }
.landing-features article:last-child { padding-right: 0; border: 0; }
.feature-icon { flex: 0 0 55px; width: 55px; height: 55px; display: grid; place-items: center; background: #15304D; color: #009BFF; border-radius: 13px; }
.feature-icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.landing-features h2 { margin: 8px 0 6px; color: #F5F8FC; font-size: .92rem; line-height: 1.3; font-weight: 600; }
.landing-features p { margin: 0; color: #C5D2DF; font-size: .84rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
    .hero--landing .upload-card:hover { border-color: var(--upload-color); background: var(--upload-tint); }
    .hero--landing .primary-button:hover:not(:disabled) { background: #007ADD; }
}
@media (max-width: 1050px) {
    .landing-page .app-header__inner, .landing-page .page-shell { width: calc(100% - 48px); }
    .hero--landing .upload-grid { gap: 62px; }
    .hero--landing .upload-card__topline { left: 17px; gap: 12px; }
    .upload-description { font-size: .8rem; }
    .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
    .landing-features article:nth-child(3) { padding-left: 0; }
    .landing-features article:nth-child(2) { border-right: 0; }
}
@media (max-width: 860px) {
    .hero--landing .upload-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero--landing .upload-step { width: 42px; height: 44px; flex-basis: 42px; font-size: 1.35rem; }
    .hero--landing .upload-label { font-size: .85rem; }
    .hero--landing .hero__copy { padding: 0; }
    .hero-gantt { opacity: .35; right: -350px; }
}
@media (max-width: 640px) {
    .landing-page .app-header__inner, .landing-page .page-shell { width: calc(100% - 32px); }
    .landing-page .page-shell { padding-top: 32px; }
    .landing-page .brand__logo { width: 155px; }
    .landing-page .app-header__actions { gap: 12px; }
    .hero--landing h1 { font-size: clamp(2.15rem, 8.5vw, 3rem); }
    .hero--landing .hero__copy p { font-size: 1rem; }
    .hero--landing > .compare-form { padding: 18px; }
    .hero--landing .upload-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero--landing .upload-card__topline { gap: 15px; }
    .hero--landing .upload-label { font-size: .93rem; }
    .upload-description { font-size: .82rem; }
    .upload-connector { position: relative; top: auto; left: auto; transform: none; margin: 16px auto 0; }
    .upload-connector::before, .upload-connector::after { display: none; }
    .hero--landing .compare-form__footer { padding-top: 20px; }
    .hero--landing .primary-button { font-size: 1rem; }
    .hero--landing .compare-form__guidance { display: block; }
    .hero--landing .compare-readiness { display: block; margin-bottom: 4px; }
    .hero--landing .compare-form__guidance::before { display: none; }
    .landing-features { gap: 24px; margin-top: 30px; }
    .landing-features article { padding: 0; border: 0; gap: 12px; flex-direction: column; }
    .landing-features h2 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--landing .upload-card, .hero--landing .primary-button { transform: none !important; }
}

.hero--landing .upload-card { transition: border-color 180ms var(--interaction-ease), box-shadow 180ms var(--interaction-ease), transform 180ms var(--interaction-ease), background-color 180ms var(--interaction-ease), height 180ms var(--interaction-ease); }
.hero--landing .upload-subtitle { color: #0076D5; }
.hero--landing .upload-card.has-file .upload-subtitle { color: #008466; }
@media (prefers-reduced-motion: reduce) { .hero--landing .upload-card { transition: none !important; } }

.landing-page .brand__logo--navy { width: 212px; height: 48px; max-height: 48px; }
@media (max-width: 640px) { .landing-page .brand__logo--navy { width: 175px; height: 40px; } }

/* Results use the same navy shell, with light information panels. */
.results-page .results-heading h2,
.results-page .section-heading h2 { color: #F8FAFC; }
.results-page .section-heading p { color: #C5D2DF; }
.results-page .eyebrow { color: #31B9F5; }
.results-page .compact-uploader { background: #F5F9FE; color: var(--navy); }
.results-page .critical-summary-bar { background: #F5F9FE; color: var(--navy); }
.results-page .panel,
.results-page .summary-card,
.results-page .analysis-card,
.results-page .critical-card { color: var(--navy); }
.changed-values { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: start; gap: 14px; margin-top: 9px; }
.changed-values > div { min-width: 0; }
.changed-values small { display: block; margin-bottom: 5px; color: var(--grey-500); font-size: .72rem; }
.changed-values strong { display: block; overflow-wrap: anywhere; }
.change-arrow { padding-top: 22px; color: var(--grey-500); }
@media (max-width: 640px) { .changed-values { gap: 9px; } }

/* Supplied transparent vector branding, shared by every page header. */
.app-header { background: #091A29; border-bottom-color: #183246; backdrop-filter: none; }
.app-header .brand { background: transparent; padding: 0; border-radius: 0; }
.app-header .brand__logo--provided { width: 212px; height: auto; max-height: 42px; }
.app-header .product-pill { color: #E6EDF7; background: #122C44; border-color: #234562; }
.app-header .header-link { color: #E6EDF7; }
.app-header .header-link:hover { color: #39BBFF; }
@media (max-width: 640px) { .app-header .brand__logo--provided { width: 175px; max-height: 34px; } }

html { scrollbar-gutter: stable; }

/* Structural summaries show comparison ID, activity heading and disclosure control. */
.structural-item > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
.structural-item > summary > .chevron { grid-column: 3; grid-row: 1; }

/* Preserve one relationship per line in both reference and comparison columns. */
.changed-values strong { white-space: pre-line; }

/* Results hierarchy: outcomes first, detail on demand. Scoped to the dashboard. */
.results-dashboard .summary-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr; }
.results-dashboard .summary-card { min-width: 0; min-height: 164px; }
.results-dashboard .schedule-details-heading { margin-top: 28px; margin-bottom: 16px; }
.results-dashboard .finish-date { display: block; margin: 18px 0 14px; color: var(--navy); font-size: clamp(1.5rem, 2.1vw, 1.95rem); letter-spacing: -.035em; line-height: 1.2; }
.results-dashboard .finish-flow { margin: 18px 0 14px; gap: 9px; }
.results-dashboard .finish-flow strong { font-size: 1.05rem; }
.results-dashboard .finish-flow .metric-label { font-size: .62rem; }
.results-dashboard .outcome-value { display: block; margin-top: 18px; color: var(--navy); font-size: 1.32rem; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
.results-dashboard .outcome-value small { font-size: .82rem; font-weight: 600; letter-spacing: 0; }
.results-dashboard .summary-card--progress .outcome-value { font-size: 1.13rem; }
.results-dashboard .metric-caption { margin-top: 9px; }
.results-metadata { color: #C5D2DF; font-size: .82rem; }
.results-dashboard .key-findings { margin-top: 16px; }
.results-dashboard .key-findings .panel-heading { margin-bottom: 12px; }
.results-dashboard .analysis-section { margin-top: 16px; }
.results-dashboard .key-findings + .analysis-section { margin-top: 28px; }
.results-dashboard .top-level-analysis > summary { min-height: 88px; }
.results-dashboard .analysis-card__title h2,
.results-dashboard .analysis-card__title h3,
.results-dashboard .analysis-card__title h4 { margin: 0; color: var(--navy); font-size: 1.03rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.35; }
.results-dashboard .analysis-card__title span:not(.analysis-icon) { font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.results-dashboard .chevron { flex: 0 0 9px; }
.results-dashboard summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: 12px; }
.results-dashboard .analysis-intro { margin: 0 0 18px; color: var(--grey-500); font-size: .82rem; line-height: 1.55; }
.results-dashboard .result-group + .result-group { margin-top: 22px; }
.results-dashboard .change-column__head h3 { margin: 0; color: var(--navy); font-size: .9rem; font-weight: 750; }
.results-dashboard .result-area + .result-area { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--grey-100); }
.results-dashboard .result-area__title { margin: 0 0 16px; color: var(--grey-500); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.results-dashboard .full-critical { margin-top: 22px; }
.results-dashboard .critical-detail-table { width: 100%; table-layout: fixed; border-collapse: collapse; color: var(--navy); font-size: .8rem; }
.results-dashboard .critical-detail-table th,
.results-dashboard .critical-detail-table td { padding: 14px; border-bottom: 1px solid var(--grey-100); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.results-dashboard .critical-detail-table thead th { background: var(--grey-50); color: var(--grey-500); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.results-dashboard .critical-detail-table th:first-child { width: 30%; }
.results-dashboard .critical-detail-table th:last-child { width: 20%; }
.results-dashboard .critical-detail-table tbody th { font-weight: 600; }
.results-dashboard .critical-detail-table tbody th strong { display: block; margin-top: 3px; }
.results-dashboard .critical-detail-table small { display: block; margin-top: 5px; color: var(--grey-500); font-size: .7rem; font-weight: 400; }
.results-dashboard .critical-detail-table .status-pill { display: flex; margin-top: 7px; }
@media (max-width: 1080px) {
    .results-dashboard .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .results-dashboard .summary-card--finish { grid-column: auto; }
}
@media (max-width: 700px) {
    .results-dashboard .critical-detail-table,
    .results-dashboard .critical-detail-table tbody { display: block; }
    .results-dashboard .critical-detail-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .results-dashboard .critical-detail-table tr { display: block; padding: 14px; border-bottom: 1px solid var(--grey-200); }
    .results-dashboard .critical-detail-table th,
    .results-dashboard .critical-detail-table td { display: block; width: auto !important; padding: 6px 0; border: 0; }
    .results-dashboard .critical-detail-table td { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 3px 12px; }
    .results-dashboard .critical-detail-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 3; color: var(--grey-500); font-size: .72rem; }
    .results-dashboard .critical-detail-table td > * { grid-column: 2; }
}
@media (max-width: 640px) {
    .results-dashboard .summary-grid { grid-template-columns: 1fr; }
    .results-dashboard .summary-card { min-height: 0; }
    .results-dashboard .results-heading { gap: 8px; }
    .results-dashboard .top-level-analysis > summary { padding: 16px; gap: 12px; }
    .results-dashboard .analysis-card__body { padding: 16px; }
    .results-dashboard .analysis-card__title { gap: 10px; align-items: flex-start; }
    .results-dashboard .analysis-card__meta { align-self: flex-start; }
    .results-dashboard .top-level-analysis > summary > .analysis-card__meta .count-chip { display: inline-flex; }
    .results-dashboard .task-row { grid-template-columns: auto minmax(0, 1fr); }
    .results-dashboard .task-row > .status-chip { grid-column: 2; justify-self: start; }
    .results-dashboard .critical-detail-table .status-chip { white-space: normal; text-align: left; }
}

/* Keep change totals compact and compare each schedule's critical activities independently. */
.results-dashboard .change-group + .change-group { margin-top: 12px; }
.results-dashboard .critical-table-wrap { max-height: 620px; min-height: 80px; resize: vertical; overflow: auto; border: 1px solid var(--grey-100); border-radius: 12px; }
.results-dashboard .critical-table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.results-dashboard .critical-table--header { position: sticky; top: 0; z-index: 1; }
.results-dashboard .critical-table__movement { border-right: 1px solid var(--grey-100); text-align: center; }
.results-dashboard .critical-activity { display: flex; align-items: baseline; gap: 10px; }
.results-dashboard .critical-activity .task-id { flex-shrink: 0; }
.results-dashboard .critical-activity strong { overflow-wrap: anywhere; }
.results-dashboard .critical-absent, .results-dashboard .critical-not-critical { color: var(--grey-500); font-size: .8rem; }
.results-dashboard .status-chip.critical-tag--added { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.results-dashboard .status-chip.critical-tag--ceased { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.results-dashboard .status-chip.critical-tag--other { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.results-dashboard .critical-path-note { margin-top: 18px; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .upload-connector { transition: none; } }

/* Counts describe changes; green highlights progress, yellow calls for review. */
.results-dashboard .count-chip,
.results-dashboard .status-chip { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }
.results-dashboard .tag--green { background: #dcfce7; color: #166534; border-color: #86efac; }
.results-dashboard .tag--yellow { background: #fef9c3; color: #854d0e; border-color: #facc15; }
.results-dashboard .tag--orange { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

/* All activity and change totals use the same blue count treatment. */
.results-dashboard .count-chip { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }

/* Supporting pages share the navy GanttScan shell and light content panels. */
.information-page .information-shell { padding-bottom: 64px; }
.information-hero { max-width: 820px; margin-bottom: 34px; }
.information-hero .eyebrow { color: #31b9f5; letter-spacing: .16em; }
.information-hero h1 { margin: 12px 0 20px; color: #f8fafc; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 750; line-height: 1.12; letter-spacing: -.035em; }
.information-hero h1 > span { color: #0099ff; }
.information-hero > p { max-width: 700px; color: #c5d2df; font-size: 1.06rem; line-height: 1.65; }
.information-button { display: inline-flex; align-items: center; gap: 20px; margin-top: 14px; padding: 13px 20px; border-radius: 9px; background: var(--blue); color: white; font-weight: 650; text-decoration: none; transition: background-color 160ms ease, transform 160ms ease; }
.information-button:hover { color: white; background: #007add; transform: translateY(-1px); }
.information-button:active { transform: translateY(0); }
.information-page a:focus-visible, .guide-help summary:focus-visible { outline: 2px solid #31b9f5; outline-offset: 4px; border-radius: 6px; }
.header-link[aria-current="page"] { color: #39bbff; text-decoration: underline; text-underline-offset: 7px; }
.guide-contents { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.guide-contents a { padding: 10px 18px; background: #15304d; border: 1px solid #234260; border-radius: 8px; color: #e6edf7; text-decoration: none; font-size: .87rem; transition: background-color 160ms ease; }
.guide-contents a:hover { background: #1b3d60; }
.guide-step { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; padding: 32px; margin-bottom: 20px; border: 1px solid var(--grey-100); border-radius: 16px; background: #fff; scroll-margin-top: 100px; }
.guide-number { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #0063f7; background: #eaf2ff; font-size: 1.15rem; font-weight: 750; margin-bottom: 14px; }
.guide-step h2, .guide-help h2 { color: var(--navy); font-size: 1.4rem; font-weight: 750; line-height: 1.3; margin: 0 0 16px; }
.guide-step p, .guide-step li, .guide-help p { color: var(--grey-700); font-size: .94rem; line-height: 1.65; }
.guide-step ul { padding-left: 20px; }
.guide-step li + li { margin-top: 7px; }
.guide-step p:last-child { margin-bottom: 0; }
.guide-tip { padding: 13px 16px; border-left: 3px solid #0099ff; border-radius: 0 8px 8px 0; background: #f0f7ff; }
.guide-visual { color: var(--navy); margin: 0; padding: 25px; background: #f4f7fb; border: 1px solid #d8e1ec; border-radius: 14px; }
.guide-visual figcaption { margin-top: 20px; color: var(--grey-500); font-size: .79rem; line-height: 1.5; text-align: center; }
.guide-file { display: flex; align-items: center; gap: 14px; padding: 18px; background: white; border: 1px solid #d8e1ec; border-radius: 10px; }
.guide-file__icon { padding: 12px 7px; border: 1px solid #afd7ff; border-radius: 7px; background: #eaf2ff; color: #0063f7; font-size: .72rem; font-weight: 750; }
.guide-file strong, .guide-file div > span { display: block; }
.guide-file strong { font-size: .92rem; }
.guide-file div > span { margin-top: 4px; color: var(--grey-500); font-size: .8rem; }
.guide-visual__arrow { margin: 8px 0; color: #0063f7; font-size: 1.3rem; text-align: center; }
.guide-upload-pair { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 8px; }
.guide-upload-example { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 18px 8px; border: 1px dashed #71c9b1; border-radius: 10px; background: #effaf6; }
.guide-upload-example > span:first-child { color: #0063f7; font-size: 1.05rem; font-weight: 750; }
.guide-upload-example strong { font-size: .79rem; }
.guide-upload-example small { font-size: .72rem; color: #08775b; }
.guide-check { color: #079776; font-size: 1.8rem; }
.guide-swap { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; color: #0e2a4d; }
.guide-visual--compare { text-align: center; padding: 40px 25px; }
.guide-ready { color: #08775b; font-size: .86rem; line-height: 1.5; margin-bottom: 18px; }
.guide-button-example { padding: 14px; background: #008cff; color: white; border-radius: 8px; font-weight: 600; }
.guide-step--review { display: block; }
.guide-step--review .guide-step__copy { max-width: 820px; }
.guide-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 24px 0; }
.guide-review-grid article { padding: 20px; border: 1px solid #d8e1ec; border-radius: 12px; background: #fbfcfe; }
.guide-topic { display: inline-grid; place-items: center; width: 34px; height: 34px; color: #0063f7; background: #eaf2ff; border-radius: 8px; margin-bottom: 14px; }
.guide-review-grid h3 { font-size: 1rem; font-weight: 750; color: var(--navy); margin: 0 0 10px; }
.guide-help { padding: 30px 32px; border-radius: 16px; background: white; margin-top: 24px; }
.guide-help details { border-top: 1px solid #e8eef5; padding: 15px 0; }
.guide-help summary { color: var(--navy); font-weight: 650; cursor: pointer; }
.guide-help details p { margin: 12px 0 0; max-width: 850px; }
.information-bottom { padding: 30px 0 0; text-align: center; }
.information-bottom p { color: #c5d2df; margin-bottom: 0; }
.upgrade-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.upgrade-card { border: 1px solid #d8e1ec; border-radius: 18px; background: white; overflow: hidden; padding: 30px; }
.upgrade-label { display: inline-block; color: #075985; background: #e0f2fe; border: 1px solid #7dd3fc; border-radius: 20px; padding: 5px 12px; font-size: .76rem; font-weight: 650; margin-bottom: 18px; }
.upgrade-card--business .upgrade-label { color: #166534; background: #dcfce7; border-color: #86efac; }
.upgrade-brand { background: #0b1c2c; border-radius: 12px; padding: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upgrade-brand img { width: 205px; max-width: 100%; height: 44px; object-fit: contain; }
.upgrade-brand h2 { color: #39bbff; font-size: 1.4rem; margin: 0; font-weight: 650; letter-spacing: -.02em; }
.upgrade-card--business .upgrade-brand h2 { color: #00c08b; }
.upgrade-description { color: var(--grey-700); font-size: .96rem; line-height: 1.6; margin: 22px 0; }
.upgrade-features h3 { font-size: .75rem; color: var(--grey-500); text-transform: uppercase; letter-spacing: .08em; font-weight: 750; }
.upgrade-features ul { list-style: none; padding: 0; margin: 16px 0 24px; }
.upgrade-features li { position: relative; padding: 12px 0 12px 27px; border-bottom: 1px solid #e8eef5; color: var(--navy); font-weight: 600; font-size: .92rem; }
.upgrade-features li > span { position: absolute; left: 0; color: #0063f7; }
.upgrade-card--business .upgrade-features li > span { color: #079776; }
.upgrade-features small { display: block; margin-top: 4px; color: var(--grey-500); font-size: .79rem; font-weight: 400; }
.upgrade-footer { padding-top: 18px; border-top: 1px solid #d8e1ec; }
.upgrade-footer > span { font-size: .9rem; font-weight: 650; color: var(--navy); }
.upgrade-footer p { font-size: .82rem; color: var(--grey-500); margin: 7px 0 0; }
.upgrade-note { margin-top: 28px; text-align: center; color: #c5d2df; font-size: .9rem; line-height: 1.6; }
.upgrade-note a { color: #39bbff; text-decoration: none; font-weight: 600; }
@media (max-width: 1000px) { .app-header__actions .product-pill { display: none; } }
@media (max-width: 800px) {
    .guide-step { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .guide-review-grid { grid-template-columns: 1fr; }
    .upgrade-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .app-header__inner { flex-wrap: wrap; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
    .app-header__actions { width: 100%; justify-content: flex-start; gap: 22px; }
    .landing-page .app-header__actions { gap: 22px; }
    .header-link { font-size: .83rem; }
    .information-hero h1 { font-size: 2.1rem; }
    .guide-contents { gap: 8px; }
    .guide-contents a { padding: 8px 11px; font-size: .78rem; }
    .guide-help, .upgrade-card { padding: 22px; }
    .guide-visual { padding: 18px; }
    .guide-step { scroll-margin-top: 130px; }
}
@media (prefers-reduced-motion: reduce) { .information-button, .guide-contents a { transition: none; transform: none; } }

.upgrade-brand--plan { background: transparent; padding: 0; min-height: 88px; border-radius: 0; }
.upgrade-brand--plan img { width: 100%; max-width: 450px; height: auto; }

/* The guide continues the landing page below the upload experience. */
.landing-guide { margin-top: 64px; padding-top: 48px; padding-bottom: 48px; border-top: 1px solid #234260; scroll-margin-top: 100px; }
.landing-guide .information-hero h2 { margin: 12px 0 20px; color: #f8fafc; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 750; line-height: 1.12; letter-spacing: -.035em; }
.landing-guide .information-hero h2 > span { color: #0099ff; }
.landing-guide a:focus-visible { outline: 2px solid #31b9f5; outline-offset: 4px; border-radius: 6px; }
#schedule-upload { scroll-margin-top: 100px; }
@media (max-width: 540px) { .landing-guide { margin-top: 40px; padding-top: 32px; scroll-margin-top: 130px; } .landing-guide .information-hero h2 { font-size: 2.1rem; } #schedule-upload { scroll-margin-top: 130px; } }

/* Clear workflow illustrations and a visible invitation to the guide. */
.guide-introduction { margin: 0 0 20px; color: #c5d2df; font-size: .94rem; line-height: 1.6; }
.guide-upload-example .guide-diagram-label { color: #08775b; font-size: .72rem; font-weight: 600; }
.guide-upload-example strong { text-align: center; line-height: 1.4; }
.guide-comparison-flow { list-style: none; margin: 0; padding: 0; text-align: left; }
.guide-comparison-flow li { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 4px 14px; padding: 0 0 26px; }
.guide-comparison-flow li:last-child { padding-bottom: 0; }
.guide-comparison-flow li + li::before { content: ""; position: absolute; left: 18px; top: -23px; height: 20px; border-left: 1px solid #afd7ff; }
.guide-flow-symbol { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #afd7ff; border-radius: 10px; color: #0063f7; background: #eaf2ff; font-size: 1.25rem; }
.guide-comparison-flow strong { color: var(--navy); font-size: .92rem; }
.guide-comparison-flow li > span:last-child { font-size: .8rem; color: var(--grey-500); }
.landing-guide-cue { position: fixed; right: 24px; bottom: 20px; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 13px 18px; border: 1px solid #31516b; border-radius: 12px; background: #10283d; color: #f8fafc; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; }
.landing-guide-cue strong, .landing-guide-cue small { display: block; }
.landing-guide-cue strong { font-size: .87rem; font-weight: 600; }
.landing-guide-cue small { margin-top: 3px; font-size: .75rem; color: #bdd0e2; }
.landing-guide-cue svg { width: 22px; height: 22px; fill: none; stroke: #39bbff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-guide-cue:hover { color: #f8fafc; background: #18364f; border-color: #39bbff; }
.landing-guide-cue:focus-visible { outline: 2px solid #39bbff; outline-offset: 4px; }
.landing-guide-cue:active { background: #0b2032; }
.landing-guide-cue.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 700px) { .landing-guide-cue { position: static; width: fit-content; margin: 24px auto 0; box-shadow: none; } .landing-guide-cue.is-hidden { opacity: 1; visibility: visible; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .landing-guide-cue { transition: none; } }

/* Final public-page refinements using the established GanttScan theme. */
.landing-page .product-pill { background: transparent; border-color: transparent; color: #a9bfce; padding-left: 0; padding-right: 0; }
.compact-how-it-works__heading h2 { margin: 12px 0 24px; color: #f8fafc; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 750; letter-spacing: -.025em; }
.compact-how-it-works__heading .eyebrow { color: #31b9f5; }
.how-it-works-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; list-style: none; margin: 0 0 24px; padding: 0; }
.how-it-works-grid li { padding: 22px; border: 1px solid #234260; border-radius: 14px; background: #10283d; }
.how-it-works-grid h3 { color: #f8fafc; font-size: 1.08rem; font-weight: 650; margin: 0 0 10px; }
.how-it-works-grid p { margin: 0; color: #c5d2df; font-size: .92rem; line-height: 1.65; }
.full-guide-link { color: #39bbff; text-decoration: none; font-size: .94rem; font-weight: 600; }
.full-guide-link:hover { color: #8bd9ff; text-decoration: underline; text-underline-offset: 4px; }
.policy-panel, .public-error-panel { padding: 32px; border: 1px solid #d8e1ec; border-radius: 16px; background: #fff; color: var(--grey-700); }
.policy-panel { max-width: 920px; line-height: 1.7; }
.policy-updated { font-size: .84rem; color: var(--grey-500); margin-bottom: 28px; }
.policy-panel section + section { margin-top: 26px; }
.policy-panel h2 { margin: 0 0 10px; font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.policy-panel p { font-size: .95rem; }
.policy-panel p:last-child { margin-bottom: 0; }
.contact-pending { padding: 14px 16px; border-radius: 8px; background: #f0f7ff; }
.public-error-panel { max-width: 820px; }
.public-error-panel p { margin: 0 0 24px; line-height: 1.6; }
.public-error-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.public-error-actions .information-button { margin-top: 0; }
.secondary-information-button { display: inline-flex; padding: 12px 18px; border: 1px solid #c8d9e9; border-radius: 9px; color: #075985; font-weight: 600; text-decoration: none; transition: background-color 160ms ease; }
.secondary-information-button:hover { background: #eaf5ff; color: #075985; }
.policy-panel, .public-error-panel, .how-it-works-grid li { overflow-wrap: anywhere; }
.results-dashboard .status-chip.critical-tag--added { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
.results-dashboard .status-chip.critical-tag--ceased { background: #edf2f7; color: #475569; border-color: #cbd5e1; }
.results-dashboard .status-chip.critical-tag--other { background: #fff3d9; color: #805d18; border-color: #e8d3a0; }
@media (max-width: 700px) { .how-it-works-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 540px) { .policy-panel, .public-error-panel { padding: 22px; } .public-error-actions { align-items: stretch; flex-direction: column; } .public-error-actions a { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .secondary-information-button { transition: none; } }

/* A quieter premium header and accessible upgrade disclosure. */
.app-header { background: #091a29; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.app-header::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,#176493 35%,#158779 65%,transparent); pointer-events: none; }
.app-header .brand { transition: opacity 160ms ease; }
.app-header .brand:hover { opacity: .86; }
.app-header .app-header__actions { gap: 8px; padding: 4px; border: 1px solid #203a50; border-radius: 12px; background: #102436; }
.app-header .header-link { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border-radius: 8px; font-weight: 550; transition: color 160ms ease,background-color 160ms ease; white-space: nowrap; }
.app-header .header-link:hover { background: #19364c; color: #73d1ff; }
.app-header .header-link[aria-current="page"] { color: #73d1ff; background: #19364c; text-decoration: none; box-shadow: inset 0 -2px 0 #24afe9; }
.header-upgrades { position: relative; }
.header-upgrades__trigger { display: flex; align-items: center; }
.header-upgrades__trigger .header-link { padding-right: 7px; }
.header-upgrades__toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 38px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #aac8de; cursor: pointer; transition: background-color 160ms ease,color 160ms ease; }
.header-upgrades__toggle[hidden], .header-upgrades__menu[hidden] { display: none; }
.header-upgrades__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 160ms ease; }
.header-upgrades__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-upgrades__toggle:hover, .header-upgrades__toggle[aria-expanded="true"] { color: #73d1ff; background: #19364c; }
.header-upgrades__toggle:active { background: #234660; }
.header-upgrades__menu { position: absolute; top: 100%; right: -8px; width: 290px; padding: 16px 8px 8px; border: 1px solid #2b485f; border-radius: 12px; background: #10283b; box-shadow: 0 12px 30px rgba(0,0,0,.22); z-index: 25; animation: upgrade-menu-enter 140ms ease both; }
.header-upgrades__caption { display: block; padding: 0 12px 10px; color: #9bb5c9; font-size: .69rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.header-upgrades__menu a { display: block; padding: 12px; border-radius: 8px; color: #f3f8fc; text-decoration: none; transition: background-color 140ms ease; }
.header-upgrades__menu a span { display: block; margin-top: 4px; font-size: .78rem; color: #b8cada; }
.header-upgrades__menu a strong { font-size: .9rem; font-weight: 650; }
.header-upgrades__menu a:hover, .header-upgrades__menu a[aria-current="page"] { background: #1c3c54; color: #73d1ff; }
.app-header a:focus-visible, .header-upgrades__toggle:focus-visible { outline: 2px solid #39bbff; outline-offset: 3px; }
@keyframes upgrade-menu-enter { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* Use cases and plan pages continue the established light-card / navy-page treatment. */
.section-intro { margin-bottom: 24px; max-width: 780px; }
.section-intro .eyebrow { color: #31b9f5; }
.section-intro h2 { margin: 10px 0 12px; color: #f8fafc; font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; letter-spacing: -.025em; }
.section-intro p { margin: 0; color: #c5d2df; line-height: 1.65; }
.use-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.use-case-grid article, .plan-area-grid article { background: #fff; border: 1px solid #d8e1ec; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); }
.use-case-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 10px; color: #0076c9; background: #e9f5ff; font-size: .9rem; font-weight: 700; }
.use-case-grid h3, .plan-area-grid h3 { margin: 0 0 12px; color: var(--navy); font-size: 1.12rem; font-weight: 700; }
.use-case-grid p, .plan-area-grid p { margin: 0; color: var(--grey-700); line-height: 1.7; font-size: .94rem; }
.use-cases + .guide-help { margin-top: 36px; }
.plan-explore-link, .plan-back-link { display: inline-flex; align-items: center; gap: 8px; color: #39bbff; font-weight: 600; text-decoration: none; line-height: 1.6; }
.plan-explore-link:hover, .plan-back-link:hover { color: #8bd9ff; text-decoration: underline; text-underline-offset: 4px; }
.upgrade-footer .plan-explore-link { margin-top: 10px; color: #0069b5; font-size: .94rem; }
.upgrade-footer .plan-explore-link:hover { color: #004d86; }
.upgrade-footer .plan-explore-link span { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; }
.plan-back-link { margin-bottom: 28px; font-size: .9rem; }
.plan-logo { width: min(430px,100%); margin: 18px 0 24px; padding: 16px 22px; background: #fff; border: 1px solid #d8e1ec; border-radius: 14px; }
.plan-logo img { display: block; width: 100%; height: auto; }
.plan-hero .plan-preview-note { margin-top: 18px; font-size: .86rem; color: #aac1d2; padding-left: 16px; border-left: 2px solid #266385; }
.plan-area-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.plan-sample { margin-top: 44px; }
.plan-sample-panel { margin: 0; padding: 28px; background: #fff; border: 1px solid #d8e1ec; border-radius: 16px; color: var(--navy); }
.plan-sample-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 24px; }
.plan-sample-heading > strong { font-size: 1.15rem; }
.sample-label { border: 1px solid #b9d7ed; border-radius: 999px; padding: 5px 10px; color: #086498; background: #edf7ff; font-size: .74rem; white-space: nowrap; }
.sample-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.sample-metrics > div { padding: 16px; background: #f3f7fb; border: 1px solid #e2eaf2; border-radius: 10px; }
.sample-metrics span { display: block; margin-bottom: 8px; color: #60778c; font-size: .76rem; }
.sample-metrics strong { font-size: .94rem; font-weight: 650; }
.sample-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 18px; padding: 15px 4px; border-top: 1px solid #e2eaf2; align-items: center; font-size: .89rem; }
.sample-row span, .sample-row small { color: var(--grey-700); font-size: .85rem; }
.plan-sample-panel figcaption { margin-top: 20px; color: #60778c; font-size: .82rem; line-height: 1.6; }
.plan-next { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 32px 0; margin-top: 24px; border-bottom: 1px solid #234260; margin-bottom: 24px; }
.plan-next .eyebrow { color: #31b9f5; }
.plan-next h2 { margin: 10px 0; color: #f8fafc; font-size: 1.4rem; }
.plan-next p { margin: 0; color: #c5d2df; }
.plan-next .information-button { flex-shrink: 0; margin: 0; }
.plan-page, .use-cases { overflow-wrap: anywhere; }
@media (max-width: 800px) { .plan-area-grid { grid-template-columns: 1fr; } .plan-next { align-items: flex-start; flex-direction: column; } }
@media (max-width: 540px) {
    .app-header .app-header__actions { width: auto; max-width: 100%; gap: 2px; }
    .app-header .header-link { padding: 8px 10px; font-size: .8rem; }
    .header-upgrades__trigger .header-link { padding-right: 3px; }
    .header-upgrades__toggle { width: 30px; }
    .header-upgrades__menu { right: -65px; width: 270px; }
    .use-case-grid, .sample-metrics { grid-template-columns: 1fr; }
    .use-case-grid article, .plan-area-grid article, .plan-sample-panel { padding: 22px; }
    .sample-row { grid-template-columns: 1fr; gap: 5px; padding: 16px 0; }
    .plan-sample-heading { flex-wrap: wrap; }
    .plan-logo { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-header .brand, .app-header .header-link, .header-upgrades__toggle, .header-upgrades__toggle svg, .header-upgrades__menu a { transition: none; }
    .header-upgrades__menu { animation: none; }
}

/* One unified upgrade control; links remain available without JavaScript. */
.header-upgrades__fallback[hidden] { display: none; }
.app-header .header-upgrades__control { width: auto; padding: 8px 14px; gap: 8px; min-height: 38px; height: auto; font-size: .9rem; font-weight: 550; color: #e6edf7; }
.app-header .header-upgrades__control:hover, .app-header .header-upgrades__control[aria-expanded="true"] { color: #73d1ff; background: #19364c; }
.app-header .header-upgrades__control.is-current { color: #73d1ff; background: #19364c; box-shadow: inset 0 -2px 0 #24afe9; }
.header-upgrades__menu { right: 0; }
/* Richer, still restrained, offering-page presentation. */
.sales-plan { --plan-accent: #20b5f6; --plan-accent-soft: #e8f6ff; --plan-accent-ink: #08649d; }
.sales-plan--business { --plan-accent: #00c4a1; --plan-accent-soft: #e6faf6; --plan-accent-ink: #08755f; }
.sales-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; margin: 0 0 64px; }
.sales-hero .eyebrow, .sales-plan .section-intro .eyebrow { color: var(--plan-accent); }
.sales-logo { width: min(300px,100%); padding: 9px 18px; border-radius: 12px; background: #fff; margin: 20px 0 26px; }
.sales-logo img { display: block; width: 100%; height: auto; }
.sales-hero h1 { font-size: clamp(2.4rem,4.4vw,3.8rem); color: #f8fafc; line-height: 1.06; font-weight: 750; letter-spacing: -.045em; margin: 0 0 24px; }
.sales-hero h1 span { color: var(--plan-accent); }
.sales-hero__copy > p { color: #c5d2df; font-size: 1.05rem; line-height: 1.75; margin: 0 0 24px; }
.sales-hero__actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sales-hero__actions .information-button { margin: 0; }
.sales-hero__actions .plan-explore-link { font-size: .9rem; }
.sales-hero__copy .sales-availability { margin: 16px 0 0; font-size: .79rem; color: #9db6c9; }
.hero-dashboard { position: relative; margin: 0; padding: 28px; border: 1px solid #38607d; border-radius: 20px; background: linear-gradient(145deg,#183850,#0f2436); box-shadow: 0 20px 50px rgba(0,0,0,.23); transform: rotate(-1deg); }
.hero-dashboard::before { content: ""; position: absolute; top: -1px; left: 26px; right: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--plan-accent); }
.hero-dashboard__title { display: flex; align-items: center; gap: 8px; color: #f4f8fc; font-size: .85rem; font-weight: 650; }
.hero-dashboard__title > span:last-child { margin-left: auto; color: #a4bdcf; font-size: .72rem; font-weight: 400; }
.dashboard-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--plan-accent,#20b5f6); }
.hero-dashboard__metric { padding: 30px 0 24px; }
.hero-dashboard__metric span { display: block; color: #afc5d7; font-size: .85rem; margin-bottom: 8px; }
.hero-dashboard__metric strong { display: block; color: #fff; font-size: 1.75rem; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; }
.hero-history { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.hero-history > div { background: #203e55; border: 1px solid #35566e; border-radius: 10px; padding: 14px; }
.hero-history span { font-size: .76rem; color: #b6cbdc; display: block; }
.hero-history i { display: block; height: 5px; background: var(--plan-accent); border-radius: 3px; margin: 12px 0; width: 41%; }
.hero-history > div:nth-child(2) i { width: 54%; }
.hero-history > div:nth-child(3) i { width: 68%; }
.hero-history strong { color: #f8fafc; font-size: 1.3rem; font-weight: 650; }
.hero-dashboard__footer { display: flex; justify-content: space-between; gap: 12px; padding: 22px 0 0; margin-top: 22px; border-top: 1px solid #35566e; color: #c3d4e2; font-size: .76rem; }
.hero-dashboard figcaption { color: #93b0c5; margin-top: 20px; font-size: .69rem; }
.hero-portfolio { display: grid; gap: 10px; }
.hero-portfolio > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 12px 14px; background: #203e55; border: 1px solid #35566e; border-radius: 9px; }
.hero-portfolio strong { color: #f8fafc; font-size: .84rem; font-weight: 600; }
.hero-portfolio span { color: #b6cbdc; font-size: .75rem; }
.hero-portfolio i { grid-column: 1 / -1; font-style: normal; color: #7fd9c5; font-size: .73rem; }
.sales-benefits { margin-bottom: 56px; }
.sales-feature { position: relative; transition: transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.sales-feature:hover { transform: translateY(-3px); border-color: var(--plan-accent); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.sales-feature__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 24px; color: var(--plan-accent-ink); background: var(--plan-accent-soft); }
.sales-feature__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sales-feature__number { position: absolute; right: 26px; top: 32px; font-size: .78rem; font-weight: 650; color: #91a8bb; }
.sales-preview { scroll-margin-top: 110px; }
.sales-preview-panel { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #9fc1d9; background: #fff; color: var(--navy); box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.preview-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 28px; background: #f0f5fa; border-bottom: 1px solid #dce6ee; }
.preview-window-bar > div { display: flex; align-items: center; gap: 9px; font-size: .94rem; }
.preview-tabs { display: flex; gap: 6px; padding: 18px 28px 0; }
.preview-tabs button { border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 10px 15px; font-size: .86rem; color: #556c81; font-weight: 650; cursor: pointer; transition: color 160ms ease,background-color 160ms ease; }
.preview-tabs button:hover { background: #f0f5fa; color: var(--navy); }
.preview-tabs button[aria-selected="true"] { color: var(--plan-accent-ink); background: var(--plan-accent-soft); border-color: #c5e1e8; }
.preview-tabs button:active { background: #dcebf3; }
.preview-tabs button:focus-visible, .preview-tab-panel:focus-visible { outline: 2px solid var(--plan-accent-ink); outline-offset: -3px; }
.preview-tab-panel { padding: 24px 28px; }
.preview-tab-panel[hidden] { display: none; }
.preview-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 28px; }
.preview-metric-grid > div { padding: 20px; background: #f4f8fc; border: 1px solid #e0e9f1; border-radius: 12px; }
.preview-metric-grid span { display: block; color: #5d768b; font-size: .77rem; margin-bottom: 10px; }
.preview-metric-grid strong { display: block; font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; }
.preview-metric-grid small { display: block; color: #6d8192; font-size: .74rem; margin-top: 8px; line-height: 1.5; }
.preview-list-heading, .preview-list-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; align-items: center; }
.preview-list-heading { padding: 12px 0; color: #678094; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.preview-list-row { border-top: 1px solid #e2eaf2; padding: 20px 0; font-size: .9rem; }
.preview-list-row > strong { font-weight: 650; }
.preview-list-row small { display: block; color: #6d8192; margin-top: 6px; font-size: .75rem; font-weight: 400; }
.preview-current { display: inline-flex; color: var(--plan-accent-ink); background: var(--plan-accent-soft); border-radius: 5px; padding: 4px 7px; font-size: .65rem; font-weight: 600; vertical-align: middle; }
.preview-progress { display: block; width: 120px; max-width: 100%; height: 5px; border-radius: 3px; background: #e4edf4; margin-top: 8px; overflow: hidden; }
.preview-progress i { display: block; height: 100%; background: var(--plan-accent); border-radius: inherit; }
.preview-status { display: inline-flex; justify-self: start; color: #08649d; background: #e8f6ff; padding: 6px 9px; border: 1px solid #c5e1f2; border-radius: 7px; font-size: .75rem; font-weight: 550; }
.preview-status--amber { color: #895d17; background: #fff5df; border-color: #e6d6ae; }
.preview-trend { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding-top: 8px; }
.preview-trend h3 { font-size: 1.08rem; font-weight: 650; line-height: 1.5; }
.preview-trend p { color: #5d768b; font-size: .88rem; line-height: 1.7; }
.preview-trend aside { padding: 24px; background: #f4f8fc; border: 1px solid #e0e9f1; border-radius: 12px; }
.preview-trend aside h3 { margin: 14px 0; }
.preview-trend aside p { margin: 0; }
.preview-bars { display: flex; align-items: flex-end; gap: 26px; min-height: 158px; padding: 10px 20px 0; border-bottom: 1px solid #dae5ed; }
.preview-bars > div { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.preview-bars strong { font-size: .8rem; }
.preview-bars i { display: block; width: 45px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,#22b7f7,#087ed0); }
.preview-bars span { padding-bottom: 10px; color: #5d768b; font-size: .75rem; }
.sales-preview-panel > figcaption { padding: 14px 28px; color: #6d8192; background: #f4f8fc; border-top: 1px solid #e2eaf2; font-size: .76rem; }
.sales-close { display: flex; gap: 40px; justify-content: space-between; align-items: center; margin-top: 60px; padding: 38px; border: 1px solid #315a73; border-radius: 18px; background: linear-gradient(110deg,#133c55,#102436); }
.sales-close .eyebrow { color: var(--plan-accent); }
.sales-close h2 { margin: 14px 0 16px; color: #f8fafc; font-size: clamp(1.6rem,3vw,2.3rem); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; }
.sales-close p { margin: 0; color: #bbcfdf; font-size: .9rem; line-height: 1.7; }
.sales-close__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex-shrink: 0; }
.sales-close__actions .information-button { margin: 0; }
.sales-close__actions .plan-explore-link { font-size: .86rem; }
@media (max-width: 1000px) { .sales-hero { gap: 32px; } .sales-hero h1 { font-size: 2.65rem; } .hero-dashboard { padding: 22px; } .sales-close { flex-direction: column; align-items: flex-start; } }
@media (max-width: 800px) { .sales-hero { grid-template-columns: 1fr; gap: 38px; } .hero-dashboard { transform: none; max-width: 580px; } .sales-hero__copy { max-width: 630px; } }
@media (max-width: 540px) {
    .app-header .header-upgrades__control { font-size: .8rem; padding: 8px 10px; }
    .header-upgrades__menu { right: -65px; }
    .sales-hero { margin-bottom: 44px; }
    .sales-hero h1 { font-size: 2.35rem; }
    .sales-hero__copy > p { font-size: .96rem; }
    .hero-dashboard__title { flex-wrap: wrap; }
    .hero-dashboard__title > span:last-child { margin-left: 0; width: 100%; }
    .hero-dashboard__metric strong { font-size: 1.45rem; }
    .hero-history { gap: 8px; }
    .hero-history > div { padding: 12px; }
    .preview-metric-grid { grid-template-columns: 1fr; }
    .preview-window-bar, .preview-tab-panel { padding: 20px; }
    .preview-window-bar { flex-wrap: wrap; }
    .preview-tabs { padding: 16px 14px 0; gap: 2px; flex-wrap: wrap; }
    .preview-tabs button { padding: 10px; font-size: .8rem; }
    .preview-list-heading { display: none; }
    .preview-list-row { grid-template-columns: 1fr; gap: 12px; }
    .preview-trend { grid-template-columns: 1fr; }
    .sales-preview-panel > figcaption { padding: 14px 20px; }
    .sales-close { padding: 24px; margin-top: 40px; }
    .sales-close__actions { max-width: 100%; }
    .sales-close__actions .information-button { white-space: normal; }
    .sales-preview { scroll-margin-top: 145px; }
}
@media (prefers-reduced-motion: reduce) { .sales-feature, .preview-tabs button { transition: none; } .sales-feature:hover { transform: none; } }