:root {
    --paper: #d8c7a3;
    --paper-dark: #b89b67;
    --ink: #141414;
    --red: #8f1d1d;
    --gold: #c8a75d;
    --blue: #224b70;
    --green: #2e6b3f;
    --purple: #5f3c88;
    --orange: #b85c1e;
}

body {
    background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), url('~/images/case-files/001/cover.png');
    background-size: cover;
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'Special Elite', cursive;
}

.hero {
    background: rgba(216,199,163,.95);
    border: 5px solid #111;
    box-shadow: 0 0 40px rgba(0,0,0,.7);
    padding: 40px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

.hero:before {
    content: 'CASE FILE #001';
    position: absolute;
    top: 15px;
    right: 20px;
    color: #8f1d1d;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    line-height: 1;
    color: #111;
}

.title span {
    color: var(--red);
}

.subtitle {
    font-size: 1.2rem;
    margin-top: 20px;
}

.panel {
    background: rgba(216,199,163,.96);
    border: 4px solid #111;
    margin-top: 30px;
    box-shadow: 0 0 25px rgba(0,0,0,.55);
}

.panel-header {
    background: #111;
    color: white;
    padding: 12px 20px;
    font-family: 'Bebas Neue';
    font-size: 2rem;
    letter-spacing: 1px;
}

.panel-body {
    padding: 25px;
}

.pointer-array {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.cell {
    width: 80px;
    height: 80px;
    border: 3px solid #111;
    background: #f5f0df;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    position: relative;
    transition: .3s;
    margin-bottom: 40px;
}

.cell.active {
    background: var(--purple);
    color: white;
    transform: scale(1.05);
}

.cell.success {
    background: var(--green);
    color: white;
    transform: scale(1.08);
}

.scan-pointer {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--orange);
    font-size: 1.4rem;
    font-weight: bold;
}

.array-index {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: #111;
    font-weight: bold;
}

.monitor {
    background: #111;
    color: #5df28a;
    padding: 20px;
    border: 3px solid #555;
    font-family: 'Courier Prime';
    min-height: 360px;
}

.btn-detective {
    background: #8f1d1d;
    color: white;
    border: none;
    padding: 14px 30px;
    font-size: 1.1rem;
}

.btn-detective:hover {
    background: #111;
    color: #fff;
}


.btn-reset {
    color: white;
    border: none;
    padding: 14px 30px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}


.form-control {
    border: 3px solid #111;
    background: #f5f0df;
}

#frameLabel {
    font-size: 1.4rem;
    color: #8f1d1d;
}

#answerLabel {
    font-size: 1.7rem;
    color: var(--green);
}



label {
    display: block;
}

footer {
    text-align: center;
    color: #ddd;
    margin: 50px 0;
}



/* Sticky top briefing: preserve original Case File tone, only add scroll masking */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--casefile-sticky-mask-height, 260px);
    background: #000;
    z-index: 30;
    pointer-events: none;
}

/* Shared investigation pages do not use the sticky briefing stack. */
body.casefile-page::before {
    display: none;
}

/* Reuse the existing Case File panel language instead of inventing a new style */
.casefile-title-bar,
.casefile-problem-reference {
    position: sticky;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(216,199,163,.96);
    color: var(--ink);
    border: 4px solid #111;
    box-shadow: 0 0 25px rgba(0,0,0,.55);
    z-index: 42;
}

.casefile-title-bar {
    top: 0;
    margin-top: 0;
    padding: 18px 40px;
}

.casefile-problem-reference {
    top: var(--casefile-problem-sticky-top, 0);
    margin-top: 0;
    padding: 18px 40px;
    z-index: 41;
}

/* Do not let Bootstrap container padding distort the sticky sections */
.casefile-title-bar .container,
.casefile-problem-reference .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Keep typography consistent with the original page */
.casefile-title-bar h1,
.casefile-problem-reference h2 {
    font-family: 'Bebas Neue', sans-serif;
    color: #111;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.casefile-title-bar p,
.casefile-problem-reference p {
    color: var(--ink);
    margin-bottom: 0;
}

/* Progress stays underneath the frozen briefing */
.casefile-progress {
    z-index: 40;
}

/* Keep the analysis section as normal scrolling content, not part of the frozen header */
.casefile-simulator-alignment {
    max-width: 1140px;
    margin: 30px auto 0;
    background: rgba(216,199,163,.96);
    color: var(--ink);
    border: 4px solid #111;
    box-shadow: 0 0 25px rgba(0,0,0,.55);
    padding: 30px 40px;
}

.casefile-simulator-alignment .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.casefile-simulator-alignment h2 {
    font-family: 'Bebas Neue', sans-serif;
    color: #111;
    letter-spacing: 1px;
}

.casefile-simulator-alignment p,
.casefile-simulator-alignment__map p {
    color: var(--ink);
}

.casefile-simulator-alignment__map {
    background: rgba(245,240,223,.75);
    border: 3px solid #111;
    padding: 20px;
    margin-top: 20px;
}

.case-scene-poster {
    width: 100%;
    max-width: 520px;
    margin: 1.5rem auto;
    aspect-ratio: 4 / 5;
    max-height: 65svh;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #000;
}

.case-scene-poster__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 575.98px) {
    .case-scene-poster {
        max-width: min(100%, 420px);
        max-height: 54svh;
    }

    .casefile-title-bar,
    .casefile-problem-reference,
    .casefile-simulator-alignment {
        padding: 14px 18px;
    }

    .casefile-title-bar h1 {
        font-size: 1.75rem;
    }

    .casefile-title-bar p,
    .casefile-problem-reference p {
        font-size: .9rem;
    }
}




/* Premium book-like cover and progressive shell */
body.casefile-cover-active {
    min-height: 100vh;
}

body.casefile-cover-active::before {
    display: none;
}

body.casefile-started {
    padding-bottom: 3rem;
}

.casefile-cover-page {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 5rem) 0;
    color: #fff;
    overflow: hidden;
}

.casefile-cover-page__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(143,29,29,.34), transparent 32%),
        linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.7), rgba(0,0,0,.92));
    z-index: 0;
}

.casefile-cover-return {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    left: max(1rem, env(safe-area-inset-left));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem 1rem;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: .45rem;
    background: rgba(9, 9, 9, .88);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    backdrop-filter: blur(8px);
}

.casefile-cover-return:hover,
.casefile-cover-return:focus-visible {
    border-color: #fff;
    background: #9d1a01;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.casefile-cover-page__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(280px, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.casefile-cover-page__image {
    margin: 0;
    border: 5px solid #111;
    box-shadow: 0 24px 70px rgba(0,0,0,.85);
    background: #000;
    transform: rotate(-1deg);
}

.casefile-cover-page__image img {
    width: 100%;
    display: block;
}

.casefile-cover-page__content {
    max-width: 720px;
    background: rgba(216,199,163,.95);
    color: var(--ink);
    border: 5px solid #111;
    box-shadow: 0 24px 70px rgba(0,0,0,.75);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.casefile-cover-page__content h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: .92;
    letter-spacing: 1px;
    color: #111;
    margin: 0 0 1rem;
}

.casefile-kicker {
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.casefile-cover-page__promise {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
}

.casefile-book {
    width: 100%;
}

.casefile-progressive-shell {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.casefile-progressive-shell > .casefile-step {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.case-note {
    background: rgba(245,240,223,.75);
    border: 3px solid #111;
    padding: 1rem;
}

.casefile-visual img {
    border: 4px solid #111;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.casefile-visual figcaption {
    color: var(--ink);
    margin-top: .75rem;
    font-size: .95rem;
}

.narrative-scene .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.scene-label,
.scene-phase,
.pipeline-question-label {
    display: inline-block;
    font-family: 'Special Elite', cursive;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scene-phase {
    color: var(--gold);
}

.pipeline-question h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: #111;
}

.narrative-moment {
    font-size: 1.08rem;
    border-left: 5px solid var(--red);
    padding-left: 1rem;
}

.pipeline-decision-gate {
    border: 3px solid #111;
    background: rgba(245,240,223,.85);
    padding: 1rem;
    margin: 1.25rem 0;
}

.pipeline-decision-gate legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
}

.pipeline-decision-options {
    display: grid;
    gap: .75rem;
}

.pipeline-decision-option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem;
    background: rgba(255,255,255,.45);
    border: 2px solid rgba(17,17,17,.35);
    cursor: pointer;
}

.pipeline-decision-option:focus-within {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.pipeline-decision-feedback {
    min-height: 1.5rem;
    font-weight: 700;
    margin-top: .85rem;
}

.pipeline-decision-gate--blocked {
    border-color: var(--red);
}

.pipeline-decision-gate--correct {
    border-color: var(--green);
}

.narrative-details {
    background: rgba(17,17,17,.92);
    color: #f5f0df;
    padding: 1rem;
    border: 3px solid #111;
}

.narrative-details p {
    color: #f5f0df;
}

.casefile-inventory-error {
    border-color: var(--red);
}

@media (max-width: 767.98px) {
    .casefile-cover-page__inner {
        grid-template-columns: 1fr;
    }

    .casefile-cover-page__image {
        transform: none;
    }

    .casefile-title-bar,
    .casefile-problem-reference,
    .casefile-simulator-alignment {
        max-width: calc(100% - 1rem);
    }

    .narrative-scene .panel-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .casefile-cover-page__image {
        transform: none;
    }
}


/* Header navigation bridge: matches the public Index page navigation without importing global page styles. */
:root {
    --ccf-bg: #000000;
    --ccf-fg: #ffffff;
    --ccf-muted2: rgba(255,255,255,.55);
    --ccf-accent: #9D1A01;
    --ccf-border: rgba(255,255,255,.12);
}

.casefile-public-nav.ccf-nav {
    border-bottom: 1px solid var(--ccf-border);
    background: rgba(0,0,0,.6);
    position: relative;
    z-index: 120;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.casefile-public-nav .navbar-brand,
.casefile-public-nav .nav-link {
    color: var(--ccf-fg) !important;
}

.casefile-public-nav .nav-link:hover,
.casefile-public-nav .nav-link.ccf-active {
    color: var(--ccf-accent) !important;
}

.casefile-public-nav .ccf-brand {
    letter-spacing: 0;
    text-transform: none;
    margin-right: 0;
    text-align: center;
}

.casefile-public-nav .ccf-brand-subtitle,
.casefile-public-nav .ccf-kicker {
    color: var(--ccf-muted2) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .85rem;
}

.casefile-public-nav .header-link {
    text-decoration: dotted;
    font-weight: bold;
}

.casefile-public-nav .ccf-red:hover {
    color: var(--ccf-accent);
    font-weight: bold;
}

.casefile-public-nav .ccf-outline {
    --bs-btn-padding-y: .95rem;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 1rem;
    color: var(--ccf-fg);
    border-color: rgba(255,255,255,.22);
    background: transparent;
    text-decoration: underline;
}

.casefile-public-nav .ccf-outline:hover {
    border-color: rgba(255,255,255,.38);
    background: rgba(255,255,255,.06);
}

.casefile-public-nav.ccf-nav-two-row .container {
    align-items: center;
    flex-direction: column;
}

.casefile-public-nav.ccf-nav-two-row .ccf-nav-menu {
    margin-left: 0 !important;
    margin-top: .75rem;
    width: 100%;
}

.casefile-public-nav.ccf-nav-two-row .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    justify-content: center;
}

.casefile-public-nav.ccf-nav-two-row .nav-link {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .casefile-public-nav.ccf-nav-two-row .navbar-nav {
        justify-content: flex-start;
    }

    .casefile-public-nav.ccf-nav-two-row .ccf-brand {
        text-align: left;
        width: 100%;
    }
}


/* Case File #001 rules patch: keep the cover as the only initial experience,
   then reveal the briefing and secondary membership action after start. */
body.casefile-cover-active .casefile-briefing__content,
body.casefile-cover-active .casefile-membership-teaser {
    display: none !important;
}

.casefile-briefing-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1rem;
}

.casefile-briefing-back {
    border: 2px solid #111;
    color: #111;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    
}

.casefile-briefing-back:hover,
.casefile-briefing-back:focus-visible {
    background: #111;
    color: #fff;
}

.casefile-membership-teaser {
    max-width: 1140px;
    margin: 1.25rem auto 2rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(143, 29, 29, .92);
    border: 2px solid rgba(200, 167, 93, .75);
    box-shadow: 0 16px 35px rgba(0,0,0,.35);
    color: #fff;
}

.casefile-membership-teaser h2,
.casefile-membership-teaser h3,
.casefile-membership-teaser p {
    margin-bottom: .25rem;
    color: #fff;
}

.casefile-membership-teaser h2,
.casefile-membership-teaser h3 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .04em;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.casefile-membership-teaser__kicker,
.casefile-membership-teaser__path {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.casefile-membership-teaser__button {
    flex: 0 0 auto;
    font-weight: 800;
    border-radius: .35rem;
}

@media (max-width: 767.98px) {
    .casefile-membership-teaser {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .casefile-membership-teaser__button {
        width: 100%;
    }
}


/* Inventory error is diagnostic only. Keep it hidden unless progressive JS explicitly reveals it. */
.casefile-inventory-error[hidden],
.casefile-inventory-error.d-none {
    display: none !important;
}

/* UI/UX sticky stack patch: reserve visual space for the fixed progress rail so
   the title and problem statement never render underneath it. */
:root {
    --casefile-progress-reserved-height: 92px;
    --casefile-title-sticky-height: 0px;
}

body.casefile-started .casefile-book {
    padding-top: var(--casefile-progress-reserved-height, 92px);
}

body.casefile-started .casefile-title-bar {
    top: var(--casefile-progress-reserved-height, 92px);
}

body.casefile-started .casefile-problem-reference {
    top: var(--casefile-problem-sticky-top, var(--casefile-progress-reserved-height, 92px));
}

/* The membership teaser is a secondary conversion action. It should not compete
   with the briefing pages and is only shown on the final active page. */
.casefile-membership-teaser {
    display: none;
}

body.casefile-membership-visible .casefile-step.is-active .casefile-membership-teaser {
    display: flex;
}

.casefile-inventory-error[hidden],
.casefile-inventory-error.d-none {
    display: none !important;
}

@media (max-width: 767.98px) {
    :root {
        --casefile-progress-reserved-height: 104px;
    }
}


/* Premium conversion polish: calmer reading rhythm, stronger completion moment,
   and a final CTA that feels like the learner's natural next step. */
:root {
    --casefile-readable-line-height: 1.72;
    --casefile-soft-border: rgba(17, 17, 17, .32);
    --casefile-soft-shadow: 0 18px 42px rgba(0,0,0,.34);
    --casefile-ribbon-bg: rgba(10,10,10,.94);
    --casefile-ribbon-border: rgba(200,167,93,.18);
}

.panel {
    box-shadow: var(--casefile-soft-shadow);
}

.panel-body {
    line-height: var(--casefile-readable-line-height);
}

.panel-body p,
.panel-body li,
.pipeline-question-purpose,
.pipeline-decision-gate__hint,
.narrative-moment {
    line-height: var(--casefile-readable-line-height);
}

.casefile-title-bar,
.casefile-problem-reference {
    border: 1px solid rgba(200,167,93,.28);
    background: rgba(216,199,163,.985);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.casefile-title-bar {
    padding: .9rem 2rem;
}

.casefile-problem-reference {
    padding: 1rem 2rem;
}

.casefile-title-bar h1,
.casefile-problem-reference h2 {
    margin-bottom: .35rem;
}

.casefile-title-bar p,
.casefile-problem-reference p {
    line-height: 1.55;
}

.casefile-briefing-toolbar {
    margin-bottom: .65rem;
}

.casefile-briefing-back {
    border-width: 1px;
    border-radius: 999px;
    padding: .45rem .8rem;
    background: rgba(255,255,255,.28);
    margin-bottom: 1.2rem; 
}

.casefile-progressive-shell {
    padding-top: 1.75rem;
}

.pipeline-decision-gate {
    border-color: rgba(17,17,17,.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pipeline-decision-option {
    border-color: rgba(17,17,17,.22);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.pipeline-decision-option:hover {
    background: rgba(255,255,255,.62);
    border-color: rgba(143,29,29,.45);
    transform: translateY(-1px);
}

.pipeline-decision-gate--correct {
    box-shadow: 0 0 0 3px rgba(46,107,63,.14), inset 0 1px 0 rgba(255,255,255,.4);
}

.pipeline-decision-gate--success-pulse {
    animation: casefile-gate-success .7s ease-out;
}

@keyframes casefile-gate-success {
    0% { transform: translateY(0); }
    45% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

.casefile-completion {
    background:
        linear-gradient(135deg, rgba(245,240,223,.86), rgba(216,199,163,.96)),
        radial-gradient(circle at 88% 16%, rgba(143,29,29,.12), transparent 34%);
    border: 1px solid rgba(17,17,17,.38);
    box-shadow: var(--casefile-soft-shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
}

.casefile-completion__kicker,
.casefile-membership-teaser__kicker {
    color: var(--red);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.casefile-completion h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.15rem, 5vw, 3.6rem);
    line-height: 1;
    margin-bottom: .75rem;
}

.casefile-completion__proof-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.casefile-completion__proof-list li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .8rem;
    background: rgba(255,255,255,.36);
    border: 1px solid rgba(17,17,17,.22);
}

.casefile-completion__proof-list i {
    color: var(--green);
    margin-top: .18rem;
}

.casefile-completion__closing-argument {
    border-left: 4px solid var(--red);
    padding-left: 1rem;
    font-weight: 800;
}

.casefile-membership-teaser {
    background:
        linear-gradient(135deg, rgba(143,29,29,.96), rgba(80,12,12,.98));
    border: 1px solid rgba(200,167,93,.85);
    box-shadow: 0 22px 55px rgba(0,0,0,.38);
    padding: clamp(1.25rem, 3vw, 2rem);
}

.casefile-membership-teaser h3 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.casefile-membership-teaser__button {
    border-radius: 999px;
    padding: .85rem 1.15rem;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    transition: transform .18s ease, box-shadow .18s ease;
}

.casefile-membership-teaser__button:hover,
.casefile-membership-teaser__button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0,0,0,.32);
}

.casefile-case-closed .casefile-membership-teaser {
    animation: casefile-teaser-enter .28s ease-out;
}

@keyframes casefile-teaser-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767.98px) {
    .casefile-title-bar,
    .casefile-problem-reference {
        padding: .85rem 1rem;
    }

    .casefile-completion__proof-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-decision-option,
    .pipeline-decision-gate,
    .casefile-membership-teaser,
    .casefile-membership-teaser__button {
        transition: none;
        animation: none !important;
    }
}


/* =====================================================
   Final Case File #001 polish patch
   Purpose: first-step onboarding, lighter visual weight, scalable components.
   ===================================================== */
:root {
    --casefile-primary-border: rgba(17, 17, 17, .55);
    --casefile-secondary-border: rgba(17, 17, 17, .22);
    --casefile-card-bg: rgba(216,199,163,.96);
    --casefile-card-bg-soft: rgba(245,240,223,.74);
    --casefile-focus-ring: rgba(200,167,93,.68);
}

body {
    background-image: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), url('/images/case-files/001/cover.png');
}

body.casefile-started .casefile-problem-reference {
    margin-bottom: 0;
}

body.casefile-first-step .casefile-progress {
    background: rgba(10,10,10,.88);
    box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

body.casefile-first-step .casefile-progress-tools {
    opacity: .72;
}

body.casefile-first-step .casefile-title-bar,
body.casefile-first-step .casefile-problem-reference {
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.casefile-step--intro.panel {
    border-width: 1px;
    border-color: rgba(200,167,93,.34);
    background: linear-gradient(135deg, rgba(216,199,163,.98), rgba(245,240,223,.92));
    box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

.casefile-step--intro .panel-header {
    background: rgba(17,17,17,.96);
    border-bottom: 1px solid rgba(200,167,93,.35);
}

.casefile-step--intro .panel-body {
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

.casefile-intro-eyebrow {
    color: var(--red);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.casefile-intro-lede {
    font-size: clamp(1.08rem, 2vw, 1.28rem);
    font-weight: 700;
    max-width: 58rem;
}

.case-note,
.casefile-simulator-alignment__map,
.narrative-details,
.casefile-completion__proof-list li {
    border-width: 1px;
    border-color: var(--casefile-secondary-border);
}

.panel:not(.casefile-step--intro):not(.casefile-inventory-error) {
    border-color: var(--casefile-primary-border);
}

.pipeline-decision-gate {
    border-width: 1px;
    background: rgba(245,240,223,.9);
}

.pipeline-decision-option {
    min-height: 46px;
}

.pipeline-decision-option input[type='radio'] {
    margin-top: .3rem;
}

.casefile-completion__bridge {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(17,17,17,.18);
    font-weight: 700;
}

.casefile-membership-teaser__button {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    body.casefile-started .casefile-book {
        padding-top: var(--casefile-progress-reserved-height, 88px);
    }

    .casefile-progress-label {
        flex-direction: column;
        align-items: flex-start;
        gap: .15rem;
    }

    .casefile-progress-meta {
        font-size: .78rem;
    }

    .casefile-step--intro .panel-body,
    .panel-body {
        padding: 1rem;
    }

    .pipeline-decision-option {
        padding: .9rem;
    }
}

@media (max-width: 575.98px) {
    .casefile-title-bar h1 {
        font-size: 1.45rem;
    }

    .casefile-title-bar p,
    .casefile-problem-reference p {
        font-size: .86rem;
        line-height: 1.45;
    }

    .casefile-problem-reference h2 {
        font-size: 1.2rem;
    }

    .casefile-progress {
        padding: .5rem .75rem .6rem;
    }

    .casefile-progress-tools {
        gap: .35rem;
        margin-bottom: .35rem;
    }

    .casefile-progress-tool {
        width: 32px;
        height: 32px;
    }

    .casefile-membership-teaser__button {
        white-space: normal;
    }
}


/* =====================================================
   Compact top / bottom problem statement patch
   Purpose: keep only the progress ribbon fixed and move the problem statement
   into normal bottom reference flow.
   ===================================================== */

body.casefile-started::before,
html.casefile-briefing-collapsed body::before {
    display: none !important;
}

body.casefile-started .casefile-book {
    padding-top: var(--casefile-progress-reserved-height, 52px) !important;
}

.casefile-title-bar,
body.casefile-started .casefile-title-bar {
    position: static !important;
    top: auto !important;
    margin-top: 0;
    padding: 1.1rem 1.25rem;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(200,167,93,.22);
    border-radius: 0;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.casefile-title-bar .casefile-briefing-toolbar {
    margin-bottom: .45rem;
}

.casefile-title-bar h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: .95;
}

.casefile-title-bar p:not(.casefile-kicker) {
    max-width: 56rem;
    line-height: 1.5;
}

.casefile-problem-reference,
body.casefile-started .casefile-problem-reference,
html.casefile-briefing-collapsed .casefile-problem-reference {
    position: static !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    max-height: none !important;
    pointer-events: auto !important;
}

.casefile-problem-reference--bottom {
    max-width: 1140px;
    margin: 1.75rem auto 3rem;
    padding: 1.25rem 1.5rem;
    background: rgba(216,199,163,.94);
    border: 1px solid rgba(200,167,93,.35);
    box-shadow: 0 14px 32px rgba(0,0,0,.28);
}

.casefile-problem-reference--bottom h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
}

.casefile-problem-reference--bottom p {
    line-height: 1.68;
}

@media (max-width: 767.98px) {
    body.casefile-started .casefile-book {
        padding-top: var(--casefile-progress-reserved-height, 64px) !important;
    }

    .casefile-title-bar,
    body.casefile-started .casefile-title-bar,
    .casefile-problem-reference--bottom {
        padding: 1rem;
        max-width: calc(100% - 1rem);
    }
}


.btn {
    element .style

{
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}