/* ==========================================================================
   UX TEARDOWN CASE STUDY STYLES
   ========================================================================== */

/* === BASE === */
body.cs-body {
    background-color: var(--beige) !important;
    color: var(--dark-void) !important;
    font-family: 'Instrument Sans', sans-serif;
    overflow-x: hidden;
    margin: 0;
}
html:has(body.cs-body) {
    background-color: var(--beige);
}
main {
    background-color: transparent !important;
}

/* Typography Scale */
.cs-font-serif { font-family: 'Instrument Serif', serif; }
.cs-title-giant { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; margin: 0; font-weight: normal; color: var(--dark-void); }
.cs-title-large { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin: 0 0 1rem 0; font-weight: normal; color: var(--dark-void); }
.cs-title-medium { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; margin: 0 0 0.5rem 0; font-weight: normal; color: var(--dark-void); }
.cs-body-text { font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.6; opacity: 0.85; margin-bottom: 1.5rem; color: var(--dark-void); max-width: 650px; }
.cs-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 0.5rem; display: block; color: var(--forest-green); }

/* Layout Containers */
.cs-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
}
.cs-section {
    padding: clamp(4rem, 8vh, 8rem) 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cs-section-dark {
    background-color: var(--dark-void);
    color: var(--beige) !important;
    border-bottom: none;
}
.cs-section-dark .cs-title-giant,
.cs-section-dark .cs-title-large,
.cs-section-dark .cs-title-medium,
.cs-section-dark .cs-body-text {
    color: var(--beige) !important;
}
.cs-section-dark .cs-label {
    color: var(--gold);
}

/* Image Containers for Screenshots */
.cs-screenshot {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
}
.cs-screenshot img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   NAVBAR — light treatment for the beige teardown pages
   (style.css ships a dark glass pill designed for the dark homepage)
   ========================================================================== */
body.cs-body .glass-nav {
    background: rgba(239, 231, 216, 0.72);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(32, 73, 55, 0.14);
    box-shadow: 0 10px 40px rgba(32, 73, 55, 0.10);
}
body.cs-body .glass-nav a {
    color: var(--dark-void);
}
body.cs-body .glass-nav a.nav-logo-text {
    color: var(--forest-green);
}
body.cs-body .glass-nav a:hover {
    color: var(--forest-green);
}
body.cs-body .glass-nav a.is-current {
    color: var(--forest-green);
    font-weight: 700;
}

/* ==========================================================================
   READING PROGRESS BAR
   ========================================================================== */
.cs-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 1001;
    background: transparent;
    pointer-events: none;
}
.cs-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--forest-green), var(--gold));
    transform-origin: left center;
    transition: width 0.1s linear;
}

/* ==========================================================================
   SCROLL REVEALS
   ========================================================================== */
.cs-fade-up {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
}
/* If JS or GSAP never runs, content must still be visible. */
.no-cs-anim .cs-fade-up,
.cs-fade-up.is-revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .cs-fade-up { opacity: 1 !important; transform: none !important; }
}

/* === 1. HERO CONTEXT === */
.cs-hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 12vh;
    padding-bottom: 4rem;
}
.cs-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}
.cs-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.cs-hero-meta-item strong { display: block; font-family: 'Instrument Serif', serif; font-size: 1.5rem; font-weight: normal; }
.cs-hero-meta-item span { font-size: 0.8rem; text-transform: uppercase; opacity: 0.6; letter-spacing: 0.06em; }

/* Back link — must not be squeezed by the hero's flex layout */
.cs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    flex: 0 0 auto;
    width: max-content;
    white-space: nowrap;
    margin-bottom: 3rem;
    padding: 0.55rem 1.1rem 0.55rem 0.9rem;
    border: 1px solid rgba(32, 73, 55, 0.22);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--forest-green);
    background: rgba(255,255,255,0.45);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cs-back-link:hover {
    background: var(--forest-green);
    border-color: var(--forest-green);
    color: var(--beige);
    transform: translateX(-4px);
}
.cs-back-link svg { flex: 0 0 auto; transition: transform 0.3s ease; }
.cs-back-link:hover svg { transform: translateX(-3px); }

@media (max-width: 900px) {
    .cs-hero-grid { grid-template-columns: 1fr; }
}

/* === 2. THE TIMELINE === */
.cs-timeline-wrap {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 4rem 0;
}
.cs-timeline-node {
    position: relative;
    margin-bottom: 4rem;
}
.cs-timeline-node:last-child { margin-bottom: 0; }
.cs-timeline-node::before {
    content: '';
    position: absolute;
    left: -2.4rem;
    top: 0.3rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--forest-green);
    border: 3px solid var(--beige);
}
.cs-timeline-date { font-size: 0.85rem; opacity: 0.6; font-weight: 600; margin-bottom: 0.5rem; }

/* === 3. THE WORKFLOW (Sticky Left, Scroll Right) === */
.cs-workflow-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 6rem;
}
.cs-workflow-sticky {
    position: sticky;
    top: 15vh;
    height: max-content;
}
.cs-workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}
.cs-workflow-step {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.cs-workflow-step-num { font-family: 'Instrument Serif', serif; font-size: 3rem; color: var(--forest-green); opacity: 0.3; line-height: 0.8; }
@media (max-width: 900px) {
    .cs-workflow-grid { grid-template-columns: 1fr; gap: 0; }
    .cs-workflow-sticky { position: relative; top: 0; margin-bottom: 3rem; }
    .cs-workflow-steps { gap: 4rem; }
}

/* === 4. INSIDE THE EDIT (Pinned Media) === */
.cs-edit-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: start;
}
/* Grid items default to min-width:auto, which lets a full-size image force
   the track wider than the viewport. */
.cs-edit-grid > * { min-width: 0; }
.cs-edit-media-sticky {
    position: sticky;
    top: 15vh;
    height: 70vh;
}
.cs-edit-media-sticky .cs-screenshot { height: 100%; display: flex; align-items: center; justify-content: center; background: #0d0f0e; }
.cs-edit-media-sticky img { max-height: 100%; width: auto; object-fit: contain; }
.cs-edit-annotations {
    display: flex;
    flex-direction: column;
    gap: 15vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
}
.cs-annot-card {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.04);
}
.cs-annot-card .cs-label { margin-bottom: 0.75rem; }
@media (max-width: 900px) {
    .cs-edit-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cs-edit-media-sticky { position: relative; top: 0; height: auto; }
    .cs-edit-media-sticky .cs-screenshot { height: auto; display: block; background: transparent; }
    /* Without this the image falls back to its intrinsic width and stretches
       the grid track far past the viewport. */
    .cs-edit-media-sticky img { width: 100%; height: auto; max-height: none; }
    .cs-edit-annotations { gap: 1.5rem; padding-top: 0; padding-bottom: 0; }
}

/* === 5. BEFORE VS AFTER === */
.cs-bva-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
.cs-bva-col { display: flex; flex-direction: column; gap: 1rem; }
.cs-bva-tag { display: inline-block; padding: 0.3rem 0.9rem; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; width: max-content; }
@media (max-width: 700px) {
    .cs-bva-grid { grid-template-columns: 1fr; }
}

/* === 6. ANALYTICS DASHBOARD === */
.cs-dash-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.cs-dash-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    min-width: 0; /* let grid children shrink so charts can scale down */
}
.cs-dash-card.col-4 { grid-column: span 4; }
.cs-dash-card.col-6 { grid-column: span 6; }
.cs-dash-card.col-8 { grid-column: span 8; }
.cs-dash-card.col-12 { grid-column: span 12; }
.cs-dash-big-num { font-size: clamp(3rem, 5vw, 4.5rem); font-family: 'Instrument Serif', serif; color: var(--forest-green); line-height: 1; }
.cs-dash-image { width: 100%; border-radius: 8px; overflow: hidden; margin-top: 1.5rem; }
.cs-dash-image img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
    .cs-dash-layout { gap: 1.25rem; }
    .cs-dash-card.col-4, .cs-dash-card.col-6, .cs-dash-card.col-8 { grid-column: span 12; }
    .cs-dash-card { padding: 1.5rem; }
}

/* ==========================================================================
   CHARTS — built from the figures published on this site.
   Endpoint values are actual; intermediate curve shape is illustrative
   and is always labelled as such via .cs-chart-note.
   ========================================================================== */
.cs-chart {
    width: 100%;
    margin-top: 1.5rem;
    overflow: hidden;
}
.cs-chart svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.cs-chart-note {
    font-size: 0.78rem;
    line-height: 1.5;
    opacity: 0.55;
    margin-top: 1rem;
    font-style: italic;
    max-width: 60ch;
}
.cs-chart-grid-line {
    stroke: rgba(3, 6, 4, 0.08);
    stroke-width: 1;
}
.cs-chart-axis-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    fill: rgba(3, 6, 4, 0.45);
    font-weight: 500;
}
.cs-chart-value-label {
    font-family: 'Instrument Serif', serif;
    font-size: 15px;
    fill: var(--forest-green);
}

/* Area / line growth chart — draws itself in on scroll */
.cs-chart-line {
    fill: none;
    stroke: var(--forest-green);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--dash-len, 2000);
    stroke-dashoffset: var(--dash-len, 2000);
}
.cs-chart.is-drawn .cs-chart-line {
    transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
    stroke-dashoffset: 0;
}
.cs-chart-area {
    fill: url(#csAreaFill);
    opacity: 0;
}
.cs-chart.is-drawn .cs-chart-area {
    transition: opacity 1.2s ease 0.5s;
    opacity: 1;
}
.cs-chart-dot {
    fill: var(--gold);
    stroke: #fff;
    stroke-width: 2.5;
    opacity: 0;
}
.cs-chart.is-drawn .cs-chart-dot {
    transition: opacity 0.5s ease 1.4s;
    opacity: 1;
}

/* Retention curve — a marker sits on the one figure we actually measured */
.cs-chart-marker-line {
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0;
}
.cs-chart.is-drawn .cs-chart-marker-line {
    transition: opacity 0.5s ease 1.3s;
    opacity: 1;
}
.cs-chart-marker-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    fill: var(--forest-green);
}

/* Comparison bars — fully real data (no illustrative shape) */
.cs-bars {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 2rem;
}
.cs-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}
.cs-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}
.cs-bar-head b {
    font-family: 'Instrument Serif', serif;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    color: var(--forest-green);
}
.cs-bar-track {
    height: 12px;
    border-radius: 100px;
    background: rgba(32, 73, 55, 0.09);
    overflow: hidden;
}
.cs-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 100px;
    background: rgba(32, 73, 55, 0.45);
}
.cs-bar-row.is-win .cs-bar-fill {
    background: linear-gradient(90deg, var(--forest-green), var(--gold));
}
.cs-bars.is-drawn .cs-bar-fill {
    width: var(--bar-w, 0%);
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-bars.is-drawn .cs-bar-row:nth-child(2) .cs-bar-fill { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
    .cs-chart-line { stroke-dashoffset: 0; }
    .cs-chart-area, .cs-chart-dot, .cs-chart-marker-line { opacity: 1; }
    .cs-bar-fill { width: var(--bar-w, 0%); }
}

/* ==========================================================================
   PROOF SLOT — the one place a real screenshot goes
   ========================================================================== */
.cs-proof-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    min-height: 220px;
    padding: 3rem 2rem;
    border-radius: 12px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(32, 73, 55, 0.028) 0 10px,
            transparent 10px 20px
        ),
        rgba(32, 73, 55, 0.03);
    border: 1.5px dashed rgba(32, 73, 55, 0.28);
    color: var(--forest-green);
}
.cs-proof-slot-icon {
    width: 34px;
    height: 34px;
    opacity: 0.55;
}
.cs-proof-slot-title {
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    color: var(--forest-green);
}
.cs-proof-slot-hint {
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.7;
    max-width: 46ch;
    color: var(--dark-void);
}
.cs-proof-slot-path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    background: rgba(32, 73, 55, 0.09);
    color: var(--forest-green);
}

/* === 7. AUTHENTIC IMPACT (Comments Collage) === */
.cs-impact-collage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.cs-impact-comment {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.cs-impact-comment:hover { transform: translateY(-5px); }
.cs-impact-comment img { width: 100%; height: auto; display: block; }

/* Pull-quotes used alongside the proof slot */
.cs-quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.cs-quote {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cs-quote p {
    font-family: 'Instrument Serif', serif;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--dark-void);
    margin: 0;
}
.cs-quote footer {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
}

/* ==========================================================================
   CLOSING: TAKEAWAYS → NEXT CASE STUDY → CTA → FOOTER
   ========================================================================== */
.cs-takeaways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}
.cs-takeaway {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--forest-green);
}
.cs-takeaway strong {
    font-family: 'Instrument Serif', serif;
    font-size: 1.45rem;
    font-weight: normal;
}
.cs-takeaway span { font-size: 1rem; line-height: 1.6; opacity: 0.8; }

/* Next case study */
.cs-next {
    display: block;
    text-decoration: none;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: clamp(3rem, 6vh, 5rem) 0;
}
.cs-next-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}
.cs-next-media {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.cs-next-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-next:hover .cs-next-media img { transform: scale(1.06); }
.cs-next-title {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    color: var(--dark-void);
    transition: color 0.3s ease;
    margin: 0.5rem 0 0;
}
.cs-next:hover .cs-next-title { color: var(--forest-green); }
.cs-next-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--forest-green);
}
.cs-next-arrow svg { transition: transform 0.35s ease; }
.cs-next:hover .cs-next-arrow svg { transform: translateX(6px); }
@media (max-width: 750px) {
    .cs-next-inner { grid-template-columns: 1fr; }
    .cs-next-media { max-width: 100%; }
}

/* CTA + footer */
.cs-cta {
    background: var(--dark-void);
    color: var(--beige);
    padding: clamp(5rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vh, 3rem);
}
.cs-cta-inner {
    max-width: 1300px;
    margin: 0 auto;
}
.cs-cta .cs-label { color: var(--gold); }
.cs-cta-link {
    display: inline-flex;
    align-items: baseline;
    gap: 1.5rem;
    text-decoration: none;
    color: var(--beige);
    font-family: 'Instrument Serif', serif;
    font-size: clamp(3rem, 9vw, 8rem);
    line-height: 1;
    transition: color 0.35s ease;
}
.cs-cta-link:hover { color: var(--gold); }
.cs-cta-link svg {
    width: clamp(28px, 5vw, 60px);
    height: clamp(28px, 5vw, 60px);
    flex: 0 0 auto;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-cta-link:hover svg { transform: translate(8px, -8px); }
.cs-cta-sub {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    opacity: 0.65;
    max-width: 46ch;
    margin-top: 2rem;
}
.cs-footer-bar {
    max-width: 1300px;
    margin: clamp(3rem, 8vh, 6rem) auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(239, 231, 216, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.cs-footer-bar a { color: var(--beige); text-decoration: none; opacity: 0.7; transition: opacity 0.3s ease, color 0.3s ease; }
.cs-footer-bar a:hover { opacity: 1; color: var(--gold); }
.cs-footer-logo {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--gold);
    opacity: 1;
}
.cs-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 600px) {
    .cs-hero { min-height: auto; padding-top: 8rem; }
    .cs-hero-grid { gap: 2.5rem; }
    .cs-section { padding: 3.5rem 0; }
    .cs-back-link { margin-bottom: 2rem; font-size: 0.82rem; padding: 0.5rem 0.9rem; }
    .cs-hero-meta { gap: 1.75rem; margin-top: 2rem; }
    .cs-timeline-wrap { margin: 2.5rem 0; padding-left: 1.5rem; }
    .cs-timeline-node { margin-bottom: 2.5rem; }
    .cs-timeline-node::before { left: -1.9rem; }
    .cs-impact-collage, .cs-quote-grid { gap: 1rem; }
    .cs-takeaways { gap: 1.75rem; }
    .cs-proof-slot { padding: 2rem 1.25rem; min-height: 180px; }
    .cs-chart-note { font-size: 0.72rem; }
}