/*
 * Case study page — scoped styles.
 * Everything lives under .case-study so no other Zelio page is affected.
 * Tokens are inherited from the theme (--primary-color, --gradient-color, --tc-*).
 */

.case-study {
    --cs-line: rgba(255, 255, 255, 0.09);
    --cs-line-strong: rgba(255, 255, 255, 0.16);
    --cs-surface: rgba(255, 255, 255, 0.026);
    --cs-muted: var(--tc-neutral-300);
    --cs-body: var(--tc-neutral-200);
    --cs-ink: var(--tc-neutral-0);
    --cs-gutter: clamp(40px, 4.6vw, 64px);
    overflow-x: clip;
}

[data-bs-theme='light'] .case-study {
    --cs-line: rgba(31, 31, 36, 0.13);
    --cs-line-strong: rgba(31, 31, 36, 0.22);
    --cs-surface: rgba(31, 31, 36, 0.025);
}

/* ---------- rhythm ---------- */
.cs-section { padding-block: var(--cs-gutter); position: relative; }
.cs-section--tight { padding-block: clamp(30px, 3.6vw, 52px); }
.cs-rule { height: 1px; background: var(--cs-line); border: 0; margin: 0; opacity: 1; }

/* ---------- eyebrow / labels ---------- */
.cs-eyebrow {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--cs-muted); margin-bottom: 28px;
}
.cs-eyebrow::before {
    content: ''; width: 34px; height: 1px; flex: 0 0 34px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
}
.cs-eyebrow--plain::before { display: none; }
.cs-eyebrow b { color: var(--primary-color); font-weight: 700; }

/* ---------- headings & copy ---------- */
.cs-h1 {
    font-size: clamp(38px, 6.4vw, 82px); line-height: 1.04;
    letter-spacing: -0.03em; font-weight: 600; color: var(--cs-ink); margin: 0;
}
.cs-h2 {
    font-size: clamp(28px, 3.9vw, 54px); line-height: 1.12;
    letter-spacing: -0.025em; font-weight: 600; color: var(--cs-ink); margin: 0;
}
.cs-h3 {
    font-size: clamp(20px, 2vw, 28px); line-height: 1.25;
    letter-spacing: -0.015em; font-weight: 600; color: var(--cs-ink); margin: 0;
}
.cs-lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.62; color: var(--cs-body); max-width: 62ch; }
.cs-body { font-size: clamp(16px, 1.1vw, 18px); line-height: 1.72; color: var(--cs-body); max-width: 60ch; }
.cs-grad {
    background: linear-gradient(92deg, var(--primary-color) 0%, var(--gradient-color) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* editorial two-column: sticky label rail + content */
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 992px) {
    .cs-split { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; align-items: start; }
    .cs-split__rail { position: sticky; top: 120px; }
}

/* ---------- hero ---------- */
.cs-hero { position: relative; padding-top: clamp(120px, 14vw, 190px); padding-bottom: clamp(48px, 6vw, 80px); }
.cs-hero__glow {
    position: absolute; inset-inline-end: -12%; top: -22%;
    width: min(760px, 84vw); aspect-ratio: 1; pointer-events: none; z-index: -1;
    background: radial-gradient(circle, rgba(110, 78, 242, 0.30) 0%, rgba(110, 78, 242, 0) 68%);
    filter: blur(10px);
}
.cs-hero__title { max-width: 17ch; }

/* metadata strip */
.cs-meta { display: grid; gap: 1px; background: var(--cs-line); border-block: 1px solid var(--cs-line); }
@media (min-width: 640px) { .cs-meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cs-meta { grid-template-columns: repeat(5, 1fr); } }
.cs-meta__item { background: var(--tc-neutral-1000); padding: 22px 24px 24px; }
.cs-meta__k { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-muted); margin: 0 0 8px; font-weight: 700; }
.cs-meta__v { font-size: 16px; line-height: 1.45; color: var(--cs-ink); margin: 0; font-weight: 500; }

/* ---------- metrics ---------- */
.cs-metrics { display: grid; gap: 1px; background: var(--cs-line); }
@media (min-width: 768px) { .cs-metrics--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cs-metrics--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cs-metrics--4 { grid-template-columns: repeat(4, 1fr); } }
.cs-metric { background: var(--tc-neutral-1000); padding: clamp(28px, 3.4vw, 46px) clamp(22px, 2.6vw, 38px); }
.cs-metric__no { font-size: 11px; letter-spacing: 0.2em; color: var(--cs-muted); font-weight: 700; display: block; margin-bottom: 20px; }
.cs-metric__fig {
    font-size: clamp(38px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.04em;
    font-weight: 600; color: var(--cs-ink); margin: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.12em;
}
.cs-metric__fig .cs-from { color: var(--cs-muted); font-weight: 500; }
.cs-metric__fig .cs-to { font-size: 0.52em; color: var(--primary-color); transform: translateY(-0.14em); }
.cs-metrics--4 .cs-metric__fig { font-size: clamp(26px, 2.8vw, 40px); }
.cs-metric__label { font-size: 15px; line-height: 1.5; color: var(--cs-body); margin: 18px 0 0; max-width: 26ch; }

/* ---------- flow chain (problem / journey) ---------- */
.cs-chain { display: grid; gap: 0; counter-reset: cs-chain; }
.cs-chain__item {
    counter-increment: cs-chain; position: relative;
    display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px);
    padding: clamp(20px, 2.2vw, 30px) 0; border-top: 1px solid var(--cs-line);
}
.cs-chain__item:last-child { border-bottom: 1px solid var(--cs-line); }
.cs-chain__no {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    color: var(--primary-color); min-width: 2.4em; font-variant-numeric: tabular-nums;
}
.cs-chain__no::before { content: '0' counter(cs-chain); }
.cs-chain__text { font-size: clamp(19px, 2.5vw, 34px); line-height: 1.24; letter-spacing: -0.02em; font-weight: 600; color: var(--cs-ink); margin: 0; }
.cs-chain__note { font-size: 15px; color: var(--cs-muted); margin: 8px 0 0; max-width: 52ch; line-height: 1.6; }
.cs-chain--dim .cs-chain__item:not(:last-child) .cs-chain__text { color: var(--cs-body); }
.cs-chain__item .cs-chain__body { min-width: 0; }
/* terminal step gets the accent */
.cs-chain__item--goal .cs-chain__text { color: var(--cs-ink); }
.cs-chain__item--goal .cs-chain__no { color: var(--gradient-color); }
.cs-chain__item--goal { background: linear-gradient(90deg, rgba(110, 78, 242, 0.10), transparent 62%); }

/* ---------- narrowing funnel (segmentation) ---------- */
.cs-funnel { display: grid; gap: 14px; justify-items: center; }
.cs-funnel__band {
    width: 100%; border: 1px solid var(--cs-line); border-radius: 14px;
    padding: clamp(20px, 2.4vw, 30px) clamp(20px, 3vw, 40px); text-align: center;
    background: var(--cs-surface); transition: transform .5s ease, opacity .5s ease;
}
.cs-funnel__band--1 { opacity: 0.55; }
.cs-funnel__band--2 { width: 100%; border-color: var(--cs-line-strong); }
.cs-funnel__band--3 { width: 100%; }
@media (min-width: 768px) {
    .cs-funnel__band--1 { width: 100%; }
    .cs-funnel__band--2 { width: 78%; }
    .cs-funnel__band--3 { width: 56%; }
}
.cs-funnel__band--2, .cs-funnel__band--3 {
    background:
        linear-gradient(var(--tc-neutral-1000), var(--tc-neutral-1000)) padding-box,
        linear-gradient(92deg, var(--primary-color), var(--gradient-color)) border-box;
    border: 1px solid transparent;
}
.cs-funnel__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cs-muted); font-weight: 700; margin: 0 0 10px; }
.cs-funnel__v { font-size: clamp(18px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink); margin: 0; line-height: 1.2; }
.cs-funnel__sub { font-size: 14px; color: var(--cs-muted); margin: 6px 0 0; }
.cs-funnel__arrow { color: var(--cs-line-strong); font-size: 20px; line-height: 1; }

/* ---------- before / after typographic ---------- */
.cs-ba { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 992px) { .cs-ba { grid-template-columns: 1fr auto 1fr; } }
.cs-ba__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--cs-muted); margin: 0 0 16px; }
.cs-ba__before { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; color: var(--cs-muted); margin: 0; }
.cs-ba__before s { text-decoration-color: rgba(255, 255, 255, 0.25); text-decoration-thickness: 1px; }
.cs-ba__after { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; margin: 0; }
.cs-ba__arrow { color: var(--primary-color); font-size: 26px; display: flex; justify-content: center; }
@media (max-width: 991.98px) { .cs-ba__arrow { transform: rotate(90deg); } }

/* ---------- comparison bars (performance) ---------- */
.cs-cmp { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .cs-cmp { grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 5vw, 90px); } }
.cs-cmp__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cs-line); }
.cs-cmp__title { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--cs-muted); margin: 0; }
.cs-cmp__delta { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cs-bar { margin-top: 26px; }
.cs-bar__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 16px; }
.cs-bar__k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-muted); font-weight: 700; }
.cs-bar__track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
[data-bs-theme='light'] .cs-bar__track { background: rgba(31, 31, 36, 0.07); }
.cs-bar__fill { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.1s cubic-bezier(.22, .8, .3, 1); }
.cs-bar__fill--before { background: rgba(255, 255, 255, 0.22); }
[data-bs-theme='light'] .cs-bar__fill--before { background: rgba(31, 31, 36, 0.22); }
.cs-bar__fill--after { background: linear-gradient(90deg, var(--primary-color), var(--gradient-color)); }
.is-in .cs-bar__fill { width: var(--w, 0%); }
.cs-bar__v { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: end; }
.cs-bar__row--before .cs-bar__v { color: var(--cs-muted); }
.cs-cmp__note { font-size: 14px; color: var(--cs-muted); margin: 22px 0 0; line-height: 1.6; }

/* ---------- disciplines ---------- */
.cs-disc { display: grid; gap: 1px; background: var(--cs-line); }
@media (min-width: 768px) { .cs-disc { grid-template-columns: repeat(3, 1fr); } }
.cs-disc__item { background: var(--tc-neutral-1000); padding: clamp(26px, 3vw, 40px); }
.cs-disc__no { font-size: 11px; letter-spacing: 0.2em; color: var(--primary-color); font-weight: 700; }
.cs-disc__t { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink); margin: 18px 0 0; }

/* ---------- orbit / ecosystem ---------- */
.cs-orbit { display: none; }
@media (min-width: 992px) {
    .cs-orbit { display: block; position: relative; width: min(760px, 100%); aspect-ratio: 1; margin-inline: auto; }
    .cs-orbit__ring { position: absolute; inset: 18%; border: 1px dashed var(--cs-line); border-radius: 50%; }
    .cs-orbit__ring--outer { inset: 0; opacity: 0.6; }
    .cs-orbit__core {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 34%; aspect-ratio: 1; border-radius: 50%;
        display: flex; align-items: center; justify-content: center; text-align: center;
        background: radial-gradient(circle at 50% 35%, rgba(110, 78, 242, 0.32), rgba(110, 78, 242, 0.04) 70%);
        border: 1px solid var(--cs-line-strong);
    }
    .cs-orbit__core span {
        font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--cs-ink); line-height: 1.4; max-width: 8ch;
    }
    .cs-orbit__spoke { position: absolute; top: 50%; left: 50%; width: 42%; height: 0; transform-origin: 0 50%; transform: rotate(var(--a)); }
    .cs-orbit__line { position: absolute; inset: 0; border-top: 1px solid var(--cs-line); }
    .cs-orbit__node {
        position: absolute; inset-inline-end: 0; top: 50%;
        transform: translate(50%, -50%) rotate(calc(-1 * var(--a)));
        white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
        color: var(--cs-body); background: var(--tc-neutral-1000);
        border: 1px solid var(--cs-line); border-radius: 99px; padding: 11px 20px;
    }
}
.cs-orbit-list { display: grid; gap: 10px; }
@media (min-width: 992px) { .cs-orbit-list { display: none; } }
.cs-orbit-list__core {
    text-align: center; padding: 26px; border-radius: 16px; margin-bottom: 6px;
    background: radial-gradient(circle at 50% 0%, rgba(110, 78, 242, 0.28), transparent 70%);
    border: 1px solid var(--cs-line-strong);
    font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-ink);
}
.cs-orbit-list__item {
    display: flex; align-items: center; gap: 12px; padding: 15px 18px;
    border: 1px solid var(--cs-line); border-radius: 12px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cs-body);
}
.cs-orbit-list__item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); flex: 0 0 6px; }

/* ---------- asset placeholders ---------- */
.cs-ph {
    position: relative; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 24px;
    border: 1px dashed var(--cs-line-strong); border-radius: 14px;
    background:
        var(--cs-surface)
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 10px, transparent 10px 20px);
    color: var(--cs-muted); overflow: hidden;
}
.cs-ph__inner { display: grid; gap: 10px; justify-items: center; }
.cs-ph__icon { font-size: 22px; color: var(--cs-line-strong); }
.cs-ph__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; margin: 0; }
.cs-ph__hint { font-size: 12px; color: var(--cs-muted); opacity: 0.7; margin: 0; }
.cs-ph--16x9 { aspect-ratio: 16 / 9; }
.cs-ph--4x3 { aspect-ratio: 4 / 3; }
.cs-ph--1x1 { aspect-ratio: 1; }
.cs-ph--21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 575.98px) { .cs-ph--21x9 { aspect-ratio: 16 / 10; } }

/* browser chrome mockup */
.cs-browser { border: 1px solid var(--cs-line); border-radius: 14px; overflow: hidden; background: var(--cs-surface); }
.cs-browser__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--cs-line); }
.cs-browser__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cs-line-strong); }
.cs-browser__url { margin-inline-start: 10px; height: 8px; flex: 1; border-radius: 99px; background: var(--cs-line); max-width: 60%; }
.cs-browser .cs-ph { border: 0; border-radius: 0; background: transparent; }

/* ---------- media strip (podcast) ---------- */
.cs-strip { display: grid; gap: 16px; }
@media (min-width: 768px) { .cs-strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- asymmetric photo grid (event) ---------- */
.cs-photos { display: grid; gap: 16px; }
@media (min-width: 768px) { .cs-photos__row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; } }
@media (min-width: 768px) { .cs-photos__stack { display: grid; gap: 16px; } }

/* ---------- impact ---------- */
.cs-impact { position: relative; }
.cs-impact__glow {
    position: absolute; inset-inline-start: 50%; top: 0; transform: translateX(-50%);
    width: min(1100px, 120%); height: 520px; pointer-events: none; z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(110, 78, 242, 0.20), transparent 72%);
}
.cs-closing {
    font-size: clamp(22px, 3.1vw, 42px); line-height: 1.28; letter-spacing: -0.025em;
    font-weight: 500; color: var(--cs-ink); max-width: 24ch; margin: 0;
}

/* ---------- next project ---------- */
.cs-next { border-top: 1px solid var(--cs-line); }
.cs-next__link { display: block; text-decoration: none; padding-block: clamp(48px, 6vw, 86px); }
.cs-next__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cs-muted); font-weight: 700; margin: 0 0 18px; }
.cs-next__t {
    font-size: clamp(34px, 6vw, 84px); line-height: 1; letter-spacing: -0.035em; font-weight: 600;
    color: var(--cs-ink); margin: 0; transition: color .35s ease;
}
.cs-next__link:hover .cs-next__t { color: var(--primary-color); }
.cs-next__arrow { transition: transform .35s ease; display: inline-block; }
.cs-next__link:hover .cs-next__arrow { transform: translate(6px, -6px); }

/* ---------- reveal (progressive enhancement: visible by default) ---------- */
.cs-reveal { opacity: 1; }
.js-cs .cs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1); }
.js-cs .cs-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js-cs .cs-reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .cs-bar__fill { transition: none; }
}

/* ============================================================
   Components added for the Nard POS and Opus HR case studies.
   Same scoping rule: everything lives under .case-study.
============================================================= */

/* ---------- concentric qualification rings ---------- */
.cs-rings { display: grid; gap: 10px; }
.cs-rings__layer {
    display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline;
    gap: clamp(14px, 2vw, 26px);
    border: 1px solid var(--cs-line); border-radius: 14px;
    padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
    background: var(--cs-surface);
    margin-inline: 0;
    transition: margin .6s cubic-bezier(.22, .8, .3, 1);
}
@media (min-width: 768px) {
    /* each successive gate visually narrows the pool */
    .cs-rings__layer:nth-child(1) { margin-inline: 0; }
    .cs-rings__layer:nth-child(2) { margin-inline: 3%; }
    .cs-rings__layer:nth-child(3) { margin-inline: 6%; }
    .cs-rings__layer:nth-child(4) { margin-inline: 9%; }
    .cs-rings__layer:nth-child(5) { margin-inline: 12%; }
    .cs-rings__layer:nth-child(6) { margin-inline: 15%; }
}
.cs-rings__no { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--primary-color); font-variant-numeric: tabular-nums; }
.cs-rings__k { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--cs-ink); margin: 0; }
.cs-rings__v { font-size: 14px; color: var(--cs-muted); margin: 5px 0 0; line-height: 1.55; }
.cs-rings__core {
    text-align: center; border-radius: 16px; padding: clamp(22px, 2.6vw, 32px);
    background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(110, 78, 242, 0.26), transparent 72%);
    border: 1px solid var(--cs-line-strong);
    font-size: clamp(14px, 1.4vw, 17px); font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--cs-ink);
}

/* ---------- emphasis pull-quote ---------- */
.cs-pull {
    font-size: clamp(24px, 3.4vw, 46px); line-height: 1.2; letter-spacing: -0.028em;
    font-weight: 600; color: var(--cs-ink); margin: 0; max-width: 22ch;
}
.cs-pull span { display: block; }

/* ---------- device / reel frames ---------- */
.cs-phones { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 700px) { .cs-phones { grid-template-columns: repeat(3, 1fr); } }
.cs-phone {
    border: 1px solid var(--cs-line); border-radius: 26px; padding: 10px;
    background: var(--cs-surface);
}
.cs-phone__screen { border-radius: 18px; overflow: hidden; }
.cs-phone .cs-ph { border: 0; border-radius: 18px; aspect-ratio: 9 / 16; }
.cs-phone__tag {
    display: block; text-align: center; margin-top: 12px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-muted);
}
.cs-phone--accent .cs-phone__tag { color: var(--primary-color); }

/* ---------- decision gate flow ---------- */
.cs-gate { display: grid; gap: 0; }
.cs-gate__step {
    display: flex; align-items: center; gap: clamp(14px, 2vw, 24px);
    padding: clamp(15px, 1.8vw, 22px) 0; border-top: 1px solid var(--cs-line);
}
.cs-gate__step:last-of-type { border-bottom: 1px solid var(--cs-line); }
.cs-gate__mark {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cs-line-strong); font-size: 13px; color: var(--cs-muted);
}
.cs-gate__step--check .cs-gate__mark { border-color: var(--primary-color); color: var(--primary-color); }
.cs-gate__label { font-size: clamp(16px, 1.9vw, 23px); font-weight: 600; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; }
.cs-gate__note { font-size: 14px; color: var(--cs-muted); margin: 4px 0 0; }
.cs-gate__branch { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 768px) { .cs-gate__branch { grid-template-columns: repeat(2, 1fr); } }
.cs-branch {
    border: 1px solid var(--cs-line); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px);
}
.cs-branch--reject { opacity: 0.62; }
.cs-branch--accept {
    background:
        linear-gradient(var(--tc-neutral-1000), var(--tc-neutral-1000)) padding-box,
        linear-gradient(140deg, var(--primary-color), var(--gradient-color)) border-box;
    border: 1px solid transparent;
}
.cs-branch__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--cs-muted); margin: 0 0 12px; }
.cs-branch__v { font-size: clamp(17px, 1.9vw, 23px); font-weight: 600; letter-spacing: -0.015em; color: var(--cs-ink); margin: 0; }
.cs-branch__path { font-size: 14px; color: var(--cs-muted); margin: 10px 0 0; letter-spacing: 0.06em; }

/* ---------- tracking stack ---------- */
.cs-stack { display: grid; gap: 14px; justify-items: center; }
.cs-stack__node {
    width: 100%; max-width: 420px; text-align: center;
    border: 1px solid var(--cs-line-strong); border-radius: 14px; padding: 18px 24px;
    background: var(--cs-surface);
}
.cs-stack__node b { display: block; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; letter-spacing: -0.01em; color: var(--cs-ink); }
.cs-stack__node small { display: block; font-size: 13px; color: var(--cs-muted); margin-top: 5px; }
.cs-stack__fan { display: grid; gap: 12px; width: 100%; }
@media (min-width: 700px) { .cs-stack__fan { grid-template-columns: repeat(4, 1fr); } }
.cs-stack__leaf {
    border: 1px solid var(--cs-line); border-radius: 12px; padding: 16px 14px; text-align: center;
}
.cs-stack__leaf b { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-ink); }
.cs-stack__leaf small { display: block; font-size: 12px; color: var(--cs-muted); margin-top: 6px; line-height: 1.5; }

/* ---------- circular feedback loop ---------- */
.cs-loop { display: grid; gap: 12px; position: relative; }
@media (min-width: 992px) {
    .cs-loop { grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 16px; }
}
.cs-loop__node {
    border: 1px solid var(--cs-line); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.cs-loop__node b { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: var(--cs-ink); letter-spacing: -0.01em; }
.cs-loop__node small { font-size: 13px; color: var(--cs-muted); line-height: 1.5; }
.cs-loop__split { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 768px) { .cs-loop__split { grid-template-columns: repeat(2, 1fr); } }
.cs-loop__verdict {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--cs-line); border-radius: 12px; padding: 14px 18px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-body);
}
.cs-loop__verdict i { font-size: 17px; }
.cs-loop__verdict--yes { border-color: rgba(110, 78, 242, 0.55); color: var(--cs-ink); }
.cs-loop__verdict--yes i { color: var(--primary-color); }
.cs-loop__verdict--no { opacity: 0.6; }
.cs-loop__return {
    margin-top: 14px; text-align: center; font-size: 12px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-color);
    border: 1px dashed rgba(110, 78, 242, 0.45); border-radius: 99px; padding: 13px 20px;
}
.cs-loop__center {
    text-align: center; margin-top: 26px;
    font-size: clamp(18px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink);
}

/* ---------- three-column transformation ---------- */
.cs-transform { display: grid; gap: 1px; background: var(--cs-line); }
@media (min-width: 900px) { .cs-transform { grid-template-columns: repeat(3, 1fr); } }
.cs-transform__col { background: var(--tc-neutral-1000); padding: clamp(26px, 3vw, 42px); }
.cs-transform__k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; margin: 0 0 22px; color: var(--cs-muted); }
.cs-transform__col--after .cs-transform__k { color: var(--primary-color); }
.cs-transform__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cs-transform__list li {
    font-size: clamp(15px, 1.45vw, 18px); line-height: 1.45; color: var(--cs-body);
    padding-inline-start: 18px; position: relative;
}
.cs-transform__list li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
    width: 6px; height: 1px; background: var(--cs-line-strong);
}
.cs-transform__col--before .cs-transform__list li { color: var(--cs-muted); }
.cs-transform__col--after .cs-transform__list li { color: var(--cs-ink); font-weight: 500; }
.cs-transform__col--after .cs-transform__list li::before { background: var(--primary-color); width: 10px; }

/* ---------- horizontal journey chain ---------- */
.cs-hchain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cs-hchain__item {
    font-size: clamp(12px, 1.2vw, 14px); font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--cs-body);
    border: 1px solid var(--cs-line); border-radius: 99px; padding: 11px 18px;
}
.cs-hchain__item:last-child {
    color: var(--cs-ink);
    background:
        linear-gradient(var(--tc-neutral-1000), var(--tc-neutral-1000)) padding-box,
        linear-gradient(92deg, var(--primary-color), var(--gradient-color)) border-box;
    border: 1px solid transparent;
}
.cs-hchain__sep { color: var(--cs-line-strong); font-size: 15px; }

/* ---------- visual equation ---------- */
.cs-eq { display: grid; gap: 18px; align-items: center; justify-items: center; text-align: center; }
@media (min-width: 900px) { .cs-eq { grid-auto-flow: column; grid-auto-columns: max-content; gap: clamp(20px, 3vw, 48px); } }
.cs-eq__term { display: grid; gap: 8px; }
.cs-eq__n { font-size: clamp(38px, 5vw, 74px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; color: var(--cs-ink); }
.cs-eq__k { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-muted); }
.cs-eq__op { font-size: clamp(24px, 3vw, 40px); color: var(--cs-line-strong); font-weight: 300; line-height: 1; }
.cs-eq__term--total .cs-eq__n { font-size: clamp(52px, 7.2vw, 108px); }
.cs-eq__term--total .cs-eq__k { color: var(--primary-color); }

/* ---------- competitor landscape ---------- */
.cs-field { display: grid; gap: 12px; }
.cs-field__row { display: grid; gap: 12px; }
@media (min-width: 700px) { .cs-field__row { grid-template-columns: repeat(4, 1fr); } }
.cs-field__node {
    border: 1px dashed var(--cs-line-strong); border-radius: 12px; padding: 22px 16px; text-align: center;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cs-muted);
}
.cs-field__band {
    border: 1px solid var(--cs-line); border-radius: 14px; padding: clamp(18px, 2.2vw, 26px); text-align: center;
    background: var(--cs-surface);
}
.cs-field__band b { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cs-muted); font-weight: 700; }
.cs-field__band span { display: block; margin-top: 9px; font-size: clamp(16px, 1.8vw, 22px); font-weight: 600; letter-spacing: -0.015em; color: var(--cs-ink); }
.cs-field__band--gap { border-style: dashed; }
.cs-field__band--opportunity {
    background:
        linear-gradient(var(--tc-neutral-1000), var(--tc-neutral-1000)) padding-box,
        linear-gradient(92deg, var(--primary-color), var(--gradient-color)) border-box;
    border: 1px solid transparent;
}

/* ---------- acquisition streams ---------- */
.cs-streams { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 992px) { .cs-streams { grid-template-columns: repeat(3, 1fr); } }
.cs-stream {
    border: 1px solid var(--cs-line); border-radius: 16px; padding: clamp(24px, 2.8vw, 36px);
    display: grid; gap: 12px; align-content: start;
}
.cs-stream__no { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--primary-color); }
.cs-stream__t { font-size: clamp(19px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--cs-ink); margin: 0; }
.cs-stream__d { font-size: 15px; line-height: 1.6; color: var(--cs-body); margin: 0; }
.cs-streams__merge {
    margin-top: 18px; text-align: center; border-radius: 16px;
    padding: clamp(24px, 3vw, 38px);
    background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(110, 78, 242, 0.24), transparent 70%);
    border: 1px solid var(--cs-line-strong);
}
.cs-streams__merge b {
    display: block; font-size: clamp(18px, 2.4vw, 32px); font-weight: 600;
    letter-spacing: -0.02em; color: var(--cs-ink);
}

/* ---------- supporting metric strip (social / website proof) ---------- */
.cs-proof { display: grid; gap: 1px; background: var(--cs-line); }
@media (min-width: 640px) { .cs-proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cs-proof--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .cs-proof--5 { grid-template-columns: repeat(5, 1fr); } }
.cs-proof__item { background: var(--tc-neutral-1000); padding: clamp(22px, 2.4vw, 32px); }
.cs-proof__n { font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -0.035em; font-weight: 600; color: var(--cs-ink); margin: 0; }
.cs-proof__k { font-size: 14px; color: var(--cs-body); margin: 12px 0 0; }
.cs-proof__delta { font-size: 13px; font-weight: 700; color: var(--primary-color); margin: 6px 0 0; letter-spacing: 0.04em; }

/* ---------- grid modifiers ---------- */
/* six metadata items read better as two rows of three than one cramped row */
@media (min-width: 1200px) { .cs-meta--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .cs-transform--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cs-cmp--4 { row-gap: clamp(36px, 4vw, 64px); } }
.cs-transform__col--change .cs-transform__k { color: var(--cs-body); }
.cs-transform__col--change .cs-transform__list li::before { background: var(--cs-line-strong); width: 10px; }
@media (min-width: 700px) { .cs-disc--6 { grid-template-columns: repeat(3, 1fr); } }
.cs-field .cs-funnel__arrow { display: block; text-align: center; }
.cs-streams__merge .cs-body { max-width: 46ch; }
/* the core positioning statement is the dominant line of its section */
.cs-pull--xl { font-size: clamp(30px, 5.6vw, 76px); line-height: 1.05; letter-spacing: -0.035em; max-width: 18ch; }
/* stacked device frames should still read as phones, not full-width blocks */
@media (max-width: 699.98px) { .cs-phone { max-width: 300px; margin-inline: auto; } }

/* ---------- real asset frames ----------
   Screenshots, reports and photos keep their own aspect ratio; only the frame
   is shared with the placeholders they replace. */
.cs-fig { display: block; }
.cs-fig__frame {
    border: 1px solid var(--cs-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--cs-surface);
    line-height: 0;
}
.cs-fig__img { display: block; width: 100%; height: auto; }
.cs-fig__cap {
    display: block; margin-top: 10px;
    font-size: 12px; line-height: 1.5; color: var(--cs-muted);
}

/* vertical captures read better inside a device frame */
.cs-fig--phone .cs-fig__frame {
    border-radius: 26px;
    padding: 9px;
    border-color: var(--cs-line-strong);
}
.cs-fig--phone .cs-fig__img { border-radius: 18px; }
@media (max-width: 699.98px) {
    .cs-fig--phone { max-width: 300px; margin-inline: auto; }
}

/* strips mix tall and wide assets: align them to the top rather than stretching */
.cs-strip, .cs-photos__row, .cs-phones { align-items: start; }

/* an empty sticky rail still claims a grid row and its gap on phones */
@media (max-width: 991.98px) {
    .cs-split__rail:empty { display: none; }
    .cs-split { gap: 20px; }
}