/* ============================================================
   payraw.ca · case-study.css
   Case study pages (/lezzoo and future studies) and the home-page
   "Case studies" feature section. Loads after main.css and uses its tokens.
   Red is the brand accent: key numbers, the key chart series, the
   primary CTA. Channel colours are the only additions.
   ============================================================ */

:root {
  --ch-tiktok: #2fbf9a;
  --ch-meta:   #4a86d8;
  --cs-card:   #121212;
  --cs-cell:   #131313;
  --cs-line:   #1f1f1f;
  --red-hover: #b8232f;
}

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */
.section--cs { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.cs { max-width: var(--content-max); margin-inline: auto; }

.cs__label {
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-5);
}
.cs__lede {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.03em;
  max-width: 20ch; margin-bottom: var(--space-6);
}
.cs__body {
  font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6;
  color: var(--color-quiet); max-width: 54ch;
}
.cs__body + .cs__body { margin-top: var(--space-4); }
.cs__body strong { color: var(--color-fg); font-weight: 600; }

.cs-red { color: var(--color-accent-red); }
.cs-nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal on scroll. The pre-state is applied by JS only, so a no-JS
   render shows everything. */
.cs-reveal { transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.cs-reveal.is-pre-reveal { opacity: 0; transform: translateY(16px); }
.cs-reveal.is-revealed { opacity: 1; transform: none; }

/* Staggered entrance for groups of cards, logos and figures. JS sets
   --i on each child and toggles is-pending; no JS, no hidden state. */
[data-stagger] > * {
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
[data-stagger].is-pending > * { opacity: 0; transform: translateY(10px); }

/* Primary button: red fill, sharp corners */
.cs-button {
  display: inline-block; background: var(--color-accent-red); color: var(--color-fg);
  font-weight: 600; border-radius: 0;
  transition: background var(--duration-base) var(--ease-out);
}
.cs-button:hover, .cs-button:focus-visible { background: var(--red-hover); }

/* Back link */
.cs-back { padding: var(--space-5) var(--gutter) 0; }
.cs-back__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); color: var(--color-muted);
  transition: color var(--duration-base) var(--ease-out);
}
.cs-back__link:hover, .cs-back__link:focus-visible { color: var(--color-fg); }
.cs-back__link svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------
   1. Hero
   ------------------------------------------------------------ */
.cs-hero { padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Client lockup: logo · thin rule · backer */
.cs-lockup { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: clamp(2rem, 4vw, 3rem); }
.cs-lockup__client { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.375rem; font-weight: 900; letter-spacing: -0.045em; }
.cs-lockup__mark { width: 22px; height: auto; color: var(--color-fg); }
.cs-lockup__rule { width: 1px; height: 22px; background: #333; }
.cs-lockup__backer { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--color-quiet); }
.cs-lockup__backer svg { width: 18px; height: 18px; }

.cs-hero__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 1000px) {
  .cs-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
}

.cs-hero__headline {
  font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.04em;
  max-width: 18ch; margin-bottom: var(--space-5); text-wrap: balance;
}
.cs-hero__descriptor {
  font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6;
  color: var(--color-quiet); max-width: 52ch;
}
.cs-hero__descriptor b { color: var(--color-fg); font-weight: 600; }
.cs-hero__snapshot {
  margin-top: var(--space-4); padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-red);
  font-size: var(--fs-small); color: var(--color-quiet); line-height: 1.5;
}

/* Results strip */
.cs-results {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--space-6); border-top: 1px solid var(--cs-line);
}
@media (min-width: 720px) { .cs-results { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.cs-result__figure {
  font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.cs-result__name { font-size: 0.9375rem; font-weight: 500; }
.cs-result__note { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.45; margin-top: 0.2rem; }

/* Credits: editorial label / value pairs */
.cs-credits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-5);
  margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--cs-line);
}
@media (min-width: 1000px) {
  /* Content-sized columns so each logo list stays on one line */
  .cs-credits {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
  }
}
.cs-credits dt {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: var(--space-2);
}
.cs-credits dd { margin: 0; font-size: 0.9375rem; }
.cs-credits__logos { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cs-credits__logos span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cs-credits__logos svg { width: 15px; height: 15px; color: var(--color-quiet); }

/* ------------------------------------------------------------
   Indexed line chart
   ------------------------------------------------------------ */
.cs-chart {
  background: var(--cs-card); border: 1px solid var(--cs-line);
  border-radius: 12px; padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
.cs-chart__title { font-size: 0.9375rem; font-weight: 600; }
.cs-chart__sub { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.2rem; }

/* The plot keeps the SVG viewBox ratio (300 x 120) so the stroke scales
   evenly. Inline padding leaves room for the axis and end labels. */
.cs-chart__frame { padding: var(--space-7) 3.75rem 0 1.75rem; }
.cs-chart__plot { position: relative; aspect-ratio: 300 / 120; }
.cs-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.cs-chart__grid { stroke: #262626; stroke-width: 0.6; stroke-dasharray: 2 3; }
.cs-chart__area { fill: url(#cs-chart-area); }
.cs-chart__line {
  fill: none; stroke: var(--color-accent-red); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
@keyframes cs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-pop  { from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Motion is opt-in: JS adds is-pending, then is-drawn when the chart
   scrolls into view. Without JS the chart renders complete. */
.cs-chart.is-pending .cs-chart__line { stroke-dashoffset: 1; }
.cs-chart.is-pending .cs-chart__area,
.cs-chart.is-pending .cs-chart__pt { opacity: 0; }
.cs-chart.is-drawn .cs-chart__line { animation: cs-draw 2500ms var(--ease-out) both; }
.cs-chart.is-drawn .cs-chart__area { animation: cs-fade 1400ms ease-out 900ms both; }
.cs-chart.is-drawn .cs-chart__pt { animation: cs-pop 600ms var(--ease-out) both; }
.cs-chart.is-drawn .cs-chart__pt:nth-child(4) { animation-delay: 100ms; }
.cs-chart.is-drawn .cs-chart__pt:nth-child(5) { animation-delay: 800ms; }
.cs-chart.is-drawn .cs-chart__pt:nth-child(6) { animation-delay: 1500ms; }
.cs-chart.is-drawn .cs-chart__pt:nth-child(7) { animation-delay: 2200ms; }

.cs-chart__axis {
  position: absolute; left: -1.75rem; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-muted);
}
.cs-chart__pt { position: absolute; transform: translate(-50%, -50%); }
.cs-chart__dot {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-bg); border: 1.5px solid var(--color-fg);
}
.cs-chart__val {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-quiet);
}
.cs-chart__pt--end .cs-chart__dot { width: 11px; height: 11px; background: var(--color-accent-red); border-color: var(--color-accent-red); }
.cs-chart__pt--end .cs-chart__val { color: var(--color-fg); font-size: 0.875rem; }
.cs-chart__delta {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.75rem; font-weight: 600;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  background: #1e1e1e; border: 1px solid #2c2c2c;
}
.cs-chart__weeks { position: relative; height: 1.5rem; margin-top: var(--space-3); }
.cs-chart__weeks span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--color-muted);
}
.cs-chart__foot {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--cs-line);
  font-size: 0.75rem; line-height: 1.5; color: var(--color-muted);
}

/* ------------------------------------------------------------
   2. Stack: monochrome logo band, grouped
   ------------------------------------------------------------ */
.cs-stack { padding: clamp(2rem, 4vw, 3rem) var(--gutter); border-block: 1px solid var(--cs-line); }
.cs-stack__groups { display: flex; flex-wrap: wrap; gap: var(--space-6) clamp(2.5rem, 5vw, 4.5rem); }
.cs-stack__k {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400;
  color: var(--color-muted); margin-bottom: var(--space-3);
}
.cs-stack__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) clamp(1.25rem, 2.5vw, 2rem); }
.cs-stack__row li {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--color-quiet); white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}
.cs-stack__row li:hover { color: var(--color-fg); }
.cs-stack__row svg { width: 20px; height: 20px; flex-shrink: 0; }
.cs-stack__row .cs-stack__wordmark { width: auto; height: 24px; aspect-ratio: 141 / 40; }

/* ------------------------------------------------------------
   3. The brief: Then / Now table
   ------------------------------------------------------------ */
.cs-shift { margin-top: var(--space-7); border: 1px solid var(--cs-line); border-radius: 12px; overflow: hidden; }
.cs-shift__head, .cs-shift__row { display: grid; grid-template-columns: 1fr; }
.cs-shift__head { background: #101010; border-bottom: 1px solid var(--cs-line); }
.cs-shift__head span {
  padding: var(--space-3) var(--space-5);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted);
}
.cs-shift__row + .cs-shift__row { border-top: 1px solid var(--cs-line); }
.cs-shift__row > * { padding: var(--space-4) var(--space-5); font-size: 0.9375rem; line-height: 1.5; }
.cs-shift__area { font-weight: 600; }
.cs-shift__before { color: var(--color-muted); }
.cs-shift__after { background: #0f0f0f; }

@media (min-width: 760px) {
  .cs-shift__head, .cs-shift__row { grid-template-columns: 9rem 1fr 1fr; }
}
@media (max-width: 759px) {
  .cs-shift__head { display: none; }
  .cs-shift__row > * { padding-block: var(--space-2); }
  .cs-shift__area { padding-top: var(--space-4); }
  .cs-shift__after { padding-bottom: var(--space-4); background: none; }
  .cs-shift__before::before { content: "Then  "; }
  .cs-shift__after::before { content: "Now  "; }
  .cs-shift__before::before, .cs-shift__after::before {
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
  }
}

/* ------------------------------------------------------------
   4. Story: sticky results rail beside the chapters
   ------------------------------------------------------------ */
.cs-story { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.cs-rail { display: none; }
@media (min-width: 1000px) {
  .cs-story { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .cs-rail { display: block; position: sticky; top: var(--space-6); align-self: start; }
}
.cs-rail__item { padding-left: var(--space-4); border-left: 2px solid #2a2a2a; }
.cs-rail__item + .cs-rail__item { margin-top: var(--space-5); }
.cs-rail__figure { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cs-rail__name { font-size: var(--fs-small); color: var(--color-quiet); line-height: 1.4; }
.cs-rail .cs-button { margin-top: var(--space-6); font-size: 0.875rem; padding: 0.75rem 1.5rem; }

.cs-chapter + .cs-chapter { margin-top: clamp(4rem, 8vw, 6rem); }
.cs-chapter__kicker { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-muted); margin-bottom: var(--space-3); }
.cs-chapter__claim {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.03em; max-width: 24ch;
  margin-bottom: var(--space-5); text-wrap: balance;
}
.cs-chapter .cs__body { max-width: 60ch; }
.cs-chapter .cs-after-figure { margin-top: var(--space-6); }

.cs-figure {
  margin-top: var(--space-6);
  background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: 12px;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
.cs-figure__cap { margin-top: var(--space-4); font-size: 0.75rem; color: var(--color-muted); line-height: 1.5; }

/* Channel split: share of orders vs share of budget */
.cs-split + .cs-split { margin-top: var(--space-5); }
.cs-split__title { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-2); }
.cs-split__bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; background: #1a1a1a; }
.cs-split__seg {
  display: flex; align-items: center; gap: 0.4rem; padding-inline: 0.65rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--color-bg); white-space: nowrap;
  width: var(--w); transition: width 900ms var(--ease-out);
}
.cs-split__seg svg { width: 13px; height: 13px; flex-shrink: 0; }
.cs-split__seg--tiktok { background: var(--ch-tiktok); }
.cs-split__seg--meta   { background: var(--ch-meta); justify-content: flex-end; }
.is-pre-reveal .cs-split__seg { width: 0; padding-inline: 0; }

/* Channel comparison table */
.cs-compare { width: 100%; border-collapse: collapse; margin-top: var(--space-6); font-variant-numeric: tabular-nums; }
.cs-compare th, .cs-compare td { padding: 0.65rem 0; border-top: 1px solid #222; text-align: right; font-size: 0.875rem; }
.cs-compare th:first-child, .cs-compare td:first-child { text-align: left; }
.cs-compare thead th { border-top: 0; padding-top: 0; font-size: 0.75rem; font-weight: 500; color: var(--color-muted); }
.cs-compare thead th svg { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 0.3rem; }
.cs-compare .is-tiktok { color: var(--ch-tiktok); }
.cs-compare .is-meta { color: var(--ch-meta); }
.cs-compare td { font-weight: 600; }
.cs-compare td:first-child { font-weight: 400; color: var(--color-quiet); }

/* Rule chips */
.cs-rules { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cs-rules span {
  font-size: 0.8125rem; padding: 0.45rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--cs-line); background: var(--cs-card); color: var(--color-quiet);
}

/* Cell grids: creative matrix, funnel, agent steps */
.cs-matrix, .cs-funnel, .cs-steps[role="list"] {
  display: grid; gap: 1px; margin-top: var(--space-6);
  background: var(--cs-line); border-radius: 10px; overflow: hidden;
}
.cs-matrix { grid-template-columns: 1fr 1fr; }
.cs-funnel { grid-template-columns: 1fr 1fr; }
.cs-steps[role="list"] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .cs-funnel { grid-template-columns: repeat(4, 1fr); }
  .cs-steps[role="list"] { grid-template-columns: repeat(3, 1fr); }
}

.cs-matrix > div { background: var(--cs-cell); padding: var(--space-5); }
.cs-matrix__k { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-2); }
.cs-matrix__v { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.cs-matrix__note { grid-column: 1 / -1; font-size: 0.875rem; color: var(--color-quiet); line-height: 1.5; }

.cs-funnel > div { background: var(--cs-cell); padding: var(--space-5) var(--space-4); }
.cs-funnel > .cs-funnel__end { background: #1c1c1c; }
.cs-funnel__rate { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cs-funnel__step { font-size: 0.78125rem; color: var(--color-quiet); line-height: 1.4; margin-top: 0.2rem; }

.cs-steps[role="list"] { position: relative; }
.cs-steps[role="list"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--color-accent-red); transform: scaleX(0); transform-origin: left;
  transition: transform 2500ms var(--ease-out);
}
.cs-steps.is-swept::after { transform: scaleX(1); }
.cs-steps li { display: flex; flex-direction: column; gap: 0.25rem; background: var(--cs-cell); padding: var(--space-5); }
.cs-steps__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-muted); }
.cs-steps__t { font-size: 1.0625rem; font-weight: 600; }
.cs-steps__d { font-size: 0.8125rem; color: var(--color-quiet); line-height: 1.45; }

/* ------------------------------------------------------------
   5. The full picture
   ------------------------------------------------------------ */
.cs-picture { border-top: 1px solid var(--cs-line); }
.cs-picture__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 760px) { .cs-picture__cards { grid-template-columns: repeat(3, 1fr); } }
.cs-picture__card { background: var(--cs-card); border: 1px solid var(--cs-line); border-radius: 10px; padding: var(--space-5); }
.cs-picture__figure { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cs-picture__name { font-size: 0.9375rem; font-weight: 500; margin-top: var(--space-2); }
.cs-picture__note { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.45; margin-top: 0.2rem; }
.cs-picture .cs__body { margin-top: var(--space-7); }

/* ------------------------------------------------------------
   6. CTA
   ------------------------------------------------------------ */
.cs-cta { border-top: 1px solid var(--cs-line); text-align: center; }
.cs-cta__headline {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.08; margin-bottom: var(--space-4);
}
.cs-cta__sub {
  font-size: clamp(1rem, 1.7vw, 1.125rem); color: var(--color-quiet);
  max-width: 44ch; margin: 0 auto var(--space-7); line-height: 1.55;
}
.cs-cta .cs-button { font-size: 1rem; padding: 1.0625rem 2.5rem; }

/* ------------------------------------------------------------
   Methodology and footer
   ------------------------------------------------------------ */
.cs-notes { border-top: 1px solid var(--cs-line); }
.cs-notes ul { margin: 0; padding-left: 1.1rem; max-width: 72ch; }
.cs-notes li { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.6; }
.cs-notes li + li { margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { transition: none; }
  .cs-steps[role="list"]::after { transition: none; }
}

/* sections.css is not loaded on case study pages */
.footer { padding: clamp(2rem, 4vw, 2.75rem) var(--gutter); border-top: 1px solid #1a1a1a; }
.footer__inner { max-width: var(--content-max); margin-inline: auto; }
.footer__line { font-size: 0.8125rem; color: #666; }
.footer__line a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------
   Home page: "Case studies" feature section
   Reuses the case study hero pieces (lockup, headline, descriptor,
   chart) so the home page and the study read as one system.
   ------------------------------------------------------------ */
.case-feature {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 1000px) {
  .case-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); }
}
.case-feature .cs-lockup { margin-bottom: var(--space-6); }

.case-feature__stats { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin-top: var(--space-6); }
.case-feature__figure { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.case-feature__label { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.15rem; }
.case-feature__button { margin-top: var(--space-7); }

/* Secondary button: outline, sharp corners. Red fill stays reserved for
   the page's primary CTA. */
.cs-button--outline {
  background: transparent; color: var(--color-fg);
  border: 1px solid var(--color-fg);
  font-size: 0.9375rem; padding: 0.95rem 2rem;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.cs-button--outline:hover, .cs-button--outline:focus-visible { background: var(--color-fg); color: var(--color-bg); }