/* Scopeout case study: the editorial body of the Freo case study, built as HTML.
   Header, hero, project navigation and footer come from Freo.css. */

:root {
    --cs-ink: #151515;
    --cs-text: #6b6b6b;
    --cs-strong: #262626;
    --cs-label: #5a5a5a;
    --cs-line: #d9d9d9;
    --cs-dash: #ececec;
    --cs-card: #fafafa;
    --cs-card-line: #efefef;
    --cs-teal: #2b766e;
    --cs-teal-soft: #e3f3ef;
    --cs-indigo: #6670e6;
    --cs-amber: #b7791f;
    --cs-amber-soft: #fff6e0;
    --cs-pale: #f2f5b8;
}

/* Clicks on the project nav must not be swallowed by the hero's scroll label */
.fold1 .label { pointer-events: none; }
.fold1 .label a { pointer-events: none; }
.fold1 .cont .phead h1 { pointer-events: none; }
.fold2 .navigation { z-index: 1000; }

.fold2 .cs {
    font-family: Light;
    background: #fff;
    color: var(--cs-text);
    padding-bottom: 120px;
}

.cs * { box-sizing: border-box; }

.cs .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.cs section[id] { scroll-margin-top: 0; }

/* Section heading, as in the Freo images */
.cs .cs-h {
    font-family: Light;
    font-size: 104px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--cs-ink);
    padding-top: 150px;
    margin: 0;
}

.cs .cs-rule {
    border: 0;
    border-top: 1px solid #bdbdbd;
    margin: 64px 0 40px;
}

/* Label | copy rows */
.cs .row {
    display: grid;
    grid-template-columns: 37% 1fr;
    gap: 0 24px;
    padding: 40px 0;
    border-bottom: 1px dashed var(--cs-dash);
}

.cs .row:last-child { border-bottom: 0; }
.cs .row.flat { border-bottom: 0; padding-bottom: 8px; }

.cs .lbl {
    font-family: Regular;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cs-label);
    padding-top: 8px;
}

.cs .copy p,
.cs p.copy {
    font-family: Light;
    font-size: 24px;
    line-height: 1.65;
    color: var(--cs-text);
    margin: 0 0 16px;
}

.cs .copy p:last-child { margin-bottom: 0; }
.cs strong, .cs b { font-family: Medium; font-weight: normal; color: var(--cs-strong); }

.cs .copy h4 {
    font-family: Medium;
    font-size: 26px;
    line-height: 1.35;
    color: var(--cs-strong);
    margin: 0 0 12px;
}

.cs .small { font-size: 18px !important; line-height: 1.55 !important; }

/* Cards */
.cs .card {
    background: var(--cs-card);
    border: 1px solid var(--cs-card-line);
    border-radius: 14px;
    padding: 32px;
}

.cs .card-title {
    font-family: Regular;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cs-ink);
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e3e3e3;
}

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

.cs .tile {
    background: #fff;
    border-radius: 12px;
    padding: 26px;
    border: 1px solid #f1f1f1;
}

.cs .tile h5 {
    font-family: Medium;
    font-size: 20px;
    line-height: 1.35;
    color: var(--cs-strong);
    margin: 0 0 10px;
    font-weight: normal;
}

.cs .tile p {
    font-family: Light;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cs-text);
    margin: 0;
}

.cs .tile .k {
    font-family: Light;
    font-size: 56px;
    line-height: 1;
    color: var(--cs-ink);
    margin-bottom: 18px;
}

/* Summary card */
.cs .summary-card { margin-bottom: 8px; }
.cs .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 8px; }
.cs .summary div { padding: 4px 20px 4px 0; }
.cs .summary div + div { padding-left: 20px; border-left: 1px solid #e6e6e6; }
.cs .summary small {
    display: block;
    font-family: Regular;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8a8a;
    margin-bottom: 8px;
}
.cs .summary span { font-family: Medium; font-size: 18px; line-height: 1.4; color: var(--cs-strong); }

/* Problem chips */
.cs .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs .chip {
    font-family: Regular;
    font-size: 15px;
    color: var(--cs-strong);
    padding: 8px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 50px;
    background: #fff;
}

/* Grunt vs thinking */
.cs .pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cs .pair {
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    align-items: center;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 18px 20px;
    font-family: Light;
    font-size: 17px;
    line-height: 1.4;
}
.cs .pair .g { color: #9a9a9a; text-decoration: line-through; text-decoration-color: #cfcfcf; }
.cs .pair .a { text-align: center; color: #b0b0b0; }
.cs .pair .t { font-family: Medium; color: var(--cs-teal); }
.cs .pairs-head { display: grid; grid-template-columns: 1fr 28px 1fr; padding: 0 20px 10px; font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; }

/* Timeline (6 weeks, 5 handoffs) */
.cs .weeks { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.cs .week {
    flex: 1 1 110px;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px;
    padding: 14px 16px;
    font-family: Light;
    font-size: 16px;
    color: var(--cs-strong);
}
.cs .week small { display: block; font-family: Regular; font-size: 12px; color: #9a9a9a; margin-bottom: 4px; }
.cs .week.q { background: #fff3f3; border-color: #ffd9d9; color: #c0392b; font-family: Medium; }

/* Capitals statement */
.cs .caps {
    font-family: Medium;
    font-size: 34px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--cs-strong);
    margin: 0;
}

/* Principles list */
.cs ol.principles { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.cs ol.principles li {
    counter-increment: p;
    font-family: Light;
    font-size: 24px;
    line-height: 1.5;
    color: var(--cs-strong);
    padding: 14px 0 14px 56px;
    position: relative;
    border-bottom: 1px dashed var(--cs-dash);
}
.cs ol.principles li:last-child { border-bottom: 0; }
.cs ol.principles li::before {
    content: "0" counter(p);
    position: absolute;
    left: 0;
    top: 19px;
    font-family: Regular;
    font-size: 14px;
    color: #9a9a9a;
}

/* Boxed feature / decision titles */
.cs .boxed {
    border: 1px solid var(--cs-ink);
    padding: 26px 30px;
    font-family: Light;
    font-size: 26px;
    line-height: 1.4;
    color: var(--cs-strong);
    margin: 72px 0 20px;
    display: flex;
    gap: 16px;
    align-items: baseline;
}
.cs .boxed .n { font-family: Regular; font-size: 14px; color: #8a8a8a; flex: none; }
.cs .boxed b { font-family: Medium; }

/* Decision anatomy */
.cs .decision { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.cs .dpart {
    background: var(--cs-card);
    border: 1px solid var(--cs-card-line);
    border-radius: 12px;
    padding: 22px 24px;
}
.cs .dpart.full { grid-column: 1 / -1; }
.cs .dpart small {
    display: block;
    font-family: Regular;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a8a8a;
    margin-bottom: 8px;
}
.cs .dpart p { font-family: Light; font-size: 18px; line-height: 1.6; color: var(--cs-text); margin: 0; }
.cs .dpart.new { background: var(--cs-teal-soft); border-color: #cfe9e2; }
.cs .dpart.new small { color: var(--cs-teal); }
.cs .dpart.trade { background: var(--cs-amber-soft); border-color: #f6e3b4; }
.cs .dpart.trade small { color: var(--cs-amber); }
.cs .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cs .opt { font-family: Light; font-size: 15px; padding: 6px 12px; border-radius: 8px; border: 1px solid #e2e2e2; background: #fff; color: #8a8a8a; text-decoration: line-through; text-decoration-color: #cccccc; }
.cs .opt.on { text-decoration: none; color: var(--cs-teal); border-color: var(--cs-teal); font-family: Medium; }

/* Coloured stages with screens (Freo's striped panels) */
.cs .stage {
    border-radius: 16px;
    padding: 64px 56px;
    position: relative;
    overflow: hidden;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.0) 0 46px, rgba(255,255,255,0.22) 46px 48px),
        var(--stage, linear-gradient(135deg, #8fe0c8, #c7e8a8));
}
.cs .stage.teal   { --stage: linear-gradient(135deg, #7fdcc3 0%, #b9e6b3 100%); }
.cs .stage.indigo { --stage: linear-gradient(135deg, #8b93f0 0%, #c3c8fb 100%); }
.cs .stage.amber  { --stage: linear-gradient(135deg, #ffd66b 0%, #fff0b5 100%); }
.cs .stage.coral  { --stage: linear-gradient(135deg, #f7a35c 0%, #fbd3a8 100%); }
.cs .stage.violet { --stage: linear-gradient(135deg, #7b2ff7 0%, #d9c2ff 100%); }
.cs .stage.ink    { --stage: linear-gradient(135deg, #1f2a2a 0%, #33504b 100%); }

.cs .shot {
    display: block;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(10, 30, 30, 0.22);
    background: #fff;
}

.cs .stage .shot { max-width: 920px; margin: 0 auto; }

.cs .caption {
    font-family: Light;
    font-size: 15px;
    color: #8a8a8a;
    margin: 14px 0 0;
    text-align: center;
}

.cs .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.cs .flow.four { grid-template-columns: repeat(4, 1fr); }
.cs .flow figure { margin: 0; }
.cs .flow figcaption { font-family: Regular; font-size: 14px; color: var(--cs-strong); margin-top: 10px; }
.cs .flow figcaption span { display: block; font-family: Light; color: #8a8a8a; font-size: 14px; margin-top: 2px; }
.cs .flow .shot { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border: 1px solid #eee; border-radius: 10px; }

/* ---------- UI mocks (built in HTML, copy taken from the product) ---------- */
.cs .ui, .cs .seek, .cs .ba, .cs .toggle, .cs .modes { font-family: Regular; }
.cs .ui {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(10, 30, 30, 0.22);
    padding: 22px;
    max-width: 560px;
    margin: 0 auto;
    font-family: Regular;
    color: #1d1d1d;
}
.cs .ui.wide { max-width: 860px; }
.cs .ui .muted { color: #8a8a8a; font-family: Light; }
.cs .ui .bubble { background: #f3f4f4; border-radius: 12px; padding: 12px 14px; font-family: Light; font-size: 15px; line-height: 1.5; margin-left: 70px; }
.cs .ui .say { font-family: Light; font-size: 15px; line-height: 1.55; margin: 14px 0; }
.cs .ui .q { font-family: Medium; font-size: 15px; margin: 12px 0 10px; }
.cs .ui .answers { display: flex; flex-wrap: wrap; gap: 8px; }
.cs .ui .ans { border: 1px solid #d7dedd; border-radius: 50px; padding: 7px 14px; font-size: 14px; }
.cs .ui .ans.on { border-color: var(--cs-teal); color: var(--cs-teal); background: #f1faf8; }
.cs .ui .stagepill { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: #eef0ff; color: #4b55c9; margin-right: 8px; }
.cs .ui .perm { display: flex; justify-content: space-between; align-items: center; background: #fff8e6; border: 1px solid #f3dfa7; border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #8a6116; margin-top: 14px; }

/* Findings with Observed / Hypothesis */
.cs .finding { border-top: 1px solid #efefef; padding: 14px 0; }
.cs .finding:first-of-type { border-top: 0; }
.cs .finding h6 { margin: 0 0 6px; font-family: Medium; font-size: 16px; font-weight: normal; }
.cs .finding p { margin: 0; font-family: Light; font-size: 14px; line-height: 1.5; color: #555; }
.cs .tag { display: inline-block; font-family: Medium; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; margin-right: 8px; vertical-align: 2px; }
.cs .tag.obs { background: #e3f3ef; color: var(--cs-teal); }
.cs .tag.hyp { background: #fff1d6; color: #9a6a12; }
.cs .src { font-family: Light; font-size: 13px; color: var(--cs-teal); text-decoration: underline; }

/* Auto vs Collab */
.cs .toggle { display: inline-flex; background: #eef1f1; border-radius: 50px; padding: 4px; gap: 4px; }
.cs .toggle span { padding: 8px 16px; border-radius: 50px; font-size: 14px; color: #6b6b6b; }
.cs .toggle span.on { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.cs .modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs .mode { border-radius: 14px; padding: 28px; background: #fff; border: 1px solid #ededed; }
.cs .mode h5 { font-family: Medium; font-size: 24px; margin: 0 0 6px; font-weight: normal; color: #1d1d1d; }
.cs .mode .quote { font-family: Light; font-style: italic; font-size: 17px; color: #555; margin: 0 0 16px; }
.cs .mode dl { margin: 0; }
.cs .mode dt { font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; margin-top: 14px; }
.cs .mode dd { margin: 4px 0 0; font-family: Light; font-size: 16px; line-height: 1.5; color: #333; }

/* Tables */
.cs table.t { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #ececec; }
.cs table.t th, .cs table.t td { text-align: left; padding: 14px 18px; font-size: 16px; line-height: 1.45; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.cs table.t th { font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; background: #fafafa; }
.cs table.t td { font-family: Light; color: #444; }
.cs table.t td:first-child { font-family: Medium; color: var(--cs-strong); }
.cs table.t tr:last-child td { border-bottom: 0; }
.cs .ask { color: #9a6a12; font-family: Medium; }
.cs .never { color: #c0392b; font-family: Medium; }
.cs .does { color: var(--cs-teal); font-family: Medium; }
.cs .tablewrap { overflow-x: auto; }

/* Seeking feedback block */
.cs .seek {
    position: relative;
    border-radius: 14px;
    padding: 3px;
    background: conic-gradient(from var(--a, 0deg), #46b29d, #6670e6, #f7a35c, #46b29d);
    animation: cs-spin 4s linear infinite;
    max-width: 520px;
    margin: 0 auto;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cs-spin { to { --a: 360deg; } }
.cs .seek .inner { background: #fff; border-radius: 12px; padding: 20px; }
.cs .seek .badge { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 50px; background: #eef0ff; color: #4b55c9; margin-bottom: 12px; }
.cs .seek .acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cs .seek .acts span { font-size: 13px; padding: 7px 12px; border-radius: 8px; border: 1px solid #e0e0e0; }
.cs .seek .acts span.p { background: var(--cs-teal); color: #fff; border-color: var(--cs-teal); }
@media (prefers-reduced-motion: reduce) { .cs .seek { animation: none; } }

/* Autonomy dial */
.cs .dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.cs .dial .lv { padding: 24px 22px 22px; background: #fff; border: 1px solid #ececec; }
.cs .dial .lv:first-child { border-radius: 12px 0 0 12px; }
.cs .dial .lv:last-child { border-radius: 0 12px 12px 0; }
.cs .dial .lv + .lv { border-left: 0; }
.cs .dial .lv .bar { height: 6px; border-radius: 6px; background: #eee; margin-bottom: 16px; overflow: hidden; }
.cs .dial .lv .bar i { display: block; height: 100%; background: linear-gradient(90deg, #46b29d, #6670e6); }
.cs .dial .lv h5 { margin: 0 0 8px; font-family: Medium; font-size: 20px; font-weight: normal; color: #1d1d1d; }
.cs .dial .lv p { margin: 0; font-family: Light; font-size: 15px; line-height: 1.5; color: #555; }
.cs .dial .lv .asks { margin-top: 12px; font-size: 13px; font-family: Regular; color: #9a6a12; }

/* Before / after */
.cs .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs .ba .side { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.14); }
.cs .ba .side small { font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; }
.cs .ba .scr { margin-top: 12px; border: 1px solid #eee; border-radius: 10px; padding: 16px; min-height: 210px; background: #fbfbfb; }
.cs .ba .scr .bn { height: 64px; border-radius: 8px; background: #f1f1f1; margin-bottom: 12px; }
.cs .ba .scr .bn.new { background: linear-gradient(90deg, #e3f3ef, #eef0ff); display: flex; align-items: center; padding: 0 14px; font-family: Medium; font-size: 14px; color: #1d1d1d; position: relative; }
.cs .ba .scr .btn { display: inline-block; padding: 9px 14px; border-radius: 8px; background: #1d1d1d; color: #fff; font-size: 13px; position: relative; }
.cs .ba .scr .ln { height: 9px; border-radius: 5px; background: #ececec; margin: 10px 0; }
.cs .ba .scr .ln.s { width: 60%; }
.cs .mark { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; background: #e4572e; color: #fff; font-family: Medium; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.cs .outl { outline: 2px dashed #e4572e; outline-offset: 3px; }

/* Make-to-know strip */
.cs .rounds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cs .round { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 20px; }
.cs .round .rn { font-family: Regular; font-size: 12px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .04em; }
.cs .round dl { margin: 10px 0 0; }
.cs .round dt { font-family: Regular; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9a9a9a; margin-top: 12px; }
.cs .round dd { margin: 3px 0 0; font-family: Light; font-size: 15px; line-height: 1.45; color: #333; }
.cs .round dd.fix { font-family: Medium; color: var(--cs-teal); }

/* Compact decision cards */
.cs .mini { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px; }
.cs .mini .n { font-family: Regular; font-size: 12px; color: #8a8a8a; }
.cs .mini h5 { font-family: Medium; font-size: 19px; line-height: 1.35; color: #1d1d1d; margin: 6px 0 8px; font-weight: normal; }
.cs .mini p { font-family: Light; font-size: 15px; line-height: 1.55; color: #555; margin: 0; }
.cs .mini .to { margin-top: 10px; font-size: 13px; font-family: Regular; color: var(--cs-amber); }

/* Milestones */
.cs .ms { display: grid; grid-template-columns: 56px 1.1fr 1.6fr 1.2fr; gap: 0; background: #fff; border: 1px solid #ececec; border-radius: 12px; overflow: hidden; }
.cs .ms > div { padding: 16px 18px; border-bottom: 1px solid #f1f1f1; font-family: Light; font-size: 16px; line-height: 1.45; color: #444; }
.cs .ms .h { font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a8a8a; background: #fafafa; }
.cs .ms .num { font-family: Regular; color: #9a9a9a; }
.cs .ms .name { font-family: Medium; color: #1d1d1d; }
.cs .ms .pm { color: var(--cs-teal); font-family: Regular; }
.cs .ms .last { border-bottom: 0; }

/* Week with Scout */
.cs .week-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs .wk { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 22px; }
.cs .wk .when { font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-indigo); }
.cs .wk h5 { font-family: Medium; font-size: 19px; color: #1d1d1d; margin: 8px 0; font-weight: normal; }
.cs .wk p { font-family: Light; font-size: 15px; line-height: 1.55; color: #555; margin: 0; }

/* Film */
.cs video.film { display: block; width: 100%; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.3); background: #000; }
.cs .note { font-family: Light; font-size: 14px; color: #8a8a8a; margin-top: 12px; }

/* Results band */
.cs-results { background: #1d1d1d; padding: 110px 0; }
.cs-results .wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cs-results .v { font-family: Medium; font-size: 112px; line-height: 1; color: var(--cs-pale); letter-spacing: -0.02em; }
.cs-results p { font-family: Light; font-size: 22px; line-height: 1.5; color: #bdbdbd; margin: 24px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .cs .cs-h { font-size: 84px; }
    .cs .rounds { grid-template-columns: repeat(2, 1fr); }
    .cs .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cs .summary { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .cs .summary div:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 768px) {
    .cs .wrap, .cs-results .wrap { padding: 0 16px; }
    .cs .cs-h { font-size: 56px; padding-top: 96px; }
    .cs .cs-rule { margin: 40px 0 16px; }
    .cs .row { grid-template-columns: 1fr; padding: 28px 0; }
    .cs .lbl { padding: 0 0 10px; }
    .cs .copy p, .cs p.copy { font-size: 19px; }
    .cs .copy h4 { font-size: 21px; }
    .cs .caps { font-size: 24px; }
    .cs ol.principles li { font-size: 19px; }
    .cs .grid-2, .cs .grid-3, .cs .grid-4, .cs .pairs, .cs .modes, .cs .decision,
    .cs .ba, .cs .flow, .cs .flow.four, .cs .week-list, .cs .rounds { grid-template-columns: 1fr; }
    .cs .summary { grid-template-columns: 1fr 1fr; }
    .cs .dial { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cs .dial .lv, .cs .dial .lv:first-child, .cs .dial .lv:last-child { border-radius: 12px; border: 1px solid #ececec; }
    .cs .boxed { font-size: 20px; padding: 18px 20px; margin-top: 48px; }
    .cs .stage { padding: 28px 16px; }
    .cs .ui { padding: 16px; }
    .cs .ui .bubble { margin-left: 24px; }
    .cs .ms { grid-template-columns: 36px 1fr; }
    .cs .ms .h:nth-child(3), .cs .ms .h:nth-child(4) { display: none; }
    .cs .ms > div { padding: 12px; }
    .cs .ms .sd, .cs .ms .pm { grid-column: 2; padding-top: 0; }
    .cs .ms .sd::before { content: "Scout did: "; font-family: Regular; color: #8a8a8a; }
    .cs .ms .pm::before { content: "PM decided: "; font-family: Regular; color: #8a8a8a; }
    .cs .ms .pm:empty { display: none; }
    .cs-results { padding: 64px 0; }
    .cs-results .wrap { grid-template-columns: 1fr; gap: 36px; }
    .cs-results .v { font-size: 80px; }
    .cs .pair { font-size: 15px; grid-template-columns: 1fr 20px 1fr; padding: 14px; }
    .cs table.t th, .cs table.t td { padding: 10px 12px; font-size: 14px; }
    .fold2 .navigation a { padding: 20px 10px; font-size: 11px; }
}

/* Hero: keep the cover clear of the two-line title */
.fold1 .cont .cover img.cvr { width: 56%; margin-right: -4%; margin-top: -4%; }
@media (max-width: 768px) { .fold1 .cont .cover img.cvr { width: 100%; margin: 0; } }
@media (max-width: 480px) {
    .fold1 .cont .phead .phead1 { width: auto; white-space: nowrap; font-size: 44px; line-height: 1.1; }
    .fold1 .cont .phead .phead2 { font-size: 40px; line-height: 1.1; padding-top: 58px; white-space: nowrap; }
}

/* Journey chapters */
.cs .chapter-tag { display: inline-block; font-family: Regular; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 50px; margin-right: 8px; }
.cs .chapter-tag.see { background: #eef0ff; color: #4b55c9; }
.cs .chapter-tag.steer { background: #e3f3ef; color: var(--cs-teal); }
.cs .why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.cs .ui .me { background: #1d1d1d; color: #fff; border-radius: 12px; padding: 10px 14px; font-family: Light; font-size: 15px; line-height: 1.5; margin: 12px 0 12px auto; width: fit-content; max-width: 80%; }
.cs .ui .scout { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.cs .ui .scout i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #46b29d, #6670e6); margin-top: 2px; }
.cs .ui .scout p { margin: 0; font-family: Light; font-size: 15px; line-height: 1.55; color: #222; }
.cs .ui .step { display: flex; gap: 10px; align-items: center; font-family: Light; font-size: 14px; color: #333; padding: 7px 0; border-top: 1px dashed #eee; }
.cs .ui .step:first-of-type { border-top: 0; }
.cs .ui .step b { font-family: Medium; color: #1d1d1d; }
.cs .ui .ok { color: var(--cs-teal); font-family: Medium; }
.cs .ramp { display: flex; gap: 6px; margin: 14px 0 6px; }
.cs .ramp span { flex: 1; text-align: center; font-size: 13px; padding: 9px 0; border-radius: 8px; background: #f1f1f1; color: #8a8a8a; }
.cs .ramp span.on { background: var(--cs-teal); color: #fff; }
.cs .ramp span.next { background: #fff8e6; color: #8a6116; border: 1px dashed #e3c77d; }
@media (max-width: 768px) { .cs .why { grid-template-columns: 1fr; } }

/* Summary card at the top */
.cs .tldr { background: #111; color: #e9e9e9; border-radius: 16px; padding: 36px 40px; margin-top: 64px; }
.cs .tldr .what { font-family: Light; font-size: 28px; line-height: 1.45; color: #fff; margin: 0 0 28px; }
.cs .tldr .what b { font-family: Medium; color: var(--cs-pale); }
.cs .tldr .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid #333; padding-top: 22px; }
.cs .tldr small { display: block; font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #8a8a8a; margin-bottom: 6px; }
.cs .tldr span, .cs .tldr a { font-family: Medium; font-size: 17px; color: #fff; text-decoration: none; }
.cs .tldr a { color: var(--cs-pale); border-bottom: 1px solid currentColor; }
/* One-line takeaway under each step title */
.cs .take { font-family: Medium; font-size: 22px; line-height: 1.45; color: var(--cs-ink); margin: -4px 0 8px; padding-left: 4px; }
/* Annotated screens */
.cs .shots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; }
.cs .anno { position: relative; display: block; flex: 0 1 auto; }
.cs .anno img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 50px rgba(10,30,30,.22); background: #fff; }
.cs .pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #e4572e; color: #fff; font-family: Medium; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(228,87,46,.25); }
.cs .legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.cs .legend li { display: flex; gap: 10px; align-items: baseline; font-family: Light; font-size: 16px; line-height: 1.5; color: #333; }
.cs .legend li b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #e4572e; color: #fff; font-family: Medium; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.cs .thenNow { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cs .thenNow h6 { margin: 0 0 12px; font-family: Regular; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #fff; font-weight: normal; }
@media (max-width: 768px) {
  .cs .tldr { padding: 24px 20px; margin-top: 40px; }
  .cs .tldr .what { font-size: 20px; }
  .cs .tldr .facts { grid-template-columns: 1fr 1fr; }
  .cs .take { font-size: 18px; }
  .cs .anno { max-width: 100% !important; }
  .cs .thenNow { grid-template-columns: 1fr; }
}
/* Skim layout: three short cells per step */
.cs .pdt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 0; }
.cs .pdt div { background: var(--cs-card); border: 1px solid var(--cs-card-line); border-radius: 12px; padding: 16px 18px; }
.cs .pdt div.d { background: var(--cs-teal-soft); border-color: #cfe9e2; }
.cs .pdt div.t { background: var(--cs-amber-soft); border-color: #f6e3b4; }
.cs .pdt small { display: block; font-family: Regular; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a8a8a; margin-bottom: 6px; }
.cs .pdt div.d small { color: var(--cs-teal); } .cs .pdt div.t small { color: var(--cs-amber); }
.cs .pdt p { margin: 0; font-family: Light; font-size: 16px; line-height: 1.5; color: #333; }
@media (max-width: 768px) { .cs .pdt { grid-template-columns: 1fr; } }
/* Journey swimlane */
.cs .lane { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 6px; margin: 8px 0 8px; }
.cs .lane .h { font-family: Regular; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a8a8a; display: flex; align-items: center; }
.cs .lane .num { font-family: Regular; font-size: 12px; color: #8a8a8a; text-align: center; }
.cs .lane .you, .cs .lane .sc { border-radius: 10px; padding: 10px; font-family: Regular; font-size: 13px; line-height: 1.35; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 58px; }
.cs .lane .you { background: #fff4e5; color: #8a5a0f; border: 1px solid #f3dfb6; }
.cs .lane .sc { background: #e3f3ef; color: #1f5d56; border: 1px solid #cfe9e2; }
.cs .newtag { display: inline-block; margin-left: 10px; font-family: Medium; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #6670e6; border-radius: 50px; padding: 3px 9px; vertical-align: 3px; }
.cs .newtag + i { font-style: normal; font-family: Light; font-size: 15px; color: #4b55c9; margin-left: 8px; }
@media (max-width: 768px) {
  .cs .lane { grid-template-columns: 52px repeat(7, 120px); overflow-x: auto; padding-bottom: 6px; }
}
/* Review states */
.cs .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cs .pills span { font-family: Medium; font-size: 14px; padding: 7px 14px; border-radius: 50px; border: 1px solid; }
.cs .pills .draft { color: #555; border-color: #d6d6d6; background: #f6f6f6; }
.cs .pills .rev { color: #8a5a0f; border-color: #f0d49b; background: #fff6e0; }
.cs .pills .chg { color: #a3264a; border-color: #f3b7c8; background: #fdecf1; }
.cs .pills .ok { color: #1f6b52; border-color: #b9e3d2; background: #e6f6ef; }
.cs .tl td:first-child { white-space: nowrap; }
.cs .tldr .focus { margin: -10px 0 26px; font-family: Regular; font-size: 15px; color: #bdbdbd; }
.cs .tldr .focus b { color: #fff; font-family: Medium; }
/* Visual version timeline */
.cs .ver { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; padding: 40px 0; border-bottom: 1px dashed var(--cs-dash); }
.cs .ver:last-child { border-bottom: 0; }
.cs .ver .vis { border-radius: 16px; padding: 28px; display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 46px, rgba(255,255,255,.22) 46px 48px), var(--stage); }
.cs .ver .vis img { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 40px rgba(10,30,30,.22); }
.cs .ver .when { display: inline-block; font-family: Medium; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #111; border-radius: 50px; padding: 5px 12px; margin-bottom: 14px; }
.cs .ver h5 { font-family: Medium; font-size: 22px; line-height: 1.35; color: #1d1d1d; margin: 0 0 18px; font-weight: normal; }
.cs .ver .lineB, .cs .ver .lineC { border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-family: Light; font-size: 16px; line-height: 1.5; color: #333; }
.cs .ver .lineB { background: #fdecf1; } .cs .ver .lineC { background: #e3f3ef; }
.cs .ver .lineB small, .cs .ver .lineC small { display: block; font-family: Regular; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.cs .ver .lineB small { color: #a3264a; } .cs .ver .lineC small { color: var(--cs-teal); }
@media (max-width: 768px) { .cs .ver { grid-template-columns: 1fr; gap: 18px; } .cs .ver .vis { padding: 16px; } }
/* Version collage */
.cs .collage { border-radius: 18px; padding: 40px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-end; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 46px, rgba(255,255,255,.06) 46px 48px), linear-gradient(135deg,#1f2a2a,#33504b); }
.cs .collage figure { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cs .collage figcaption { font-family: Medium; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #111; background: var(--cs-pale); border-radius: 50px; padding: 4px 11px; }
.cs .collage img { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
@media (max-width: 768px) { .cs .collage { padding: 18px; gap: 18px; } }
/* Visual grids for variants, states, edge cases */
.cs .vgrid { display: grid; gap: 20px; }
.cs .vgrid.two { grid-template-columns: 1fr 1fr; } .cs .vgrid.three { grid-template-columns: repeat(3, 1fr); } .cs .vgrid.four { grid-template-columns: repeat(4, 1fr); }
.cs .vgrid figure { margin: 0; }
.cs .vgrid img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #ececec; }
.cs .vgrid figcaption { margin-top: 10px; font-family: Light; font-size: 15px; line-height: 1.45; color: #444; }
.cs .vgrid figcaption b { font-family: Medium; font-weight: normal; color: #1d1d1d; display: block; }
.cs .vgrid figcaption .when { display: inline-block; font-family: Medium; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #111; border-radius: 50px; padding: 3px 9px; margin-bottom: 6px; }
@media (max-width: 768px) { .cs .vgrid.two, .cs .vgrid.three, .cs .vgrid.four { grid-template-columns: 1fr; } }
/* Freo-style stage: soft glow, borderless screens, label chip only */
.cs .fstage { position: relative; border-radius: 22px; padding: 56px 40px; margin-top: 12px;
  background: radial-gradient(70% 60% at 50% 0%, #dcf3e8 0%, rgba(220,243,232,0) 70%), radial-gradient(60% 60% at 100% 100%, #e6e8ff 0%, rgba(230,232,255,0) 70%), #fff; }
.cs .fstage .vgrid { gap: 28px; }
.cs .fstage .vgrid img { border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(20,40,40,.14); }
.cs .fstage figure { position: relative; }
.cs .fstage figcaption { position: absolute; left: 12px; top: 12px; margin: 0; }
.cs .fstage figcaption b { display: inline-block; font-family: Medium; font-size: 12px; letter-spacing: .02em; color: #111; background: rgba(255,255,255,.92); border: 1px solid #ececec; border-radius: 50px; padding: 4px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cs .fstage figcaption .when { margin: 0 6px 0 0; vertical-align: 1px; }
.cs .fstage figcaption span.cap { display: none; }
@media (max-width: 768px) { .cs .fstage { padding: 24px 14px; } }
.cs .fstage figcaption { position: static; margin-top: 14px; }
.cs .fstage figcaption b { background: transparent; border: 0; box-shadow: none; padding: 0; font-size: 15px; }
.cs .fstage .vgrid img, .cs .fstage img { box-shadow: none !important; }
/* Edge cases, grouped */
.cs .egroup { margin-top: 36px; }
.cs .egroup h6 { margin: 0 0 16px; font-family: Regular; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; font-weight: normal; display: flex; align-items: center; gap: 12px; }
.cs .egroup h6:after { content: ""; flex: 1; border-top: 1px solid #ececec; }
.cs .egrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.cs .egrid.two { grid-template-columns: repeat(2, 1fr); }
.cs .egrid figure { margin: 0; }
.cs .egrid img { display: block; width: 100%; height: auto; border-radius: 14px; }
.cs .egrid figcaption { margin-top: 12px; font-family: Light; font-size: 15px; line-height: 1.45; color: #555; }
.cs .egrid figcaption b { display: block; font-family: Medium; font-weight: normal; font-size: 17px; color: #1d1d1d; margin-bottom: 2px; }
@media (max-width: 768px) { .cs .egrid, .cs .egrid.two { grid-template-columns: 1fr; } }
/* Why it won */
.cs .won { margin-top: 28px; }
.cs .won table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; }
.cs .won th, .cs .won td { padding: 14px 16px; text-align: center; font-family: Light; font-size: 15px; border-bottom: 1px solid #f1f1f1; }
.cs .won th { font-family: Regular; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; background: #fafafa; }
.cs .won td:first-child, .cs .won th:first-child { text-align: left; font-family: Medium; color: #1d1d1d; font-size: 15px; text-transform: none; letter-spacing: 0; }
.cs .won th:first-child { color: #8a8a8a; font-family: Regular; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.cs .won tr:last-child td { border-bottom: 0; }
.cs .won .win { background: #e6f6ef; color: #1f6b52; font-family: Medium; }
.cs .won th.win { color: #1f6b52; }
.cs .won .y { color: #2B776E; font-family: Medium; } .cs .won .n { color: #c0c0c0; }
@media (max-width: 768px) { .cs .won { overflow-x: auto; } .cs .won table { min-width: 560px; } }
.cs .won table { width: 100% !important; table-layout: fixed; }
.cs .won th:first-child, .cs .won td:first-child { width: 36%; }
.cs .won + p.small, .cs p.small { color: var(--cs-text); font-family: Light; font-size: 18px; line-height: 1.55; }
.cs .gchips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs .gchips span { font-family: Regular; font-size: 15px; color: #1f3b37; background: #e3f3ef; border: 1px solid #cfe9e2; border-radius: 50px; padding: 8px 14px; }
/* Edge cases inside a dark square-grid panel */
.cs .edark { margin-top: 24px; border-radius: 24px; padding: 56px 48px 64px; background-color: #121615;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px; }
.cs .edark .egroup { margin-top: 0; }
.cs .edark .egroup + .egroup { margin-top: 56px; }
.cs .edark .egroup h6 { color: #9fb3ae; margin-bottom: 24px; }
.cs .edark .egroup h6:after { border-top-color: rgba(255,255,255,.12); }
.cs .edark .egrid { gap: 28px; align-items: stretch; }
.cs .edark .egrid figure { display: flex; flex-direction: column; }
.cs .edark .egrid .frame { height: 230px; border-radius: 16px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cs .edark .egrid.two .frame { height: 260px; }
.cs .edark .egrid img { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.cs .edark .egrid figcaption { margin-top: 16px; color: #b9c6c2; font-size: 15px; }
.cs .edark .egrid figcaption b { color: #fff; font-size: 18px; margin-bottom: 4px; }
@media (max-width: 768px) { .cs .edark { padding: 28px 18px 36px; } .cs .edark .egrid .frame, .cs .edark .egrid.two .frame { height: auto; } .cs .edark .egrid img { height: auto; } }
.cs .edark .egrid .frame { background-color: #F4F4F4; background-image: radial-gradient(#d9d9d9 1px, transparent 1px); background-size: 16px 16px; }
.cs .edark .egrid img { border-radius: 0; }
/* Spec-sheet grid for edge cases */
.cs .spec { margin-top: 24px; border: 1.5px solid #111; }
.cs .spec .bar { background: #111; color: #fff; font-family: Medium; font-size: 22px; padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; }
.cs .spec .bar span { font-family: Light; font-size: 15px; color: #bdbdbd; }
.cs .spec .cells { display: grid; grid-template-columns: repeat(3, 1fr); }
.cs .spec .cells.two { grid-template-columns: repeat(2, 1fr); }
.cs .spec .cell { position: relative; min-height: 360px; padding: 36px 32px 96px; background: #fff; border-right: 1px solid #111; border-bottom: 1px solid #111; display: flex; align-items: center; justify-content: center; }
.cs .spec .cells > .cell:nth-child(3n) { border-right: 0; }
.cs .spec .cells.two > .cell:nth-child(3n) { border-right: 1px solid #111; }
.cs .spec .cells.two > .cell:nth-child(2n) { border-right: 0; }
.cs .spec .cell img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; }
.cs .spec .cell .lab { position: absolute; right: 24px; bottom: 20px; left: 24px; text-align: right; }
.cs .spec .cell .lab b { display: block; font-family: Medium; font-weight: normal; font-size: 20px; color: #111; }
.cs .spec .cell .lab i { display: block; font-style: normal; font-family: Light; font-size: 14px; color: #6b6b6b; margin-top: 2px; }
.cs .spec .group:last-child .cell { border-bottom: 0; }
@media (max-width: 768px) { .cs .spec .cells, .cs .spec .cells.two { grid-template-columns: 1fr; } .cs .spec .cell { border-right: 0 !important; min-height: 0; } }

/* ===== Review scenarios: native UI + motion principles =====
   Motion rules: only real state changes animate; enter = ease-out 300ms, exit = ease-in 200ms;
   80ms stagger; each state holds 2s+; transform/opacity only; one 9s story per card; respects reduced motion. */
.sx { --out: cubic-bezier(.16,1,.3,1); --in: cubic-bezier(.4,0,1,1); margin-top: 24px; border: 1.5px solid #111; }
.sx .x-bar { background: #111; color: #fff; font-family: Medium; font-size: 22px; padding: 18px 26px; display: flex; justify-content: space-between; align-items: center; }
.sx .x-bar span { font-family: Light; font-size: 15px; color: #bdbdbd; }
.sx .x-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.sx .x-card { background: #fff; border-right: 1px solid #111; border-bottom: 1px solid #111; display: flex; flex-direction: column; }
.sx .x-card:nth-child(2n) { border-right: 0; } .sx .x-card:nth-child(n+7) { border-bottom: 0; }
.sx .x-stage { height: 380px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 36px; }
.sx .x-dots { background-color: #F7F7F7; background-image: radial-gradient(#DADADA 1px, transparent 1px); background-size: 18px 18px; }
.sx .x-soft { background: #F4F5F7; }
.sx .x-meta { padding: 28px 36px 34px; border-top: 1px solid #111; display: flex; flex-direction: column; gap: 8px; }
.sx .x-meta small { font-family: Regular; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.sx .x-meta b { font-family: Medium; font-weight: normal; font-size: 20px; color: #111; }
.sx .x-meta span { font-family: Light; font-size: 15px; line-height: 1.5; color: #555; max-width: 440px; }
.sx .x-note { font-family: Light; font-size: 14px; color: #6b6b6b; padding: 14px 26px; border-top: 1px solid #111; }
.sx .sg { font-family: 'Space Grotesk', sans-serif; color: #111; }
.sx .rel { position: relative; }
.sx .abs { position: absolute; }
/* shared timeline helpers */
.sx .x-card * { animation-play-state: paused !important; }
.sx .x-card.in * { animation-play-state: running !important; }
.sx .enter { animation: e1 9s var(--out) infinite both; }
@keyframes e1 { 0% { opacity: 0; transform: translateY(10px); } 4%, 100% { opacity: 1; transform: none; } }

/* ---------- 01 Canvas: real SeekingFeedback ---------- */
.sx .sf { width: 430px; height: 300px; }
.sx .sf .blk { position: absolute; left: 0; top: 28px; width: 132px; height: 200px; background: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.sx .sf .blk i { display: block; height: 7px; border-radius: 4px; background: #ECECEC; } .sx .sf .blk i.h { height: 22px; background: #A5E8F5; }
.sx .sf .blk .r { display: flex; gap: 5px; } .sx .sf .blk .r i { flex: 1; height: 30px; } .sx .sf .blk .r i:nth-child(1){background:#F57C51}.sx .sf .blk .r i:nth-child(2){background:#C6B5F7}.sx .sf .blk .r i:nth-child(3){background:#D2DDD8}
.sx .sf .ring { position: absolute; left: -4px; top: 24px; width: 140px; height: 208px; border-radius: 10px; padding: 2.5px; background: linear-gradient(90deg,#3B82F6,#14B8A6,#22C55E,#14B8A6,#3B82F6); background-size: 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sfFlow 2.4s linear infinite, sfRing 9s var(--in) infinite; }
@keyframes sfFlow { to { background-position: 200% 0; } }
@keyframes sfRing { 0%,60% { opacity: 1; } 64%,100% { opacity: 0; } }
.sx .sf .badge { position: absolute; left: 148px; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; background: linear-gradient(90deg,#3B82F6,#14B8A6); box-shadow: 0 4px 14px rgba(59,130,246,.3); animation: sfOut 9s var(--in) infinite; }
.sx .sf .badge em { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: sfPulse 1.2s ease-in-out infinite; }
@keyframes sfPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sfOut { 0%,60% { opacity: 1; transform: none; } 64%,100% { opacity: 0; transform: translateY(-4px); } }
.sx .sf .panel { position: absolute; left: 148px; top: 44px; width: 282px; background: #fff; border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,.14); overflow: hidden; animation: sfPanel 9s var(--out) infinite both; }
@keyframes sfPanel { 0%,3% { opacity: 0; transform: translateY(8px) scale(.98); } 8%,60% { opacity: 1; transform: none; } 64%,100% { opacity: 0; transform: translateY(4px) scale(.98); } }
.sx .sf .ph { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid #EDEDED; font-size: 13.5px; font-weight: 600; } .sx .sf .ph span { color: #6B7280; font-weight: 400; }
.sx .sf .pb { padding: 12px 16px; display: flex; gap: 9px; } .sx .sf .pb .av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2B776E; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sx .sf .pb p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #111; font-family: 'Space Grotesk', sans-serif; }
.sx .sf .chips { padding: 0 16px 10px 49px; display: flex; flex-direction: column; gap: 4px; }
.sx .sf .chip { font-size: 12.5px; color: #111; padding: 3px 6px; border-radius: 6px; width: fit-content; } .sx .sf .chip:before { content: "↳ "; color: #9CA3AF; }
.sx .sf .chip.go { animation: sfTap 9s var(--out) infinite; }
@keyframes sfTap { 0%,40% { background: transparent; color: #111; } 43%,60% { background: #E6F2F0; color: #2B776E; } 64%,100% { background: transparent; } }
.sx .sf .inp { margin: 0 12px 12px; padding: 9px 12px; border-radius: 16px; background: #F3F4F6; font-size: 12px; color: #9CA3AF; }
.sx .sf .pill { position: absolute; left: 0; top: 244px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #ECECEC; box-shadow: 0 6px 24px rgba(110,110,110,.12); font-size: 12px; font-weight: 600; }
.sx .sf .pill em { width: 7px; height: 7px; border-radius: 50%; }
.sx .sf .pill .a { display: inline-flex; align-items: center; gap: 7px; animation: swA 9s var(--in) infinite; } .sx .sf .pill .b { position: absolute; left: 12px; display: inline-flex; align-items: center; gap: 7px; animation: swB 9s var(--out) infinite; }
@keyframes swA { 0%,62% { opacity: 1; } 65%,100% { opacity: 0; } } @keyframes swB { 0%,64% { opacity: 0; transform: translateY(4px); } 68%,100% { opacity: 1; transform: none; } }

/* ---------- 02 Control center ---------- */
.sx .cc { width: 360px; } .sx .cc .ch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 10px; } .sx .cc .ch em { width: 9px; height: 9px; border-radius: 50%; background: #A8620A; } .sx .cc .ch span { color: #9CA3AF; font-weight: 500; }
.sx .cc .ch .n0, .sx .cc .ch .n1 { animation: swA 9s infinite; } .sx .cc .ch .n1 { position: absolute; animation: swB2 9s infinite; } @keyframes swB2 { 0%,10% { opacity: 0; } 12%,100% { opacity: 1; } }
.sx .cc .ch .n0 { animation: swA2 9s infinite; } @keyframes swA2 { 0%,10% { opacity: 1; } 12%,100% { opacity: 0; } }
.sx .cc .tc { background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sx .cc .tc.new { animation: ccIn 9s var(--out) infinite both; } @keyframes ccIn { 0%,8% { opacity: 0; transform: translateY(-16px); } 13%,100% { opacity: 1; transform: none; } }
.sx .cc .tc.old { margin-top: 10px; opacity: .55; }
.sx .cc .tc b { font-size: 13.5px; } .sx .cc .tc small { font-size: 11.5px; color: #6B7280; }
.sx .cc .wc { display: inline-flex; align-items: center; gap: 5px; width: fit-content; font-size: 11.5px; font-weight: 600; color: #A8620A; background: #FDF1DC; border-radius: 6px; padding: 3px 8px; }
.sx .cc .bell { position: absolute; right: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ECECEC; background: #fff; display: grid; place-items: center; font-size: 15px; animation: ccRing 9s ease-in-out infinite; transform-origin: 50% 0; }
.sx .cc .bell i { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: #D14343; color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; animation: ccDot 9s var(--out) infinite both; }
@keyframes ccDot { 0%,14% { transform: scale(0); } 17% { transform: scale(1.15); } 19%,100% { transform: scale(1); } }
@keyframes ccRing { 0%,16%,26%,100% { transform: rotate(0); } 18% { transform: rotate(-12deg); } 21% { transform: rotate(9deg); } 24% { transform: rotate(-4deg); } }

/* ---------- 03 Slack (native) ---------- */
.sx .sl { width: 100%; max-width: 470px; height: 300px; border-radius: 8px; overflow: hidden; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,.12); font-family: Lato, 'Helvetica Neue', Arial, sans-serif; }
.sx .sl .side { width: 110px; background: #3F0E40; color: #CFC3CF; padding: 10px 8px; font-size: 11.5px; flex: none; }
.sx .sl .side .ws { color: #fff; font-weight: 900; font-size: 13px; padding: 2px 6px 10px; border-bottom: 1px solid #5d2c5d; margin-bottom: 8px; }
.sx .sl .side div.c { padding: 3px 6px; border-radius: 4px; } .sx .sl .side div.c.on { background: #1164A3; color: #fff; font-weight: 700; }
.sx .sl .main { flex: 1; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.sx .sl .hd { padding: 9px 12px; border-bottom: 1px solid #E8E8E8; font-weight: 900; font-size: 13px; color: #1D1C1D; }
.sx .sl .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sx .sl .m { display: flex; gap: 8px; } .sx .sl .m .av { width: 30px; height: 30px; border-radius: 6px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 12px; }
.sx .sl .nm { font-size: 12.5px; font-weight: 900; color: #1D1C1D; } .sx .sl .nm .app { font-size: 9px; font-weight: 700; color: #616061; background: #E8E8E8; border-radius: 2px; padding: 1px 3px; margin-left: 4px; vertical-align: 1px; } .sx .sl .nm time { font-weight: 400; color: #616061; font-size: 10.5px; margin-left: 4px; }
.sx .sl .tx { font-size: 12px; color: #1D1C1D; line-height: 1.4; margin-top: 2px; } .sx .sl .ctx { font-size: 10.5px; color: #616061; margin-top: 3px; }
.sx .sl .btns { display: flex; gap: 6px; margin-top: 7px; } .sx .sl .btn { font-size: 11px; font-weight: 700; border: 1px solid #BBBBBB; border-radius: 4px; padding: 4px 9px; color: #1D1C1D; background: #fff; } .sx .sl .btn.p { background: #007A5A; border-color: #007A5A; color: #fff; }
.sx .sl .btns { animation: swA3 9s var(--in) infinite; } @keyframes swA3 { 0%,58% { opacity: 1; } 61%,100% { opacity: 0; } }
.sx .sl .done { position: absolute; font-size: 11.5px; color: #1D1C1D; margin-top: 7px; animation: swB3 9s var(--out) infinite both; } @keyframes swB3 { 0%,60% { opacity: 0; transform: translateY(3px); } 64%,100% { opacity: 1; transform: none; } }
.sx .sl .thr { margin-top: 5px; font-size: 11px; font-weight: 700; color: #1264A3; display: flex; align-items: center; gap: 5px; animation: slThr 9s var(--out) infinite both; } @keyframes slThr { 0%,34% { opacity: 0; } 38%,100% { opacity: 1; } }
.sx .sl .thr i { width: 16px; height: 16px; border-radius: 4px; background: #E8912D; color: #fff; font-style: normal; font-size: 9px; display: grid; place-items: center; }
.sx .sl .rep { margin-left: 38px; border-left: 2px solid #E8E8E8; padding-left: 8px; animation: slRep 9s var(--out) infinite both; } @keyframes slRep { 0%,36% { opacity: 0; transform: translateY(6px); } 40%,100% { opacity: 1; transform: none; } }

/* ---------- 04 Gmail (native) ---------- */
.sx .gm { width: 100%; max-width: 470px; height: 300px; border-radius: 10px; overflow: hidden; background: #F8FAFD; box-shadow: 0 10px 30px rgba(0,0,0,.12); font-family: Roboto, Arial, sans-serif; position: relative; }
.sx .gm .top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; } .sx .gm .logo { font-size: 15px; color: #5f6368; display: flex; align-items: center; gap: 5px; } .sx .gm .logo b { font-family: 'Product Sans', Roboto, Arial; font-weight: 400; color: #444746; }
.sx .gm .logo .m { width: 20px; height: 15px; position: relative; } .sx .gm .logo .m:before { content: ""; position: absolute; inset: 0; border: 3px solid #EA4335; border-top: 0; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 2px 2px; }
.sx .gm .search { flex: 1; background: #E9EEF6; border-radius: 20px; padding: 6px 12px; font-size: 11px; color: #5f6368; }
.sx .gm .mail { margin: 0 10px; background: #fff; border-radius: 14px; padding: 12px 16px; height: 248px; }
.sx .gm .subj { font-size: 15px; color: #1f1f1f; display: flex; align-items: center; gap: 8px; } .sx .gm .subj span { font-size: 10px; background: #E8EAED; color: #444746; border-radius: 4px; padding: 1px 5px; }
.sx .gm .from { display: flex; align-items: center; gap: 8px; margin: 10px 0; } .sx .gm .from .av { width: 28px; height: 28px; border-radius: 50%; background: #2B776E; color: #fff; display: grid; place-items: center; font-size: 12px; } .sx .gm .from div { font-size: 11.5px; color: #1f1f1f; } .sx .gm .from div b { font-weight: 600; } .sx .gm .from div span { color: #5f6368; display: block; font-size: 10.5px; }
.sx .gm .card { border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px; font-family: 'Space Grotesk', sans-serif; } .sx .gm .card p { margin: 0 0 9px; font-size: 12px; color: #111; line-height: 1.45; }
.sx .gm .card .b1 { display: inline-block; background: #2B776E; color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 7px 12px; } .sx .gm .card .b2 { display: inline-block; margin-left: 6px; border: 1px solid #D1D5DB; font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 6px 11px; color: #111; }
.sx .gm .rbtn { display: inline-flex; margin-top: 10px; border: 1px solid #747775; border-radius: 18px; padding: 5px 14px; font-size: 11.5px; color: #1f1f1f; animation: swA4 9s var(--in) infinite; } @keyframes swA4 { 0%,40% { opacity: 1; } 43%,100% { opacity: 0; } }
.sx .gm .rbox { position: absolute; left: 26px; right: 26px; bottom: 18px; border: 1px solid #DADCE0; border-radius: 10px; padding: 8px 10px; background: #fff; font-size: 11.5px; color: #1f1f1f; animation: gmBox 9s var(--out) infinite both; }
@keyframes gmBox { 0%,42% { opacity: 0; transform: translateY(10px); } 46%,62% { opacity: 1; transform: none; } 65%,100% { opacity: 0; transform: translateY(6px); } }
.sx .gm .rbox .send { display: inline-block; margin-top: 6px; background: #0B57D0; color: #fff; border-radius: 16px; padding: 4px 12px; font-size: 11px; font-weight: 500; }
.sx .gm .toast { position: absolute; left: 14px; bottom: 14px; background: #1f1f1f; color: #fff; font-size: 11.5px; border-radius: 6px; padding: 9px 12px; display: flex; gap: 14px; animation: gmToast 9s var(--out) infinite both; } .sx .gm .toast span { color: #A8C7FA; font-weight: 500; }
@keyframes gmToast { 0%,64% { opacity: 0; transform: translateY(12px); } 68%,94% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }

/* ---------- 05 @mention (Scopeout) ---------- */
.sx .mn { width: 340px; } .sx .mn .menu { background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; margin-bottom: 8px; animation: mnMenu 9s var(--out) infinite both; }
@keyframes mnMenu { 0%,18% { opacity: 0; transform: translateY(6px); } 22%,52% { opacity: 1; transform: none; } 55%,100% { opacity: 0; transform: translateY(4px); } }
.sx .mn .it { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; } .sx .mn .it .av { width: 24px; height: 24px; border-radius: 50%; background: #F3F4F6; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; } .sx .mn .it small { margin-left: auto; color: #6B7280; font-size: 11.5px; }
.sx .mn .it.on { animation: mnHi 9s var(--out) infinite; } @keyframes mnHi { 0%,34% { background: transparent; } 37%,100% { background: #E6F2F0; } }
.sx .mn .box { background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 12px 14px; font-size: 13px; color: #111; display: flex; align-items: center; gap: 4px; }
.sx .mn .typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: mnType 9s steps(3) infinite; } @keyframes mnType { 0%,6% { width: 0; } 16%,52% { width: 2.2ch; } 55%,100% { width: 0; } }
.sx .mn .tag { display: inline-block; background: #E6F2F0; color: #2B776E; border-radius: 6px; padding: 1px 6px; font-weight: 600; opacity: 0; position: absolute; animation: mnTag 9s var(--out) infinite both; } @keyframes mnTag { 0%,54% { opacity: 0; transform: scale(.9); } 58%,100% { opacity: 1; transform: none; } }
.sx .mn .ph { color: #9CA3AF; animation: swA2b 9s infinite; } @keyframes swA2b { 0%,4% { opacity: 1; } 6%,100% { opacity: 0; } }
.sx .mn .caret { width: 1px; height: 15px; background: #111; animation: mnCaret 1s steps(1) infinite; } @keyframes mnCaret { 50% { opacity: 0; } }
.sx .mn .sent { margin-top: 10px; font-size: 12px; color: #2B776E; animation: swB3 9s var(--out) infinite both; }

/* ---------- 06 Nobody answers (Scopeout chat) ---------- */
.sx .na { width: 340px; font-family: 'Space Grotesk', sans-serif; }
.sx .na .msg { display: flex; gap: 9px; } .sx .na .av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2B776E; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sx .na p { margin: 0; font-size: 13px; line-height: 1.5; color: #111; }
.sx .na .w { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6B7280; margin-top: 6px; } .sx .na .w i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #A8620A; border-top-color: transparent; animation: naSpin 1s linear infinite; } @keyframes naSpin { to { transform: rotate(360deg); } }
.sx .na .chips { margin: 10px 0 0 33px; display: flex; flex-direction: column; gap: 4px; } .sx .na .chip { font-size: 13px; color: #111; padding: 3px 7px; border-radius: 6px; width: fit-content; } .sx .na .chip:before { content: "↳ "; color: #9CA3AF; }
.sx .na .chip.go { animation: naTap 9s var(--out) infinite; } @keyframes naTap { 0%,28% { background: transparent; transform: none; } 30% { transform: scale(.97); } 31%,100% { background: #E6F2F0; color: #2B776E; transform: none; } }
.sx .na .typing { margin: 12px 0 0 33px; display: inline-flex; gap: 4px; padding: 8px 11px; border-radius: 12px; background: #F3F4F6; animation: naTyp 9s infinite both; } @keyframes naTyp { 0%,32% { opacity: 0; } 34%,44% { opacity: 1; } 46%,100% { opacity: 0; } }
.sx .na .typing b { width: 5px; height: 5px; border-radius: 50%; background: #9CA3AF; animation: naDot 1.2s ease-in-out infinite; } .sx .na .typing b:nth-child(2) { animation-delay: .15s; } .sx .na .typing b:nth-child(3) { animation-delay: .3s; } @keyframes naDot { 0%,60%,100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.sx .na .reply { margin-top: -26px; animation: naRep 9s var(--out) infinite both; } @keyframes naRep { 0%,46% { opacity: 0; transform: translateY(6px); } 50%,100% { opacity: 1; transform: none; } }

/* ---------- 07 GitHub PR (native) ---------- */
.sx .gh { width: 100%; max-width: 470px; height: 300px; border: 1px solid #D1D9E0; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); font-family: -apple-system, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; color: #1F2328; }
.sx .gh .t { padding: 12px 14px 0; font-size: 16px; font-weight: 400; } .sx .gh .t span { color: #59636E; }
.sx .gh .st { padding: 8px 14px 10px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #59636E; } .sx .gh .st .pill { display: inline-flex; align-items: center; gap: 4px; background: #59636E; color: #fff; font-weight: 600; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; }
.sx .gh .st code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; background: #DDF4FF; color: #0969DA; border-radius: 6px; padding: 1px 5px; }
.sx .gh .tabs { display: flex; gap: 14px; padding: 0 14px; border-bottom: 1px solid #D1D9E0; font-size: 11.5px; color: #59636E; } .sx .gh .tabs span { padding: 7px 0; } .sx .gh .tabs span.on { color: #1F2328; font-weight: 600; border-bottom: 2px solid #FD8C73; }
.sx .gh .mb { margin: 14px; border: 1px solid #D1D9E0; border-radius: 6px; }
.sx .gh .row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid #D1D9E0; font-size: 12px; } .sx .gh .row:last-child { border-bottom: 0; }
.sx .gh .row b { display: block; font-size: 12.5px; } .sx .gh .row small { color: #59636E; font-size: 11px; }
.sx .gh .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; }
.sx .gh .sw { position: relative; flex: 1; } .sx .gh .sw .p, .sx .gh .sw .ok { position: absolute; left: 0; top: 0; display: flex; gap: 10px; }
.sx .gh .sw .p { animation: swA5 9s var(--in) infinite; } .sx .gh .sw .ok { animation: swB5 9s var(--out) infinite both; }
@keyframes swA5 { 0%,46% { opacity: 1; } 49%,100% { opacity: 0; } } @keyframes swB5 { 0%,48% { opacity: 0; transform: translateY(3px); } 52%,100% { opacity: 1; transform: none; } }
.sx .gh .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #BF8700; border-top-color: transparent; animation: naSpin 1s linear infinite; margin: 2px; }
.sx .gh .rdy { margin-left: auto; align-self: center; border: 1px solid #D1D9E0; background: #F6F8FA; border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* ---------- 08 Two approvals (Scopeout card) ---------- */
.sx .ap { width: 360px; background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.12); overflow: hidden; font-family: 'Space Grotesk', sans-serif; }
.sx .ap .lab { padding: 12px 16px 0; font-size: 10.5px; letter-spacing: .08em; color: #6B7280; font-weight: 600; } .sx .ap .hd { padding: 4px 16px 10px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #EDEDED; }
.sx .ap .row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid #F1F1F1; font-size: 13px; }
.sx .ap .row small { display: block; color: #6B7280; font-size: 11px; }
.sx .ap .sw { position: relative; width: 92px; height: 28px; } .sx .ap .sw > * { position: absolute; right: 0; top: 0; }
.sx .ap .bt { background: #2B776E; color: #fff; font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 6px 10px; }
.sx .ap .dn { display: flex; align-items: center; gap: 5px; color: #1E7F4F; font-size: 12px; font-weight: 600; padding-top: 5px; }
.sx .ap .dn i { width: 16px; height: 16px; border-radius: 50%; background: #1E7F4F; color: #fff; font-style: normal; font-size: 9px; display: grid; place-items: center; }
.sx .ap .r1 .bt { animation: apA1 9s var(--in) infinite; } .sx .ap .r1 .dn { animation: apB1 9s var(--out) infinite both; }
.sx .ap .r2 .bt { animation: apA2 9s var(--in) infinite; } .sx .ap .r2 .dn { animation: apB2 9s var(--out) infinite both; }
@keyframes apA1 { 0%,24% { opacity: 1; transform: none; } 25% { transform: scale(.95); } 27%,100% { opacity: 0; } } @keyframes apB1 { 0%,26% { opacity: 0; transform: scale(.9); } 30%,100% { opacity: 1; transform: none; } }
@keyframes apA2 { 0%,62% { opacity: 1; transform: none; } 63% { transform: scale(.95); } 65%,100% { opacity: 0; } } @keyframes apB2 { 0%,64% { opacity: 0; transform: scale(.9); } 68%,100% { opacity: 1; transform: none; } }
.sx .ap .ft { padding: 11px 16px; font-size: 12px; color: #374151; min-height: 40px; position: relative; } .sx .ap .ft span { position: absolute; left: 16px; right: 16px; }
.sx .ap .ft .f1 { animation: apF1 9s var(--out) infinite both; } .sx .ap .ft .f2 { animation: apF2 9s var(--out) infinite both; }
@keyframes apF1 { 0%,30% { opacity: 0; } 34%,62% { opacity: 1; } 65%,100% { opacity: 0; } } @keyframes apF2 { 0%,68% { opacity: 0; transform: translateY(4px); } 72%,100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .sx *, .sx *::before { animation: none !important; } }
@media (max-width: 768px) { .sx .x-grid { grid-template-columns: 1fr; } .sx .x-card { border-right: 0 !important; border-bottom: 1px solid #111 !important; } .sx .x-card:last-child { border-bottom: 0 !important; } .sx .x-stage { padding: 18px; height: 360px; } .sx .x-meta { padding: 22px; } .sx .sf { transform: scale(.82); } }
.sx .sl .done { top: 0; left: 0; }
.sx .sl .btn { white-space: nowrap; font-size: 10.5px; padding: 4px 8px; }
.sx .sl .side { width: 96px; }
.sx .cc, .sx .mn, .sx .na, .sx .ap { max-width: 100%; }
@media (max-width: 768px) { .sx .sf { transform: none; zoom: .74; } .sx .sl .side { display: none; } .sx .x-stage { height: auto; min-height: 340px; } }
.sx .x-grid > .x-card { min-width: 0; }
.sx { max-width: 100%; overflow: hidden; }
.cs .tile p.ana { margin-top: 10px; font-family: Light; font-style: italic; font-size: 15px; color: #2B776E; }

/* ---- Problem -> answer map ---- */
.cs .pmap { border: 1.5px solid #111; margin-top: 20px; }
.cs .pmap .pr { display: grid; grid-template-columns: 1.1fr 1.6fr 170px; border-bottom: 1px solid #e3e3e3; }
.cs .pmap .pr:last-child { border-bottom: 0; }
.cs .pmap .pr > div { padding: 16px 20px; font-family: Light; font-size: 15px; line-height: 1.45; color: #444; }
.cs .pmap .pr > div:first-child { font-family: Medium; color: #111; }
.cs .pmap .pr > div:first-child i { display: block; font-family: Light; font-style: italic; font-size: 13px; color: #2B776E; margin-top: 2px; }
.cs .pmap .hd { background: #111; } .cs .pmap .hd > div, .cs .pmap .hd > div:first-child { color: #fff; font-family: Regular; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 12px 20px; }
.cs .pmap .st { display: inline-block; font-family: Regular; font-size: 12px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cs .pmap .st.ok { background: #E6F6EF; color: #1F6B52; } .cs .pmap .st.bd { background: #FFF4E5; color: #8A5A0F; }
@media (max-width: 768px) { .cs .pmap .pr { grid-template-columns: 1fr; } .cs .pmap .hd { display: none; } .cs .pmap .pr > div { padding: 8px 16px; } .cs .pmap .pr > div:first-child { padding-top: 16px; } .cs .pmap .pr > div:last-child { padding-bottom: 16px; } }

/* ---- After a run (3 animated cards) ---- */
.sx.sx3 .x-grid { grid-template-columns: repeat(3, 1fr); }
.sx.sx3 .x-card { border-bottom: 0; } .sx.sx3 .x-card:nth-child(2n) { border-right: 1px solid #111; } .sx.sx3 .x-card:nth-child(3n) { border-right: 0; }
.sx.sx3 .x-stage { height: 360px; padding: 24px; }
.sx .rs, .sx .cb, .sx .sa { width: 100%; max-width: 330px; background: #fff; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.12); overflow: hidden; font-family: 'Space Grotesk', sans-serif; color: #111; }
.sx .rs .hd, .sx .cb .hd, .sx .sa .hd { padding: 12px 16px; border-bottom: 1px solid #EDEDED; display: flex; align-items: center; gap: 9px; }
.sx .av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2B776E; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sx .hd b { font-size: 13.5px; display: block; } .sx .hd small { font-size: 11px; color: #6B7280; }
/* run summary */
.sx .rs .it { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #F3F3F3; font-size: 12.5px; animation: rsIn 9s var(--out) infinite both; }
.sx .rs .it span { margin-left: auto; font-size: 11.5px; color: #2B776E; font-weight: 600; }
.sx .rs .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; flex: none; }
.sx .rs .it:nth-child(2) { animation-name: rsIn1; } .sx .rs .it:nth-child(3) { animation-name: rsIn2; } .sx .rs .it:nth-child(4) { animation-name: rsIn3; } .sx .rs .it:nth-child(5) { animation-name: rsIn4; }
@keyframes rsIn1 { 0%,6% { opacity: 0; transform: translateY(6px); } 10%,100% { opacity: 1; transform: none; } }
@keyframes rsIn2 { 0%,8% { opacity: 0; transform: translateY(6px); } 12%,100% { opacity: 1; transform: none; } }
@keyframes rsIn3 { 0%,10% { opacity: 0; transform: translateY(6px); } 14%,100% { opacity: 1; transform: none; } }
@keyframes rsIn4 { 0%,12% { opacity: 0; transform: translateY(6px); } 16%,100% { opacity: 1; transform: none; } }
.sx .rs .ft { padding: 10px 16px; font-size: 11.5px; color: #6B7280; display: flex; justify-content: space-between; animation: rsIn4 9s var(--out) infinite both; }
.sx .rs .where { padding: 8px 16px 12px; font-size: 11px; color: #6B7280; display: flex; gap: 6px; flex-wrap: wrap; }
.sx .rs .where em { font-style: normal; border: 1px solid #E5E7EB; border-radius: 999px; padding: 2px 8px; }
/* changed by scout */
.sx .cb .tag { margin-left: auto; font-size: 10.5px; font-weight: 600; color: #2B776E; background: #E6F2F0; border-radius: 999px; padding: 3px 8px; }
.sx .cb .tg { display: flex; margin: 12px 16px 0; background: #F3F4F6; border-radius: 8px; padding: 3px; width: fit-content; font-size: 11.5px; }
.sx .cb .tg span { padding: 4px 10px; border-radius: 6px; position: relative; }
.sx .cb .tg .a { animation: tgA 9s infinite; } .sx .cb .tg .b { animation: tgB 9s infinite; }
@keyframes tgA { 0%,30%,52%,100% { background: transparent; color: #6B7280; } 32%,50% { background: #fff; color: #111; } }
@keyframes tgB { 0%,30%,52%,100% { background: #fff; color: #111; } 32%,50% { background: transparent; color: #6B7280; } }
.sx .cb .body { margin: 10px 16px; font-size: 12.5px; line-height: 1.55; position: relative; min-height: 64px; }
.sx .cb .body .after, .sx .cb .body .before { position: absolute; inset: 0; }
.sx .cb .after { animation: cbAfter 9s infinite; } .sx .cb .before { animation: cbBefore 9s infinite; }
@keyframes cbAfter { 0%,30% { opacity: 1; } 32%,50% { opacity: 0; } 52%,70% { opacity: 1; } 72%,100% { opacity: 0; } }
@keyframes cbBefore { 0%,30% { opacity: 0; } 32%,50% { opacity: 1; } 52%,70% { opacity: 0; } 72%,100% { opacity: 1; } }
.sx .cb del { background: #FDECEF; color: #9F1239; text-decoration: line-through; border-radius: 3px; padding: 0 2px; } .sx .cb ins { background: #E6F6EF; color: #1F6B52; text-decoration: none; border-radius: 3px; padding: 0 2px; }
.sx .cb .ac { display: flex; gap: 8px; padding: 0 16px 14px; align-items: center; }
.sx .cb .undo { font-size: 11.5px; font-weight: 600; border: 1px solid #D1D5DB; border-radius: 8px; padding: 6px 11px; animation: cbUndo 9s var(--out) infinite; }
@keyframes cbUndo { 0%,66% { transform: none; background: #fff; } 68% { transform: scale(.95); background: #F3F4F6; } 70%,100% { transform: none; background: #fff; } }
.sx .cb .keep { font-size: 11.5px; font-weight: 600; color: #fff; background: #2B776E; border-radius: 8px; padding: 6px 11px; }
.sx .cb .toast { margin-left: auto; font-size: 11px; color: #1F6B52; animation: cbToast 9s var(--out) infinite both; } @keyframes cbToast { 0%,70% { opacity: 0; transform: translateY(4px); } 74%,96% { opacity: 1; transform: none; } 99%,100% { opacity: 0; } }
/* signed approval */
.sx .sa .ent { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #F3F3F3; }
.sx .sa .ent .av { width: 26px; height: 26px; }
.sx .sa .ent b { font-size: 12.5px; } .sx .sa .ent .ok { color: #1E7F4F; font-weight: 600; font-size: 12px; }
.sx .sa .ent p { margin: 3px 0 0; font-size: 11.5px; color: #6B7280; line-height: 1.45; }
.sx .sa .ent p em { font-style: normal; border: 1px solid #E5E7EB; border-radius: 999px; padding: 1px 7px; margin-right: 4px; color: #374151; }
.sx .sa .e1 { animation: rsIn1 9s var(--out) infinite both; } .sx .sa .e2 { animation: saIn 9s var(--out) infinite both; }
@keyframes saIn { 0%,40% { opacity: 0; transform: translateY(8px); } 45%,100% { opacity: 1; transform: none; } }
.sx .sa .ft { padding: 10px 16px; font-size: 11.5px; color: #374151; animation: saFt 9s var(--out) infinite both; } @keyframes saFt { 0%,58% { opacity: 0; } 62%,100% { opacity: 1; } }
@media (max-width: 1100px) { .sx.sx3 .x-grid { grid-template-columns: 1fr; } .sx.sx3 .x-card { border-right: 0 !important; border-bottom: 1px solid #111 !important; } .sx.sx3 .x-card:last-child { border-bottom: 0 !important; } }
@media (min-width: 769px) { .cs .pmap .pr { grid-template-columns: 1.1fr 1.6fr 200px; } }
.sx .rs .it { justify-content: flex-start; text-align: left; }
.sx .rs, .sx .cb, .sx .sa { text-align: left; }
.sx .x-meta { border-top: 0; }

/* ---- Real Scopeout chat panel ---- */
.sx .cp { width: 100%; max-width: 400px; height: 310px; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.10); display: flex; flex-direction: column; font-family: 'Space Grotesk', sans-serif; color: #111827; overflow: hidden; position: relative; }
.sx .cp .top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.sx .cp .lg { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #111; border-right-color: transparent; transform: rotate(-30deg); }
.sx .cp .tok { font-size: 11px; background: #F1F5F9; color: #334155; border-radius: 999px; padding: 4px 9px; } .sx .cp .tok b { font-weight: 700; }
.sx .cp .ico { margin-left: auto; color: #9CA3AF; font-size: 12px; letter-spacing: 8px; }
.sx .cp .bd { flex: 1; padding: 2px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.sx .cp .th { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6B7280; }
.sx .cp .th i { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#60A5FA, #A78BFA, #34D399, #60A5FA); }
.sx .cp .th span { margin-left: auto; color: #9CA3AF; }
.sx .cp .tx { font-size: 12.5px; line-height: 1.5; color: #111827; } .sx .cp .tx.b { font-weight: 600; }
.sx .cp .sub { font-size: 11px; color: #9CA3AF; }
.sx .cp .opt { font-size: 12.5px; color: #111827; padding: 3px 6px; border-radius: 6px; width: fit-content; } .sx .cp .opt:before { content: "↳ "; color: #9CA3AF; }
.sx .cp .usr { display: flex; flex-direction: column; gap: 3px; } .sx .cp .usr .who { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.sx .cp .usr .who i { width: 20px; height: 20px; border-radius: 50%; background: #333; color: #fff; font-style: normal; font-size: 8.5px; display: grid; place-items: center; }
.sx .cp .usr .tx { padding-left: 27px; }
.sx .cp .ft { border-top: 1px solid #F1F1F1; padding: 8px 12px 10px; }
.sx .cp .ph { font-size: 12.5px; font-style: italic; color: #9CA3AF; height: 18px; position: relative; }
.sx .cp .ph .typ { position: absolute; left: 0; top: 0; font-style: normal; color: #111827; }
.sx .cp .tools { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: #6B7280; }
.sx .cp .tools .pl { font-size: 15px; color: #6B7280; } .sx .cp .tools .sk { border: 1px solid #D9DEE5; border-radius: 999px; padding: 3px 9px; color: #111827; font-weight: 500; }
.sx .cp .tools .md { margin-left: auto; } .sx .cp .tools .snd { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #60A5FA, #3B82F6); color: #fff; display: grid; place-items: center; font-size: 13px; }
/* real MentionMenu */
.sx .cp .mm { position: absolute; left: 12px; right: 12px; bottom: 66px; background: #fff; border: 1px solid #ECEEF1; border-radius: 14px; box-shadow: 0 12px 40px rgba(17,24,39,.14); padding: 4px; }
.sx .cp .mm .mi { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #797979; border: 1px solid transparent; }
.sx .cp .mm .mi.on { color: #343837; border-color: #E2E4E8; }
.sx .cp .mm .mi i { width: 22px; height: 22px; border-radius: 50%; background: #F1F2F4; color: #374151; font-style: normal; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sx .cp .mm .mi small { margin-left: auto; font-size: 12px; color: #9CA3AF; }
/* timelines */
.sx .cp .t1 { animation: rsIn1 9s var(--out) infinite both; }
.sx .cp .t2 { animation: rsIn3 9s var(--out) infinite both; }
.sx .cp .tP { animation: cpPh 9s infinite; } @keyframes cpPh { 0%,32% { opacity: 1; } 33%,58% { opacity: 0; } 59%,100% { opacity: 1; } }
.sx .cp .typ { width: 0; overflow: hidden; white-space: nowrap; animation: cpTyp 9s steps(3) infinite; } @keyframes cpTyp { 0%,33% { width: 0; } 40%,57% { width: 2.4ch; } 58%,100% { width: 0; } }
.sx .cp .mm { animation: cpMM 9s var(--out) infinite both; } @keyframes cpMM { 0%,38% { opacity: 0; transform: translateY(6px); } 42%,57% { opacity: 1; transform: none; } 59%,100% { opacity: 0; transform: translateY(4px); } }
.sx .cp .mm .mi.on { animation: cpHi 9s infinite; } @keyframes cpHi { 0%,47% { background: transparent; } 49%,100% { background: #F7F8FA; } }
.sx .cp .t3 { animation: cpT3 9s var(--out) infinite both; } @keyframes cpT3 { 0%,60% { opacity: 0; transform: translateY(6px); } 64%,100% { opacity: 1; transform: none; } }
/* scenario 06 */
.sx .cp .wt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #6B7280; } .sx .cp .wt i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #A8620A; border-top-color: transparent; animation: naSpin 1s linear infinite; }
.sx .cp .opt.go { animation: naTap 9s var(--out) infinite; }
.sx .cp .u6 { animation: cpU6 9s var(--out) infinite both; } @keyframes cpU6 { 0%,31% { opacity: 0; transform: translateY(6px); } 35%,100% { opacity: 1; transform: none; } }
.sx .cp .r6 { animation: cpR6 9s var(--out) infinite both; } @keyframes cpR6 { 0%,48% { opacity: 0; transform: translateY(6px); } 52%,100% { opacity: 1; transform: none; } }
.sx .cp .bd.s6 { justify-content: flex-start; }
.sx .cp .opt { border: 0; text-decoration: none; font-family: 'Space Grotesk', sans-serif; background: transparent; }

/* Real product frames: crossfade between captured states (opacity only, ease-out in, ease-in out) */
.sx .x-stage.x-real { padding: 24px; background: #F6F6F6; background-image: radial-gradient(#dcdcdc 1px, transparent 1px); background-size: 16px 16px; }
.sx .x-real .rf { position: relative; height: 100%; max-width: 100%; }
.sx .x-real.wide .rf { aspect-ratio: 1320 / 760; height: auto; width: 100%; }
.sx .x-real.chat .rf { aspect-ratio: 880 / 720; }
.sx .x-real.chat.tall .rf { aspect-ratio: 880 / 960; }
.sx .x-real .rf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; }
.sx .x-real.chat .rf img { border: 1px solid #E6E6E6; background: #fff; }
.sx .x-real .rf img:not(.f1) { opacity: 0; }
.sx .x-real .rf.n2 .f2 { animation: rf2 8s infinite; }
.sx .x-real .rf.n3 .f2 { animation: rf3b 10s infinite; }
.sx .x-real .rf.n3 .f3 { animation: rf3c 10s infinite; }
@keyframes rf2 { 0%, 40% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 44%, 92% { opacity: 1; animation-timing-function: cubic-bezier(.7,0,.84,0); } 96%, 100% { opacity: 0; } }
@keyframes rf3b { 0%, 28% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 31%, 94% { opacity: 1; animation-timing-function: cubic-bezier(.7,0,.84,0); } 97%, 100% { opacity: 0; } }
@keyframes rf3c { 0%, 60% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 63%, 94% { opacity: 1; animation-timing-function: cubic-bezier(.7,0,.84,0); } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sx .x-real .rf img { animation: none !important; } }
@media (max-width: 768px) { .sx .x-stage.x-real { padding: 16px; height: 340px; } }

/* Skim path: one chapter line per section */
.cs p.story { font-family: Light, sans-serif; font-size: 34px; line-height: 1.3; color: #9a9a9a; margin: 8px 0 40px; max-width: 900px; letter-spacing: -0.01em; }
.cs p.story b { font-family: Medium, sans-serif; font-weight: normal; color: #111; }
@media (max-width: 768px) { .cs p.story { font-size: 24px; margin-bottom: 28px; } }
@media (min-width: 769px) { .cs .pmap.two .pr { grid-template-columns: 1fr 1.4fr; } }

/* Edge cases: real product captures, each tagged with where it happens */
.cs .spec .cell { min-height: 440px; padding: 64px 28px 96px; background: #F6F6F6; }
.cs .spec .cell img { max-height: 300px; border-radius: 10px; border: 1px solid #E6E6E6; background: #fff; }
.cs .spec .cell .where { position: absolute; top: 20px; left: 24px; font-style: normal; font-family: Medium, sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #2B776E; background: #E6F2F0; border-radius: 999px; padding: 5px 11px; }
@media (max-width: 768px) { .cs .spec .cell { min-height: 0; padding: 60px 16px 88px; } .cs .spec .cell img { max-height: none; width: 100%; } }

/* ===== Match the Freo case study type scale and structure ===== */
.cs .wrap { max-width: 1032px; }
.cs .cs-h { padding-top: 120px; }
.cs .lbl { font-family: Light; font-size: 13px; letter-spacing: 0.02em; color: #4a4a4a; }
.cs .copy p, .cs p.copy { line-height: 1.5; color: #6b6b6b; }
.cs .copy h4 { font-family: Medium; font-size: 22px; line-height: 1.4; color: #333; margin: 0 0 10px; }
.cs .copy p.small + h4 { margin-top: 36px; }
.cs .small, .cs p.small, .cs .won + p.small { font-size: 17px !important; line-height: 1.45 !important; color: #6b6b6b; font-family: Light; }
.cs .row { padding: 44px 0; }
.cs .row.last { border-bottom: 0; }
.cs .card.brand { padding: 22px 24px; border-radius: 6px; }
.cs .card.brand img { height: 26px; display: block; margin-bottom: 14px; }
.cs .card.brand p { margin: 0; }
.cs .res2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs .res2 h4 { font-size: 26px; margin-bottom: 8px; }
.cs .tile .k { font-family: Medium; font-size: 22px !important; line-height: 1.35 !important; color: #222; margin-bottom: 12px; }
.cs .tile p { font-size: 17px; }
.cs .tile p.ana { font-size: 15px; }
.sx .x-meta b, .cs .spec .cell .lab b { font-size: 22px; }
.cs-results .wrap { max-width: 1032px; }
.cs-results .v { font-size: 96px; }
.cs-results p { font-size: 24px; color: #bdbdbd; }
@media (max-width: 768px) {
  .cs .cs-h { padding-top: 96px; }
  .cs .res2 { grid-template-columns: 1fr; }
  .cs .copy h4 { font-size: 20px; }
  .cs-results .v { font-size: 72px; }
  .cs-results p { font-size: 20px; }
}

/* User journey: real screens, review moments marked */
.cs .jr { margin-top: 8px; }
.cs .jr-track { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; margin: 8px 0 28px; }
.cs .jr-track:before { content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 7px; height: 2px; background: #e3e3e3; }
.cs .jr-track span { position: relative; text-align: center; }
.cs .jr-track i { display: block; width: 16px; height: 16px; margin: 0 auto 10px; border-radius: 50%; background: #fff; border: 2px solid #bdbdbd; position: relative; }
.cs .jr-track .rv i { border-color: #C77A0A; background: #FDF1DC; box-shadow: 0 0 0 4px rgba(199,122,10,.12); }
.cs .jr-track b { font-family: Regular; font-weight: normal; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: #6b6b6b; }
.cs .jr-track .rv b { color: #8A5A0F; }
.cs .jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs .jr-card { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; min-width: 0; }
.cs .jr-card.rv { border-color: #F1D9AE; }
.cs .jr-n { font-family: Regular; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 12px; }
.cs .jr-img { height: 190px; border-radius: 10px; overflow: hidden; background: #F6F6F6; border: 1px solid #f0f0f0; margin-bottom: 16px; }
.cs .jr-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cs .jr-card h5 { font-family: Medium; font-weight: normal; font-size: 20px; line-height: 1.3; color: #222; margin: 0 0 6px; }
.cs .jr-card p { font-family: Light; font-size: 16px; line-height: 1.45; color: #6b6b6b; margin: 0 0 16px; }
.cs .jr-review { margin-top: auto; display: flex; align-items: center; gap: 8px; font-family: Medium; font-size: 14px; color: #6B4407; background: #FDF6EA; border-radius: 999px; padding: 6px 12px 6px 6px; width: fit-content; max-width: 100%; }
.cs .jr-review em { font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #C77A0A; border-radius: 999px; padding: 3px 8px; }
.cs .jr-review.none { font-family: Light; color: #8a8a8a; background: #F6F6F6; padding: 6px 12px; }
.cs .jr-foot { font-family: Light; font-size: 17px; color: #6b6b6b; margin: 20px 0 0; }
@media (max-width: 768px) {
  .cs .jr-track { display: none; }
  .cs .jr-grid { grid-template-columns: 1fr; }
  .cs .jr-img { height: 200px; }
}

/* Problems as one key-findings card (Freo style), principles three-up */
.cs .kf { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; padding: 28px 28px 8px; margin-top: 8px; }
.cs .kf-t { font-family: Regular; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; color: #222; padding-bottom: 18px; border-bottom: 1px solid #e6e6e6; }
.cs .kf-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.cs .kf-g > div { padding: 22px 0; }
.cs .kf-g b { display: block; font-family: Medium; font-weight: normal; font-size: 20px; color: #222; margin-bottom: 6px; }
.cs .kf-g span { font-family: Light; font-size: 17px; color: #6b6b6b; }
.cs .pr3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs .pr3 i { display: block; font-style: normal; font-family: Light; font-size: 13px; color: #9a9a9a; margin-bottom: 6px; }
.cs .pr3 b { font-size: 20px; line-height: 1.3; color: #222; }
@media (max-width: 768px) { .cs .kf-g, .cs .pr3 { grid-template-columns: 1fr; } .cs .kf-g > div { padding: 16px 0; } }
.cs .kf-g b { font-size: 19px; line-height: 1.35; }
.cs .kf-g span { display: block; }
.cs .kf-g small { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; font-family: Light; font-size: 14px; color: #8a8a8a; }
.cs .kf-g small em { font-style: normal; font-family: Medium; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; border: 1px solid #e3e3e3; border-radius: 4px; padding: 1px 5px; flex: none; }
.cs .copy h4 + h4 { margin-top: 22px; }

/* AI guardrails for review: spec grid */
.cs .grd { border: 1.5px solid #111; margin-top: 8px; }
.cs .grd-bar { background: #111; color: #fff; font-family: Medium; font-size: 22px; padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cs .grd-bar span { font-family: Light; font-size: 15px; color: #bdbdbd; }
.cs .grd-g { display: grid; grid-template-columns: repeat(4, 1fr); }
.cs .grd-c { border-right: 1px solid #111; padding: 22px 22px 8px; min-width: 0; }
.cs .grd-c:last-child { border-right: 0; }
.cs .grd-h { font-family: Regular; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #2B776E; padding-bottom: 14px; border-bottom: 1px solid #e6e6e6; margin-bottom: 4px; }
.cs .grd-r { padding: 14px 0; border-bottom: 1px dashed #e6e6e6; }
.cs .grd-r:last-child { border-bottom: 0; }
.cs .grd-r b { display: block; font-family: Medium; font-weight: normal; font-size: 18px; line-height: 1.3; color: #222; margin-bottom: 4px; }
.cs .grd-r span { font-family: Light; font-size: 15px; line-height: 1.4; color: #6b6b6b; }
@media (max-width: 900px) { .cs .grd-g { grid-template-columns: 1fr 1fr; } .cs .grd-c:nth-child(2n) { border-right: 0; } .cs .grd-c:nth-child(-n+2) { border-bottom: 1px solid #111; } }
@media (max-width: 560px) { .cs .grd-g { grid-template-columns: 1fr; } .cs .grd-c { border-right: 0; border-bottom: 1px solid #111; } .cs .grd-c:last-child { border-bottom: 0; } .cs .grd-bar { flex-direction: column; align-items: flex-start; font-size: 19px; padding: 16px 18px; } }

/* Layered real-UI scenarios: base frame + changed region + cursor that causes it.
   10s loop: rest, cursor travels (ease-in-out), press, change enters (ease-out ~400ms),
   hold, everything exits (ease-in ~400ms). Transform and opacity only. */
.sx .x-real .rf.ly { container-type: size; position: relative; overflow: hidden; border-radius: 10px; }
.sx .x-real.chat .rf.ly { border: 1px solid #E6E6E6; background: #fff; }
.sx .x-real .rf.ly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 1; border: 0; border-radius: 0; }
.sx .x-real .rf.ly .ov { position: absolute; opacity: 0; will-change: transform, opacity; }
.sx .x-real .rf.ly .ov.s1 { animation: ly1 10s infinite; transform-origin: 0 0; }
.sx .x-real .rf.ly .ov.s1.drop { animation-name: lyd; transform-origin: 50% 0; }
.sx .x-real .rf.ly .ov.s2 { animation: ly2 10s infinite; }
.sx .x-real .rf.ly .cur { position: absolute; left: 0; top: 0; z-index: 3; animation: lyc 10s infinite; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.sx .x-real .rf.ly .ck { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(43,119,110,.35); opacity: 0; animation: lyk 10s infinite; }
@keyframes ly1 {
  0%, 23% { opacity: 0; transform: translateY(6px) scale(.985); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  27%, 90% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7,0,.84,0); }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes lyd {
  0%, 16% { opacity: 0; transform: translateY(-10px); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  21%, 90% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7,0,.84,0); }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes ly2 {
  0%, 55% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  59%, 90% { opacity: 1; animation-timing-function: cubic-bezier(.7,0,.84,0); }
  94%, 100% { opacity: 0; }
}
@keyframes lyc {
  0%, 5% { opacity: 0; transform: translate(88cqw, 92cqh); }
  9% { opacity: 1; transform: translate(88cqw, 92cqh); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  20% { opacity: 1; transform: translate(var(--cx), var(--cy)) scale(1); animation-timing-function: cubic-bezier(.33,1,.68,1); }
  21.5% { transform: translate(var(--cx), var(--cy)) scale(.84); }
  23.5% { transform: translate(var(--cx), var(--cy)) scale(1); }
  32% { opacity: 1; transform: translate(var(--cx), var(--cy)); animation-timing-function: cubic-bezier(.7,0,.84,0); }
  36%, 100% { opacity: 0; transform: translate(var(--cx), var(--cy)); }
}
@keyframes lyk {
  0%, 20.5% { opacity: 0; transform: scale(.3); }
  21.5% { opacity: 1; transform: scale(.5); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  28%, 100% { opacity: 0; transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .sx .x-real .rf.ly .ov { animation: none !important; opacity: 1; transform: none; }
  .sx .x-real .rf.ly .cur, .sx .x-real .rf.ly .ck { display: none; }
}
.cs .kf-g small { display: block; font-size: 15px; line-height: 1.45; color: #7a7a7a; margin-top: 8px; }

/* Problem → solution map: the UI that solves each problem */
.cs .pm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 24px; }
.cs .pm-c { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; min-width: 0; }
.cs .pm-p { display: flex; align-items: center; gap: 8px; font-family: Regular; font-size: 14px; color: #9F1239; margin-bottom: 12px; }
.cs .pm-p i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #FDECEF; display: grid; place-items: center; font-size: 10px; flex: none; }
.cs .pm-i { height: 200px; border-radius: 10px; background: #F6F6F6; background-image: radial-gradient(#dcdcdc 1px, transparent 1px); background-size: 14px 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.cs .pm-i img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.cs .pm-s { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.cs .pm-s b { font-family: Medium; font-weight: normal; font-size: 19px; color: #222; }
.cs .pm-c p { font-family: Light; font-size: 15px; line-height: 1.4; color: #6b6b6b; margin: 4px 0 0; }
.cs .pm .st { font-family: Medium; font-size: 11px; letter-spacing: .03em; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cs .pm .st.r { background: #E6F2F0; color: #1F5D56; }
.cs .pm .st.p { background: #EEF0FF; color: #4B55C9; }
.cs .pm .st.d { background: #FFF4E5; color: #92400E; }
.cs .pm .st.c { background: #F3F4F6; color: #4B5563; }
@media (max-width: 900px) { .cs .pm { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cs .pm { grid-template-columns: 1fr; } }
.sx3 .cb .hd b, .sx3 .cb .tag, .sx3 .cb .ac span, .sx3 .cb .undo { white-space: nowrap; }
.sx3 .cb .hd small { white-space: nowrap; }
.sx3 .cb .tag { font-size: 9.5px !important; padding: 4px 8px !important; letter-spacing: .02em; }

/* Problem numbers + "solves" chips that link visuals back to the problems */
.cs .kf-g .pn, .cs .solves i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #FDECEF; color: #9F1239; font-family: Medium; font-size: 11px; }
.cs .kf-g .pn { margin-bottom: 10px; }
.cs .solves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-style: normal; }
.cs .solves span { display: inline-flex; align-items: center; gap: 6px; font-family: Regular; font-size: 13px; color: #6b6b6b; background: #fff; border: 1px solid #ececec; border-radius: 999px; padding: 3px 10px 3px 3px; }
.cs .solves span:before { content: "Solves"; order: 0; font-family: Medium; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #2B776E; padding-left: 6px; }
.cs .solves span i { order: 0; }
.cs .spec .cell .lab .solves { justify-content: flex-end; }
.cs .grd-solves { padding: 12px 28px; border-bottom: 1px solid #111; background: #fafafa; }
.cs .grd-solves .solves { margin: 0; }
.cs .solves span { padding: 4px 12px 4px 4px; }
/* Who starts it: Scout on its own, or the person */
.cs .solves .trig { display: inline-flex; align-items: center; font-family: Medium; font-size: 12px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cs .solves .trig:before { content: none; }
.cs .solves .trig.a { background: #E6F2F0; color: #1F5D56; border: 1px solid #CDE6E1; }
.cs .solves .trig.u { background: #F3F4F6; color: #111; border: 1px solid #E5E7EB; }
.sx3 .x-stage.x-real { padding: 20px; } .sx3 .x-stage.x-real.chat .rf.ly { height: 100%; width: auto; max-width: 100%; }

/* Hero: the review on the work, real product cutouts, no background.
   12s loop: badge appears, panel opens from it, then each answer lands in turn. */
.fold1 .cont .cover .hero-anim { position: relative; float: right; width: 46%; aspect-ratio: 2648 / 2139; margin: 6% 4% 0 0; }
.fold1 .cont .cover .hero-anim img.hl { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; float: none; transform: none; opacity: 0; display: block; will-change: transform, opacity; }
.fold1 .cont .cover .hero-anim img.base { opacity: 1; }
.hero-anim .badge { animation: hb 12s infinite; transform-origin: 43% 8%; }
.hero-anim .p0 { animation: hp0 12s infinite; transform-origin: 43% 9%; }
.hero-anim .p1 { animation: hp1 12s infinite; }
.hero-anim .p2 { animation: hp2 12s infinite; }
.hero-anim .p3 { animation: hp3 12s infinite; }
@keyframes hb  { 0%, 3% { opacity: 0; transform: scale(.92); animation-timing-function: cubic-bezier(.16,1,.3,1); } 7%, 94% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7,0,.84,0); } 98%, 100% { opacity: 0; } }
@keyframes hp0 { 0%, 13% { opacity: 0; transform: scale(.96); animation-timing-function: cubic-bezier(.16,1,.3,1); } 17%, 36% { opacity: 1; transform: none; } 36.1%, 100% { opacity: 0; } }
@keyframes hp1 { 0%, 33% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 36%, 53% { opacity: 1; } 53.1%, 100% { opacity: 0; } }
@keyframes hp2 { 0%, 50% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 53%, 70% { opacity: 1; } 70.1%, 100% { opacity: 0; } }
@keyframes hp3 { 0%, 67% { opacity: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 70%, 94% { opacity: 1; animation-timing-function: cubic-bezier(.7,0,.84,0); } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-anim img.hl { animation: none !important; } .fold1 .cont .cover .hero-anim img.badge, .fold1 .cont .cover .hero-anim img.p3 { opacity: 1; } }
@media (max-width: 768px) { .fold1 .cont .cover .hero-anim { float: none; width: 100%; margin: 0; } }

/* ===== Live hero, built from the product: SeekingFeedback.tsx (border, badge, panel sizes and motion)
   and ThinkingBlock LIVE_LABEL_SX (text shimmer). Real px values scaled to the hero width. ===== */
.fold1 .cont .cover .hero-anim.hv { container-type: inline-size; aspect-ratio: 640 / 452; font-family: 'Space Grotesk', Inter, sans-serif; color: #111; }
.hv * { box-sizing: border-box; }
.hv-ring { position: absolute; left: 0; top: 6.8750cqw; width: 41.5625cqw; height: 41.5625cqw; border-radius: 1.5625cqw; padding: 0.4688cqw;
  background: linear-gradient(90deg, #3B82F6, #10B981, #3B82F6); background-size: 200% 100%; animation: scoutFeedbackFlow 2.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes scoutFeedbackFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.hv-node { position: absolute; left: 0.6250cqw; top: 7.5000cqw; width: 40.3125cqw; }
.fold1 .cont .cover .hv-node img { position: relative; left: 0 !important; top: 0 !important; right: auto !important; display: block; width: 100% !important; height: auto; margin: 0 !important; float: none !important; transform: none !important; opacity: 1; }
.hv-badge { position: absolute; left: 43.1250cqw; top: 6.8750cqw; display: inline-flex; align-items: center; gap: 1.2500cqw; padding: 1.2500cqw 2.1875cqw; border-radius: 999px; color: #fff; font-size: 2.1094cqw; font-weight: 600; white-space: nowrap;
  background: linear-gradient(90deg, #3B82F6, #10B981); box-shadow: 0 0.6250cqw 2.1875cqw rgba(59,130,246,.25); animation: hvIn 12s infinite; transform-origin: 0 50%; }
.hv-logo { width: 2.5000cqw; height: 2.5000cqw; border-radius: 50%; border: 0.3125cqw solid #fff; border-right-color: transparent; transform: rotate(-30deg); }
.hv-badge b { width: 1.0938cqw; height: 1.0938cqw; border-radius: 50%; background: #fff; animation: scoutFeedbackPulse 1.2s ease-in-out infinite; }
@keyframes scoutFeedbackPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hv-panel { position: absolute; left: 43.1250cqw; top: 13.4375cqw; width: 53.1250cqw; background: #fff; border-radius: 2.8125cqw; box-shadow: 0 1.2500cqw 4.3750cqw rgba(0,0,0,.14), 0 2.8125cqw 7.5000cqw rgba(0,0,0,.28); overflow: hidden; transform-origin: 0 0; animation: hvPanel 12s infinite; }
.hv-hd { padding: 1.8750cqw 2.8125cqw; border-bottom: 1px solid #EDEDED; }
.hv-t { font-size: 2.3438cqw; font-weight: 600; color: #111; }
.hv-sum { display: flex; align-items: center; gap: 1.2500cqw; margin-top: 0.9375cqw; }
.hv-av { display: flex; }
.hv-av em { font-style: normal; width: 3.1250cqw; height: 3.1250cqw; margin-left: -0.7812cqw; border-radius: 50%; background: #F3F4F6; color: #111; border: 0.2344cqw solid #fff; display: grid; place-items: center; font-size: 1.3281cqw; font-weight: 700; box-shadow: 0 0 0 0.2344cqw #C9CDD3; }
.hv-av em:first-child { margin-left: 0; }
.hv-av .a1 { animation: hvRingOk 12s infinite; } .hv-av .a2 { animation: hvRingOk2 12s infinite; } .hv-av .a3 { animation: hvRingNo 12s infinite; }
@keyframes hvRingOk  { 0%, 34% { box-shadow: 0 0 0 0.2344cqw #C9CDD3; } 37%, 100% { box-shadow: 0 0 0 0.2344cqw #2B776E; } }
@keyframes hvRingOk2 { 0%, 46% { box-shadow: 0 0 0 0.2344cqw #C9CDD3; } 49%, 100% { box-shadow: 0 0 0 0.2344cqw #2B776E; } }
@keyframes hvRingNo  { 0%, 58% { box-shadow: 0 0 0 0.2344cqw #C9CDD3; } 61%, 100% { box-shadow: 0 0 0 0.2344cqw #D14343; } }
.hv-tally { position: relative; display: block; height: 2.5000cqw; flex: 1; font-size: 1.8750cqw; color: #4B5563; }
.hv-tally s { text-decoration: none; position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
/* The live label while waiting: the product's teal-to-indigo with a white band (ThinkingBlock LIVE_LABEL_SX). */
.hv-tally .t0 { background-image: linear-gradient(90deg, #5DCCBF 0%, #5E68DF 35%, #FFFFFF 50%, #5E68DF 65%, #5DCCBF 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600;
  animation: hvT0 12s infinite, thinkingFlow 2.5s ease-in-out infinite; }
@keyframes thinkingFlow { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
.hv-tally .t1 { animation: hvT1 12s infinite; } .hv-tally .t2 { animation: hvT2 12s infinite; } .hv-tally .t3 { animation: hvT3 12s infinite; }
@keyframes hvT0 { 0%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes hvT1 { 0%, 34% { opacity: 0; } 36%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes hvT2 { 0%, 46% { opacity: 0; } 48%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes hvT3 { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }
.hv-ask { padding: 2.1875cqw 2.8125cqw 0.6250cqw; font-size: 2.1094cqw; line-height: 1.5; color: #111; }
.hv-ask span { opacity: 0; animation: hvType 12s infinite; animation-delay: calc(var(--i) * 40ms); }
@keyframes hvType { 0%, 14% { opacity: 0; } 14.3%, 100% { opacity: 1; } }
.hv-rows { padding: 0.6250cqw 2.8125cqw 2.1875cqw; display: flex; flex-direction: column; }
.hv-r { display: flex; gap: 1.5625cqw; align-items: flex-start; opacity: 0; max-height: 0; overflow: hidden; }
.hv-r em { font-style: normal; flex: none; width: 3.7500cqw; height: 3.7500cqw; border-radius: 50%; background: #F3F4F6; color: #111; display: grid; place-items: center; font-size: 1.4062cqw; font-weight: 700; margin: 0.3125cqw; }
.hv-r em.ok { box-shadow: 0 0 0 0.2344cqw #2B776E; } .hv-r em.no { box-shadow: 0 0 0 0.2344cqw #D14343; }
.hv-r p { margin: 0.6250cqw 0 0; font-size: 2.0312cqw; line-height: 1.4; color: #111; }
.hv-r p b { color: #111; font-weight: 600; }
.hv-r u { text-decoration: none; font-weight: 600; } .hv-r u.g { color: #1F6B52; } .hv-r u.r { color: #B42318; }
.hv-r small { display: inline-block; margin-left: 0.9375cqw; font-size: 1.7188cqw; color: #6B7280; background: #F3F4F6; border-radius: 999px; padding: 0.1562cqw 1.0938cqw; }
.hv-r q { display: block; margin-top: 0.9375cqw; padding: 0.9375cqw 1.5625cqw; background: #F7F7F8; border-radius: 1.5625cqw; font-size: 2.0312cqw; color: #111; quotes: none; }
.hv-r.r1 { animation: hvRow1 12s infinite; } .hv-r.r2 { animation: hvRow2 12s infinite; } .hv-r.r3 { animation: hvRow3 12s infinite; }
@keyframes hvIn    { 0%, 2% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16,1,.3,1); } 6%, 92% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7,0,.84,0); } 97%, 100% { opacity: 0; transform: none; } }
@keyframes hvPanel { 0%, 8% { opacity: 0; transform: translateY(-0.9375cqw) scale(.96); animation-timing-function: cubic-bezier(.16,1,.3,1); } 12%, 90% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.7,0,.84,0); } 95%, 100% { opacity: 0; transform: none; } }
@keyframes hvRow1 { 0%, 33% { opacity: 0; max-height: 0; padding-top: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 37%, 100% { opacity: 1; max-height: 14.0625cqw; padding-top: 1.5625cqw; } }
@keyframes hvRow2 { 0%, 45% { opacity: 0; max-height: 0; padding-top: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 49%, 100% { opacity: 1; max-height: 14.0625cqw; padding-top: 1.5625cqw; } }
@keyframes hvRow3 { 0%, 57% { opacity: 0; max-height: 0; padding-top: 0; animation-timing-function: cubic-bezier(.16,1,.3,1); } 61%, 100% { opacity: 1; max-height: 14.0625cqw; padding-top: 1.5625cqw; } }
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv *:after { animation: none !important; }
  .hv-ask span, .hv-panel, .hv-badge { opacity: 1 !important; transform: none !important; }
  .hv-r { opacity: 1 !important; max-height: none !important; padding-top: 1.5625cqw !important; }
  .hv-tally s { opacity: 0 !important; } .hv-tally .t3 { opacity: 1 !important; }
}
@media (max-width: 768px) { .fold1 .cont .cover .hero-anim.hv { float: none; width: 100%; margin: 0; } }

/* Hero, single-reviewer view (as in the product): pill, Sam waiting, typed ask, chips, input; Sam approves. */
.fold1 .cont .cover .hero-anim.hv { aspect-ratio: 640 / 380; }
.hv-pill { position: absolute; left: 1.2500cqw; top: 50.3125cqw; display: inline-flex; align-items: center; gap: 0.9375cqw; padding: 0.6250cqw 0.9375cqw 0.6250cqw 1.5625cqw; border-radius: 999px; background: #fff; border: 1px solid #ECECEC; box-shadow: 0 0.9375cqw 3.7500cqw rgba(110,110,110,.12); font-size: 1.8750cqw; font-weight: 600; color: #111; white-space: nowrap; }
.hv-pill i { width: 1.0938cqw; height: 1.0938cqw; border-radius: 50%; background: #92400E; }
.hv-pill em { font-style: normal; width: 2.8125cqw; height: 2.8125cqw; border-radius: 50%; background: #F3F4F6; display: grid; place-items: center; font-size: 1.4062cqw; font-weight: 700; }
.hv-hd { position: relative; }
.hv-x { position: absolute; right: 2.8125cqw; top: 2.5000cqw; color: #6B7280; font-size: 2.8125cqw; line-height: 1; }
.hv-tally { height: 2.5000cqw; }
.hv-tally s { font-size: 1.8750cqw; }
.hv-tally .w0 { animation: hvW0 12s infinite; } .hv-tally .w1 { animation: hvW1 12s infinite; }
@keyframes hvW0 { 0%, 60% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes hvW1 { 0%, 60% { opacity: 0; } 62%, 100% { opacity: 1; } }
.hv-av .a3 { animation: hvSam 12s infinite; }
@keyframes hvSam { 0%, 60% { box-shadow: 0 0 0 0.2344cqw #C9CDD3; } 62%, 100% { box-shadow: 0 0 0 0.2344cqw #2B776E; } }
.hv-ask { padding: 2.1875cqw 2.8125cqw 0.9375cqw; min-height: 12.5000cqw; }
.hv-ask span { animation: hvType 12s infinite; animation-delay: calc(var(--i) * 18ms); white-space: pre-wrap; }
@keyframes hvType { 0%, 14% { opacity: 0; } 14.2%, 100% { opacity: 1; } }
.hv-chips { padding: 0.3125cqw 2.8125cqw 1.8750cqw; display: flex; flex-direction: column; gap: 0.3125cqw; opacity: 0; animation: hvChips 12s infinite; }
.hv-chips span { display: flex; gap: 1.2500cqw; align-items: center; padding: 0.6250cqw 0; font-size: 2.0312cqw; color: #111; }
.hv-chips span:before { content: "↳"; color: #9CA3AF; }
.hv-chips .c1 { animation: hvPick 12s infinite; }
@keyframes hvChips { 0%, 36% { opacity: 0; transform: translateY(0.9375cqw); animation-timing-function: cubic-bezier(.16,1,.3,1); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes hvPick { 0%, 56% { color: #111; } 58%, 62% { color: #2563EB; } 64%, 100% { color: #111; } }
.hv-in { display: flex; align-items: center; justify-content: space-between; gap: 1.2500cqw; padding: 1.5625cqw 2.5000cqw; border-top: 1px solid #EDEDED; font-size: 2.0312cqw; color: #9CA3AF; }
.hv-in i { font-style: normal; width: 4.3750cqw; height: 4.3750cqw; border-radius: 50%; background: #D1D5DB; color: #fff; display: grid; place-items: center; font-size: 2.0312cqw; }
@media (prefers-reduced-motion: reduce) { .hv-chips { opacity: 1 !important; transform: none !important; } .hv-tally .w0 { opacity: 1 !important; } .hv-tally .w1 { opacity: 0 !important; } }

/* Before: the real workspace the problems happened in */
.cs figure.ws { margin: 8px 0 20px; }
.cs figure.ws img { display: block; width: 100%; border-radius: 12px; border: 1px solid #ececec; }
.cs figure.ws figcaption { margin-top: 12px; font-family: Light; font-size: 15px; color: #6b6b6b; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs figure.ws figcaption span { font-family: Medium; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #222; background: #F3F4F6; border-radius: 999px; padding: 3px 9px; }
.cs figure.ws figcaption span + span, .cs figure.ws figcaption span:nth-of-type(2) { margin-left: 10px; }
/* Problem pins on the real workspace, matching the numbered problems below */
.cs figure.ws .ws-i { position: relative; }
.cs figure.ws .wp { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #C2410C; color: #fff; font-family: Medium; font-size: 14px; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(194,65,12,.18); }
.cs .kf-g .pn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #C2410C; color: #fff; font-style: normal; font-family: Medium; font-size: 12px; margin-bottom: 10px; }
@media (max-width: 768px) { .cs figure.ws .wp { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; box-shadow: 0 0 0 3px rgba(194,65,12,.18); } }
.cs figure.ws .wp { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 13px; }
/* Problem callouts on the workspace: a dot on the spot, a short label beside it */
.cs figure.ws .wl { position: absolute; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 6px; border-radius: 999px; background: #111; color: #fff; font-family: Medium; font-size: 13px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cs figure.ws .wl:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #F97316; box-shadow: 0 0 0 4px rgba(249,115,22,.25); }
@media (max-width: 768px) { .cs figure.ws .wl { font-size: 9px; padding: 3px 7px 3px 4px; gap: 5px; } .cs figure.ws .wl:before { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(249,115,22,.25); } }
.cs figure.ws .wl.r { transform: translate(-100%, -50%); flex-direction: row-reverse; padding: 5px 6px 5px 11px; }
@media (max-width: 768px) { .cs figure.ws .wl.r { padding: 3px 4px 3px 7px; } }

/* One problem statement, big and scannable */
.cs p.ps { font-family: Light, sans-serif; font-size: 44px; line-height: 1.3; letter-spacing: -0.01em; color: #9a9a9a; margin: 48px 0 8px; }
.cs p.ps b { font-family: Medium, sans-serif; font-weight: normal; color: #111; }
@media (max-width: 768px) { .cs p.ps { font-size: 28px; margin-top: 32px; } }
/* Tags grouped by the three parts of the problem statement */
.cs figure.ws .wl.t1:before { background: #60A5FA; box-shadow: 0 0 0 4px rgba(96,165,250,.28); }
.cs figure.ws .wl.t2:before { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,.28); }
.cs figure.ws .wl.t3:before { background: #F43F5E; box-shadow: 0 0 0 4px rgba(244,63,94,.28); }
.cs p.ps b { background-repeat: no-repeat; background-size: 100% 6px; background-position: 0 92%; }
.cs p.ps b.t1 { background-image: linear-gradient(rgba(96,165,250,.45), rgba(96,165,250,.45)); }
.cs p.ps b.t2 { background-image: linear-gradient(rgba(245,158,11,.45), rgba(245,158,11,.45)); }
.cs p.ps b.t3 { background-image: linear-gradient(rgba(244,63,94,.4), rgba(244,63,94,.4)); }
/* The rule for where a review shows up */
.sx .x-rules { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #111; background: #fafafa; }
.sx .x-rules > div { padding: 18px 22px; border-right: 1px solid #e3e3e3; min-width: 0; }
.sx .x-rules > div:last-child { border-right: 0; }
.sx .x-rules i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-family: Medium; font-size: 11px; margin-bottom: 8px; }
.sx .x-rules b { display: block; font-family: Medium; font-weight: normal; font-size: 17px; color: #111; }
.sx .x-rules span { display: block; font-family: Light; font-size: 14px; color: #6b6b6b; margin-top: 2px; }
@media (max-width: 768px) { .sx .x-rules { grid-template-columns: 1fr 1fr; } .sx .x-rules > div:nth-child(2) { border-right: 0; } .sx .x-rules > div:nth-child(-n+2) { border-bottom: 1px solid #e3e3e3; } }
/* How I built it: three steps */
.cs .tl3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs .tl3 > div { position: relative; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; padding: 18px 20px; min-width: 0; }
.cs .tl3 b { display: block; font-family: Medium; font-weight: normal; font-size: 20px; color: #222; }
.cs .tl3 span { display: block; font-family: Light; font-size: 15px; color: #6b6b6b; margin-top: 4px; }
@media (max-width: 768px) { .cs .tl3 { grid-template-columns: 1fr; } }

/* Trade-offs and challenges */
.cs .to { border: 1px solid #ececec; border-radius: 12px; overflow: hidden; margin: 4px 0 8px; }
.cs .to-h, .cs .to-r { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr; gap: 20px; padding: 14px 20px; }
.cs .to-h { background: #fafafa; border-bottom: 1px solid #ececec; }
.cs .to-h span { font-family: Regular; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; }
.cs .to-r { border-bottom: 1px solid #f2f2f2; align-items: baseline; }
.cs .to-r:last-child { border-bottom: 0; }
.cs .to-r b { font-family: Medium; font-weight: normal; font-size: 17px; color: #1F5D56; }
.cs .to-r s { font-family: Light; font-size: 16px; color: #9a9a9a; }
.cs .to-r span { font-family: Light; font-size: 15px; color: #555; }
.cs .chg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0 8px; }
.cs .chg > div { background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; padding: 18px 20px; min-width: 0; }
.cs .chg b { display: block; font-family: Medium; font-weight: normal; font-size: 18px; color: #222; margin-bottom: 4px; }
.cs .chg span { font-family: Light; font-size: 15px; line-height: 1.45; color: #6b6b6b; }
@media (max-width: 768px) { .cs .to-h { display: none; } .cs .to-r { grid-template-columns: 1fr; gap: 4px; } .cs .chg { grid-template-columns: 1fr; } }

/* Demo film from tryscopeout.com (copied locally: the site blocks cross-origin embeds) */
.cs .film-demo { margin-top: 56px; }
.cs .fd-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cs .fd-head span { font-family: Regular; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6b6b6b; }
.cs .fd-head b { font-family: Medium; font-weight: normal; font-size: 26px; color: #111; }
.cs .fd-frame { aspect-ratio: 16 / 9; background: #F4F5F5; border: 1px solid #ececec; border-radius: 14px; overflow: hidden; }
.cs .fd-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 768px) { .cs .fd-head b { font-size: 20px; } }

/* Edge cases: image on top in a fixed stage, label block below (same rhythm as the scenario cards) */
.cs .spec .cell { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; min-height: 0; background: #fff; }
.cs .spec .cell img { width: 100%; height: 340px; max-height: none; object-fit: contain; padding: 28px; background: #F6F6F6; background-image: radial-gradient(#dcdcdc 1px, transparent 1px); background-size: 16px 16px; border: 0; border-radius: 0; border-bottom: 1px solid #e3e3e3; box-sizing: border-box; }
.cs .spec .cell .lab { position: static; text-align: left; padding: 22px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.cs .spec .cell .lab b { font-size: 22px; }
.cs .spec .cell .lab i { margin-top: 4px; }
.cs .spec .cell .lab .solves { justify-content: flex-start; margin-top: 14px; }
.cs .spec .cells.two .cell img { height: 380px; }
@media (max-width: 768px) { .cs .spec .cell img, .cs .spec .cells.two .cell img { height: 280px; padding: 16px; } .cs .spec .cell .lab { padding: 18px 18px 22px; } }
.cs .spec .cell img { padding: 14px; height: 360px; } .cs .spec .cells.two .cell img { height: 400px; }
.sx3 .x-real .rf.ly img.base { object-fit: contain !important; }

/* ===== Rhythm pass: more air between sections and blocks (fonts unchanged) ===== */
.cs section[id] { padding-bottom: 40px; }
.cs .cs-h { padding-top: 200px; }
.cs .cs-rule { margin: 72px 0 24px; }
.cs .row { padding: 52px 0; }
.cs .row.flat { padding: 72px 0 28px; }
/* visual blocks get the same breathing room after them */
.cs .sx, .cs .spec, .cs .stage, .cs .fstage, .cs .won, .cs figure.ws, .cs .film-demo, .cs .vgrid { margin-bottom: 24px; }
.cs .legend { margin: 20px 0 8px; }
.cs p.ps { margin: 64px 0 24px; }
.cs .film-demo { margin-top: 88px; }
/* cards and grids: softer, consistent corners and inner spacing */
.cs .sx, .cs .spec { border-radius: 4px; overflow: hidden; }
.sx .x-meta { padding: 26px 30px 30px; }
.cs .tl3 { gap: 16px; } .cs .tl3 > div { padding: 22px 24px; }
.cs .res2 { gap: 40px; }
.cs-results { margin-top: 120px; padding: 140px 0; }
@media (max-width: 768px) {
  .cs .cs-h { padding-top: 120px; }
  .cs .cs-rule { margin: 48px 0 16px; }
  .cs .row { padding: 36px 0; }
  .cs .row.flat { padding: 48px 0 20px; }
  .cs .film-demo { margin-top: 56px; }
  .cs-results { margin-top: 72px; padding: 80px 0; }
  .sx .x-meta { padding: 20px 20px 24px; }
}
.cs .film-demo.fd-top { margin-top: 24px; }
/* About Scopeout film: full width of the page */
.cs .film-demo.fd-top { width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 0 40px; box-sizing: border-box; }
.cs .film-demo.fd-top .fd-frame { border-radius: 16px; max-height: 92vh; aspect-ratio: 16 / 9; width: 100%; }
@media (max-width: 768px) { .cs .film-demo.fd-top { padding: 0 12px; } .cs .film-demo.fd-top .fd-frame { border-radius: 10px; } }
/* Hero sits above the outlined headline so the letters don't cut through the board */
.fold1 .cont .cover { position: relative; z-index: 3; }
.fold1 .cont .cover .hero-anim.hv { z-index: 3; }
/* Typing starts as soon as the panel lands, so it never sits open and empty */
@keyframes hvType { 0%, 12.2% { opacity: 0; } 12.4%, 100% { opacity: 1; } }
.hv-ask span { animation-delay: calc(var(--i) * 16ms); }
/* Headline in front, hero visual behind it */
.fold1 .cont .cover { z-index: 1; }
.fold1 .cont .cover .hero-anim.hv { z-index: auto; }
.fold1 .cont .phead h1 { z-index: 4; }
/* The review: hero UI, then small variations below (as in Freo) */
.cs .stage.amber .shots { flex-direction: column; align-items: center; }
.cs .vstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin-top: 36px; }
.cs .vstrip figure { margin: 0; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(110,110,110,.12); min-width: 0; }
.cs .vstrip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; background: #F6F6F6; }
.cs .vstrip figcaption { font-family: Medium; font-size: 14px; color: #222; padding: 10px 14px 12px; }
@media (max-width: 768px) { .cs .vstrip { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; } .cs .vstrip figcaption { font-size: 12px; padding: 8px 10px; } }
/* Variation cards: thin black outline, like Freo's phone frames */
.cs .vstrip figure { border: 1.5px solid #111; box-shadow: none; border-radius: 18px; }
.cs .vstrip figcaption { border-top: 1px solid #111; }
/* Main review UI on a Freo-style green gradient; variations sit below on white */
.cs .stage.mint { --stage: linear-gradient(120deg, #86dcb4 0%, #a8e2b8 45%, #d5e6a2 100%); }
.cs .vstrip { margin-top: 28px; }
/* Variations at the same size as the approaches grid: 2 x 2, large enough to read */
.cs .vstrip { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; margin-top: 40px; }
.cs .vstrip img { aspect-ratio: 1320 / 760; object-fit: contain; object-position: center; padding: 14px; box-sizing: border-box; background: #F6F6F6; background-image: radial-gradient(#dcdcdc 1px, transparent 1px); background-size: 16px 16px; }
.cs .vstrip figcaption { font-size: 20px; padding: 16px 20px 18px; }
@media (max-width: 768px) { .cs .vstrip { grid-template-columns: 1fr; gap: 16px; } .cs .vstrip figcaption { font-size: 16px; padding: 12px 14px; } }
/* Approaches: final UI first on the gradient, explorations below */
.cs .stage.final-ui { padding: 56px; display: flex; justify-content: center; }
.cs .stage.final-ui img { display: block; width: 100%; max-width: 980px; border-radius: 14px; box-shadow: 0 18px 50px rgba(30,60,50,.18); position: relative; }
.cs p.vlabel { font-family: Medium; font-size: 20px; color: #111; margin: 18px 0 0; }
.cs p.vlabel b { color: #1F5D56; font-weight: normal; }
.cs p.vlabel.muted { font-family: Regular; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; margin-top: 56px; }
.cs .vstrip.x3 { margin-top: 16px; }
.cs .vstrip.x3 img { aspect-ratio: 1600 / 960; padding: 0; background: #F6F6F6; }
@media (max-width: 768px) { .cs .stage.final-ui { padding: 16px; } .cs p.vlabel.muted { margin-top: 32px; } }
/* Green stages fade to white at the bottom, like Freo */
.cs .stage.mint {
  border-radius: 16px 16px 0 0;
  padding-bottom: 96px;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,.75) 82%, #fff 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 46px, rgba(255,255,255,.22) 46px 48px),
    linear-gradient(120deg, #86dcb4 0%, #a8e2b8 45%, #d5e6a2 100%);
}
.cs .stage.mint + .vstrip, .cs .stage.mint + p.vlabel { margin-top: -40px; position: relative; }
.cs .stage.final-ui img { max-width: 860px; }

/* Hero: reviewer status as a pill, matching the product */
.hv-tally s { display: inline-flex; align-items: center; gap: 0.9375cqw; color: #374151; font-weight: 500; }
.hv-tally .sp { font-style: normal; display: inline-flex; align-items: center; gap: 0.6250cqw; font-size: 1.7188cqw; font-weight: 600; line-height: 1; padding: 0.6250cqw 1.0938cqw; border-radius: 999px; }
.hv-tally .sp:before { content: ""; width: 0.9375cqw; height: 0.9375cqw; border-radius: 50%; background: currentColor; }
.hv-tally .sp.wait { color: #92400E; background: #FEF3E2; }
.hv-tally .sp.ok { color: #1F6B52; background: #E6F4EE; }
.hv-tally { height: 3.1250cqw; }

/* Hairline borders everywhere (0.5px) */
.cs .vstrip figure { border-width: 0.5px !important; }
.cs .vstrip figcaption { border-top-width: 0.5px !important; }
.cs .sx, .cs .spec, .cs .grd { border-width: 0.5px !important; }
.sx .x-card { border-right-width: 0.5px !important; border-bottom-width: 0.5px !important; }
.cs .spec .cell { border-right-width: 0.5px !important; border-bottom-width: 0.5px !important; }
.cs .spec .cell img { border-bottom-width: 0.5px !important; }
.cs .won, .cs .won table, .cs .won th, .cs .won td { border-width: 0.5px !important; }
.cs .card, .cs .tile, .cs .kf, .cs .tl3 > div, .cs .fd-frame, .cs figure.ws img, .cs .x-real.chat .rf.ly { border-width: 0.5px !important; }
.cs .row { border-bottom-width: 0.5px; }
.cs .legend + .vstrip { margin-top: 32px; }
.cs .vstrip.x3s { grid-template-columns: repeat(3, 1fr); gap: 20px; } .cs .vstrip.x3s figcaption { font-size: 17px; padding: 14px 16px; } @media (max-width: 768px) { .cs .vstrip.x3s { grid-template-columns: 1fr; } }
.sx3 .x-real .rf.ly img.base { object-position: center top !important; }
/* Longer hero headline: smaller size so both lines fit */
@media (min-width: 1201px) { .fold1 .cont .phead h1 { font-size: 104px; line-height: 1.08; } }
@media (min-width: 769px) and (max-width: 1200px) { .fold1 .cont .phead h1 { font-size: 72px; line-height: 1.1; } }
@media (max-width: 768px) {
  .fold1 .cont .phead .phead1, .fold1 .cont .phead .phead2 { font-size: 44px; line-height: 1.12; width: auto; }
  .fold1 .cont .cover .hero-anim.hv { position: absolute; left: 4%; right: 4%; width: 92%; bottom: 120px; top: auto; margin: 0; float: none; }
}
@media (min-width: 769px) and (max-width: 1200px) { .fold1 .cont .phead h1 { font-size: 60px; } }
@media (max-width: 768px) {
  .fold1 .cont .phead .phead1, .fold1 .cont .phead .phead2 { font-size: 40px; white-space: normal; max-width: calc(100vw - 32px); }
  .fold1 .cont .phead .phead2 { margin-top: 8px; }
  .fold1 .cont .cover { position: absolute !important; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; }
  .fold1 .cont .cover .hero-anim.hv { bottom: 130px; }
}
@media (min-width: 769px) and (max-width: 1200px) { .fold1 .cont .phead .phead1, .fold1 .cont .phead .phead2 { font-size: 60px !important; white-space: normal; max-width: calc(100vw - 120px); } }
.cs-results p.tent { grid-column: 1 / -1; margin: 8px 0 0; font-family: Regular; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; }
.cs .res2.r3 { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cs p.tentr { margin-top: 14px !important; font-size: 13px !important; letter-spacing: .04em; text-transform: uppercase; color: #9a9a9a !important; }
@media (max-width: 768px) { .cs .res2.r3 { grid-template-columns: 1fr; gap: 16px; } }