/* ============================================================
   SeniorTech case study — "a case study written in markdown".

   Each section is one "file" of the study: a blueprint grid instead
   of bubbles, and monospace code chips as the signature element. Loads after main.css → project.css → case-system.css.
   ============================================================ */

:root {
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    /* the deck's acid green maps to --yellow for page chrome; the produc
       palette below only ever appears inside the specimen card */
    --st-grid: rgba(169, 188, 212, .07);
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.st-hero__tagline {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.7;
    color: var(--steel-300);
    max-width: 46ch;
    margin-top: var(--space-3);
}

.st-hero__tagline em {
    font-style: normal;
    color: var(--yellow);
}

/* ------------------------------------------------------------------
   Window lights — reused by the classifier terminal chrome
   ------------------------------------------------------------------ */
.editor {
    position: relative;
}

.editor__lights {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.editor__lights i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5F57;
}

.editor__lights i:nth-child(2) { background: #FEBC2E; }
.editor__lights i:nth-child(3) { background: #28C840; }

/* ------------------------------------------------------------------
   Files — one section per markdown file, grid texture behind each
   ------------------------------------------------------------------ */
.file {
    position: relative;
    padding: var(--sec-y) var(--gutter);
    background-image:
        linear-gradient(var(--st-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--st-grid) 1px, transparent 1px);
    background-size: 44px 44px;
}

.file__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--sec-max);
    margin-inline: auto;
}

.lead--flush {
    margin-left: 0;
    margin-right: auto;
}

/* brief: statement left, teacup verdict right — no paragraph wall */
.brief-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* the cup sits on the page's right — cup and note anchor right */
.brief-duo .teacup {
    margin-top: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: .9rem;
    text-align: right;
}

@media (max-width: 760px) {
    .brief-duo {
        grid-template-columns: 1fr;
    }
}

/* the classifier chapter has to land inside ~1.4 viewports: tighter
   section padding, one-line title, leaner cards */
.file--compact {
    padding-block: clamp(3rem, 7vh, 4.5rem);
}

.opener-title--oneline {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    white-space: nowrap;
}

.file--compact .term {
    margin-top: 1.6rem;
}

.file--compact .jobs {
    margin-top: 1.4rem;
}

.file--compact .job {
    padding: 1.1rem 1.2rem;
}

.file--compact .job h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.3;
}

@media (max-width: 700px) {
    .opener-title--oneline {
        white-space: normal;
    }
}

.opener-title s {
    text-decoration-thickness: .07em;
    text-decoration-color: var(--yellow);
    opacity: .55;
}

/* ------------------------------------------------------------------
   Code chip — the deck's `intent = "safety"` annotations
   ------------------------------------------------------------------ */
.code-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--yellow);
    background: rgba(247, 255, 0, .08);
    border: 1px solid rgba(247, 255, 0, .22);
    border-radius: 6px;
    padding: .4rem .75rem;
    margin-top: 1rem;
}

/* ------------------------------------------------------------------
   02 — stats + cost cards
   ------------------------------------------------------------------ */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: var(--space-4);
}

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 1;
    color: var(--white);
}

.stat__num em {
    font-style: normal;
    font-size: .35em;
    color: var(--yellow);
    margin-inline: .18em;
    vertical-align: .35em;
    letter-spacing: .1em;
}

.stat__label {
    display: block;
    margin-top: .6rem;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--steel-300);
    max-width: 34ch;
}

.stat__label strong { color: var(--white); }

.cost-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: var(--space-5);
}

.cost,
.finding,
.rule {
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(169, 188, 212, .14);
    border-radius: 14px;
    background: rgba(13, 22, 49, .55);
}

.cost h3,
.finding h3,
.rule h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: .6rem;
}

.cost h3 span,
.finding h3 span,
.rule h3 span {
    color: var(--yellow);
    margin-right: .35rem;
}

.cost p,
.finding p:not(.code-chip),
.rule p {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--steel-300);
}

.cost strong,
.finding strong { color: var(--white); }

/* ------------------------------------------------------------------
   12 — findings
   ------------------------------------------------------------------ */
.findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-top: var(--space-4);
}

/* ------------------------------------------------------------------
   Teacup aside + shots
   ------------------------------------------------------------------ */
.teacup {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: var(--space-4);
    max-width: 52ch;
}

/* one cup, one size, one voice — same as borgo/insign asides */
.teacup img {
    width: var(--cup-size, 64px);
    height: auto;
    flex-shrink: 0;
    animation: st-cupFloat 7s infinite ease-in-out;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
}

@keyframes st-cupFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

@media (prefers-reduced-motion: reduce) {
    .teacup img { animation: none; }
}

/* the note reads as selected text: the highlight lives on an inline
   <mark>, so each line's box hugs its own words (a flex item's p is
   blockified — highlighting it paints one big rectangle) */
.teacup p {
    align-self: center;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.8;
}

.teacup p mark {
    color: var(--navy-950);
    /* gradient layer resists Android force-dark dimming (stays true yellow) */
    background: linear-gradient(var(--yellow), var(--yellow));
    padding: .12em .3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.teacup p strong { font-weight: 700; }

/* demo clips — glass slab, as if the screen sits behind water.
   The frame is a blurred glass rim; the clip itself gets a slight
   crisp-up (the CapCut exports are soft) and an overlay sheen so the
   light UI stops glaring against the dark page. */
.shot {
    position: relative;
    padding: clamp(.55rem, 1.2vw, .9rem);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(169, 188, 212, .24);
    background: linear-gradient(135deg,
            rgba(169, 188, 212, .16),
            rgba(13, 22, 49, .42) 46%,
            rgba(120, 170, 255, .10));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 34px 60px -30px rgba(0, 0, 0, .85),
        0 0 44px -14px rgba(120, 170, 255, .30),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.shot img,
.shot video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    /* the exports are near-white UI: pull them well under the page's
       light level so they sit IN the water instead of glowing on it */
    filter: saturate(1.05) contrast(1.04) brightness(.72);
}

/* aqua cast — multiply blend pulls the white product UI toward the
   page's navy, so the clip reads as seen through water */
.shot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
    background: linear-gradient(180deg,
            rgba(170, 195, 230, .55),
            rgba(150, 175, 215, .45) 45%,
            rgba(120, 145, 190, .55));
}

/* water sheen — a light band across the glass, an aqua cast from
   above, a depth vignette pulling the bottom into the page */
.shot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 32%, rgba(185, 218, 255, .18) 46%, transparent 60%),
        radial-gradient(130% 90% at 50% -12%, rgba(120, 170, 255, .14), transparent 55%),
        radial-gradient(150% 110% at 50% 118%, rgba(2, 6, 18, .38), transparent 58%);
    background-size: 230% 100%, 100% 100%, 100% 100%;
    background-position: 0% 0, 0 0, 0 0;
    mix-blend-mode: overlay;
}

/* the band drifts, slowly — light moving over water */
@media (prefers-reduced-motion: no-preference) {
    .shot::after { animation: st-sheen 9s ease-in-out infinite alternate; }
}

@keyframes st-sheen {
    from { background-position: 0% 0, 0 0, 0 0; }
    to   { background-position: 100% 0, 0 0, 0 0; }
}

.shot--wide {
    margin-top: var(--space-5);
    max-width: 720px;
    margin-inline: auto;
}

/* sound is opt-in: autoplay only runs muted, the button is the way in */
.shot__mute {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s;
}

.shot__mute:hover {
    background: rgba(0, 0, 0, .7);
}

.shot__mute:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   06 — specimen card (the product's own identity lives in here)
   ------------------------------------------------------------------ */
.rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-top: var(--space-4);
}

.specimen {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: var(--space-5);
    padding: clamp(1.5rem, 4vw, 2.6rem);
    border-radius: 16px;
    background: #F2EFE6;
    color: #10241C;
    font-family: 'Inter', system-ui, sans-serif;
}

.specimen__kicker {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2C5BE3;
    border-bottom: 1px solid rgba(16, 36, 28, .25);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.specimen__h {
    font-size: clamp(3.4rem, 7vw, 4.9rem);
    font-weight: 700;
    line-height: 1;
    color: #0B3D2E;
}

.specimen__scale {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 1.2rem;
    align-items: baseline;
}

.specimen__s1 { font-size: 1.15rem; font-weight: 700; color: #0B3D2E; }
.specimen__s2 { font-size: .95rem; font-weight: 500; color: #0B3D2E; }
.specimen__s3 { font-size: .8rem; font-weight: 400; color: #0B3D2E; }

.specimen__colors ul {
    list-style: none;
    display: flex;
    gap: .6rem;
}

.specimen__colors li {
    width: clamp(38px, 5vw, 56px);
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--sw);
    border: 1px solid rgba(16, 36, 28, .18);
}

@media (max-width: 700px) {
    .specimen { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   07 — terminal + jobs
   ------------------------------------------------------------------ */
.term {
    margin-top: var(--space-4);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(169, 188, 212, .18);
    background: rgba(5, 7, 15, .8);
}

.term__chrome {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1.1rem;
    border-bottom: 1px solid rgba(169, 188, 212, .12);
}

.term__title {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--steel-500);
}

.term__body {
    padding: 1.3rem 1.4rem .6rem;
    font-family: var(--font-mono);
}

.term__label {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--steel-500);
}

.term__input {
    min-height: 1.6em;
    margin-top: .4rem;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    color: var(--white);
}

.term__input::after {
    content: '▍';
    color: var(--yellow);
    animation: st-blink 1s steps(1) infinite;
}

@keyframes st-blink { 50% { opacity: 0; } }

.term__classify {
    margin-top: .9rem;
    font-size: .85rem;
    color: var(--steel-500);
    opacity: 0;
    transition: opacity .4s ease;
}

.term__classify.is-on { opacity: 1; }

.term__classify span {
    color: var(--yellow);
}

.term__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 1rem 1.4rem 1.3rem;
}

.term__chip {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--steel-100);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(169, 188, 212, .25);
    border-radius: 999px;
    padding: .55rem 1rem;
    cursor: pointer;
    transition: color .3s, background-color .3s, border-color .3s, transform .3s var(--ease-out);
}

.term__chip:hover {
    color: var(--white);
    border-color: var(--yellow);
    transform: translateY(-2px);
}

.term__chip:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

.term__chip.is-active {
    color: var(--navy-950);
    background: var(--yellow);
    border-color: var(--yellow);
}

.jobs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-top: var(--space-4);
}

.job {
    padding: 1.5rem 1.6rem;
    border-radius: 14px;
    border: 1px solid rgba(169, 188, 212, .14);
    background: rgba(13, 22, 49, .55);
    transition: border-color .4s ease, box-shadow .4s ease, transform .4s var(--ease-out);
    cursor: pointer;
}

.job:not(.is-lit):hover {
    border-color: rgba(247, 255, 0, .35);
    transform: translateY(-2px);
}

.job.is-lit {
    cursor: default;
}

.job.is-lit {
    border-color: rgba(247, 255, 0, .65);
    box-shadow: 0 0 0 1px rgba(247, 255, 0, .35), 0 12px 40px rgba(247, 255, 0, .07);
    transform: translateY(-4px);
}

.job__kicker {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: .8rem;
}

.job h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--white);
}

.job > p:not(.code-chip):not(.job__kicker) {
    margin-top: .8rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--steel-300);
}

/* the canned response — collapsed until its intent is picked */
.job__demo {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .6s var(--ease-out), margin-top .6s var(--ease-out);
}

.job.is-lit .job__demo {
    grid-template-rows: 1fr;
    margin-top: 1.1rem;
}

.job__demo > * {
    min-height: 0;
    overflow: hidden;
}

.job__line,
.job__steps {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--steel-100);
    background: rgba(5, 7, 15, .6);
    border-left: 2px solid var(--yellow);
    border-radius: 0 10px 10px 0;
    padding: .9rem 1rem;
}

.job__line mark,
.pipe__a mark {
    background: rgba(247, 255, 0, .18);
    color: var(--yellow);
    padding-inline: .15em;
    border-radius: 3px;
}

.job__steps {
    list-style: none;
    counter-reset: step;
}

.job__steps li {
    counter-increment: step;
    padding-left: 1.6rem;
    position: relative;
}

.job__steps li + li { margin-top: .55rem; }

.job__steps li::before {
    content: counter(step) '.';
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    color: var(--yellow);
}

.job__steps strong { color: var(--white); }

/* ------------------------------------------------------------------
   10 — personalization pipeline
   ------------------------------------------------------------------ */
.pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem;
    margin-top: var(--space-4);
}

.pipe {
    padding: 1.4rem 1.5rem;
    border-radius: 14px;
    border: 1px solid rgba(169, 188, 212, .14);
    background: rgba(13, 22, 49, .55);
}

.pipe__kicker {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--yellow);
    border-bottom: 1px solid rgba(247, 255, 0, .25);
    padding-bottom: .5rem;
    margin-bottom: .9rem;
}

.pipe__mono {
    font-family: var(--font-mono);
    font-size: .88rem;
    line-height: 1.9;
    color: var(--steel-100);
}

.pipe__q {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    color: var(--white);
    line-height: 1.5;
}

.pipe__a {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--steel-100);
}

/* ------------------------------------------------------------------
   Close
   ------------------------------------------------------------------ */
.conclusion {
    position: relative;
    padding: var(--sec-y) var(--gutter);
    text-align: center;
}

.conclusion-text {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--white);
    max-width: 46ch;
    margin-inline: auto;
}

.end-links {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.end-links a {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: .05em;
    color: var(--steel-100);
    text-decoration: none;
    transition: color .3s;
}

.end-links a:hover {
    color: var(--navy-950);
    background: var(--yellow);
}