/* Case study pages. Uses only the design tokens from style.css. */
.cs-page main { padding-top: 96px; }
.cs-section { max-width: 1040px; margin: 0 auto; padding: 72px var(--gutter) 0; }

.cs-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.cs-section h2 { margin: 0 0 18px; font-size: max(22px, calc(clamp(28px, 4vw, 46px) - 20px));   /* old size minus 20px, never below 22px */
   font-family: var(--font-accent); line-height: 1.15; letter-spacing: 0.005em; font-weight: 600; text-wrap: balance; max-width: 52ch; }
.cs-body { max-width: 62ch; margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-body); }
.cs-caption { margin: 14px 0 0; color: var(--text-muted); font-size: 15px; }

/* hero */
.cs-hero { max-width: 900px; margin: 0 auto; padding: 40px var(--gutter) 0; text-align: center; }
.cs-back { display: inline-block; margin-bottom: 28px; color: var(--text-muted); font-size: 15px; font-weight: 500; transition: color 0.2s, transform 0.2s; }
.cs-back:hover { color: var(--accent-secondary); transform: translateX(-3px); }
.cs-eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cs-eyebrow span { margin: 0 8px; opacity: 0.5; }
.cs-hero h1 { margin: 0; font-family: var(--font-accent); font-size: clamp(34px, 5.6vw, 66px); line-height: 1.1; letter-spacing: 0.005em; font-weight: 600; text-wrap: balance; }
.cs-lede { max-width: 58ch; margin: 22px auto 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--text-body); }
/* project facts: plain text, no frame. Columns size to their content and spread edge to edge, so each value stays on one line. */
.cs-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; width: calc(100% - 2 * var(--gutter)); max-width: calc(1040px - 2 * var(--gutter)); margin: 26px auto 0; padding: 0; text-align: left; }
.cs-meta dt { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cs-meta dd { margin: 4px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text-body); white-space: nowrap; }

/* cover: the mockup on a grey stage, bleeding off the bottom */
.cs-cover {
  position: relative; max-width: calc(1040px - 2 * var(--gutter)); height: clamp(300px, 52vw, 560px); margin: 44px auto 0; overflow: hidden;
  background: var(--surface-card-media); border: 1px solid var(--border-card); border-radius: 24px; width: calc(100% - 2 * var(--gutter));
}
.cs-cover img { position: absolute; top: 36px; left: 50%; width: min(70%, 520px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 -6px 22px rgba(17, 17, 18, 0.28)); }   /* no CSS radius: the PNG has its own rounded corners */

/* tl;dr */
.cs-tldr { padding: 30px 32px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 24px; }
.cs-tldr p:last-child { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--text-body); }
.cs-tldr strong { color: var(--text-primary); }

/* problem */
.cs-pains { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-pains li { padding: 10px 18px; border: 1px solid var(--border-card); border-radius: 999px; font-weight: 500; background: var(--surface-page); }
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.cs-stat { padding: 18px 20px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 24px; }
.cs-stat strong { display: block; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.cs-stat p { margin: 10px 0 8px; font-size: 15px; line-height: 1.4; color: var(--text-body); }
.cs-stat small { color: var(--text-muted); font-size: 12px; }

/* pipeline flow */
.cs-flow { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.cs-flow li { position: relative; padding: 4px 28px 4px 0; }   /* no frame: just the text and the arrows between steps */
.cs-flow li:not(:last-child)::after { content: "\2192"; position: absolute; right: 4px; top: 12px; font-size: 20px; line-height: 1; color: var(--text-muted); }
.cs-flow span { display: block; font-size: 19px; font-weight: 700; }
.cs-flow small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 14px; }

/* stages */
.cs-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }   /* compact cards, all four stages in one row */
.cs-stage { padding: 20px 18px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 20px; }
.cs-num { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cs-big { margin: 0 0 12px; min-height: calc(2.1em + 26px); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }   /* room for two lines, so the four cards line up */
.cs-big span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.cs-stage h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.2; }
.cs-stage p:last-child { margin: 0; color: var(--text-body); font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) { .cs-stages { grid-template-columns: repeat(2, 1fr); } .cs-big { min-height: 0; } }

/* insight: a dark band for contrast */
.cs-stages + .cs-insight { margin-top: var(--space-block); }   /* same gap as around the other big blocks */
.cs-insight { padding: clamp(32px, 5vw, 60px); background: var(--text-primary); color: var(--surface-page); border-radius: 32px; text-align: center; }
.cs-insight h2 { max-width: 34ch; margin: 0 auto 18px; color: var(--surface-page); }
.cs-insight p:last-child { max-width: 62ch; margin: 0 auto; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.cs-insight .cs-kicker { color: var(--color-pink-300); }

/* strategy */
.cs-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border-subtle); }
.cs-pillar-text .cs-num { color: var(--accent); }
.cs-pillar h3 { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.cs-pillar p { color: var(--text-body); line-height: 1.6; }
.cs-steps, .cs-rules, .cs-landed { list-style: none; margin: 18px 0 0; padding: 0; }
.cs-steps li { padding: 12px 0; border-top: 1px solid var(--border-subtle); color: var(--text-body); line-height: 1.5; }
.cs-steps strong { display: block; margin-bottom: 2px; color: var(--text-primary); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.cs-rules li { margin-top: 10px; padding: 12px 16px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-card); font-weight: 500; }
.cs-badge { display: inline-block; margin: 6px 0 0; padding: 7px 14px; border-radius: 999px; background: var(--surface-card-media); font-size: 14px; font-weight: 500; color: var(--text-body) !important; }
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* image placeholders (swap for real screens) */
.cs-ph { position: relative; overflow: hidden; border-radius: 22px; background: var(--surface-card-media); border: 1px dashed var(--border-card); color: var(--text-muted); font-size: 14px; }
.cs-ph::before { content: ""; display: block; padding-top: 118%; }
.cs-pillar > .cs-ph::before { padding-top: 78%; }
.cs-ph span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px; }

/* outcome */
.cs-landed li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--border-subtle); color: var(--text-body); }
.cs-landed li:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-landed strong { color: var(--text-primary); font-size: 19px; }

/* up next */
.cs-next { max-width: 780px; margin: 0 auto; padding: 84px var(--gutter) 72px; text-align: center; }
.cs-next-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 28px; text-align: left; font-family: var(--font-accent); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: 0.005em; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 24px; transition: transform 0.3s, box-shadow 0.3s; }
.cs-next-card:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -24px rgba(17, 17, 18, 0.35); }
.cs-next-card svg { flex: none; transition: transform 0.3s, color 0.3s; }
.cs-next-card:hover svg { transform: translate(3px, -3px); color: var(--accent-secondary); }
.cs-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cs-cta .btn { display: inline-block; }

@media (max-width: 800px) {
  .cs-meta dd { white-space: normal; }
  .cs-meta > div { flex: 1 1 40%; }
  .cs-stats, .cs-stages { grid-template-columns: 1fr; }
  .cs-flow { grid-template-columns: 1fr 1fr; }
  .cs-flow li:not(:last-child)::after { display: none; }
  .cs-pillar { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- extra pieces used by the Snapp page ---- */
.cs-cover-ph { height: auto; display: block; }
.cs-cover-ph::before { content: ""; display: block; padding-top: 52%; }
.cs-cover-ph span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: 14px; }
.cs-tldr-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 28px 8px; }
.cs-tldr-rows > div { padding: 0 26px; }
.cs-tldr-rows > div + div { border-left: 1px solid var(--border-subtle); }
.cs-tldr-rows p:last-child { font-size: 16px; line-height: 1.55; }
.cs-tldr-rows .cs-spark { font: italic 400 clamp(21px, 2.2vw, 27px)/1.3 "Crimson Text", var(--font-serif); color: var(--text-primary); }
.cs-sub { margin: 56px 0 14px; font-size: 22px; letter-spacing: -0.01em; }
.cs-persona { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px clamp(32px, 5vw, 72px); margin-top: 28px; padding: 32px 0 0; border-top: 2px solid var(--text-primary); }   /* no card: a heavy rule on top anchors it */
.cs-persona-name { margin: 0; font-family: var(--font-accent); font-size: clamp(28px, 2.6vw, 34px); font-weight: 600; line-height: 1.1; letter-spacing: 0.005em; }
.cs-persona-sub { margin: 8px 0 24px; color: var(--text-muted); font-size: 16px; }
.cs-persona-quote { margin: 0 0 22px; padding-left: 18px; border-left: 3px solid var(--accent); font: italic 400 24px/1.35 "Crimson Text", var(--font-serif); color: var(--text-primary); }
.cs-tagrow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-tagrow li { padding: 7px 14px; border: 1px solid var(--border-card); border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--surface-page); }
.cs-tagrow-left { margin-top: 6px; }
.cs-persona-facts { margin: 0; display: grid; gap: 0; }
.cs-persona-facts div { padding: 16px 0; border-top: 1px solid var(--border-subtle); }
.cs-persona-facts div:first-child { border-top: 0; padding-top: 0; }
.cs-persona-facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cs-persona-facts dd { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--text-primary); }
.cs-learned, .cs-questions { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.cs-learned li, .cs-questions li { position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--border-subtle); font-size: 18px; line-height: 1.45; color: var(--text-body); counter-increment: n; }
.cs-learned li:last-child, .cs-questions li:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-learned li::before, .cs-questions li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.cs-hmw { margin-top: 36px; }
.cs-hmw h2 { font-size: clamp(24px, 3.2vw, 38px); max-width: 40ch; }
.cs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.cs-gap { margin-top: 36px; }
.cs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.cs-trio .cs-ph::before { padding-top: 130%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-persona, .cs-tagrow li, .cs-learned li, .cs-questions li { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
  .cs-tagrow li:hover { transform: translateY(-2px); border-color: var(--border-card-hover); }
  .cs-learned li:hover, .cs-questions li:hover { transform: translateX(6px); }
}
@media (max-width: 800px) {
  .cs-tldr-rows { grid-template-columns: 1fr; padding: 22px 6px; }
  .cs-tldr-rows > div { padding: 14px 20px; }
  .cs-tldr-rows > div + div { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .cs-persona, .cs-duo, .cs-trio { grid-template-columns: 1fr; }
  .cs-trio .cs-ph::before { padding-top: 90%; }
}

/* ---- extra pieces used by the Icon Studio page ---- */
.cs-lede em { font-family: "Crimson Text", var(--font-serif); font-size: 1.12em; }
.cs-page code { padding: 2px 6px; border-radius: 6px; background: var(--surface-card-media); font-size: 0.88em; color: var(--text-primary); }
.cs-wide { margin-top: 26px; }
.cs-wide::before { padding-top: 38% !important; }
.cs-tablewrap { margin-top: 26px; overflow-x: auto; border: 1px solid var(--border-card); border-radius: 24px; background: var(--surface-card); }
.cs-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; min-width: 620px; }
.cs-table th, .cs-table td { padding: 16px 22px; border-top: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-body); line-height: 1.45; }
.cs-table thead th { border-top: 0; color: var(--text-primary); font-size: 16px; font-weight: 700; }
.cs-table tbody th { width: 150px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cs-try { margin-top: 44px; }
.cs-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-links a { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--surface-page); font-weight: 700; transition: transform 0.25s, border-color 0.25s, color 0.25s; }
.cs-links a span { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cs-links a:hover { transform: translateY(-2px); border-color: var(--border-card-hover); color: var(--accent-secondary); }
.cs-decs { display: grid; gap: 0; border: 1px solid var(--border-card); border-radius: 24px; background: var(--surface-card); overflow: hidden; }
.cs-dec { display: grid; grid-template-columns: 1.1fr 1.5fr 1.2fr; gap: 24px; padding: 18px 24px; border-top: 1px solid var(--border-subtle); }
.cs-dec:first-child { border-top: 0; }
.cs-dec p { margin: 0; line-height: 1.5; color: var(--text-body); font-size: 15px; }
.cs-dec .cs-dec-name { color: var(--text-primary); font-weight: 700; font-size: 16px; }
.cs-dec small { display: none; }
.cs-dec-head p { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cs-set { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border-subtle); }
.cs-set header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 14px; }
.cs-set header .cs-num { flex-basis: 100%; margin: 0; color: var(--accent); }
.cs-set h3 { margin: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
.cs-set-style { margin: 0; color: var(--text-muted); font-weight: 500; }
.cs-sub2 { margin: 26px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cs-changes { list-style: none; margin: 0; padding: 0; }
.cs-changes li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--border-subtle); align-items: baseline; }
.cs-changes li:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-changes p { margin: 0; line-height: 1.55; color: var(--text-body); }
.cs-ver { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--surface-card-media); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.cs-pair-wide { margin-top: 26px; grid-template-columns: 1fr 1fr; }
.cs-pair-wide .cs-ph::before { padding-top: 70%; }
.cs-habits { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; counter-reset: h; }
.cs-habits li { position: relative; padding: 28px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 24px; counter-increment: h; }
.cs-habits li::before { content: counter(h, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); }
.cs-habits h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; }
.cs-habits p { margin: 0; line-height: 1.55; color: var(--text-body); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cs-habits li, .cs-dec { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s; }
  .cs-habits li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-card-hover); }
  .cs-dec:not(.cs-dec-head):hover { background: var(--surface-page); }
}
@media (max-width: 800px) {
  .cs-dec { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .cs-dec-head { display: none; }
  .cs-dec small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
  .cs-changes li { grid-template-columns: 1fr; gap: 8px; }
  .cs-habits, .cs-pair-wide { grid-template-columns: 1fr; }
  .cs-wide::before { padding-top: 62% !important; }
}

/* ---- extra pieces used by the Splitshare page ---- */
.cs-lede-2 { margin-top: 14px; color: var(--text-muted); font-size: clamp(16px, 1.5vw, 19px); }
.cs-persona-facts ul { list-style: none; margin: 0; padding: 0; }
.cs-persona-facts li { position: relative; padding-left: 16px; margin-top: 6px; }
.cs-persona-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }
.cs-persona-facts li:first-child { margin-top: 0; }

.cs-tlink { font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border-card-hover); transition: color 0.2s, border-color 0.2s; }
.cs-tlink:hover { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.cs-inline { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.cs-inline:hover { color: var(--accent-secondary); }
.cs-habits li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- live preview viewer ---- */
.cs-viewer { margin-top: 28px; border: 1px solid var(--border-card); border-radius: 24px; overflow: hidden; background: var(--surface-card); }
.cs-viewer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.cs-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: var(--surface-card-media); }
.cs-tabs button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-body); cursor: pointer; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.cs-tabs button small { margin-left: 4px; color: var(--text-muted); font-size: 12px; }
.cs-tabs button:hover { color: var(--text-primary); }
.cs-tabs button[aria-selected="true"] { background: rgba(17, 17, 18, 0.09); color: var(--text-primary); font-weight: 700; box-shadow: none; }
.cs-viewer-open { font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color 0.2s; }
.cs-viewer-open:hover { color: var(--accent-secondary); }
.cs-viewer-stage { position: relative; height: clamp(460px, 78vh, 760px); background: var(--surface-page); }
.cs-viewer-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface-page); }
.cs-viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: 14px; }
.cs-viewer-stage:not(.is-loading) .cs-viewer-loading { display: none; }
.cs-viewer-stage iframe:not([src]) { visibility: hidden; }
@media (max-width: 700px) { .cs-viewer-stage { height: 520px; } .cs-viewer-open { margin-left: auto; } }

/* ---- Icon Studio v3: short showcase ---- */
.cs-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 30px; }
.btn-gh { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; font-size: 17px; font-weight: 700; }
.btn-gh .gh-mark { flex: none; }
.btn-link { font-weight: 500; color: var(--text-body); padding: 10px 4px; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.btn-link:hover { color: var(--accent-secondary); border-color: var(--accent-secondary); }
.cs-meta-top { margin-top: 44px; }
.cs-wf { margin: 44px 0 0; }
.cs-wf ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 28px; }
.cs-wf li { padding-left: 14px; border-left: 2px solid var(--border-card-hover); }
.cs-wf li small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cs-wf li span { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-primary); }
.cs-wf li.is-gate { border-left-color: var(--accent); }
.cs-wf li.is-gate small { color: var(--accent); }
.cs-live { margin-top: 64px; scroll-margin-top: 90px; }
.cs-live .cs-sub { margin-top: 0; }
.cs-cta-card { margin-top: 36px; padding: clamp(28px, 4vw, 48px); text-align: center; border-radius: 28px; background: color-mix(in srgb, var(--accent) 9%, var(--surface-page)); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cs-cta-card h3 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.cs-cta-card p { max-width: 46ch; margin: 0 auto 24px; line-height: 1.55; color: var(--text-body); font-size: 17px; }
.cs-cta-card small { display: block; margin-top: 16px; color: var(--text-muted); font-size: 13px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  }
@media (max-width: 900px) {
  }

/* ---- Icon Studio v4: problem, solution bento, one merged process module ---- */
.cs-problem-2 { margin-top: 40px; max-width: 66ch; }
.cs-problem-2 .cs-kicker { color: var(--accent-secondary); }
.cs-problem-2 .cs-body { max-width: 66ch; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
}
@media (max-width: 800px) {
  .cs-rules3 { grid-template-columns: 1fr; gap: 6px; }
          }

/* the one highlight style on the page: the dark band (also used for "The insight" on the other case studies) */
.cs-hl { margin-top: 36px; }
.cs-hl h2 { max-width: none; }
.cs-rules3 { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.cs-rules3 li { padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.cs-rules3 h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.cs-rules3 p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.cs-cta-card { background: var(--text-primary); border: 0; color: var(--surface-page); }
.cs-cta-card h3 { color: var(--surface-page); }
.cs-cta-card p { color: rgba(255, 255, 255, 0.78); }
.cs-cta-card small { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 900px) { .cs-wf ol { grid-template-columns: 1fr 1fr; } }

/* ---- set cards that also switch the live preview below them (one section, not two) ---- */
.cs-explore { margin-top: 30px; scroll-margin-top: 90px; }
.cs-setcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-setcard { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 24px; }
.cs-setcard-img { display: block; aspect-ratio: 4 / 3; background: var(--surface-card-media); overflow: hidden; }
.cs-setcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-setcard-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 22px; }
.cs-setcard-name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.cs-setcard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.cs-setcard-meta span:first-child { color: var(--accent); font-weight: 700; }
.cs-setcard-line { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.cs-viewer-attached { margin-top: 18px; }
.cs-viewer-title { margin: 0; font-size: 14px; color: var(--text-muted); }
.cs-viewer-title strong { color: var(--text-primary); font-weight: 700; }
.cs-explore .cs-viewer-stage { height: clamp(460px, 74vh, 720px); }
@media (max-width: 900px) {
  .cs-setcards { grid-template-columns: 1fr; }
  .cs-explore .cs-viewer-stage { height: 520px; }
}

.cs-feedback { max-width: 56ch; margin: 28px auto 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--text-body); }
.cs-feedback a { font-weight: 700; white-space: nowrap; }

/* ---- first viewport (Photo Quality): centred text, with the product underneath ---- */
.cs-split { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1040px; margin: 0 auto; padding: 24px var(--gutter) 0; }
.cs-split-text { text-align: center; max-width: 900px; margin: 0 auto; }
.cs-split .cs-back { margin-bottom: 22px; }
.cs-split .cs-eyebrow { margin-bottom: 14px; }
/* same size as the old centred heading, minus 20px */
.cs-split h1 { margin: 0; font-family: var(--font-accent); font-size: max(28px, calc(clamp(34px, 5.6vw, 66px) - 20px)); line-height: 1.15; letter-spacing: 0.005em; font-weight: 600; text-wrap: balance; }
.cs-split .cs-lede { margin: 18px auto 0; max-width: 58ch; font-size: clamp(16px, 1.5vw, 19px); text-align: center; }
.cs-split .cs-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 40px; width: auto; max-width: none; margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--border-subtle); text-align: center; }
.cs-split .cs-meta dd { white-space: normal; }
.cs-split-media { position: relative; overflow: hidden; background: var(--surface-card-media); border: 1px solid var(--border-card); border-radius: 24px; }
.cs-split-media::before { content: ""; display: block; padding-top: 50%; }   /* height comes from the width, so the crop is always the same */
.cs-split-media img { position: absolute; top: 34px; left: 50%; width: min(70%, 520px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 -6px 22px rgba(17, 17, 18, 0.28)); transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .cs-split-media:hover img { transform: translateX(-50%) translateY(-8px); } }
@media (max-width: 700px) {
  .cs-split { padding-top: 12px; gap: 28px; }
  .cs-split-media::before { padding-top: 78%; }
  .cs-split-media img { width: 78%; }
}

/* ---- cinematic hero on the Photo Quality page ---- */
.cs-split h1 .w, .cs-hero-full h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; }
.cs-split h1 .wi, .cs-hero-full h1 .wi { display: inline-block; position: relative; transform: translateY(115%) rotate(2deg); filter: blur(10px); opacity: 0; animation: word-in 1s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i) * 85ms + 200ms); }
@keyframes word-in { to { transform: none; filter: blur(0); opacity: 1; } }

/* "reactive": greyed out and struck through, as the thing being left behind */
.cs-split h1 .hl-reactive, .cs-hero-full h1 .hl-reactive { color: var(--text-muted); animation-name: word-in, fade-grey; animation-duration: 1s, 0.6s; animation-delay: calc(var(--i) * 85ms + 200ms), 1.5s; animation-fill-mode: forwards, forwards; animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease; }
.cs-split h1 .hl-reactive::after, .cs-hero-full h1 .hl-reactive::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: 0.07em; border-radius: 4px; background: var(--accent-secondary); transform: scaleX(0); transform-origin: left; animation: draw 0.7s cubic-bezier(.65, 0, .35, 1) 1.55s forwards; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes fade-grey { from { color: var(--text-primary); } to { color: var(--text-muted); } }

/* "built-in": the accent pair, with an underline that draws itself */
.cs-split h1 .hl-builtin, .cs-hero-full h1 .hl-builtin { background: linear-gradient(95deg, var(--accent-secondary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent); }
.cs-split h1 .hl-builtin::after, .cs-hero-full h1 .hl-builtin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.07em; border-radius: 4px; background: linear-gradient(95deg, var(--accent-secondary), var(--accent)); transform: scaleX(0); transform-origin: left; animation: draw 0.8s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; }

.cs-rise { opacity: 0; transform: translateY(16px); animation: rise 0.9s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.cs-dot { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: pulse 2.4s ease-in-out 1.6s 2; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 97, 12, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(232, 97, 12, 0); } }
.cs-mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 24%, transparent) 62%) no-repeat; background-size: 0% 100%; animation: mark 0.9s cubic-bezier(.65, 0, .35, 1) 1.9s forwards; padding: 0 2px; }
@keyframes mark { to { background-size: 100% 100%; } }
.cs-split .cs-meta dt { color: var(--accent); }

/* the product reveals like a curtain lifting */
.cs-split-media { clip-path: inset(0 0 100% 0 round 24px); animation: curtain 1.2s cubic-bezier(.77, 0, .175, 1) 0.35s forwards; }
@keyframes curtain { to { clip-path: inset(0 0 0 0 round 24px); } }
.cs-split-media img { animation: img-in 1.6s cubic-bezier(.16, 1, .3, 1) 0.55s backwards; }
@keyframes img-in { from { transform: translateX(-50%) translateY(46px) scale(1.06); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cs-split h1 .wi, .cs-hero-full h1 .wi, .cs-rise, .cs-split-media, .cs-split-media img, .cs-mark, .cs-dot { animation: none !important; opacity: 1; transform: none; filter: none; clip-path: none; }
  .cs-split-media img { transform: translateX(-50%); }
  .cs-split h1 .hl-reactive { color: var(--text-muted); }
  .cs-split h1 .hl-reactive::after, .cs-split h1 .hl-builtin::after { animation: none; transform: scaleX(1); }
  .cs-mark { background-size: 100% 100%; }
}

/* ---- expected outcomes: the expectation is the headline of each row ---- */
.cs-hyp { list-style: none; margin: 26px 0 0; padding: 0; }
.cs-hyp-row { display: grid; grid-template-columns: 0.8fr 2fr; gap: 12px 40px; padding: 26px 0; border-top: 1px solid var(--border-subtle); align-items: start; }
.cs-hyp-row:last-child { border-bottom: 1px solid var(--border-subtle); }
.cs-hyp-meta { display: flex; flex-direction: column; gap: 4px; }
.cs-hyp-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cs-hyp-meta h3 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.cs-hyp-phase { font-size: 13px; color: var(--text-muted); }
.cs-hyp-expect { margin: 0; font-size: clamp(21px, 2.3vw, 28px); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance; }
.cs-hyp-expect small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-secondary); }
.cs-hyp-expect mark { color: inherit; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--accent-secondary) 26%, transparent) 60%); padding: 0 2px; }
.cs-hyp-why { margin: 10px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.cs-hyp-signals { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-hyp-signals li { padding: 5px 12px; border-radius: 999px; background: var(--surface-card-media); font-size: 13px; font-weight: 500; color: var(--text-body); }
.cs-hyp-signals .cs-hyp-label { padding: 0 4px 0 0; background: none; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 800px) { .cs-hyp-row { grid-template-columns: 1fr; } }

/* ---- context paragraph + the four-part short version ---- */
.cs-context { max-width: 58ch; margin: 0; font: normal 500 clamp(22px, 2.4vw, 30px)/1.45 var(--font-accent); letter-spacing: 0.01em; color: var(--text-body); }   /* Oswald Medium, upright */
/* the short version: four cards that jump to the four chapters below */
.cs-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 4px; }
.cs-q { position: relative; display: flex; flex-direction: column; padding: 22px 22px 20px; border-top: 2px solid var(--text-primary); border-radius: 4px 4px 18px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 70%); transition: translate 0.4s cubic-bezier(.22, 1, .36, 1), border-color 0.3s, background 0.3s; }
.cs-q:last-child { border-top-color: var(--accent); }
.cs-q-n { font: normal 500 clamp(38px, 4.2vw, 54px)/1 var(--font-accent); letter-spacing: 0.01em; color: var(--accent); }
.cs-q h3 { margin: 10px 0 8px; min-height: 2.2em; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }   /* titles read as a four-line summary; the min-height keeps the bodies aligned */
.cs-q p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.cs-q strong { color: var(--text-primary); }
.cs-q-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); transition: color 0.3s; }
.cs-q-go i { font-style: normal; display: inline-block; transition: translate 0.3s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .cs-q:hover { translate: 0 -5px; border-top-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
  .cs-q:hover .cs-q-go { color: var(--accent); }
  .cs-q:hover .cs-q-go i { translate: 0 3px; }
}
.cs-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cs-quick + .cs-sub { margin-top: 56px; }
@media (max-width: 900px) { .cs-quick { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cs-quick { grid-template-columns: 1fr; } }

/* chapters: bigger headings and a lead paragraph, so the page has a clear rhythm of big and small */
.cs-chapter { scroll-margin-top: 70px; padding-top: 104px; }
.cs-chapter > h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.12; letter-spacing: 0.005em; max-width: 34ch; margin-bottom: 22px; }   /* wide enough that no chapter heading runs past two lines */
.cs-chapter > .cs-body:first-of-type { max-width: 54ch; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.5; color: var(--text-primary); }

/* ---- image frames + lightbox (the rule for every image: thick soft border, generous corners, opens full width) ---- */
/* image frames: generous rounded corners on the image itself, no outline */
.cs-frame { margin: 0; background: none; border: var(--frame-border-width) solid var(--frame-border-color); }
.cs-frame img { display: block; width: 100%; height: auto; border-radius: var(--frame-radius); }
.cs-frame img.baked { border-radius: 0; }   /* S1 / S2 have their four corners rounded inside the PNG itself (the right side of the picture is an annotation strip, so a CSS radius would only round the left corners) */
.cs-process { margin: var(--space-block) 0; }
.cs-frame figcaption { padding: 14px 6px 0; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.cs-frame figcaption b { margin-right: 8px; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }
.cs-problem-pair { display: flex; gap: 18px; align-items: flex-start; margin-top: 32px; }
.cs-problem-pair .cs-frame:nth-child(1) { flex: 1 1 0; }   /* both screenshots now share one aspect ratio (1512 x 829), so they sit side by side at equal size */
.cs-problem-pair .cs-frame:nth-child(2) { flex: 1 1 0; }
img[data-lightbox] { cursor: zoom-in; }
/* lightbox: a translucent overlay, with space on every side of the image */
.lightbox { position: fixed; inset: 0; z-index: 100; overflow-y: auto; padding: clamp(16px, 4vw, 56px); background: rgba(17, 17, 18, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.22s ease; cursor: zoom-out; overscroll-behavior: contain; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox-img { display: block; width: 100%; height: auto; margin: 0; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); }   /* fills the width inside the padding; tall images scroll */
/* phone screens: the whole screen fits the window's height, centred, with the same padding on every side */
.lightbox-img.is-fit { width: auto; max-width: 100%; height: calc(100vh - 2 * clamp(16px, 4vw, 56px)); height: calc(100dvh - 2 * clamp(16px, 4vw, 56px)); margin: 0 auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); object-fit: contain; }
.lightbox-close { position: fixed; top: 16px; right: 18px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-page); color: var(--text-primary); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5); }
.lightbox-close:hover { background: var(--accent); color: var(--on-accent); }
@media (max-width: 800px) {
  .cs-problem-pair { flex-direction: column; }
  .cs-problem-pair .cs-frame { width: 100%; flex: none !important; }
}

/* ---- Prevent / Preserve / Present hang off point 02 on a vertical line ---- */
.cs-branch { --branch-pad: clamp(24px, 3.6vw, 52px); position: relative; margin: 30px 0 0 14px; padding-left: var(--branch-pad); border-left: 2px solid var(--border-card-hover); }
.cs-branch .cs-pillar { position: relative; margin-top: 0; padding: 6px 0 60px; border-top: 0; }
.cs-branch .cs-pillar:last-child { padding-bottom: 0; }
.cs-branch .cs-pillar::before { content: ""; box-sizing: border-box; position: absolute; left: calc(-1 * var(--branch-pad) - 8px); top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-page); border: 3px solid var(--accent); }
@media (max-width: 800px) { .cs-branch { margin-left: 8px; --branch-pad: 22px; } }

/* three problem photos: identical 16:9 frames, whatever the original shape */
.cs-pains-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.cs-pains-photos img { aspect-ratio: 16 / 9; object-fit: cover; }
.cs-pains-photos img.is-portrait { object-position: 50% 45%; }
.cs-pains-photos figcaption { font-size: 15px; font-weight: 500; color: var(--text-body); }
@media (max-width: 800px) { .cs-pains-photos { grid-template-columns: 1fr; } }

/* ---- Prevent: before / after columns ---- */
.cs-pillar-stack { grid-template-columns: 1fr !important; align-items: start !important; }
.cs-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; align-items: start; }   /* each column is only as tall as its own images */
.cs-ba-col { display: flex; flex-direction: column; gap: 14px; }
.cs-ba-col .cs-frame { margin: 0; }
.cs-ba-tag { align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--surface-card-media); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cs-ba-tag-after { background: var(--accent); color: var(--on-accent); }
@media (max-width: 800px) { .cs-ba { grid-template-columns: 1fr; } }

/* the dots sit on the line at the height of each label (PREVENT / PRESERVE / PRESENT), whatever sits beside the text */
.cs-branch .cs-pillar { align-items: start; }
.cs-branch .cs-pillar-text .cs-num { margin: 0 0 10px; line-height: 20px; }
.cs-branch .cs-pillar::before { top: 9px; }    /* 6px padding + half the 20px label line - half the 14px dot */
.cs-branch .cs-pillar::after { top: 15px; }

/* a very tall image (the guidelines sheet) shows its top part in the layout; the lightbox shows all of it */
.cs-tallcrop img { height: clamp(420px, 52vw, 640px); object-fit: cover; object-position: top; }

/* Present: three rule sheets side by side, same width each (their heights follow their own shape) */
.cs-trio-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; margin-top: 8px; }
.cs-trio-imgs .cs-frame { margin: 0; }
.cs-trio-item { display: contents; }   /* captions share row 1 and images share row 2, so every image starts at the same height however long its caption is */
.cs-trio-imgs { grid-auto-flow: column; grid-template-rows: auto auto; row-gap: 14px; align-items: start; }
.cs-trio-cap { display: flex; align-items: first baseline; gap: 12px; margin: 0; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--text-primary); text-wrap: balance; }
.cs-trio-cap b { flex: none; font: normal 500 26px/1 var(--font-accent); color: var(--accent); }   /* the 1 / 2 / 3 */
@media (max-width: 800px) { .cs-trio-imgs { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; row-gap: 14px; } .cs-trio-cap { margin-top: 10px; } }


/* ---- full-bleed hero (alternative to the split hero; body.hero-full switches it on) ---- */
.cs-hero-full, .cs-hero-facts { display: none; }
body.hero-full .cs-hero-facts { display: block; max-width: 1040px; margin: 0 auto; padding: var(--space-block) var(--gutter) 0; }   /* same column and side padding as every .cs-section, so the left edges line up */
body.hero-full .cs-hero-facts .cs-meta { width: auto; max-width: none; margin: 0; }
body.hero-full .cs-split { display: none; }
body.hero-full.cs-page main { padding-top: 0; }
body.hero-full {
  /* the Housing.com screens' own colours: header purple, button lilac, logo yellow */
  --hs-purple: #3f1ea2; --hs-violet: #7323dc; --hs-lilac: #eae4ff; --hs-yellow: #ffdc00;
}
body.hero-full .cs-hero-full {
  /* the Housing.com screens' own colours: header purple, button lilac, logo yellow */
  /* hover glow: only slightly lighter shades of the hero's own purple, so it stays quiet */
  --pixel-core: #6d52c4; --pixel-trail: #5b40b0; --pixel-hot: #9a84ea;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden; min-height: clamp(660px, 92svh, 820px);
  background: radial-gradient(120% 100% at 85% 100%, color-mix(in srgb, var(--hs-violet) 55%, var(--hs-purple)), var(--hs-purple) 60%);   /* lighter glow at the bottom, so the top matches the solid menu bar */
  color: #fff;
}
.cs-hero-full .grid-bg {
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  -webkit-mask-image: none; mask-image: none;
}
.cs-hero-full .grid-lit { -webkit-mask-image: none; mask-image: none; }
.cs-back-light { position: absolute; z-index: 2; top: 92px; left: clamp(20px, 4vw, 56px); color: rgba(255, 255, 255, 0.9); font-size: 18px; font-weight: 700; transition: color 0.2s, transform 0.2s; }
.cs-back-light:hover { color: #fff; transform: translateX(-3px); }
.cs-hf-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.9fr; gap: 32px clamp(32px, 5vw, 80px); align-items: stretch; flex: 1; padding: 0 clamp(20px, 4vw, 56px); pointer-events: none; }   /* fills the hero, so the picture can sit in its exact vertical middle */
.cs-hf-left { align-self: end; padding-bottom: clamp(36px, 6vw, 72px); }
.cs-hf-grid a { pointer-events: auto; }
.cs-hero-full .cs-eyebrow { color: rgba(255, 255, 255, 0.7); margin-bottom: 18px; }
.cs-hero-full .cs-dot { background: var(--hs-yellow); animation: none; }
.cs-hero-full h1 { margin: 0; color: #fff; font-family: var(--font-accent); font-weight: 600; font-size: clamp(30px, 3.7vw, 54px); line-height: 1.1; letter-spacing: 0.005em; text-wrap: balance; max-width: 19ch; }
.cs-hero-full h1 .hl-reactive { color: rgba(255, 255, 255, 0.5); animation-name: word-in, fade-grey-light; }
.cs-hero-full h1 .hl-reactive::after { background: var(--hs-yellow); }
.cs-hero-full h1 .hl-builtin { background: linear-gradient(95deg, #ffa8d0, var(--hs-yellow)); -webkit-background-clip: text; background-clip: text; }
.cs-hero-full h1 .hl-builtin::after { background: linear-gradient(95deg, #ffa8d0, var(--hs-yellow)); }
@keyframes fade-grey-light { from { color: #fff; } to { color: rgba(255, 255, 255, 0.5); } }
.cs-hero-full .cs-lede { margin: 22px 0 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, 0.85); text-align: left; }
.cs-hero-full .cs-mark { background-image: linear-gradient(transparent 62%, rgba(255, 220, 0, 0.3) 62%); color: #fff; }
.cs-hf-btn { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 15px; font-weight: 500; transition: background 0.25s, color 0.25s, transform 0.25s; }
.cs-hf-btn i { font-style: normal; transition: translate 0.25s; }
.cs-hf-btn:hover { background: #fff; color: var(--hs-purple); transform: translateY(-2px); }
.cs-hf-btn:hover i { translate: 0 3px; }
/* the product, on the right of the hero, bleeding off the bottom edge */
.cs-hf-media { align-self: center; margin: 84px 0; pointer-events: auto; }   /* centred vertically in the hero; 84px keeps it clear of the menu bar */
.cs-hf-media img { display: block; width: 100%; max-width: 500px; margin-left: auto; height: auto; filter: drop-shadow(0 24px 36px rgba(10, 0, 50, 0.55));   /* no CSS radius or box-shadow: the PNG already has rounded device corners, and drop-shadow follows them */
   animation: hf-img-in 1.5s cubic-bezier(.16, 1, .3, 1) 0.5s backwards; transition: transform 0.45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hf-img-in { from { transform: translateY(70px) scale(1.04); opacity: 0; } }
@media (hover: hover) { .cs-hf-media:hover img { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .cs-hf-media img { animation: none; } }
@media (max-width: 900px) {
  .cs-hf-grid { grid-template-columns: 1fr; padding-top: 150px; flex: none; }
  .cs-hf-left { padding-bottom: 0; }
  .cs-hf-media { align-self: auto; margin: 8px 0 clamp(36px, 8vw, 56px); }
  .cs-hf-media img { max-width: none; margin: 0 auto; width: min(100%, 460px); }
  body.hero-full .cs-hero-full { min-height: 0; }
  .cs-hero-full h1 { max-width: none; }
}

/* the menu bar over the dark hero (js/hero-full.js toggles .nav-on-dark) */
.nav.nav-on-dark { background: var(--hs-purple); -webkit-backdrop-filter: none; backdrop-filter: none; }   /* solid purple bar: the hover glow can't show behind the menu */
.nav-on-dark .brand { color: #fff; }
.nav-on-dark .menu-toggle span { background: #fff; }
@media (min-width: 701px) { .nav-on-dark nav a { color: rgba(255, 255, 255, 0.8); } .nav-on-dark nav a:hover { color: #fff; } }


/* ---- Snapp: same full-bleed hero, in the colours of the Snapp app (dark UI, violet card, blue button) ---- */
body.hero-full .cs-hero, body.hero-full .cs-cover-ph, body.hero-full main > .cs-meta { display: none; }   /* the earlier Snapp hero, kept in the file */
body.hero-snapp { --hs-purple: #1f1f23; --hs-violet: #7a1fd0; --hs-yellow: #c58bff; }                 /* app background, card violet, light violet accent */
body.hero-snapp .cs-hero-full { --pixel-core: #5a3d8c; --pixel-trail: #43305f; --pixel-hot: #8e6cc9; }   /* slightly lighter shades of the hero's own colour */
/* Snapp hero: a shorter hero, a bigger phone, and the text sitting on the same bottom line as the phone.
   The phone picture has some empty space around it, so it is allowed to run into the menu-bar zone at the top and past the bottom edge by a few px. */
body.hero-snapp .cs-hero-full { --hero-h: clamp(560px, 88svh, 760px); min-height: var(--hero-h); }
body.hero-snapp .cs-hf-grid { padding-top: 64px; }
body.hero-snapp .cs-hf-left { padding-bottom: 30px; }                                   /* = the phone's own bottom gap, so both end on the same line */
body.hero-snapp .cs-hf-media { align-self: end; margin: -64px 0 -6px; }
body.hero-snapp .cs-hf-media img { width: auto; max-width: 100%; height: calc(var(--hero-h) - 92px); max-height: none; margin: 0 auto; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55)); }
@media (min-width: 901px) { body.hero-snapp .cs-hf-media { display: flex; justify-content: center; } }
@media (min-width: 901px) {   /* the section's height now comes from its content (phone + text), not from the window height, so narrower windows no longer leave empty space above them */
  body.hero-snapp .cs-hero-full { min-height: 0; }
  body.hero-snapp .cs-hf-grid { padding-top: 150px; }   /* clears the "My Work" link, now that the height no longer comes from the window */
}
@media (min-width: 901px) {   /* the title runs on two lines, so the text column is wider and the phone column narrower */
  body.hero-snapp .cs-hf-grid { grid-template-columns: 1.45fr 0.55fr; }
  body.hero-snapp .cs-hf-media img { position: relative; left: calc(-1 * clamp(24px, 4.5vw, 64px)); }
  body.hero-snapp .cs-hf-media img { width: 100%; height: auto; max-width: calc((var(--hero-h) - 92px) * 0.599); }   /* keeps its proportions: scales down with the column instead of being squeezed */
  body.hero-snapp .cs-hero-full h1 { max-width: none; text-wrap: nowrap; font-size: clamp(26px, 3.6vw, 54px); }
}
@media (max-width: 900px) {
  body.hero-snapp .cs-hero-full { min-height: 0; }
  body.hero-snapp .cs-hf-grid { padding-top: 150px; }
  body.hero-snapp .cs-hf-left { padding-bottom: 0; }
  body.hero-snapp .cs-hf-media { align-self: auto; margin: 8px 0 clamp(36px, 8vw, 56px); }
  body.hero-snapp .cs-hf-media img { height: auto; max-height: min(78svh, 560px); }
}

/* Splitshare hero: its own deep-teal palette; a placeholder screen stands in until the mockup is ready */
body.hero-splitshare { --hs-purple: #0d3b38; --hs-violet: #15806f; --hs-yellow: #8ee6c8; }
body.hero-splitshare .cs-hero-full { --pixel-core: #2f8f7c; --pixel-trail: #1f5f55; --pixel-hot: #8ee6c8; }
.cs-hf-ph { position: relative; width: min(100%, 290px); margin-left: auto; margin-right: auto; border-radius: 36px; border: 1px dashed rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.cs-hf-ph::before { content: ""; display: block; padding-top: 200%; }
.cs-hf-ph span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 12px; }

/* ---- Snapp: two problem screenshots side by side under the stats ---- */
.cs-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; max-width: 640px; }
@media (max-width: 700px) { .cs-evidence { grid-template-columns: 1fr; } }

/* app icons under a persona */
.cs-apps-label { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.cs-apps { display: flex; gap: 12px; }
.cs-apps img { display: block; width: 44px; height: 44px; object-fit: contain; border-radius: 11px; }
/* a heading that is always set on two lines (a <br> splits it); on narrow screens it wraps freely */
@media (min-width: 560px) { .cs-section h2.cs-two { max-width: none; text-wrap: nowrap; } }
.cs-compete { margin-top: 32px; }

/* ---- Snapp: tabbed screens in "The answer" (keeps the section short) + a narrower tall wireframe ---- */
.cs-modes { margin-top: 28px; }
.cs-modes .cs-tabs { width: fit-content; max-width: 100%; }
.cs-modes-stage { margin-top: 18px; }
.cs-modes-cap { margin: 14px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.cs-frame-narrow { max-width: 520px; margin: 28px auto 0; }
/* edge to edge: breaks out of the text column to the full width of the window, for images that carry a lot of detail */
.cs-frame-bleed { width: 100vw; margin: 28px 0 0 calc(50% - 50vw); }
.cs-frame-bleed img { border-radius: 0; }
.cs-frame-bleed figcaption { padding-left: var(--gutter); padding-right: var(--gutter); }
.cs-page { overflow-x: clip; }   /* 100vw includes the scrollbar; never let it cause a sideways scroll */

/* Glance mode, rebuilt in code: the screen is the only picture, the rest is text */
.cs-mode-panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: stretch; margin-top: 34px; }
.cs-mode-panel[hidden], .cs-modes-stage[hidden] { display: none; }
.cs-screen { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgba(17, 17, 18, 0.3)); }
.cs-mode-text .cs-kicker { margin: 0 0 12px; }
.cs-mode-lede { margin: 0; max-width: 46ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--text-primary); }
.cs-spark { margin: 28px 0;  padding: 22px 26px; border-radius: 24px; background: var(--text-primary); color: var(--surface-page); }
.cs-spark .cs-kicker { margin: 0 0 8px; color: var(--color-pink-300); }
.cs-spark p:last-child { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.cs-mode-text { display: flex; flex-direction: column; }
.cs-mode-panel > img, .cs-mode-panel > .cs-screens { align-self: start; }
.cs-mode-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: auto 0 0; padding-top: 22px;   /* pinned to the bottom: its last line lines up with the bottom edge of the screen picture */ border-top: 1px solid var(--border-subtle); }
.cs-mode-facts dt { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.cs-mode-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-body); }
@media (max-width: 800px) {
  .cs-mode-panel { grid-template-columns: 1fr !important; }
  .cs-screen { max-width: 260px; margin: 0 auto; }
  .cs-mode-facts { grid-template-columns: 1fr; gap: 18px; }
}

/* Experience mode: two screens with an arrow from the Experience button to the immersive view */
#mode-glance, #mode-experience, #mode-listen, #mode-community { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
#mode-glance > .cs-screen { width: 45%; max-width: none; }   /* the same screen size as the two-phone tabs */
.cs-screens { position: relative; aspect-ratio: 100 / 118.1; }   /* a fixed shape, so the arrow's start and end always land on the same spots */
.cs-screens .cs-screen { position: absolute; left: 0; top: 0; width: 45%; max-width: none; margin: 0; }
.cs-screens .cs-screen-low { left: 55%; top: 16.93%; }
.cs-screens-arrow { position: absolute; inset: 0; width: 100%; height: 100%; color: #6dc24b; stroke-width: 2.5px; pointer-events: none; }   /* from the Experience button to the top edge of the right-hand screen */
.cs-mode-facts-one { grid-template-columns: 1fr; }
@media (max-width: 800px) { .cs-screens { max-width: 440px; margin: 0 auto; width: 100%; } #mode-glance > .cs-screen { width: 100%; max-width: 260px; } }

/* Community: the leaderboard screen, a notification that pops onto it like a real one, and a nudge card */
.cs-screens-community { aspect-ratio: 100 / 109; }
.cs-screens .cs-phone { position: absolute; left: 0; top: 0; width: 50%; }
.cs-screens .cs-phone .cs-screen { position: static; display: block; width: 100%; height: auto; }
.cs-notif-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 12.5% / 5.7%; pointer-events: none; }   /* the notification slides in from behind the top of the phone */
.cs-notif { position: absolute; left: 6%; top: 7.4%; width: 88%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.4)); transform: translateY(-170%); opacity: 0; animation: cs-notif 8s 0.6s infinite; }
@keyframes cs-notif {
  0%   { transform: translateY(-170%) scale(0.96); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
  9%   { transform: translateY(0) scale(1); opacity: 1; }
  72%  { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: ease-in; }
  82%, 100% { transform: translateY(-170%) scale(0.96); opacity: 0; }
}
.cs-nudge { position: absolute; left: 55%; top: 42%; width: 45%; height: auto; border-radius: 6%; filter: drop-shadow(0 18px 26px rgba(17, 17, 18, 0.28)); animation: cs-nudge-in 0.7s 0.35s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes cs-nudge-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .cs-notif { animation: none; transform: none; opacity: 1; } .cs-nudge { animation: none; } }

/* Zinara hero: the brand's deep maroon, with its gold as the accent; a placeholder screen stands in until the mockup is ready */
body.hero-zinara { --hs-purple: #4a1430; --hs-violet: #9b3a62; --hs-yellow: #f0c36a; }
body.hero-zinara .cs-hero-full { --pixel-core: #8a3c5c; --pixel-trail: #5e2842; --pixel-hot: #e8b86a; }

/* ---- Icon Studio hero: warm "folk" browns and terracotta; the three libraries fan out as a stack of cards ---- */
body.hero-icon { --hs-purple: #2b1d17; --hs-violet: #b25a33; --hs-yellow: #ffc978; }
body.hero-icon .cs-hero-full { --pixel-core: #8a5a3c; --pixel-trail: #5e3e2b; --pixel-hot: #e3a56e; }
.cs-hf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cs-hf-actions .cs-hf-btn { margin-top: 0; }
.cs-hf-btn .gh-mark { flex: none; }
.cs-hf-stack { position: relative; width: min(100%, 560px); margin-left: auto; margin-right: 0; }
.cs-hf-stack::before { content: ""; display: block; padding-top: 90.2%; }
.cs-hf-stack img { position: absolute; width: 80%; max-width: none; margin: 0; transform: rotate(var(--r)); transition: transform 0.55s cubic-bezier(.2, .8, .2, 1); }
.cs-hf-stack .cs-stack-1 { --r: -4deg; --rh: -10deg; --th: translate(-16px, -10px); left: 0; top: 0; animation-delay: 0.5s; }
.cs-hf-stack .cs-stack-2 { --r: 3deg; --rh: 9deg; --th: translate(18px, 2px); right: 0; top: 31%; animation-delay: 0.7s; }
.cs-hf-stack .cs-stack-3 { --r: -2deg; --rh: 6deg; --th: translate(-10px, 12px); left: 6%; top: 62%; animation-delay: 0.9s; }
@media (hover: hover) { .cs-hf-stack:hover img { transform: var(--th) rotate(var(--rh)); } }   /* each card tilts its own way: left, right, then back the other way */
@media (prefers-reduced-motion: reduce) { .cs-hf-stack img { transition: none; } }
@media (max-width: 900px) { .cs-hf-stack { margin: 8px auto 0; width: min(100%, 440px); } .cs-hf-stack img { width: 82%; } }

/* Icon Studio hero on desktop: the stack and the text end on the same bottom line, and the section is only as tall as its content */
@media (min-width: 901px) {
  body.hero-icon .cs-hero-full { min-height: 0; }
  body.hero-icon .cs-hf-grid { padding-top: 130px; padding-bottom: clamp(36px, 5vw, 64px); }
  body.hero-icon .cs-hf-left { padding-bottom: 0; }
  body.hero-icon .cs-hf-media { align-self: end; margin: 0; }
  body.hero-icon .cs-hf-stack { width: min(100%, 480px); }
}
/* a heading that stays on one line (it wraps freely only on very narrow screens) */
@media (min-width: 400px) { .cs-section h2.cs-one { max-width: none; text-wrap: nowrap; } }

/* a quiet aside inside the install card */
.cs-cta-card .cs-psst { margin-top: -4px; font-size: 15px; color: rgba(255, 255, 255, 0.62); }
.cs-cta-card .cs-psst b { color: var(--color-pink-300, #ff9ec7); font-weight: 700; }
/* Photo Quality: the long title is set a little smaller and wider so it stays on two lines (desktop) */
@media (min-width: 901px) { body.hero-photo .cs-hero-full h1 { max-width: none; font-size: clamp(26px, 2.9vw, 42px); } }