/* =================================================================
   CUSTOMER STORIES (/customers/<slug>)
   Shared by every story page. Site tokens from styles.css; the
   comparison figure is .sxf in styles.css. A customer's own colours
   appear only on its logo tile, in its figures and on the advice card,
   set per page through the --cs-tile-*, --cs-advice-* and --dot
   tokens. The customer's words are the only text set in the serif.
================================================================= */
:root {
    --cs-ink:    rgb(18,18,18);
    --cs-ink-2:  rgb(92,92,92);
    --cs-ink-3:  rgb(110,110,110);
    --cs-blue:   #4043FF;
    --cs-blue-1: rgba(64,67,255,0.08);
    --cs-line:   rgba(0,0,0,0.08);
    --cs-base:   rgb(246,246,246);
    --cs-white:  #ffffff;
    --cs-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.05);
    /* Set per story */
    --cs-tile-bg:      #ffffff;
    --cs-tile-shadow:  0 1px 2px rgba(0,0,0,.04), 0 18px 40px rgba(0,0,0,.08);
    --cs-advice-bg:    #ffffff;
    --cs-advice-line:  rgba(0,0,0,.08);
    --cs-advice-ink:   var(--cs-ink);
    --cs-advice-ink-3: var(--cs-ink-3);
}

/* styles.css centres every <main> at 1080px. These sections run edge to edge. */
#cs-main { display:block; width:100%; max-width:none; margin:0; }
#cs-main:focus { outline:none; }
.cs-skip {
    position:absolute; left:16px; top:-64px; z-index:999;
    background:var(--cs-ink); color:#fff; border-radius:10px; padding:12px 18px;
    font-family:"Instrument Sans",sans-serif; font-size:14px; font-weight:600; transition:top .18s ease;
}
.cs-skip:focus { top:16px; outline:3px solid var(--cs-blue); outline-offset:3px; }

.cs-wrap { max-width:1120px; margin:0 auto; width:100%; }

/* ── HERO ───────────────────────────────────────────────── */
.cs-hero { padding:136px 24px 0; }
.cs-crumbs {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center; list-style:none; margin:0 0 28px; padding:0;
    font-family:"Inter",sans-serif; font-size:14px; color:var(--cs-ink-3);
}
.cs-crumbs a { color:var(--cs-ink-2); text-decoration:underline; text-decoration-color:rgba(0,0,0,.18); text-underline-offset:3px; }
.cs-crumbs a:hover { color:var(--cs-ink); text-decoration-color:currentColor; }
.cs-crumbs li + li::before { content:'/'; margin-right:8px; color:rgba(0,0,0,.25); }

.cs-hero-grid {
    display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:64px; align-items:end;
}
.cs-h1 {
    font-family:"Instrument Sans",sans-serif; font-weight:500;
    font-size:clamp(38px,5.4vw,66px); line-height:1.04; letter-spacing:-0.036em;
    color:var(--cs-ink); max-width:17ch; text-wrap:balance;
}
.cs-hero-sub {
    margin-top:26px; max-width:58ch;
    font-family:"Inter",sans-serif; font-size:19px; line-height:1.6; color:var(--cs-ink-2);
}
.cs-logo-tile {
    width:100%; aspect-ratio:1; border-radius:28px; overflow:hidden;
    background:var(--cs-tile-bg); border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--cs-tile-shadow);
}
.cs-logo-tile img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── THE COMPARISON (component styles in styles.css: .sxf) ── */
.cs-compare {
    margin-top:64px; background:var(--cs-white); border:1px solid var(--cs-line);
    border-radius:22px; box-shadow:var(--cs-shadow); overflow:hidden;
}
.cs-compare .sx-side--with { background:rgba(64,67,255,.03); }

/* ── STORY: facts rail + reading column ─────────────────── */
.cs-story { padding:104px 24px 112px; }
.cs-story-grid { display:grid; grid-template-columns:232px minmax(0,1fr); gap:80px; align-items:start; }
.cs-rail { position:sticky; top:112px; }
.cs-facts { margin:0; display:grid; gap:0; }
.cs-facts div { padding:14px 0; border-top:1px solid var(--cs-line); }
.cs-facts div:last-child { border-bottom:1px solid var(--cs-line); }
.cs-facts dt { font-family:"Inter",sans-serif; font-size:13px; color:var(--cs-ink-3); margin-bottom:4px; }
.cs-facts dd { margin:0; font-family:"Instrument Sans",sans-serif; font-size:15.5px; line-height:1.4; color:var(--cs-ink); font-weight:500; }
.cs-facts a { color:var(--cs-ink); text-decoration:underline; text-decoration-color:rgba(0,0,0,.2); text-underline-offset:3px; }
.cs-facts a:hover { text-decoration-color:currentColor; }

.cs-body { max-width:680px; }
.cs-h2 {
    font-family:"Instrument Sans",sans-serif; font-weight:500;
    font-size:clamp(27px,3vw,36px); line-height:1.12; letter-spacing:-0.03em; color:var(--cs-ink);
    margin:0 0 20px; text-wrap:balance;
}
.cs-body > .cs-h2:not(:first-child) { margin-top:88px; }
.cs-p { font-family:"Inter",sans-serif; font-size:18px; line-height:1.72; color:var(--cs-ink-2); }
.cs-p + .cs-p { margin-top:18px; }
.cs-p strong { color:var(--cs-ink); font-weight:600; }

/* Katlego's words */
.cs-quote { margin:36px 0; padding:0; border:0; }
.cs-quote p {
    font-family:"Instrument Serif",serif; font-weight:400; font-style:normal;
    font-size:clamp(23px,2.4vw,28px); line-height:1.38; letter-spacing:-0.005em; color:var(--cs-ink);
    text-indent:-0.42em;
}
.cs-quote footer, .cs-pull footer {
    margin-top:16px; font-family:"Inter",sans-serif; font-size:14.5px; color:var(--cs-ink-3);
}
.cs-quote footer b, .cs-pull footer b { color:var(--cs-ink); font-weight:600; }
.cs-pull { margin:56px 0 8px; padding:44px 0 0; border:0; border-top:2px solid var(--cs-ink); }
.cs-pull p {
    font-family:"Instrument Serif",serif; font-weight:400;
    font-size:clamp(34px,4.4vw,52px); line-height:1.1; letter-spacing:-0.015em; color:var(--cs-ink);
    text-indent:-0.4em; text-wrap:balance;
}

/* ── THE BRIEF, in Demosmith's Create Demo screen ───────── */
.cs-brief { margin:40px 0 8px; }
.cs-roles { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cs-role {
    display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; border-radius:99px;
    border:1px solid rgba(0,0,0,.1); background:var(--cs-white); color:var(--cs-ink-2);
    font-family:"Instrument Sans",sans-serif; font-size:15px; font-weight:500; cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.cs-role i { width:9px; height:9px; border-radius:50%; background:var(--dot, var(--cs-blue)); }
.cs-role:hover { color:var(--cs-ink); border-color:rgba(0,0,0,.2); }
.cs-role[aria-selected="true"] { background:var(--cs-ink); color:#fff; border-color:var(--cs-ink); }
.cs-role:focus-visible { outline:3px solid var(--cs-blue); outline-offset:2px; }

/* App tokens, as in the product */
.cs-app {
    --ds-indigo:#4F46E5; --ds-ink:#111827; --ds-body:#374151; --ds-muted:#6B7280;
    --ds-faint:#9CA3AF; --ds-line:#E5E7EB; --ds-wash:#F9FAFB; --ds-surface:#FFFFFF; --ds-raise:#F3F4F6;
    background:var(--ds-wash); border:1px solid var(--cs-line); border-radius:18px; overflow:hidden;
    box-shadow:0 2px 4px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.08);
}
.cs-app-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; background:var(--ds-surface); border-bottom:1px solid var(--ds-line); }
.cs-app-bar span { width:10px; height:10px; border-radius:50%; background:#E5E7EB; }
.cs-app-page { padding:20px; display:flex; flex-direction:column; gap:14px; }
.ds-pagehead { display:flex; align-items:center; gap:13px; background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:12px; padding:14px 16px; }
.ds-pagehead-ic { width:34px; height:34px; border-radius:10px; flex-shrink:0; background:var(--ds-indigo); display:flex; align-items:center; justify-content:center; }
.ds-pagehead-ic svg { width:17px; height:17px; color:#fff; }
.ds-h1 { font-family:"Instrument Sans",sans-serif; font-size:16px; font-weight:700; color:var(--ds-ink); letter-spacing:-0.02em; }
.ds-sub { font-family:"Inter",sans-serif; font-size:12px; color:var(--ds-muted); margin-top:2px; }
.ds-stepcount { margin-left:auto; font-family:"Inter",sans-serif; font-size:12.5px; color:var(--ds-muted); white-space:nowrap; }
.ds-card { background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:11px; }
.ds-rowlabel { display:flex; align-items:center; gap:10px; }
.ds-label { font-family:"Instrument Sans",sans-serif; font-size:12.5px; font-weight:600; color:var(--ds-body); }
.ds-enhance {
    margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px;
    border:1px solid var(--ds-line); background:var(--ds-surface);
    font-family:"Instrument Sans",sans-serif; font-size:12px; font-weight:600; color:var(--ds-faint);
}
.ds-enhance svg { width:12px; height:12px; }
.ds-textarea {
    border:1px solid var(--ds-line); border-radius:10px; background:var(--ds-surface); padding:13px;
    font-family:"Inter",sans-serif; font-size:14px; line-height:1.6; color:var(--ds-ink); min-height:98px;
}
.ds-caret {
    width:1.5px; height:16px; background:var(--ds-indigo); display:inline-block; vertical-align:text-bottom;
    margin-left:1px; animation:csCaret 1.1s steps(1) infinite;
}
@keyframes csCaret { 50% { opacity:0; } }
.ds-continue {
    display:flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:11px;
    background:var(--ds-indigo); color:#fff; font-family:"Instrument Sans",sans-serif; font-size:14px; font-weight:600;
}
.ds-continue svg { width:15px; height:15px; }
.cs-brief-moment { font-family:"Instrument Sans",sans-serif; font-size:19px; font-weight:500; color:var(--cs-ink); letter-spacing:-0.015em; margin:0 0 14px; }
.cs-brief figcaption { margin-top:14px; font-family:"Inter",sans-serif; font-size:13.5px; line-height:1.5; color:var(--cs-ink-3); }

/* ── RESULTS LEDGER ─────────────────────────────────────── */
.cs-ledger { margin:34px 0 0; display:grid; gap:0; }
.cs-ledger div { display:grid; grid-template-columns:132px minmax(0,1fr); gap:24px; align-items:baseline; padding:20px 0; border-top:1px solid var(--cs-line); }
.cs-ledger div:last-child { border-bottom:1px solid var(--cs-line); }
.cs-ledger dt {
    font-family:"Instrument Sans",sans-serif; font-size:44px; font-weight:500; letter-spacing:-0.04em; line-height:1;
    color:var(--cs-ink); font-variant-numeric:tabular-nums;
}
.cs-ledger dt.is-words { font-size:20px; letter-spacing:-0.015em; line-height:1.25; font-weight:600; }
.cs-ledger dd { margin:0; font-family:"Inter",sans-serif; font-size:16.5px; line-height:1.55; color:var(--cs-ink-2); }

/* ── ADVICE ─────────────────────────────────────────────── */
.cs-advice { margin:36px 0 0; padding:34px 34px 30px; background:var(--cs-advice-bg); border-radius:20px; border:1px solid var(--cs-advice-line); }
.cs-advice p {
    font-family:"Instrument Serif",serif; font-size:clamp(21px,2.2vw,25px); line-height:1.45; color:var(--cs-advice-ink);
    text-indent:-0.42em;
}
.cs-advice footer { display:flex; align-items:center; gap:14px; margin-top:22px; font-family:"Inter",sans-serif; font-size:14.5px; color:var(--cs-advice-ink-3); }
.cs-advice footer img { width:44px; height:44px; border-radius:11px; border:1px solid rgba(0,0,0,.06); }
.cs-advice footer b { display:block; color:var(--cs-advice-ink); font-weight:600; }

/* ── FAQ ────────────────────────────────────────────────── */
.cs-faq-sec { background:var(--cs-white); padding:104px 24px; }
.cs-faq-sec .cs-h2 { text-align:left; }
.cs-faq-grid { display:grid; grid-template-columns:232px minmax(0,1fr); gap:80px; }
.cs-faq { max-width:680px; }
.cs-faq details { border-top:1px solid var(--cs-line); }
.cs-faq details:last-child { border-bottom:1px solid var(--cs-line); }
.cs-faq summary {
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:22px 0; font-family:"Instrument Sans",sans-serif; font-size:19px; font-weight:500; color:var(--cs-ink); letter-spacing:-0.01em;
}
.cs-faq summary::-webkit-details-marker { display:none; }
.cs-faq summary:focus-visible { outline:3px solid var(--cs-blue); outline-offset:4px; border-radius:6px; }
.cs-faq summary svg { width:18px; height:18px; flex-shrink:0; color:var(--cs-ink-3); transition:transform .2s ease; }
.cs-faq details[open] summary svg { transform:rotate(45deg); }
.cs-faq details p { padding:0 0 24px; max-width:60ch; font-family:"Inter",sans-serif; font-size:17px; line-height:1.7; color:var(--cs-ink-2); }

/* ── CTA ────────────────────────────────────────────────── */
.cs-cta { padding:112px 24px 120px; }
.cs-cta-inner { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:end; }
.cs-cta h2 {
    font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:clamp(34px,4.6vw,56px);
    line-height:1.05; letter-spacing:-0.035em; color:var(--cs-ink); max-width:16ch;
}
.cs-cta p { margin-top:18px; max-width:52ch; font-family:"Inter",sans-serif; font-size:18px; line-height:1.6; color:var(--cs-ink-2); }
.cs-cta-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.cs-cta-note { margin-top:14px; font-family:"Inter",sans-serif; font-size:14px; color:var(--cs-ink-3); display:flex; align-items:center; gap:8px; }
.cs-cta-note svg { width:15px; height:15px; color:#16a34a; flex-shrink:0; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:980px) {
    .cs-hero-grid { grid-template-columns:minmax(0,1fr) 200px; gap:40px; }
    .cs-story-grid, .cs-faq-grid { grid-template-columns:minmax(0,1fr); gap:48px; }
    .cs-rail { position:static; }
    .cs-facts { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
    .cs-facts div:nth-last-child(2) { border-bottom:1px solid var(--cs-line); }
    .cs-faq-grid > div:first-child { display:none; }
    .cs-cta-inner { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:640px) {
    .cs-hero { padding-top:112px; }
    .cs-hero-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
    .cs-logo-tile { width:132px; border-radius:20px; order:-1; }
    .cs-hero-sub { font-size:17px; }
    .cs-compare { margin-top:40px; border-radius:18px; }
    .cs-story, .cs-faq-sec { padding:72px 20px; }
    .cs-cta { padding:80px 20px 96px; }
    .cs-facts { grid-template-columns:minmax(0,1fr); }
    .cs-facts div:nth-last-child(2) { border-bottom:0; }
    .cs-advice { padding:22px 18px; }
    .cs-ledger div { grid-template-columns:minmax(0,1fr); gap:8px; }
    .cs-ledger dt { font-size:38px; }
    .cs-p { font-size:17px; }
    .ds-stepcount { display:none; }
    .cs-quote p, .cs-pull p, .cs-advice p { text-indent:0; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-caret { animation:none; }
}