/* ============================================================
   Case-study detail page
   ============================================================ */

/* --- HERO (Smriti-style: image + lean meta) --- */
.cs-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(6.5rem, 4.5rem + 6vw, 9.5rem) var(--gutter) clamp(2rem, 1rem + 3vw, 4rem);
}
.cs-back {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.cs-back:hover { color: var(--ink); }
.cs-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.cs-hero__badge img { height: 30px; width: auto; border-radius: 7px; margin-bottom: 1.4rem; display: block; }
.cs-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.cs-hero__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent-ink); }
.cs-hero__sub { margin-top: 1.4rem; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 50ch; }
.cs-hero__actions { margin-top: 2rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.cs-meta {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1.4rem 2.5rem;
  justify-content: start;
}
.cs-meta dt { font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.25rem; }
.cs-meta dd { font-size: var(--step-0); color: var(--ink); font-weight: 500; }
.cs-hero__media { display: flex; justify-content: center; }
.cs-phone {
  padding: 8px;
  border-radius: 34px;
  background: #0e0e0d;
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 0 44px 74px -32px rgba(27,26,23,0.5);
  max-width: 290px;
}
.cs-phone img { width: 100%; height: auto; border-radius: 26px; display: block; }

/* --- LAYOUT: sticky left nav + content --- */
.cs-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--gutter) var(--section-y);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(2rem, 1rem + 5vw, 7rem);
  border-top: 1px solid var(--hairline);
}
.cs-nav { position: sticky; top: 96px; align-self: start; height: max-content; }
.cs-nav__label { font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 1rem; }
.cs-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-left: 1px solid var(--hairline); }
.cs-nav a {
  display: block;
  padding: 0.55rem 0 0.55rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--step--1);
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cs-nav a:hover { color: var(--ink); }
.cs-nav a.is-active { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.cs-content { min-width: 0; max-width: 68ch; }

/* --- SECTIONS / PROSE --- */
.cs-section { padding: clamp(1.75rem, 1.4rem + 2.1vw, 3.15rem) 0; scroll-margin-top: 96px; }
.cs-section:first-child { padding-top: 0; }
.cs-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.cs-content h2 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent-ink); }
.cs-subhead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(2rem, 1.4rem + 1.6vw, 2.8rem) 0 1.2rem;
}
.cs-content > p, .cs-step p { font-size: var(--step-0); line-height: 1.65; color: var(--ink-soft); margin-bottom: 1.1rem; }
.cs-content strong { color: var(--ink); font-weight: 500; }
.cs-content em { font-style: italic; }
.cs-kicker { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.8rem; }

/* --- SNAPSHOT --- */
.cs-snapshot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cs-snap { padding: 1.4rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper-2); }
.cs-snap__k { display: block; font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.6rem; }
.cs-snap p { font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); margin: 0; }
.cs-snap--accent { background: color-mix(in srgb, var(--accent) 8%, var(--paper-2)); border-color: color-mix(in srgb, var(--accent) 30%, var(--hairline)); }
.cs-snap--accent p strong { color: var(--accent-ink); }

/* --- QUOTE --- */
.cs-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
}
.cs-quote--sm { font-size: var(--step-0); margin: 1.2rem 0; }

/* --- STEPS --- */
.cs-steps { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-direction: column; gap: 1.8rem; }
.cs-step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; }
.cs-step__n { font-family: var(--font-accent); font-size: var(--step-2); line-height: 1; color: var(--accent-ink); min-width: 1.6ch; }
.cs-step h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin-bottom: 0.4rem; }
.cs-list { margin: 0.5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.cs-list li { font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.cs-list li strong { color: var(--ink); font-weight: 500; }

/* --- SHOTS --- */
.cs-shots { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; margin-top: 1.6rem; align-items: stretch; }
.cs-shot { margin: 0; }
.cs-shot img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--hairline); display: block; }
.cs-shot figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted); }
.cs-shot--ph {
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--hairline));
  border-radius: 18px;
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--muted); font-size: var(--step--1); text-align: center; padding: 2rem;
}

/* --- METRICS --- */
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.6rem 0; }
.cs-metric { padding: 1.5rem 1.4rem; border-radius: 14px; border: 1px solid var(--hairline); background: var(--paper-2); }
.cs-metric__num { display: block; font-family: var(--font-accent); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); color: var(--accent-ink); line-height: 1.12; margin-bottom: 0.5rem; }
.cs-metric__label { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }

/* --- REVIEWS --- */
.cs-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.4rem; }
.cs-review { margin: 0; padding: 1.5rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper-2); }
.cs-review p { font-family: var(--font-accent); font-style: italic; font-size: var(--step-0); color: var(--ink); margin-bottom: 0.9rem; line-height: 1.4; }
.cs-review cite { font-style: normal; font-size: var(--step--1); color: var(--muted); }

/* --- CALLOUT --- */
.cs-callout { padding: 1.8rem; border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--paper-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--hairline)); }
.cs-callout__k { display: block; font-family: var(--font-display); font-weight: 600; margin-bottom: 0.6rem; }
.cs-callout p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* --- NEXT --- */
.cs-next { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.cs-next__link { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--ink); }
.cs-next__link:hover span { color: var(--ink); }
.cs-next__link span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--accent-ink); margin-top: 0.2rem; transition: color 0.2s ease; }
.cs-next__back { font-size: var(--step--1); color: var(--muted); }
.cs-next__back:hover { color: var(--ink); }

/* Working-file entry point (Figma) - a full-width resource bar, quiet, not a CTA */
.cs-figma {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.4rem;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--paper-2); text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-figma:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -20px rgba(27, 26, 23, 0.4);
}
.cs-figma__lead { display: inline-flex; align-items: center; gap: 0.9rem; }
.cs-figma__mark { flex: none; display: grid; place-items: center; }
.cs-figma__mark svg { display: block; }
.cs-figma__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); line-height: 1.2; }
.cs-figma__meta { font-family: var(--font-body); font-size: var(--step--1); color: var(--accent-ink); white-space: nowrap; }
@media (max-width: 560px) {
  .cs-figma { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
}

/* ============================================================
   Tap-to-Pay additions - video block + Smriti-style flow
   (scoped to new classes / .cs-main--flow; Cars24 untouched)
   ============================================================ */

/* --- WATCH / video --- */
.cs-watch {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.cs-watch__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1.4rem;
}
.cs-watch__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent-ink); }
.cs-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background: #0e0e0d;
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 70px -34px rgba(27,26,23,0.5);
}
.cs-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82); }
.cs-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -8px rgba(36,54,216,0.7);
  transition: transform 0.3s var(--ease), background 0.3s ease;
}
.cs-video:hover .cs-video__play, .cs-video:focus-visible .cs-video__play { transform: scale(1.08); background: var(--accent-ink); }
.cs-video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.cs-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video.is-playing { cursor: default; }

/* --- FLOW: un-cap the content column, keep prose readable --- */
.cs-main--flow .cs-content { max-width: none; }
.cs-main--flow .cs-section { max-width: none; }
.cs-main--flow #flow { max-width: none; }
.cs-main--flow #flow > .cs-prose { max-width: none; }

.cs-flow { margin-top: 1.8rem; display: flex; flex-direction: column; gap: clamp(1.75rem, 1rem + 2.8vw, 3.15rem); }
.cs-flow__head { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline; margin-bottom: 1.7rem; }
.cs-flow__idx { font-family: var(--font-accent); font-style: italic; font-size: var(--step-2); line-height: 1; color: var(--accent-ink); }
.cs-flow__label { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.cs-flow__desc { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; }
.cs-flow__desc em { font-style: italic; }

.cs-flow__phones { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; }
.cs-flow__phones + .cs-flow__phones { margin-top: 1.1rem; }
.cs-shot-phone { margin: 0; flex: 0 0 clamp(146px, 20vw, 178px); width: clamp(146px, 20vw, 178px); }
.cs-shot-phone img {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  box-shadow: 0 26px 44px -30px rgba(27,26,23,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cs-shot-phone:hover img {
  transform: translateY(-6px);
  box-shadow: 0 42px 62px -28px rgba(27,26,23,0.55);
}
.cs-shot-phone figcaption { margin-top: 0.7rem; font-size: calc(var(--step--1) * 0.95); line-height: 1.4; color: var(--muted); }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .cs-hero__grid { grid-template-columns: 1fr; }
  .cs-hero__media { justify-content: flex-start; }
  .cs-meta { grid-template-columns: repeat(2, auto); }
  .cs-layout { grid-template-columns: 1fr; }
  .cs-nav { display: none; }
  .cs-content { max-width: none; }
  .cs-snapshot, .cs-metrics, .cs-reviews, .cs-shots { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Stack screen shots vertically on mobile (no horizontal scroll): everything
     stays visible, in reading order. Matches the before/after arrow-flow width. */
  .cs-flow__phones { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 1.5rem; }
  .cs-flow__phones .cs-shot-phone { flex: 0 0 auto; width: 62%; }
}

/* Mobile-only: keep hero text left-aligned (like the rest of the page); only the
   hero image centres, and the CTAs go full-width. */
@media (max-width: 600px) {
  .cs-hero__actions { flex-direction: column; align-items: stretch; }
  .cs-hero__actions .btn { width: 100%; text-align: center; }
  .cs-hero__media { justify-content: center; }
}

/* Concise mobile copy: full paragraph on desktop, tighter rewrite on mobile */
.only-mobile { display: none; }
@media (max-width: 600px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}

/* ============================================================
   Edenred payroll case study - web frame, before/after, RAT, data
   ============================================================ */

/* all detail-page content runs full width for a consistent edge */
.cs-main--flow .cs-section--wide { max-width: none; }
.cs-main--flow .cs-section--wide > .cs-prose { max-width: none; }
.cs-main--flow .cs-section--wide > .cs-next { max-width: none; }

/* Hero browser frame (desktop screen) */
.cs-web {
  border-radius: 14px; overflow: hidden; width: 100%; max-width: 560px;
  background: #fff; border: 1px solid var(--hairline);
  box-shadow: 0 44px 74px -32px rgba(27,26,23,0.5);
}
.cs-web__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 13px; background: #f1eee8; border-bottom: 1px solid var(--hairline); }
.cs-web__bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfc8ba; display: block; }
.cs-web img { width: 100%; height: auto; display: block; }

/* Solution blocks with before/after */
.cs-sols { display: flex; flex-direction: column; gap: clamp(1.75rem, 1rem + 2.1vw, 2.8rem); margin-top: 1.6rem; }
.cs-sol__head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; }
.cs-sol__idx { font-family: var(--font-accent); font-style: italic; font-size: var(--step-2); line-height: 1; color: var(--accent-ink); }
.cs-sol__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.cs-sol__desc { font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); margin: 0; }
.cs-sol__desc em { font-style: italic; }

.cs-ba { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.3rem; }
.cs-ba figure { margin: 0; }
.cs-ba__tag { display: inline-block; font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 0.5rem; }
.cs-ba__tag--before { color: var(--muted); }
.cs-ba__tag--after { color: var(--accent-ink); }
.cs-ba img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--hairline); background: var(--paper-2); }
.cs-ba .after img { border-color: color-mix(in srgb, var(--accent) 32%, var(--hairline)); box-shadow: 0 22px 40px -26px rgba(36,54,216,0.4); }

/* Riskiest assumption cards */
.cs-rats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 1.6rem; }
.cs-rat { padding: 1.4rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper-2); display: flex; flex-direction: column; gap: 0.7rem; }
.cs-rat__k { font-size: calc(var(--step--1) * 0.82); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-ink); font-weight: 500; }
.cs-rat__risk { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.25; }
.cs-rat__test { font-size: var(--step--1); line-height: 1.5; color: var(--muted); margin: 0; }
.cs-rat__result { margin-top: auto; font-size: var(--step--1); line-height: 1.45; padding-top: 0.75rem; border-top: 1px solid var(--hairline); color: var(--ink); }
.cs-rat__result strong { color: #1f7a4d; font-weight: 600; }

/* Data tables */
.cs-tablewrap { margin-top: 1.4rem; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 14px; }
.cs-tablewrap + .cs-tablewrap { margin-top: 1.2rem; }
.cs-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 660px; }
.cs-table caption { text-align: left; padding: 0.85rem 1rem; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); background: var(--paper-2); border-bottom: 1px solid var(--hairline); }
.cs-table th, .cs-table td { padding: 0.65rem 1rem; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.cs-table thead th { color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: calc(var(--step--1) * 0.82); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table td.num, .cs-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cs-table .rowhead { font-weight: 500; color: var(--ink); }
.cs-table .pre  { background: color-mix(in srgb, #cfe0f5 26%, transparent); }
.cs-table .post { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cs-chg { font-weight: 600; }
.cs-chg--good { color: #1f7a4d; }
.cs-chg--warn { color: #b23b4e; }
.cs-chg--info { color: var(--accent-ink); }
.cs-table__note { font-size: var(--step--1); color: var(--muted); margin-top: 0.8rem; line-height: 1.5; }

@media (max-width: 720px) {
  .cs-ba, .cs-rats { grid-template-columns: 1fr; }
  .cs-sol__head { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Larger phones for paired video/sheet walkthroughs (Cars24), desktop only */
@media (min-width: 721px) {
  .cs-flow--pairs .cs-shot-phone { flex: 0 0 clamp(170px, 26vw, 240px); width: clamp(170px, 26vw, 240px); }
}

/* --- Usability test results (Cars24 reviews) --- */
.cs-ut { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.6rem; }
.cs-ut__card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.cs-ut__icon { font-size: 1.5rem; line-height: 1; }
.cs-ut__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); }
.cs-ut__body { font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); margin: 0; }
.cs-ut__good { color: #1f7a4d; font-weight: 600; }
.cs-ut__warn { color: #b3661e; font-weight: 600; }
.cs-ut__quote {
  margin: 0; padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-accent); font-style: italic;
  font-size: var(--step--1); line-height: 1.5; color: var(--ink);
}
@media (max-width: 720px) { .cs-ut { grid-template-columns: 1fr; } }

/* --- Full-width annotated figures (Cars24 Phase 1) --- */
.cs-figure { margin: 1.4rem 0 0; }
.cs-figure img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--hairline); background: var(--paper-2); }
.cs-figure figcaption { margin-top: 0.65rem; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
.cs-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.4rem; }
@media (max-width: 720px) { .cs-figrow { grid-template-columns: 1fr; } }

/* --- Research comparison chart: UK vs India (Tide) --- */
.tp-chart { margin: 2.2rem 0 0.5rem; padding: 1.7rem 1.8rem 1.5rem; border: 1px solid var(--hairline); border-radius: 16px; background: var(--paper-2); --india: #E0890F; }
.tp-chart__cap { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); margin-bottom: 1rem; }
.tp-legend { display: flex; gap: 1.3rem; margin-bottom: 1.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.tp-key { display: inline-flex; align-items: center; gap: 0.45rem; }
.tp-key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.tp-key--uk { --c: var(--accent); }
.tp-key--in { --c: var(--india); }
.tp-groups { display: flex; align-items: flex-end; justify-content: space-around; gap: 0.5rem; height: 220px; padding-top: 1.7rem; background-image: repeating-linear-gradient(to top, var(--hairline) 0 1px, transparent 1px 55px); background-position: left bottom; }
.tp-group { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.tp-bars { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 100%; }
.tp-bar { position: relative; width: 40px; height: 0; border-radius: 5px 5px 0 0; background: var(--c); transition: height 0.9s var(--ease); }
.tp-bar--uk { --c: var(--accent); }
.tp-bar--in { --c: var(--india); }
.tp-chart.is-in .tp-bar { height: calc(var(--v) * 2.1px); }
.tp-bar--na, .tp-chart.is-in .tp-bar--na { height: 4px; background: var(--hairline); }
.tp-val { position: absolute; top: -1.55em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity 0.5s ease 0.55s; }
.tp-bar--na .tp-val { color: var(--muted); font-weight: 500; }
.tp-chart.is-in .tp-val { opacity: 1; }
.tp-cat { margin: 0.95rem 0 0; font-size: var(--step--1); line-height: 1.35; color: var(--ink-soft); text-align: center; max-width: 16ch; }
.tp-note { margin: 1.4rem 0 0.35rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.tp-src { margin: 0; font-size: 0.72rem; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .tp-bar, .tp-val { transition: none; } }
@media (max-width: 520px) { .tp-chart { padding: 1.3rem 1.1rem; } .tp-bar { width: 30px; } .tp-bars { gap: 8px; } }

/* --- Constraints: each rule + its supporting screens (Tide) --- */
.cs-rules { margin: 1.8rem 0 0; display: flex; flex-direction: column; gap: 2.8rem; }
.cs-rule__text { margin: 0; font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); }
.cs-rule__text strong { color: var(--ink); font-weight: 600; }
.cs-rule__shots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.1rem; margin-top: 1.3rem; }
.cs-rule__shots .cs-shot-phone { flex: 0 0 clamp(150px, 20vw, 182px); width: clamp(150px, 20vw, 182px); }
.cs-rule__cap { margin: 1rem 0 0; text-align: center; font-size: calc(var(--step--1) * 0.95); line-height: 1.45; color: var(--muted); }

/* rule 2: arrow from the contactless row to Apple's video */
.cs-rule__arrowflow { position: relative; width: max-content; max-width: 100%; margin: 1.3rem auto 0; display: flex; align-items: flex-start; justify-content: center; gap: 120px; }
.cs-rule__arrowflow .cs-shot-phone { flex: 0 0 180px; width: 180px; position: relative; }
.cs-rule__hi { position: absolute; left: 4%; right: 4%; top: 33.5%; height: 12%; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none; opacity: 0; transition: opacity 0.5s ease 0.2s; }
.cs-rule.is-in .cs-rule__hi, .cs-rule__arrowflow.is-in .cs-rule__hi { opacity: 1; }
.cs-rule__arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs-rule__arrow path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.cs-rule.is-in .cs-rule__arrow path, .cs-rule__arrowflow.is-in .cs-rule__arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) 0.4s; }
@media (prefers-reduced-motion: reduce) { .cs-rule__arrow path { stroke-dashoffset: 0; transition: none; } .cs-rule__hi { opacity: 1; transition: none; } }
@media (max-width: 600px) {
  .cs-rule__arrowflow { flex-direction: column; gap: 1.6rem; width: 100%; }
  .cs-rule__arrowflow .cs-shot-phone { flex: 0 0 auto; width: 62%; margin: 0 auto; }
  .cs-rule__arrow { display: none; }
}

/* --- Concept prototype embed (Edenred, self-initiated, not shipped) --- */
.cs-proto { margin: 1.7rem 0 0.4rem; border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: var(--paper-2); box-shadow: 0 34px 66px -38px rgba(27,26,23,0.42); }
.cs-proto__bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: #ECEFF3; border-bottom: 1px solid var(--hairline); }
.cs-proto__dots { display: inline-flex; gap: 7px; flex: 0 0 auto; }
.cs-proto__dots i { width: 11px; height: 11px; border-radius: 50%; background: #c9d0da; }
.cs-proto__url { font-size: var(--step--1); color: var(--muted); font-family: var(--font-body); }
.cs-proto__flag { margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #b57708; background: #FDF3E1; border: 1px solid #f0dca8; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cs-proto__video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1088; background: #0d1220; }
.cs-proto__cap { margin: 1rem 0 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-soft); }
.cs-proto__cap a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .cs-proto__url { display: none; } }

/* ============================================================
   Arabic RTL case study - guide figures, principle list, compare
   ============================================================ */
.cs-figure { margin: 1.8rem 0 0; }
.cs-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline); border-radius: 14px; background: #fff;
}
.cs-figure figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.cs-guide { display: grid; gap: clamp(2.4rem, 1.4rem + 3vw, 3.8rem); margin-top: 2rem; }
.cs-guide__item h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
.cs-guide__item h3 .cs-guide__num { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--accent-ink); margin-right: 0.45rem; }
.cs-guide__item > p { color: var(--ink-soft); margin: 0; }
.cs-guide__item > p strong { color: var(--ink); font-weight: 600; }

/* Projected bars (hatched) for forward-looking chart data */
.tp-bar--proj { background: repeating-linear-gradient(135deg, var(--accent) 0 5px, color-mix(in srgb, var(--accent) 38%, var(--paper-2)) 5px 10px); }

/* Two figures side by side (extra RTL examples) */
.cs-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; }
.cs-figrow .cs-figure { margin: 0; }
@media (max-width: 560px) { .cs-figrow { grid-template-columns: 1fr; gap: 1.4rem; } }

/* English vs Arabic side-by-side screen comparison */
.cs-compare { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-top: 2rem; }
.cs-compare__item { max-width: 480px; margin-inline: auto; }
.cs-compare__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 0.4rem + 1.5vw, 1.6rem); align-items: start; }
.cs-compare__side { margin: 0; }
.cs-compare__tag { display: block; margin-bottom: 0.5rem; font-size: calc(var(--step--1) * 0.76); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cs-compare__side--ar .cs-compare__tag { color: var(--accent-ink); }
.cs-compare__side img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hairline); display: block; background: #fff; }
.cs-compare__cap { margin: 0.9rem auto 0; max-width: 44ch; text-align: center; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }

/* Hero phone: auto English -> Arabic crossfade (equal-size stacked stage) */
.cs-phone--fade { width: min(290px, 100%); }
.cs-phone--fade .cs-phone__stage { position: relative; aspect-ratio: 360 / 780; border-radius: 26px; overflow: hidden; }
.cs-phone--fade .cs-phone__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-phone--fade .cs-phone__screen--ar { opacity: 0; transition: opacity 0.85s ease-in-out; }
.cs-phone--fade.is-ar .cs-phone__screen--ar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cs-phone--fade .cs-phone__screen--ar { transition: none; } }

/* Meta: two columns, each answer on one line */
.cs-meta--wide { grid-template-columns: repeat(2, auto); }
.cs-meta--wide dd { white-space: nowrap; }

/* Clickable link inside a callout */
.cs-callout a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Compliance & delivery: breathing room above the before/after cards */
#compliance .cs-snapshot,
#delivery .cs-snapshot { margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); }

/* Hover lift + shadow on the UI comparison screens only (Tide style).
   The illustration/board figures stay plain (no shadow, no hover). */
.cs-compare__side img {
  box-shadow: 0 26px 44px -30px rgba(27,26,23,0.5);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cs-compare__side:hover img {
  transform: translateY(-6px);
  box-shadow: 0 42px 62px -28px rgba(27,26,23,0.55);
}

/* Chart caption: space it off the bars like the other chart's note */
.tp-groups + .tp-src { margin-top: 1.4rem; }

/* 100% stacked share bars (Arabic vs non-Arabic per 100 workers) */
.cs-share { margin: 2.2rem 0 0.5rem; padding: 1.7rem 1.8rem 1.5rem; border: 1px solid var(--hairline); border-radius: 16px; background: var(--paper-2); }
.cs-share__legend { display: flex; flex-wrap: wrap; gap: 1.3rem; margin: 0.3rem 0 1.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.cs-share__key { display: inline-flex; align-items: center; gap: 0.45rem; }
.cs-share__key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.cs-share__key--ar { --c: var(--accent); }
.cs-share__key--other { --c: #DAD4C6; }
.cs-share__rows { display: flex; flex-direction: column; gap: 1rem; }
.cs-share__row { display: grid; grid-template-columns: 68px 1fr; gap: 1rem; align-items: center; }
.cs-share__label { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.cs-share__bar { display: flex; height: 42px; border-radius: 9px; overflow: hidden; background: var(--hairline); }
.cs-share__seg { display: flex; align-items: center; justify-content: center; width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); white-space: nowrap; overflow: hidden; transition: width 0.9s var(--ease); }
.cs-share.is-in .cs-share__seg { width: calc(var(--w) * 1%); }
.cs-share__seg--ar { background: var(--accent); color: #fff; }
.cs-share__seg--other { background: #E7E2D6; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .cs-share__seg { transition: none; } }