/* ------------------------------------------------------------------
   Case study layout — centred header, chapter list on the left,
   content on the right. Inherits tokens, header, badge and footer
   from home.css so case studies match the homepage.
   Type sticks to the homepage scale: 21px/500 headings, 15px/400 body,
   14px and 13px for small text. The page title (25px) and intro (18px)
   are a step larger. Weights 400 and 500 only.
------------------------------------------------------------------- */

.cs {
  max-width: 1040px;
  margin: 72px auto 0;
}

.cs__back {
  display: block;
  width: fit-content;
  margin: 0 auto 48px;
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: none;
}

.cs__back:hover { color: var(--ink-soft); }

/* ---------- header ---------- */

.cs__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 76px;
  text-align: center;
}

.cs__eyebrow {
  margin: 0;
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-sub);
}

.cs__title {
  margin: 0;
  font-family: var(--inter);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
}

.cs__lede {
  margin: 0;
  font-size: 18px;
  text-wrap: pretty;
  line-height: 1.6;
  color: var(--brand-sub);
}

.cs__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 40px;
  margin: 12px 0 0;
}

/* Role and Tools stacked in one centred column. */
.cs__meta--stack {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cs__meta dt {
  margin-bottom: 4px;
  font-family: var(--inter);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}

.cs__meta dd {
  margin: 0;
  font-family: var(--inter);
  font-size: 16px;
  font-weight: 400;
  color: var(--brand-sub);
}

/* ---------- two-column body ---------- */

.cs__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .cs__body {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 64px;
  }
}

/* Chapter list */

.chapters {
  align-self: start;
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapters__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink-faint);
  font-family: var(--inter);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.chapters__num {
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.chapters__link:hover { color: var(--ink-soft); }

.chapters__link[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Chapter panels */

.chapter {
  display: none;
  flex-direction: column;
  gap: 20px;
  max-width: 64ch;
}

.chapter[data-active] { display: flex; }

.chapter__title {
  margin: 0 0 4px;
  font-family: var(--inter);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.chapter__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-sub);
}

/* Sub-headings: body size, set apart by colour like the active filter tab. */
.chapter h3 {
  margin: 12px 0 0;
  font-family: var(--inter);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

.chapter__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-sub);
}

.chapter__list li + li { margin-top: 6px; }

.chapter__figure { margin: 8px 0 0; }

.chapter__figure img,
.chapter__placeholder {
  display: block;
  width: 100%;
  border-radius: 20px;
  background: var(--paper-sunk);
}

.chapter__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 24px;
  font-family: var(--inter);
  font-size: 14px;
  text-align: center;
  color: var(--ink-faint);
}

.chapter__caption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-faint);
}

.chapter a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 3px;
}

.chapter a:hover { text-decoration-color: currentColor; }

/* Prev / next chapter */

.chapter__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.link-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-family: var(--inter);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.link-quiet:hover { color: var(--ink); }

/* Next project */

.cs__next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 80px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs__next:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.cs__next small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--inter);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-faint);
}

.cs__next strong {
  font-family: var(--inter);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cs__next span:last-child {
  font-family: var(--inter);
  font-size: 21px;
  color: var(--ink);
}

/* Mobile: chapter list becomes a horizontal scroller */

@media (max-width: 1023px) {
  .chapters {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters__link {
    width: auto;
    padding: 11px 20px 11px 0;
    border-bottom: 0;
    white-space: nowrap;
  }
  .chapters__link[aria-selected="true"] {
    text-decoration: underline;
    text-underline-offset: 8px;
  }
}

@media (max-width: 680px) {
  .cs { margin-top: 40px; }
  .cs__head { padding-bottom: 60px; }
  .cs__body { padding-top: 40px; }
  .cs__next { margin-top: 56px; padding: 22px 24px; }
}

/* ---------- what changed ----------
   Short numbered summary under the before/after emails, for case
   studies that don't need full chapters. */

.changes {
  max-width: 920px;
  margin: 80px auto 0;
}

.changes__title {
  margin: 0 0 56px;
  font-family: var(--inter);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink);
}

.changes__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.changes__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--inter);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-faint);
}

.changes__list h3 {
  margin: 0 0 10px;
  font-family: var(--inter);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.changes__list p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--brand-sub);
}

@media (max-width: 768px) {
  .changes { margin-top: 40px; }
  .changes__title { margin-bottom: 40px; }
  .changes__list { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- case study components ---------- */

/* Email screenshots: framed, capped so tall emails don't dominate. */
.chapter__figure--email img {
  max-height: 720px;
  object-fit: contain;
  padding: 24px;
  border: 1px solid var(--line);
}

/* Live HTML email in a chapter, framed to match the screenshots. */
.chapter__email {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper-sunk);
}

.chapter__email .cs__email-wrap {
  max-width: 440px;
  margin: 0 auto;
}

.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.figure-pair .chapter__figure--email img { padding: 16px; }

.chapter__caption strong { font-weight: 500; color: var(--ink); }

/* Numbered audit notes under the old email */
.annotations {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: note;
}

.annotations li {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  counter-increment: note;
}

.annotations li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--inter);
  font-size: 12px;
  font-weight: 500;
}

.annotations strong,
.chapter__list strong { font-weight: 500; color: var(--ink); }

/* Before / after copy */
.copy-pairs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.copy-pair {
  display: grid;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.copy-pair p { margin: 0; }

.copy-pair__label {
  font-family: var(--inter);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.copy-pair__before,
.copy-pair__after {
  display: flex;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
}

.copy-pair__before span,
.copy-pair__after span {
  flex-shrink: 0;
  width: 52px;
  padding-top: 3px;
  font-family: var(--inter);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.copy-pair__before {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink-faint) 60%, transparent);
}

.copy-pair__before span { text-decoration: none; }

.copy-pair__after {
  font-family: var(--inter);
  font-weight: 500;
  color: var(--ink);
}

.copy-pair__why {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-sub);
}

/* Send flow */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: var(--paper-sunk);
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}

.flow span {
  font-size: 12px;
  color: var(--ink-faint);
}

/* Code sample */
.code {
  margin: 0;
  padding: 22px 24px;
  overflow-x: auto;
  border-radius: 16px;
  background: #14171c;
  color: #e6e8eb;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}

.code__c { color: #7d8590; }

@media (max-width: 680px) {
  .figure-pair,
  .flow { grid-template-columns: 1fr; }
  .chapter__figure--email img,
  .chapter__email { padding: 12px; }
  .copy-pair { padding: 20px; }
  .copy-pair__before,
  .copy-pair__after { flex-direction: column; gap: 4px; }
}

/* ---------- before / after hero ---------- */

.cs__hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.cs__shot { margin: 0; }

.cs__tag {
  display: block;
  margin: 0 0 12px;
  font-family: var(--inter);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-soft);
}

.cs__tag--after { color: var(--ink); }

/* Same-size frames so the two emails compare at a glance. */
.cs__frame {
  aspect-ratio: 4 / 5;
  padding: 28px;
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper-sunk);
}

.cs__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Live HTML email, rendered wider than the frame and scaled down so its
   page background shows. case-study.js sets the scale and heights. */
.cs__email-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cs__email {
  position: absolute;
  top: 0;
  left: 0;
  width: 680px;
  height: 900px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.cs__shot figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (max-width: 680px) {
  .cs__hero { grid-template-columns: 1fr; margin-bottom: 40px; }
  .cs__frame { padding: 16px; }
}

/* ---------- keep scrolling cue ---------- */

.scroll-cue {
  position: fixed;
  left: 32px;
  bottom: 40px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--inter);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-cue:hover { color: var(--ink-soft); }

.scroll-cue__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* A thin track with a dot travelling down it. */
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: var(--line);
}

.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  width: 1px;
  height: 16px;
  background: var(--ink-soft);
  animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
  to { transform: translateY(64px); }
}

.scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (max-width: 680px) {
  .scroll-cue { display: none; }
}

/* ---------- desktop / mobile preview toggle ---------- */

.cs__shot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.cs__shot-bar .cs__tag { margin: 0; }

.device-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--paper-sunk);
}

.device-toggle button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
}

.device-toggle button:hover { color: var(--ink); }

.device-toggle button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.device-toggle svg { width: 18px; height: 18px; }

/* Mobile view: the email renders at phone width inside a narrower column. */
.is-mobile .cs__email { width: 375px; }
.cs__shot.is-mobile .cs__email-wrap { max-width: 62%; margin: 0 auto; }
.cs__shot.is-mobile .cs__frame img { max-width: 62%; margin: 0 auto; }
.chapter__figure.is-mobile .cs__email-wrap { max-width: 300px; }

/* 20px less space between the header and a single preview. */
.cs__head--tight { padding-bottom: 56px; }

@media (max-width: 680px) {
  .cs__head--tight { padding-bottom: 40px; }
}

/* One preview in the hero, centred, with a button underneath. */
.cs__hero--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin: 0 auto 32px;
}

/* A preview that opens the full email when clicked. */
a.cs__frame {
  display: block;
  cursor: pointer;
}

.cs__cta {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Same size as the homepage buttons. */
.cs__cta .badge {
  height: 34px;
  padding: 0 24px;
  font-size: 15px;
}

/* Three previews in the hero (e.g. desktop, mobile and a second variant). */
.cs__hero--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs__hero--three .cs__frame { padding: 20px; }
.cs__hero--three .cs__shot.is-mobile .cs__email-wrap { max-width: 72%; }

@media (max-width: 1023px) {
  .cs__hero--three { grid-template-columns: 1fr; }
}