/* ========================================================================
   CASE STUDY — READING LAYER
   Extends the site design system (styles.css) for long-form project pages.
   The landing is a poster; a case study is a document. This layer adds:
   - a 6-level type scale: display / 48 / 32 / 20 / 18 body / 14 labels
   - body text at weight 400 so bold headings pop while scanning
   - ink colors that pass WCAG AA (100% cream, or 75% for muted text —
     same precedent as the review roles on the landing). Hierarchy comes
     from size/weight/case, never from low-opacity text.
   - a reading rhythm: sections 150/100, title-to-content 64/40,
     inner elements 24/32/48/64 (half the landing's monumental scale)
   ======================================================================== */

.case-study{
    /* reading inks (AA-safe on --bg-dark: 15.4:1 and 7.9:1) */
    --cs-ink: var(--main-light);
    --cs-ink-muted: rgba(236, 227, 207, 0.75);
    /* decorative accents (non-text, exempt from contrast rules) */
    --cs-accent-soft: rgba(246, 61, 0, 0.2);
    --cs-accent-half: rgba(246, 61, 0, 0.5);
    --cs-surface: var(--main-light-05);
}

/* the landing's 50% cream fails AA for text: inside a case study it
   always means "muted ink" instead */
.case-study .text-light-5{
    color: var(--cs-ink-muted);
}

/* ---- READING COLUMN ---- */

.sub-body{
    margin-left: 24px;
    margin-right: 24px;
}

@media (min-width: 775px){
    .sub-body{
        margin-left: 64px;
        margin-right: 64px;
    }
}

@media (min-width: 1440px){
    .sub-body{
        margin-left: 15.8333333%;
        margin-right: 15.8333333%;
    }
}

/* prose never exceeds a comfortable measure (~65-75 characters) */
.cs-body-text,
.cs-card__text,
.cs-card__detail{
    max-width: 70ch;
}

.border-divider{
    background: var(--main-light-05);
    height: 1px;
}

/* ---- TYPE SCALE ---- */

/* level 6 — labels / eyebrows / captions */
.cs-label{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.4;
    display: inline-block;
}

/* level 5 — body (regular weight: reading, not display) */
.cs-body-text{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--cs-ink-muted);
    text-transform: none;
    margin: 0;
}

.cs-body-text--muted{
    margin-top: 16px;
}

.cs-detail-value{
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    line-height: 1.5;
}

/* level 4 — highlights (card titles, step titles) */
.cs-card__title{
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-ink);
    text-transform: uppercase;
    line-height: 1.25;
    margin-bottom: 12px;
    transition: color 0.5s ease;
}

.cs-card__title--spaced{
    margin-top: 24px;
    margin-bottom: 24px;
}

.cs-step-title{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    margin: 0;
}

/* level 3 — subsection titles */
.cs-subtitle{
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 16px;
}

/* level 2 — section titles */
.cs-section-title{
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* level 1 — display (case hero) */
.cs-hero__title{
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.9;
    margin-bottom: 16px;
}

.cs-hero__title span{
    display: block;
}

/* ---- SHARED DECORATIVE ELEMENTS ---- */

.cs-divider-h{
    display: inline-block;
    width: 48px;
    height: 1px;
    background-color: var(--main-light-3);
    vertical-align: middle;
}

/* retired 2026-08-10: the chapter bands already draw the limits, so the
   little line next to each title was double signage */
.cs-divider-flex{
    display: none;
}

.cs-divider-border{
    border-top: 1px solid var(--main-light-05);
}

.cs-accent-line{
    width: 64px;
    height: 2px;
    background-color: var(--main);
    margin-top: 16px;
}

.cs-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cs-accent-soft);
    display: inline-block;
    transition: background-color 0.5s ease;
}

.cs-bullet-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--main);
    display: inline-block;
    flex-shrink: 0;
    margin-top: 9px;
}

.cs-meta-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* ---- HERO: title on top, then the home-slide image as a fixed-cover
   card (24px margins, 24px radius — the email-box radius token). The
   clip-path curtain gives the "window" effect on every device, including
   iOS where background-attachment: fixed is broken. ---- */

.cs-hero{
    background-color: var(--bg-dark);
    padding-top: 128px;
}

.cs-hero-visual{
    position: relative;
    height: 80vh;
    height: 80svh;
    margin: 24px 24px 0;
    clip-path: inset(0 round 24px);
}

.cs-hero-visual::before{
    content: '';
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.cs-hero-visual--weedoo::before{
    background-image: url("../img/weedooPortfolio.webp");
}

.cs-hero-visual--jobif::before{
    background-image: url("../img/leaddmePortfolio.webp");
}

.cs-hero-visual--google::before{
    background-image: url("../img/dashboard-google.webp");
}

.cs-hero-visual--roc360::before{
    /* the hero covers the full viewport: at 2000px it was upscaled ~1.7x on a
       retina laptop and the phone edges showed it. Same image, bigger file. */
    background-image: url("../img/roc360Portfolio-lg.webp");
}

.cs-hero__bottom{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (min-width: 775px){
    .cs-hero__bottom{
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        padding-top: 80px;
        padding-bottom: 100px;
    }
}

.cs-hero__subtitle{
    max-width: 520px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
}

.cs-hero__details{
    display: flex;
    gap: 32px;
}

/* on narrow phones the 3 details wrap instead of squeezing into columns */
@media (max-width: 575.98px){
    .cs-hero__details{
        flex-wrap: wrap;
        gap: 24px 48px;
    }
}

@media (min-width: 775px){
    .cs-hero__details{
        gap: 48px;
    }
}

.cs-hero__detail{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-scroll-indicator{
    display: flex;
    align-items: center;
    gap: 12px;
    /* the hero image used to start right under this line: the title needs room
       to land before the picture takes over */
    margin-top: 48px;
    margin-bottom: 24px;
}

@media (min-width: 775px){
    .cs-scroll-indicator{
        margin-top: 64px;
        margin-bottom: 40px;
    }
}

.cs-scroll-indicator__arrow{
    color: var(--cs-ink-muted);
    font-size: 14px;
    animation: cs-bounce 2s infinite ease-in-out;
}

@keyframes cs-bounce{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(8px); }
}

/* ---- MARQUEE (decorative, aria-hidden) ---- */

.cs-marquee-wrap{
    padding: 24px 0;
    border-top: 1px solid var(--main-light-05);
    border-bottom: 1px solid var(--main-light-05);
    overflow: hidden;
}

.cs-marquee{
    overflow: hidden;
    white-space: nowrap;
}

.cs-marquee__track{
    display: inline-flex;
    gap: 32px;
    animation: cs-marquee-scroll 40s linear infinite;
}

.cs-marquee--reverse .cs-marquee__track{
    animation-direction: reverse;
    animation-duration: 35s;
}

/* large-text AA: cream 50% = 4.4:1, full orange = 4.3:1 */
.cs-marquee__track span{
    display: inline-flex;
    align-items: center;
    gap: 32px;
    font-size: 20px;
    font-weight: 700;
    color: var(--main-light-5);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.cs-marquee__track span em{
    color: var(--main);
    font-style: normal;
}

@keyframes cs-marquee-scroll{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

/* ---- SECTION HEADERS (reading rhythm: 150/100 above, 64/40 below) ---- */

.cs-section-header{
    padding-top: 100px;
    padding-bottom: 40px;
}

@media (min-width: 775px){
    .cs-section-header{
        padding-top: 150px;
        padding-bottom: 64px;
    }
}

.cs-section-header__split{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 775px){
    .cs-section-header__split{
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.cs-section-header__aside{
    max-width: 380px;
}

/* ---- CARDS ---- */

.cs-cards-grid{
    display: grid;
    gap: 1px;
}

.cs-cards-grid--3,
.cs-cards-grid--2{
    grid-template-columns: 1fr;
}

@media (min-width: 775px){
    .cs-cards-grid--3{
        grid-template-columns: repeat(3, 1fr);
    }
    .cs-cards-grid--2{
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-card{
    padding: 32px;
    height: 100%;
    transition: background-color 0.5s ease;
}

@media (min-width: 775px){
    .cs-card{
        padding-left: 40px;
        padding-right: 40px;
    }
}

.cs-card--hover:hover .cs-dot{
    background-color: var(--main);
}

.cs-card--hover:hover .cs-card__title{
    color: var(--main);
}

.cs-card--center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cs-card--elevated{
    background-color: var(--cs-surface);
}

.cs-card__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

/* ghost watermark numbers: rendered via CSS content — pure decoration,
   exempt from contrast rules (WCAG 1.4.3 "incidental") */
.cs-card__num{
    font-size: 48px;
    font-weight: 700;
    color: var(--main-light-05);
    text-transform: uppercase;
    transition: color 0.5s ease;
}

.cs-card__num::before{
    content: attr(data-num);
}

.cs-card--hover:hover .cs-card__num{
    color: var(--cs-accent-soft);
}

.cs-card__text{
    font-size: 18px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    line-height: 1.65;
    text-transform: none;
    margin: 0;
}

.cs-card__detail{
    font-size: 14px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    line-height: 1.65;
    text-transform: none;
    margin-top: 8px;
}

/* ---- STATS ---- */

.cs-stats-row{
    display: grid;
    gap: 1px;
    background-color: var(--main-light-05);
}

.cs-stats-row--4,
.cs-stats-row--5,
.cs-stats-row--6{
    /* minmax(0, 1fr) and not 1fr: a plain 1fr never shrinks below its own
       content, so a long label like "App Store & Google Play" pushed the
       column past half the screen and the page overflowed on a phone */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 775px){
    .cs-stats-row--4{
        grid-template-columns: repeat(4, 1fr);
    }
    .cs-stats-row--5{
        grid-template-columns: repeat(5, 1fr);
    }
    .cs-stats-row--6{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

.cs-stat{
    background-color: var(--bg-dark);
    padding: 24px 32px;
    text-align: center;
    transition: background-color 0.7s ease;
}

.cs-stat--highlight:hover{
    background-color: var(--cs-surface);
}

.cs-stat__value{
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
    display: block;
}


/* ---- TWO-COLUMN (Problem, Manual, PLX Constraints) ---- */

.cs-two-col{
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 64px;
}

@media (min-width: 775px){
    .cs-two-col{
        flex-direction: row;
        gap: 80px;
        padding-top: 64px;
        padding-bottom: 100px;
    }
}

/* a two-col right above a measured seam (a band, the mockup): its own
   bottom padding would stack on the seam's measure, so it hands it over */
.cs-two-col--flush{
    padding-bottom: 0;
}

.cs-two-col__left{
    flex: 0 0 auto;
}

@media (min-width: 775px){
    .cs-two-col__left{
        width: 33.333%;
    }
    .cs-two-col__right{
        width: 66.666%;
    }
}

.cs-bullet-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}

@media (min-width: 576px){
    .cs-bullet-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

.cs-bullet-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cs-bullet-item span:last-child{
    font-size: 18px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    text-transform: none;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.cs-bullet-item:hover span:last-child{
    color: var(--cs-ink);
}

/* ---- PROCESS STEPS ---- */

.cs-process-wrap{
    border-top: 1px solid var(--main-light-05);
    border-bottom: 1px solid var(--main-light-05);
    margin-top: 64px;
}

.cs-process-wrap > .sub-body{
    padding-top: 48px;
    padding-bottom: 48px;
}

@media (min-width: 775px){
    .cs-process-wrap > .sub-body{
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

.cs-process-header{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.cs-process-steps{
    display: flex;
    flex-direction: column;
}

.cs-process-step{
    display: flex;
    gap: 24px;
    padding: 32px 0;
    border-bottom: 1px solid var(--main-light-05);
    transition: padding-left 0.5s ease;
}

/* 01 and 04 are not the same width in Inter, so without a fixed column the
   four titles wobble a few pixels each. Fixed column, one hard edge. */
.cs-process-step > .cs-label{
    flex: 0 0 32px;
}

@media (min-width: 775px){
    .cs-process-step{
        gap: 48px;
    }
}

.cs-process-step:last-child{
    border-bottom: none;
}

.cs-process-step:hover{
    padding-left: 16px;
}

.cs-process-step:hover .cs-label{
    color: var(--main);
}

.cs-process-step:hover .cs-step-title{
    color: var(--main);
}

/* ---- CHECKLIST ---- */

.cs-checklist{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.cs-checklist__item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cs-checklist__dot{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--cs-accent-half);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
    transition: border-color 0.5s ease;
}

.cs-checklist__dot span{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--cs-accent-half);
    transition: background-color 0.5s ease;
}

.cs-card--hover:hover .cs-checklist__dot{
    border-color: var(--main);
}

.cs-card--hover:hover .cs-checklist__dot span{
    background-color: var(--main);
}

.cs-checklist__item span:last-child{
    font-size: 18px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    text-transform: none;
    line-height: 1.5;
}

/* ---- SOURCE LIST ---- */

.cs-source-list{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-source-item{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--main-light-05);
}

.cs-source-item:last-child{
    border-bottom: none;
}

/* ---- REQUIREMENTS ---- */

.cs-requirements-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 775px){
    .cs-requirements-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
    }
}

.cs-requirement__header{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cs-requirement__bar{
    width: 3px;
    height: 24px;
    background-color: var(--main);
    flex-shrink: 0;
}

.cs-requirement__items{
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- ITERATIONS ---- */

.cs-iteration-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 775px){
    .cs-iteration-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

.cs-iteration-step .cs-label{
    margin-bottom: 16px;
}

.cs-iteration-step .cs-step-title{
    margin-bottom: 8px;
}

/* ---- BEFORE / AFTER ---- */

.cs-before-after-list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.cs-ba-item{
    display: flex;
    align-items: center;
    gap: 12px;
}

.cs-ba-item span:last-child{
    font-size: 18px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    text-transform: none;
    line-height: 1.5;
}

.cs-ba-item--after span:last-child{
    color: var(--cs-ink);
}

.cs-ba-line{
    display: inline-block;
    width: 16px;
    height: 1px;
    background-color: var(--main-light-3);
    flex-shrink: 0;
}

.cs-ba-line--accent{
    background-color: var(--cs-accent-half);
}

.cs-transformation-indicator{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.cs-pulse-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--main);
    animation: cs-pulse 2s infinite ease-in-out;
}

@keyframes cs-pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.2); }
}

/* ---- FEATURES & IMPACT ---- */

.cs-features-impact{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 775px){
    .cs-features-impact{
        flex-direction: row;
        gap: 80px;
    }
    .cs-features-col,
    .cs-impact-col{
        width: 50%;
    }
}

.cs-features-col .cs-subtitle,
.cs-impact-col .cs-subtitle{
    margin-bottom: 32px;
}

.cs-feature-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-progress-bars{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-progress__header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cs-progress__track{
    height: 2px;
    background-color: var(--main-light-1);
    border-radius: 2px;
    overflow: hidden;
}

.cs-progress__fill{
    height: 100%;
    background-color: var(--main);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- IMPACT STATEMENT (pull quote) ---- */

.cs-impact-statement{
    text-align: center;
    padding: 64px 0 100px;
}

.cs-impact-statement .cs-label{
    margin-bottom: 32px;
}

.cs-impact-text{
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    text-transform: none;
    max-width: 40em;
    margin: 0 auto;
    color: var(--cs-ink);
}

/* ---- MOCK IMAGE ---- */

.cs-mock{
    padding: 32px 0;
}

.cs-mock img{
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.cs-mock .cs-body-text{
    margin: 32px auto 0;
    text-align: center;
}

/* variant: tall artwork never exceeds one screen of height */
.cs-mock--capped img{
    width: auto;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100svh;
    margin-left: auto;
    margin-right: auto;
}

/* ---- SCREEN GALLERY (showcase pages: full-length UI shots) ---- */

.cs-gallery{
    display: flex;
    flex-direction: column;
    gap: 64px;
}

@media (min-width: 775px){
    .cs-gallery{
        gap: 100px;
    }
}

.cs-gallery figure{
    margin: 0;
}

.cs-gallery figure > img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* every caption reads the same way: centred under its image and never wider
   than a comfortable line, wherever the figure happens to live */
.cs-gallery figcaption,
.cs-grid-2 figcaption,
.cs-layer figcaption{
    margin-top: 24px;
    margin-inline: auto;
    max-width: 70ch;
    text-align: center;
}

/* a trio of app screens side by side (stacks on phones) */
/* the six agent screens: three equal columns, two screens stacked in each,
   natural heights so nothing gets forced into a row */
.cs-shot-trio{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.cs-shot-col{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cs-shot-col img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

@media (min-width: 576px){
    .cs-shot-trio{
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }
}

/* very tall page captures flow inline, full length — the page scroll is
   the tour (Behance style), shown as an aligned desktop/mobile pair */
.cs-shot-pair{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 775px){
    .cs-shot-pair{
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

.cs-shot-pair img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* phones see the mobile capture (readable at phone width); the desktop
   capture — microscopic at 390px — is for larger screens */
@media (max-width: 774.98px){
    .cs-shot-pair img:first-child{
        display: none;
    }
}

/* mockups in pairs — two columns even on phones, so no shot sits alone */
.cs-shot-duo{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 775px){
    .cs-shot-duo{
        gap: 32px;
    }
}

.cs-shot-duo img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* four app screens: 2x2 on phones, one row on larger screens */
.cs-shot-quad{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}

@media (min-width: 775px){
    .cs-shot-quad{
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

.cs-shot-quad img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* WeeDoo's light canvas (#F0F5F8) — brand assets are made for this bg */
.cs-light-card{
    background-color: #F0F5F8;
    border-radius: 24px;
    padding: 24px;
}

@media (min-width: 775px){
    .cs-light-card{
        padding: 40px;
    }
}

.cs-light-card img{
    width: 100%;
    height: auto;
    display: block;
}

/* text sitting on a light card uses the WeeDoo dark ink */
.cs-on-light{
    color: #1B1B21;
}

/* recreated component sheet: images are visuals, labels are real text */
.cs-navspec{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-navspec img{
    width: 100%;
    height: auto;
    display: block;
}

.cs-navspec__states{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 775px){
    .cs-navspec__states{
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.cs-navspec__states span{
    display: block;
    margin-top: 8px;
    text-align: center;
}

/* tighter rhythm for spec/token sheets inside a chapter */
.cs-gallery--tight{
    gap: 32px;
}

@media (min-width: 775px){
    .cs-gallery--tight{
        gap: 48px;
    }
}

/* seams: un solo colchon por costura. El cierre de seccion no suma su
   colchon al del encabezado siguiente, y el primer capitulo tras un
   encabezado no suma el suyo al que el encabezado ya dio. */
section > .cs-two-col:last-child,
section > .cs-impact-statement:last-child{
    padding-bottom: 0;
}
.cs-section-header + .cs-chapter{
    padding-top: 0;
}
.cs-section-header + .cs-two-col{
    padding-top: 0;
}
.cs-two-col + .cs-chapter{
    padding-top: 0;
}
/* a header's last child must not leak its margin past the header's own
   padding, or the 64 under the header silently becomes 88 */
.cs-section-header > :last-child{
    margin-bottom: 0;
}

/* chapter band: the google process frame, applied to chaptered content.
   Children keep their own rhythm, the band only draws the limits. */
.cs-chapter-band{
    border-top: 1px solid var(--main-light-05);
    border-bottom: 1px solid var(--main-light-05);
    margin-top: 64px;
    padding-bottom: 48px;
}
.cs-chapter-band > .cs-chapter{
    padding-top: 48px;
}
.cs-section-header + .cs-chapter-band{
    margin-top: 0;
}
/* two bands in a row share one divider line instead of stacking two */
.cs-chapter-band + .cs-chapter-band{
    border-top: 0;
    margin-top: 0;
}

/* chapter divider inside a long process section */
.cs-chapter{
    padding-top: 64px;
}

@media (min-width: 775px){
    .cs-chapter{
        padding-top: 100px;
    }
}

.cs-chapter .cs-process-header{
    margin-bottom: 32px;
}

/* ---- WEEDOO FLAVOR ----
   The WeeDoo brand lives on a light canvas (#F0F5F8) with playful photo
   cutouts. These blocks rebuild its tokens as real HTML/CSS — text stays
   text (accessible, crawlable), and the glass effect is the actual effect. */

.cs-fun-banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    background-color: var(--cs-surface);
    border-radius: 24px;
    padding: 32px;
}

@media (min-width: 775px){
    .cs-fun-banner{
        flex-direction: row;
        gap: 48px;
        padding: 48px 64px;
    }
}

.cs-fun-banner img{
    width: min(320px, 70%);
    height: auto;
    flex-shrink: 0;
}

.cs-fun-banner__title{
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 700;
    color: var(--cs-ink);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.cs-fun-banner__title em{
    font-style: normal;
    color: #F30860;
}

.cs-fun-banner__echo{
    font-size: 20px;
    font-weight: 700;
    color: #F30860;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 8px 0 16px;
}

.cs-fun-banner__note{
    font-size: 16px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    line-height: 1.55;
    text-transform: none;
    margin: 0;
    max-width: 42ch;
}

/* a lone card in its grid has no 1px seams to show: without a visible box
   its padding reads as broken spacing, so it drops it */
.cs-card--bare{
    padding: 0;
}

/* rounded card variant (WeeDoo personas): soft tiles instead of grid lines */
.cs-cards-grid--rounded{
    gap: 8px;
}

.cs-cards-grid--rounded .cs-card{
    border-radius: 24px;
}

/* brand tiles (logo variations on their intended backgrounds) */
.cs-tile-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 775px){
    .cs-tile-grid{
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* logo variations: the vertical mark takes one part, the horizontal two */
.cs-logo-row{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

/* first row: the vertical tile is a 40px-padded square and the
   horizontal tile stretches to match its height */
.cs-logo-row:not(.cs-logo-row--squares) > div{
    display: flex;
    flex-direction: column;
}

.cs-logo-row:not(.cs-logo-row--squares) .cs-tile{
    flex: 1;
}

.cs-logo-row:not(.cs-logo-row--squares) > div:first-child .cs-tile{
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 40px;
}

.cs-logo-row:not(.cs-logo-row--squares) > div:first-child .cs-tile img{
    max-width: 100%;
    max-height: 100%;
}

/* small screens: the pair stacks */
@media (max-width: 575.98px){
    .cs-logo-row{
        grid-template-columns: 1fr;
    }
}

.cs-logo-row + .cs-logo-row{
    margin-top: 16px;
}

/* below: two big square cards, same gap */
.cs-logo-row--squares{
    grid-template-columns: 1fr;
}

.cs-tile--square{
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.cs-tile--lottie{
    padding: 0;
    overflow: hidden;
}

.cs-tile--lottie iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (min-width: 576px){
    .cs-logo-row--squares{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 775px){
    .cs-logo-row{
        gap: 24px;
    }

    .cs-logo-row + .cs-logo-row{
        margin-top: 24px;
    }
}

.cs-tile{
    border-radius: 24px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

@media (min-width: 775px){
    .cs-tile{
        min-height: 200px;
    }
}

.cs-tile--light{
    background-color: #F0F5F8;
}

.cs-tile--dark{
    background-color: #1B1B21;
}

.cs-tile img{
    max-width: 78%;
    max-height: 150px;
    width: auto;
    height: auto;
}

/* variant: the artwork covers the whole tile as a background */
.cs-tile--fill{
    padding: 0;
    background-image: url("../weedoo/logo-structure.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cs-tile-label{
    display: block;
    margin-top: 12px;
    text-align: center;
}

/* color tokens as live swatches */
.cs-swatch-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* wider than the 12px that sits between a swatch and its own label,
       so each label reads as belonging to the colour above it */
    gap: 40px 24px;
}

@media (min-width: 775px){
    .cs-swatch-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

.cs-swatch{
    display: flex;
    flex-direction: column;
    /* the labels hug their own colour; the grid gap does the separating */
    gap: 2px;
}

.cs-swatch i{
    display: block;
    height: 112px;
    border-radius: 16px;
    margin-bottom: 12px;
}

/* labels sit on a dark chip so they pass AA over any brand color */
.cs-swatch strong,
.cs-swatch span{
    align-self: flex-start;
    color: var(--cs-ink);
}

.cs-swatch span{
    color: var(--cs-ink-muted);
}

.cs-swatch strong{
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cs-swatch span{
    font-size: 14px;
}

.cs-swatch--ink-dark{ color: #1B1B21; }
.cs-swatch--ink-light{ color: #F0F5F8; }

.cs-tint-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    /* the swatches now carry labels underneath, so this row needs more air
       than the 16px it had when the values sat inside the colour */
    margin-top: 40px;
}

@media (min-width: 775px){
    .cs-tint-row{
        grid-template-columns: repeat(8, 1fr);
    }
}

.cs-tint{
    border-radius: 12px;
    height: 64px;
    display: flex;
    align-items: flex-end;
    padding: 8px 10px;
    color: var(--cs-ink-muted);
    font-size: 14px;
    font-weight: 500;
}

/* spacing scale as real bars */
.cs-bars{
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.cs-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cs-bar i{
    display: block;
    height: 96px;
    background-color: rgba(236, 227, 207, 0.22);
    border-radius: 4px;
}

.cs-bar span{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--cs-ink-muted);
}

/* the glass, for real: CSS backdrop blur over the brand gradient */
.cs-glass-demo{
    /* a real photo behind the chips: backdrop blur needs sharp detail
       behind it to be visible */
    background-image: url("../weedoo/glass-bg.webp");
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 775px){
    .cs-glass-demo{
        padding: 40px;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.cs-glass-chip{
    height: 120px;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(240, 245, 248, 0.35);
    display: flex;
    align-items: flex-end;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #F0F5F8;
}

.cs-glass-chip--1{ background-color: rgba(240, 245, 248, 0.01); }
.cs-glass-chip--50{ background-color: rgba(240, 245, 248, 0.5); color: #1B1B21; }
.cs-glass-chip--80{ background-color: rgba(240, 245, 248, 0.8); color: #1B1B21; }
.cs-glass-chip--shadow{
    background-color: rgba(240, 245, 248, 0.01);
    box-shadow: 8px 8px 32px rgba(56, 107, 156, 0.6);
}

/* type scale, set in the app's own typeface */
.cs-wix{
    font-family: "Wix Madefor Text", "Inter", sans-serif;
}

.cs-type-row{
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--main-light-05);
}

.cs-type-row:last-child{
    border-bottom: none;
}

.cs-type-row .cs-type-sample{
    font-weight: 700;
    color: var(--cs-ink);
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

.cs-type-row .cs-type-meta{
    margin-left: auto;
    text-align: right;
    flex-shrink: 0;
}

/* feature definition — five areas, real text */
.cs-def-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

@media (min-width: 775px){
    .cs-def-grid{
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }
}

.cs-def-col ul{
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.cs-def-col li{
    padding: 8px 0;
    border-bottom: 1px solid var(--main-light-05);
    font-size: 16px;
    font-weight: 400;
    color: var(--cs-ink-muted);
    text-transform: none;
    line-height: 1.4;
}

.cs-def-col li:last-child{
    border-bottom: none;
}

/* ---- BACK TO TOP (appears after the first screen) ---- */

.cs-top-btn{
    position: fixed;
    bottom: 24px;
    /* same edge as the menu and the logo, at every width */
    right: 16px;
    z-index: 90;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--main);
    color: var(--main-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.3s ease;
}

.cs-top-btn.visible{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cs-top-btn:hover{
    background-color: var(--main-light);
    color: var(--main-dark);
}

@media (min-width: 775px){
    .cs-top-btn{ bottom: 40px; }
}

/* above 1500 the whole rail leaves the edge and moves to the 100px inset:
   the button travels with the menu instead of staying behind */
@media (min-width: 1500px){
    .cs-top-btn{ right: 100px; }
}


/* ---- NEXT PROJECTS (cross navigation between portfolio pieces) ---- */

.cs-next{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 100px;
}

@media (min-width: 576px){
    .cs-next{
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
        padding-bottom: 150px;
    }
}

/* three siblings now: two columns would leave one orphan on its own row */
@media (min-width: 992px){
    .cs-next{
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* compact 80px buttons: thumbnail + caption in a row */
.cs-next__card{
    display: flex;
    align-items: center;
    gap: 24px;
    height: 80px;
    text-decoration: none;
}

.cs-next__card img{
    width: 142px;
    height: 80px;
    object-fit: cover;
    border-radius: 24px;
    display: block;
    flex-shrink: 0;
}

.cs-next__meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-next__title{
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--cs-ink);
    text-transform: uppercase;
    line-height: 1.25;
    transition: color 0.3s ease;
}

.cs-next__card:hover .cs-next__title{
    color: var(--main);
}

.cs-next__chevron{
    margin-left: auto;
    color: var(--cs-ink-muted);
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.cs-next__card:hover .cs-next__chevron{
    color: var(--main);
    transform: translateX(4px);
}

/* ---- FOOTER CTA ---- */

.cs-footer-cta__inner{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 100px 0 100px;
}

@media (min-width: 775px){
    .cs-footer-cta__inner{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 100px 0 150px;
    }
}

.cs-footer-cta__inner .cs-label{
    margin-bottom: 16px;
}

.cs-footer-email{
    margin-top: 24px;
}

.cs-footer-email p{
    font-size: 18px;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--cs-ink);
    margin: 0 0 4px;
}

.cs-footer-cta__links{
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cs-footer-cta__social-link{
    transition: color 0.3s ease;
}

.cs-footer-cta__social-link:hover{
    color: var(--main) !important;
}

.cs-btn-back{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    height: auto;
    padding: 16px 32px;
    border-radius: 42px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cs-btn-back:hover{
    background-color: var(--main);
    color: var(--main-light);
}

.cs-btn-back i{
    font-size: 14px;
    color: inherit;
}

/* ---- CONCEPT PAIR (asymmetric breathing room per sample) ---- */

.cs-shot-duo .cs-light-card:first-child{
    padding: 32px;
}

.cs-shot-duo .cs-light-card:last-child{
    padding: 48px;
}

@media (min-width: 775px){
    .cs-shot-duo .cs-light-card:first-child{
        padding: 80px;
    }
    .cs-shot-duo .cs-light-card:last-child{
        padding: 120px;
    }
}

/* ---- USER FLOW MAP ---- */

.cs-flow-scroller img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

.cs-flow-hint{
    display: none;
}

/* portrait phones and tablets: the map takes the screen height
   and scrolls sideways instead of shrinking into a stamp */
@media (orientation: portrait) and (max-width: 1024px){
    .cs-flow-scroller{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
        height: 100svh;
        border-radius: 24px;
    }

    .cs-flow-scroller img{
        height: 100%;
        width: auto;
        max-width: none;
        border-radius: 0;
    }

    .cs-flow-hint{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 2;
        margin-top: -44px;
        /* clears the fixed back-to-top circle in the corner */
        padding-right: 104px;
    }

    .cs-flow-hint__arrow{
        color: var(--cs-ink-muted);
        font-size: 14px;
        animation: cs-nudge-x 2s infinite ease-in-out;
    }
}

@keyframes cs-nudge-x{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(8px); }
}

/* ---- BRAND MOCKUPS (stationery, tags, merch) ---- */

.cs-tag-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cs-tag-row img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.cs-brand-duo{
    display: grid;
    gap: 16px;
    align-items: start;
}

.cs-brand-duo img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

@media (min-width: 775px){
    .cs-tag-row{
        grid-template-columns: repeat(6, 1fr);
    }

    .cs-brand-duo{
        gap: 32px;
    }

    /* columns sized by each image's aspect ratio so the pair
       lands at the same height without cropping anything */
    .cs-brand-duo--a{
        grid-template-columns: 1.524fr 1.211fr;
    }

    .cs-brand-duo--b{
        grid-template-columns: 1.131fr 1.389fr;
    }
}

/* ---- IMAGE PLACEHOLDERS ----
   Dashed frames that describe the image that belongs there, so the real
   asset can be dropped in later. Each states its intended content and
   aspect. Decorative frame only — the description is real, readable text. */

.cs-ph{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 32px 24px;
    border: 1px dashed var(--main-light-3);
    border-radius: 24px;
    background-color: var(--cs-surface);
    background-image:
        repeating-linear-gradient(45deg,
            transparent, transparent 11px,
            var(--main-light-05) 11px, var(--main-light-05) 12px);
    min-height: 180px;
}

/* aspect-ratio variants clear the base min-height, so the ratio derives
   height from the column width (a min-height would force a min-width and
   overflow narrow grid tracks) */
.cs-ph--screen{ aspect-ratio: 39 / 84; min-height: 0; }
.cs-ph--wide{ aspect-ratio: 16 / 10; min-height: 0; }
.cs-ph--ultrawide{ aspect-ratio: 2 / 1; min-height: 0; }
.cs-ph--square{ aspect-ratio: 1 / 1; min-height: 0; }
.cs-ph--tall{ aspect-ratio: 3 / 4; min-height: 0; }

/* three equal columns, responsive (token tiers, etc.) */
.cs-tier-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 775px){
    .cs-tier-grid{
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

.cs-ph__icon{
    font-size: 24px;
    color: var(--main);
    opacity: 0.7;
}

.cs-ph__label{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-ink);
}

.cs-ph__desc{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cs-ink-muted);
    text-transform: none;
    max-width: 34ch;
    margin: 0;
}

.cs-ph__ratio{
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--cs-ink-muted);
}

/* a placeholder sitting on a light card flips its ink so the text keeps
   its contrast against the pale surface */
.cs-light-card .cs-ph__label,
.cs-light-card .cs-ph__desc,
.cs-light-card .cs-ph__ratio{
    color: var(--bg-dark);
}

.cs-light-card .cs-ph__desc,
.cs-light-card .cs-ph__ratio{
    opacity: 0.75;
}

.cs-light-card .cs-ph{
    border-color: rgba(20, 20, 23, 0.3);
}

/* ---- BEFORE / AFTER (annotated redesign comparison) ----
   Two stacked-on-mobile columns, each an image (or placeholder) plus a
   list of notes: what was wrong before, what improved after. */

.cs-ba{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 775px){
    .cs-ba{
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

.cs-ba__col{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cs-ba__img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

.cs-ba__tag{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cs-ba__tag .cs-label{ margin: 0; }

.cs-ba__pill{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--main-light-3);
}

.cs-ba__col--after .cs-ba__pill{
    background-color: var(--main);
}

.cs-ba__notes{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-ba__notes li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cs-ink-muted);
    text-transform: none;
}

.cs-ba__notes li::before{
    content: "";
    width: 16px;
    height: 1px;
    background-color: var(--main-light-3);
    flex-shrink: 0;
    margin-top: 12px;
}

.cs-ba__col--after .cs-ba__notes li{
    color: var(--cs-ink);
}

.cs-ba__col--after .cs-ba__notes li::before{
    background-color: var(--cs-accent-half);
}

/* ---- AI WORKFLOW DIAGRAM ----
   A simple 3-input → orchestrator → output flow, built from real text
   (accessible) rather than an exported image. */

.cs-flow{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

@media (min-width: 900px){
    .cs-flow{
        /* three equal boxes: 1.1 / 0.9 / 1 made them 332, 271 and 302px wide,
           which reads as sloppy rather than intentional */
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: stretch;
        gap: 12px;
    }
}

.cs-flow__node{
    border-radius: 20px;
    padding: 24px;
    background-color: var(--cs-surface);
    height: 100%;
}

.cs-flow__node--brain{
    background-color: rgba(246, 61, 0, 0.06);
    text-align: center;
}

.cs-flow__node h3{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--cs-ink);
}

.cs-flow__node ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-flow__node li{
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--cs-ink-muted);
    text-transform: none;
}

.cs-flow__node p{
    font-size: 15px;
    line-height: 1.5;
    color: var(--cs-ink-muted);
    text-transform: none;
    margin: 0;
}

.cs-flow__arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main);
    font-size: 18px;
}

/* the arrows point down when the flow is stacked on narrow screens */
@media (max-width: 899.98px){
    .cs-flow__arrow{
        transform: rotate(90deg);
    }
}

/* ---- MOBILE FRAME (matches styles.css): 16px to the screen edge
   below 1200px ---- */

@media (max-width: 1199.98px){

    .sub-body{
        margin-left: 16px;
        margin-right: 16px;
    }

    .cs-hero-visual{
        margin: 16px 16px 0;
    }

    .cs-top-btn{
        bottom: 16px;
    }
}


/* the three main steps never change between modes: the brand stays the brand */


/* level 2: which family feeds the five roles */


/* the demo shell: sits on the dark page, holds its own light/dark stage */


/* the site-wide span rule paints every span cream; inside the stage the
   text must follow the theme, not the site */


/* controls */


/* ---- BEFORE / AFTER, DRAGGABLE ----
   Two images stacked; the top one is clipped at --pos. The control is a
   real range input (keyboard + screen reader) sitting invisibly on top,
   with a visible handle drawn at the same position. */

.cs-compare{
    position: relative;
    --pos: 50%;
    border-radius: 24px;
    overflow: hidden;
    line-height: 0;
    touch-action: pan-y;
    /* on phones the pair swaps to the vertical captures, so the box takes
       their exact proportions and nothing gets cropped */
    aspect-ratio: 1200 / 1930;
}

@media (min-width: 775px){
    .cs-compare{
        /* one screen tall, no more: the mockup has generous margins to spare */
        aspect-ratio: auto;
        height: 80vh;
        height: 80svh;
        max-height: 820px;
    }
}

.cs-compare img{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.cs-compare__after{
    clip-path: inset(0 0 0 var(--pos));
}

.cs-compare__range{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.cs-compare__range::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 56px;
    height: 100%;
    cursor: ew-resize;
}

.cs-compare__range::-moz-range-thumb{
    width: 56px;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: ew-resize;
}

.cs-compare__range:focus-visible + .cs-compare__handle{
    outline: 3px solid var(--main);
    outline-offset: 4px;
}

.cs-compare__handle{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    background-color: var(--main);
    transform: translateX(-1px);
    pointer-events: none;
}

.cs-compare__knob{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--main);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    /* flex centring instead of a glyph offset: the icon lands dead centre */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1;
}

/* the tags sit on top of two very different photographs, so instead of a
   pill they invert against whatever is underneath: light type in difference
   mode reads dark on the pale mockup and light on the dark one */
.cs-compare__tag{
    position: absolute;
    bottom: 16px;
    z-index: 1;
    color: var(--main-light);
    mix-blend-mode: difference;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    pointer-events: none;
}

.cs-compare__tag--before{ left: 16px; }
.cs-compare__tag--after{ right: 16px; }

@media (min-width: 775px){
    .cs-compare__tag{ bottom: 24px; }
    .cs-compare__tag--before{ left: 24px; }
    .cs-compare__tag--after{ right: 24px; }
}

/* ---- ART-DIRECTED PAIRS + PANEL IMAGES ----
   Some diagrams exist twice, composed for wide and for narrow. <picture>
   loads only the one that fits, so nothing is scaled down to illegible. */

.cs-figure-img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

/* a tall UI panel must NOT run the full column: it becomes a wall */
.cs-panel-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 775px){
    .cs-panel-row{
        /* the tall panel and the wide matrix sit at the same height instead of
           stacking a screen apart: they are the same idea, one layer down */
        grid-template-columns: 300px 1fr;
        gap: 56px;
    }
    /* the heading reads first in the markup; on wide screens the panel
       still sits on the left, where the eye starts */
    .cs-panel-row__figure{ order: -1; }
}

.cs-panel-row .cs-figure-img{
    max-width: 320px;
}

@media (min-width: 775px){
    .cs-panel-row .cs-figure-img{ max-width: none; }
}

.cs-grid-2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 775px){
    .cs-grid-2{
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* ---- FILE FRAGMENTS ----
   Real excerpts of the context file the agents read. Monospace, scrollable
   on narrow screens, never a screenshot: it stays selectable and searchable. */


/* instruction on the left, what it produced on the right */
.cs-cause{
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1200px){
    .cs-cause{
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

.cs-timing{
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
}

.cs-timing th,
.cs-timing td{
    text-align: left;
    padding: 12px 0;
    border-bottom: 1px solid var(--main-light-05);
    font-size: 16px;
    text-transform: none;
    font-weight: 400;
    color: var(--cs-ink-muted);
}

.cs-timing th{
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}

.cs-timing td:last-child,
.cs-timing th:last-child{ text-align: right; }

.cs-timing tr:last-child td{
    color: var(--cs-ink);
    font-weight: 700;
    border-bottom: 0;
}

/* a tall list that is longer than its slot: cut it and fade the cut, so it
   reads as "there is more of this" instead of "this image is broken" */
.cs-fade-out{
    position: relative;
    max-height: 720px;
    overflow: hidden;
    /* square at the bottom: a rounded corner under the fade would announce
       the crop, and the panel has to read as if it kept going */
    border-radius: 24px 24px 0 0;
}

.cs-fade-out::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(to bottom, rgba(20, 20, 23, 0), var(--bg-dark) 88%);
    pointer-events: none;
}

/* one alignment rule for the whole progression: everything starts at the same
   left edge and every image is either full width or the panel width */
.cs-layer__panel{
    max-width: 420px;
}

/* ── App screen rail ─────────────────────────────────────────────
   Five phone screens in one row. Smaller = sharper. When they don't
   fit, the row scrolls and the next screen peeks in so it reads as
   scrollable: arrows on mouse, plain swipe on touch. */
.cs-rail-wrap{
    position: relative;
}

.cs-rail{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.cs-rail::-webkit-scrollbar{
    display: none;
}

.cs-rail:focus-visible{
    outline: 2px solid var(--main);
    outline-offset: 6px;
    border-radius: 8px;
}

.cs-rail img{
    flex: 0 0 auto;
    width: calc((100% - 4 * 12px) / 5);
    min-width: 124px;
    height: auto;
    display: block;
    border-radius: 12px;
    scroll-snap-align: start;
}

@media (min-width: 775px){
    .cs-rail{ gap: 20px; }

    .cs-rail img{
        width: calc((100% - 4 * 20px) / 5);
        min-width: 160px;
        border-radius: 18px;
    }
}

.cs-rail__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--main);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease;
}

.cs-rail__nav--prev{ left: -16px; }
.cs-rail__nav--next{ right: -16px; }

.cs-rail__nav:disabled{
    opacity: 0.3;
    cursor: default;
}

@media (hover: hover) and (pointer: fine){
    .cs-rail-wrap.is-scrollable .cs-rail__nav{
        display: flex;
    }
}

/* a lede paragraph sits under its title instead of floating in a second
   column: the eye reads the headline, then keeps going down */
.cs-section-header__lede{
    max-width: 68ch;
    margin-top: 24px;
}

/* the atom and the molecule read as one idea, so they sit side by side:
   the particle list is a narrow column by nature, the stepper is wide */
.cs-layer-pair{
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
}

@media (min-width: 992px){
    .cs-layer-pair{
        grid-template-columns: minmax(280px, 380px) 1fr;
        gap: 48px;
    }

    .cs-layer-pair .cs-layer__panel{
        max-width: none;
    }

    /* the particle list is a tall crop and the stepper is a wide one, so the
       columns never end together: the stepper floats in the space it has
       left instead of leaving a hole under it */
    .cs-layer-pair > .cs-layer:last-child{
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .cs-layer-pair > .cs-layer:last-child > figure{
        margin-top: auto;
        margin-bottom: auto;
    }

    .cs-layer-pair .cs-fade-out{
        max-height: 860px;
    }
}

/* the excerpt runs into the next entry and dissolves: the file really does
   keep going, and the line below says by how much */


/* ── The stack: where a screen comes from ────────────────────────
   One column, one layer per row, an arrow between them. Reads top
   to bottom on every width instead of shrinking into a diagram. */
.cs-stack{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.cs-stack__row{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px;
    border-radius: 20px;
    background-color: var(--cs-surface);
}

@media (min-width: 775px){
    .cs-stack{ gap: 16px; }

    .cs-stack__row{
        grid-template-columns: 160px 1fr;
        gap: 32px;
        align-items: start;
        padding: 28px 32px;
    }
}

/* the arrow lives in the gap, drawn once per row except the last */
.cs-stack__row:not(:last-child)::after{
    content: '';
    position: absolute;
    left: 32px;
    bottom: -13px;
    width: 2px;
    height: 14px;
    background-color: var(--main);
}

@media (min-width: 775px){
    .cs-stack__row:not(:last-child)::after{
        bottom: -17px;
        height: 18px;
    }
}

.cs-stack__row--out{
    background-color: rgba(246, 61, 0, 0.06);
}

.cs-stack__title{
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.cs-stack__body .cs-body-text{
    margin: 0;
}

/* ── The mix: how much of the work is an agent ───────────────────
   Two bars, same scale. The legend sits under the bar because
   text inside the orange never clears 4.5:1. */
.cs-mix{
    display: grid;
    gap: 40px;
}

.cs-mix__row{
    display: grid;
    gap: 12px;
}

.cs-mix__bar{
    display: flex;
    gap: 4px;
    height: 20px;
}

.cs-mix__seg{
    display: block;
    border-radius: 999px;
}

.cs-mix__seg--ai{
    background-color: var(--main);
}

.cs-mix__seg--script{
    background-color: var(--main-light-3);
}

.cs-mix__key{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    color: var(--cs-ink-muted);
}

.cs-mix__dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.cs-mix__dot--ai{ background-color: var(--main); }
.cs-mix__dot--script{ background-color: var(--main-light-3); }

/* ── Component + its context ─────────────────────────────────────
   The real component, drawn at its real size, next to the notes
   that travel with it. Both columns are the same height so the
   three rows read as one system rather than three cards. */
.cs-spec-set{
    display: grid;
    gap: 32px;
}

/* the legend and the first two samples share a box, and the third sits outside
   it. That box is what the sticky legend is pinned to, so it lets go exactly
   when the third component arrives instead of riding all the way down */
.cs-spec-group{
    display: grid;
    gap: 32px;
}

.cs-spec{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 992px){
    .cs-spec-set,
    .cs-spec-group{ gap: 48px; }

    .cs-spec{
        grid-template-columns: minmax(0, 576px) 1fr;
        gap: 24px;
    }
}

/* the components carry near-black type on light surfaces: they need the
   canvas they were designed on, which is the one inside the SVG itself */
/* the app desktop mockup: body-text width, surface background, and the
   image sits flush on the bottom edge, no field below it */
.cs-mockup-band{
    background-color: var(--cs-surface);
    border-radius: 24px;
    overflow: hidden;
    padding: 32px 0 0;
}
.cs-mockup-band img{
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 775px){
    .cs-mockup-band{
        padding: 48px 0 0;
    }
}

.cs-spec__stage{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 24px;
    background-color: #F7F8FC;
    overflow: hidden;
}

.cs-spec__stage img{
    display: block;
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px){
    .cs-spec__stage{
        padding: 32px;
    }

    /* at this width the component fits at 1:1, which is the whole point */
    .cs-spec__stage img{
        max-width: none;
        max-height: 100%;
        width: auto;
    }
}

.cs-spec__panel{
    display: flex;
    flex-direction: column;
    height: 460px;
    padding: 24px;
    border-radius: 24px;
    background-color: var(--cs-surface);
}

@media (min-width: 992px){
    .cs-spec__panel{
        height: 620px;
        padding: 28px 32px;
    }
}

.cs-spec__head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    flex: 0 0 auto;
}

.cs-spec__name{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

/* the cue sits at the foot of the panel, over the fade, with the same
   bouncing arrow the hero uses to say "there is more below" */
.cs-spec__scroll{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-ink-muted);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cs-spec__scroll i{
    font-size: 12px;
    animation: cs-bounce 2s infinite ease-in-out;
}

/* once the reader reaches the end there is nothing left to announce */
.cs-spec__panel.is-read .cs-spec__scroll,
.cs-spec__panel.is-read::after{
    opacity: 0;
}

@media (prefers-reduced-motion: reduce){
    .cs-spec__scroll i{ animation: none; }
}

/* the two column headings: once above the set on desktop, and one per card
   when everything stacks into a single column */


.cs-spec__tag{
    display: block;
}

@media (min-width: 992px){
    .cs-spec__tag{ display: none; }
}

/* the scrolling area, with a fade at the foot so the cut is legible */
.cs-spec__panel{
    position: relative;
}

.cs-spec__panel::after{
    content: '';
    transition: opacity 0.25s ease;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 156px;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(to bottom, rgba(31, 30, 32, 0), #1F1E1F 72%);
    pointer-events: none;
}

@media (min-width: 992px){
    .cs-spec__panel::after{
        left: 32px;
        right: 32px;
    }
}

.cs-spec__body{
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 96px;
    scrollbar-width: thin;
    scrollbar-color: var(--main-light-3) transparent;
}

.cs-spec__body:focus-visible{
    outline: 2px solid var(--main);
    outline-offset: 4px;
    border-radius: 8px;
}

.cs-spec__body::-webkit-scrollbar{ width: 6px; }
.cs-spec__body::-webkit-scrollbar-thumb{
    background-color: var(--main-light-3);
    border-radius: 999px;
}

/* label in bold, value in medium: the same relationship the context
   sheets have in Figma, drawn with the type this site already uses */
.cs-spec__list{
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

/* label and value read as one line, "Kind: Alert", the way the sheet in Figma
   says it. The block before each label is what starts the new line, since both
   halves are inline; a value that carries a list or a paragraph drops below
   its label instead, because those cannot sit inside a line */
.cs-spec__list dt{
    display: inline;
    font-weight: 700;
    color: var(--main-light);
    text-transform: none;
    letter-spacing: 0;
}

.cs-spec__list dt::before{
    content: "";
    display: block;
    height: 20px;
}

.cs-spec__list dt:first-child::before{
    height: 0;
}

.cs-spec__list dt::after{
    content: ":";
}

.cs-spec__list dd{
    display: inline;
    margin: 0 0 0 6px;
    font-weight: 500;
    color: var(--cs-ink-muted);
}

.cs-spec__list dd:has(ul),
.cs-spec__list dd:has(p),
.cs-spec__lead{
    display: block;
    margin: 6px 0 0;
}

.cs-spec__lead{
    font-size: 18px;
}

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

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

.cs-spec__ul li{
    padding: 2px 0;
}

.cs-spec__ul b{
    font-weight: 700;
    color: var(--main-light);
}

.cs-spec__group{
    margin: 12px 0 4px;
    font-weight: 700;
    color: var(--main-light);
}

.cs-spec__group:first-child{
    margin-top: 0;
}

.cs-spec__ul--keys code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    color: var(--main-light);
}


/* ---- the panel itself, on the page's light surface ---- */


/* ---- the note, over the belt and nothing else ---- */

/* the note lives inside the panel it belongs to, never over the whole belt */


/* the site turns every span bold and uppercase by default: this is prose */


/* ---- THE SYSTEM, IN CODE ----
   Real components inside the white-label demo, on the shadcn contract the ROC
   file already speaks: its Figma variables are named background, foreground,
   card, primary, muted, border, input and ring, and its primitives are the
   Tailwind scales. Nothing below carries a hand-picked value: the brand and the
   surface come from the two ROC steps the switch sets, and the neutral roles
   are mixed out of that pair, so all fourteen brands and both modes are one
   set of rules rather than fourteen themes. */

/* the card is the brand surface lifted or sunk by a neutral veil, which is one
   rule for fourteen brands instead of fourteen surfaces. The muted text is the
   foreground held back, never a grey picked by hand */


/* ---- HERO ROLES ----
   The thesis is two surfaces, so the hero says it as two columns instead of a
   row of loose details. */

.cs-hero__roles{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

@media (min-width: 775px){
    .cs-hero__roles{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px;
    }
}

.cs-hero__role{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-hero__role .cs-body-text{ margin: 0; max-width: 46ch; }

.cs-stat__unit{
    font-size: 0.5em;
    font-weight: 700;
    margin-left: 2px;
}

/* the rating stat says its score and then draws it: the stars ride under
   the number at the size of the labels around them */
.cs-stat__stars{
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-bottom: 6px;
}

/* ---- WORK IN PROGRESS MARKERS ----
   Loud on purpose. Nothing here should ever reach the live site: if one of these
   is visible after a deploy, something went out before it was finished. */

.cs-todo{
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: var(--main);
    /* near-black on the brand orange clears AA at this size; white does not */
    color: var(--bg-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
}