/* ================================================================
   cases.css — shared case-study stylesheet
   Reuses real tokens from css/style.css (--bg, --ink, --accent, etc)
   and real utility classes (.wrap, .eyebrow, .back-link, .mono, .close,
   .links, .bigname). Load AFTER style.css on every case-study page.

   .hl / .hl-mark are redeclared here unscoped, since in style.css
   they're currently scoped to ".quote blockquote .hl" only.

   .cs-about matches the shared "About the designer" block used across
   all case studies (see ConvertWay case study for the same markup).
   ================================================================ */

:root{
  --cs-red:#c23b3b; --cs-red-bg:#fbeaea;
  --cs-amber:#b8790a; --cs-amber-bg:#fdf3e3;
  --cs-green-bg:#e9f7ee;
}

.hl{ color:var(--accent); font-weight:600; }
.hl-mark{ font-weight:600; color:var(--ink); background:linear-gradient(transparent 58%, rgba(65,114,221,.22) 0); padding:0 1px; }

.cs-section{ padding:76px 0; border-bottom:1px solid var(--line); }
.cs-section:last-of-type{ border-bottom:none; }
.cs-h2{ font-family:var(--display); font-size:clamp(26px,3.2vw,34px); font-weight:700; letter-spacing:-.02em; margin-bottom:18px; }
.cs-lede{ font-size:18px; color:var(--ink-soft); /*max-width:680px;*/ margin-bottom:8px; line-height:1.6; }

/* ---------- HERO ---------- */
.cs-hero{ padding:52px 0 64px; }
.cs-hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.cs-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-soft); background:var(--card); }
.cs-hero h1{ font-family:var(--display); font-size:clamp(38px,5.4vw,58px); line-height:1.08; letter-spacing:-.03em; font-weight:700; /*max-width:780px;*/ margin-bottom:22px; }
.cs-hero .cs-lede{ font-size:19px; /*max-width:640px;*/ }
.cs-hero-strip{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }

  /* ---------- UTILITIES ---------- */
.pt-0{padding-top:0 !important}
.pb-0{padding-bottom:0 !important}

@media(max-width:720px){ .cs-hero-strip{ grid-template-columns:1fr; } }
.cs-hero-strip div{ background:var(--card); padding:18px 22px; }
.cs-stat-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; }
.cs-stat-value{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); }

/* ---------- BRIEF BOX ---------- */
.cs-brief-box{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 32px; margin-top:26px; }
.cs-brief-box ol{ margin:0; padding-left:20px; }
.cs-brief-box li{ margin-bottom:12px; color:var(--ink-soft); }
.cs-brief-box li:last-child{ margin-bottom:0; }
.cs-brief-box li strong{ color:var(--ink); }

/* ---------- THESIS BLOCK ---------- */
.cs-thesis{ background:var(--ink); color:#f2f1ee; border-radius:18px; padding:44px; margin-top:12px; position:relative; overflow:hidden; }
.cs-thesis::before{ content:""; position:absolute; top:-32%; right:-8%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(61,111,216,.22),transparent 62%); pointer-events:none; }
.cs-thesis .eyebrow{ color:var(--accent-3); position:relative; }
.cs-thesis .eyebrow::before{ background:var(--accent-3); }
.cs-thesis h2{ font-family:var(--display); color:#fff; font-size:28px; font-weight:800; letter-spacing:-.02em; margin-bottom:14px; position:relative; }
.cs-thesis p{ color:#cfcdc8; font-size:16.5px; /*max-width:720px;*/ position:relative; line-height:1.6; }

/* ---------- FINDINGS ---------- */
.cs-tier{ margin-top:52px; }
.cs-tier:first-of-type{ margin-top:36px; }
.cs-tier-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.cs-tier-badge{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius:6px; }
.cs-tier-badge.t1{ background:var(--cs-red-bg); color:var(--cs-red); }
.cs-tier-badge.t2{ background:var(--cs-amber-bg); color:var(--cs-amber); }
.cs-tier-badge.t3{ background:var(--cs-green-bg); color:var(--good); }
.cs-tier-title{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink-soft); }
.cs-findings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:720px){ .cs-findings-grid{ grid-template-columns:1fr; } }
.cs-finding{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; transition:border-color .4s var(--ease),box-shadow .4s var(--ease); }
.cs-finding:hover{ border-color:var(--line-2); box-shadow:0 20px 40px -26px rgba(31,50,110,.2); }
.cs-finding-id{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); margin-bottom:8px; display:block; }
.cs-finding h3{ font-family:var(--display); font-size:15.5px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.cs-finding p{ color:var(--ink-soft); font-size:14.5px; margin:0; line-height:1.55; }

/* ---------- PRIORITIZATION CALLOUT ---------- */
.cs-priority{ background:var(--accent-soft); border:1px solid var(--line-2); border-left:4px solid var(--accent); border-radius:12px; padding:30px 32px; margin-top:26px; }
.cs-priority .eyebrow{ margin-bottom:12px; }
.cs-priority p{ font-size:16.5px; color:var(--ink); margin:0; line-height:1.6; }

/* ---------- CONCEPT EXPLORATION ---------- */
.cs-concept{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:18px; transition:border-color .4s var(--ease); }
.cs-concept:hover{ border-color:var(--line-2); }
.cs-concept-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.cs-concept-head h3{ font-family:var(--display); font-size:17px; font-weight:700; }
.cs-concept-status{ font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 12px; border-radius:100px; }
.cs-concept-status.rejected{ background:var(--bg-tint); color:var(--ink-faint); }
.cs-concept-status.selected{ background:var(--cs-green-bg); color:var(--good); font-weight:700; }
.cs-concept p{ color:var(--ink-soft); margin:0 0 12px; font-size:15px; line-height:1.6; }
.cs-concept p:last-of-type{ margin-bottom:0; }
.cs-concept .cs-why strong{ color:var(--ink); }
.cs-concept-img{ width:100%; border-radius:12px; border:1px solid var(--line); margin-top:16px; display:block; }

/* ---------- BEFORE/AFTER ---------- */
.cs-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:8px; }
@media(max-width:820px){ .cs-compare-grid{ grid-template-columns:1fr; } }
.cs-compare-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; padding:6px 13px; border-radius:100px; display:inline-block; margin-bottom:12px; }
.cs-compare-label.before{ background:var(--cs-red-bg); color:var(--cs-red); }
.cs-compare-label.after{ background:var(--cs-green-bg); color:var(--good); }
.cs-compare-img{ width:100%; border-radius:14px; border:1px solid var(--line); box-shadow:0 26px 60px -34px rgba(31,50,110,.35); display:block; }
.cs-compare-notes{ margin-top:30px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 30px; }
.cs-compare-notes ul{ margin:0; padding-left:20px; }
.cs-compare-notes li{ color:var(--ink-soft); margin-bottom:11px; font-size:15px; line-height:1.6; }
.cs-compare-notes li:last-child{ margin-bottom:0; }
.cs-compare-notes li strong{ color:var(--ink); }
.cs-caption{ font-size:13px; color:var(--ink-faint); margin-top:12px; text-align:center; }

/* ---------- MAPPING TABLE ---------- */
.cs-map-table{ width:100%; border-collapse:collapse; margin-top:22px; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cs-map-table th{ text-align:left; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); background:var(--bg-tint); padding:14px 20px; border-bottom:1px solid var(--line); }
.cs-map-table td{ padding:16px 20px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:14.5px; vertical-align:top; line-height:1.55; }
.cs-map-table tr:last-child td{ border-bottom:none; }
.cs-map-table td:first-child{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--accent); white-space:nowrap; }
.cs-map-note{ margin-top:16px; font-size:13.5px; color:var(--ink-faint); font-style:italic; }

/* ---------- 90-DAY NOTE ---------- */
.cs-days{ display:grid; gap:18px; margin-top:26px; }
.cs-day-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; }
.cs-day-range{ font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; color:var(--accent); letter-spacing:.04em; margin-bottom:6px; display:block; }
.cs-day-card h3{ font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:12px; }
.cs-day-card p{ color:var(--ink-soft); font-size:15px; margin:0; line-height:1.6; }
.cs-success-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
@media(max-width:960px){ .cs-success-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ .cs-success-grid{ grid-template-columns:1fr; } }
.cs-success-num{ background:linear-gradient(150deg,var(--accent),#16307a 60%,#122658); color:#fff; border-radius:14px; padding:24px; }
.cs-success-num .n{ font-family:var(--display); font-weight:800; font-size:28px; display:block; margin-bottom:8px; }
.cs-success-num p{ color:#cfdcff; font-size:13.5px; margin:0; line-height:1.5; }

/* ---------- REFLECTION / OUTCOME ---------- */
.cs-note-box{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 34px; margin-top:8px; }
.cs-note-box p{ font-size:16px; color:var(--ink-soft); margin:0 0 14px; line-height:1.62; }
.cs-note-box p:last-child{ margin-bottom:0; }
.cs-note-box p strong{ color:var(--ink); }

/* ---------- ABOUT THE DESIGNER (shared template) ----------
   Matches the block used on convertway-full-process-case-study.html.
   If your primary cases.css already defines .cs-about elsewhere,
   remove this block to avoid duplicate rules. */
.cs-about{ background:var(--bg); padding:88px 0; border-bottom:1px solid var(--line); }
.cs-about__eyebrow{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; display:flex; align-items:center; gap:13px; font-family:'JetBrains Mono',monospace; }
.cs-about__eyebrow::before{ content:""; width:30px; height:2px; background:var(--accent); display:inline-block; }
.cs-about__title{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4.2vw,42px); letter-spacing:-.025em; line-height:1.18; max-width:820px; margin-bottom:26px; }
.cs-about__body{ font-size:17px; color:var(--ink-soft); max-width:760px; line-height:1.7; margin-bottom:16px; }
.cs-about__body:last-of-type{ margin-bottom:0; }
.cs-about__body b{ color:var(--ink); font-weight:700; }

/* ---------- CLOSE ---------- */
  .close{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--accent),#16307a 60%,#122658);color:#fff}
  .close::before{content:"";position:absolute;top:-40%;right:-10%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(143,176,255,.24),transparent 60%)}
  .close::after{content:"";/*position:absolute;*/inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 70% 100% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 70% 100% at 100% 0%,#000,transparent 70%)}
  .close .wrap{max-width:820px;position:relative}
  .close h2{font-family:var(--display);font-size:clamp(30px,4.6vw,50px);letter-spacing:-.03em;line-height:1.14;font-weight:800}
  .close .avail{margin-top:22px;font-size:18px;color:#cfdcff}
  .close .links{margin-top:40px;display:flex;gap:15px;flex-wrap:wrap}
  .close .links a{border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:13px 26px;font-weight:600;font-size:15px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s var(--ease);position:relative}
  .close .links a:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
  .close .links a:active{transform:translateY(-1px)}
  .close .links a.primary{background:#fff;color:var(--accent);border-color:#fff;box-shadow:0 6px 0 rgba(10,22,60,.35),0 14px 30px -10px rgba(0,0,0,.4)}
  .close .links a.primary:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(10,22,60,.35),0 22px 40px -12px rgba(0,0,0,.45)}
  .close .links a.primary:active{transform:translateY(0);box-shadow:0 2px 0 rgba(10,22,60,.35),0 8px 18px -8px rgba(0,0,0,.4)}

  /* ---- WhatsApp pill (close band) ---- */
  .close .links a.whatsapp{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
  .close .links a.whatsapp svg{color:#ffffff;flex-shrink:0}
  .close .links a.whatsapp:hover{background:rgba(255,255,255,.26);border-color:#ffffff;transform:translateY(-3px)}
  .close .links-secondary{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
  .close .links-secondary a{color:rgba(255,255,255,.65);text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
  .close .links-secondary a:hover{color:#fff}
  .close .links-secondary__dot{color:rgba(255,255,255,.35)}

  footer{background:var(--ink);color:var(--ink-faint);padding:40px 0}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:14px}
  .bigname{background:var(--ink);font-size:clamp(46px,14vw,170px);font-weight:900;letter-spacing:-.05em;color:#232527;line-height:1;padding:48px 0 6px;text-align:center;overflow:hidden}