/* =============================================================
   isqod — case page (Figma-exact rebuild)
   Light theme. Scoped under .case-isqod to override shared dark
   .case-* rules from styles.css. Touch only this file + the HTML.
   Figma frame: ppMhxLpkjU8DT8grVOigNF node 10:6, width 1280, pad 56.
   ============================================================= */

.case-isqod {
  --iq-yellow: #fcfb65;
  --iq-ink: #15151c;
  --iq-ink-2: #3a3a44;
  --iq-muted: #6e6e62;
  --iq-muted-2: #73737e;
  --iq-paper: #fbfaf3;     /* context / findings / forecast bg */
  --iq-blue-bg: #edf1f7;   /* process / reco / takeaways bg */
  --iq-card-border: #e8e7dc;
  --iq-red: #ff4a5b;
  --iq-red-2: #c8323f;
  --iq-pink: #ffe2e5;
  --iq-gold: #bdbc39;
  --iq-orange: #f2a104;
  --iq-green: #1fb066;
  --iq-green-2: #22a06b;
  --shadow-card: 0px 1px 1px rgba(20,20,28,.04), 5px 10px 12.7px rgba(20,20,28,.08);
  --shadow-panel: 0px 14.4px 36px -19.2px rgba(20,20,28,.12);
}

/* ---- page-level reset of the shared dark chrome ---- */
.case-isqod.case-page,
.case-isqod .case-page,
.case-isqod main.case-page { background: var(--iq-paper); color: var(--iq-ink); }
.case-isqod .case-page { background: transparent; }
body.case-isqod { background: var(--iq-paper); }
/* Prevent the shared off-canvas mobile menu (position:fixed; translateX(100%))
   and any scaled native panels from creating horizontal scroll on this page.
   clip (not hidden) avoids forming a scroll container, so position:fixed/sticky
   chrome keeps working. */
body.case-isqod { overflow-x: clip; }
.case-isqod main.case-page { overflow-x: clip; }

/* Container side padding = Figma 56px */
.case-isqod .container { max-width: 1280px; padding-inline: 56px; }
@media (max-width: 1024px){ .case-isqod .container { padding-inline: 40px; } }
@media (max-width: 520px){ .case-isqod .container { padding-inline: 20px; } }

/* Every section is a full-bleed coloured band; inner .container holds content */
.case-isqod .iq-section { width: 100%; }
.case-isqod .iq-section > .container { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.case-isqod .iq-pad { padding-block: 80px; }

/* Backgrounds per Figma */
.case-isqod .iq-paper { background: var(--iq-paper); }
.case-isqod .iq-blue  { background: var(--iq-blue-bg); }
.case-isqod .iq-dark  { background: var(--iq-ink); }

/* =========================================================
   Shared section header: kicker + h2 + intro
   ========================================================= */
.case-isqod .iq-kicker {
  display: inline-flex; align-items: center; gap: 10.8px;
  margin: 0; text-transform: none; letter-spacing: normal;
}
.case-isqod .iq-kicker .no {
  background: var(--iq-yellow); color: var(--iq-ink);
  font-weight: 700; font-size: 18px; line-height: 1;
  padding: 3.6px 10.8px 4.8px; border-radius: 8.4px;
}
.case-isqod .iq-kicker .lab {
  font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--iq-muted);
}
.case-isqod .iq-h2 {
  font-weight: 700; font-size: 40px; line-height: 1.06; letter-spacing: -.4px;
  color: var(--iq-ink); max-width: none;
}
.case-isqod .iq-intro {
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); max-width: none;
}

/* =========================================================
   01 HERO  (bg #fcfb65)
   ========================================================= */
.case-isqod .iq-hero { background: var(--iq-yellow); padding: 80px 0 40px; position: relative; overflow: hidden; }
.case-isqod .iq-hero > .container { gap: 25px; position: relative; z-index: 1; }

.case-isqod .iq-hero-tags { display: flex; flex-wrap: wrap; gap: 9.6px; }
.case-isqod .iq-tag {
  display: inline-flex; align-items: center;
  background: rgba(21,21,28,.08);
  border: 1.2px solid rgba(21,21,28,.18);
  border-radius: 999px; padding: 7.2px 15.6px;
  font-weight: 600; font-size: 14px; line-height: 1; color: var(--iq-ink);
}
.case-isqod .iq-hero h1 {
  font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: -1.16px;
  color: var(--iq-ink); margin: 0; max-width: none;
}
.case-isqod .iq-hero-sub {
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); margin: 0; max-width: none;
}
.case-isqod .iq-hero-sub .em { font-weight: 600; font-size: 19px; }
.case-isqod .iq-hero-rule { width: 100%; height: 2.4px; background: rgba(21,21,28,.18); }

.case-isqod .iq-hero-meta {
  display: flex; flex-wrap: wrap; gap: 36px; width: 100%;
  border: none; margin: 0; padding: 0;
}
.case-isqod .iq-hero-meta .mi { display: flex; flex-direction: column; gap: 6px; }
.case-isqod .iq-hero-meta .k {
  font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: #5c5c50; margin: 0;
}
.case-isqod .iq-hero-meta .v { font-weight: 600; font-size: 19px; color: var(--iq-ink); margin: 0; }

/* "Посмотреть презентацию в Figma →" button (white pill, dark border, colored logo) */
.case-isqod .iq-figbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--iq-ink); border-radius: 999px;
  padding: 14px 24px; font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--iq-ink); text-decoration: none; transition: background .15s ease;
}
.case-isqod .iq-figbtn:hover { background: #faf9f2; }
.case-isqod .fig-logo { display: inline-block; vertical-align: middle; width: 18px; height: 18px; flex: 0 0 auto; }

/* before / after native component */
.case-isqod .iq-ba { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-ba .mock {
  flex: 1 1 0; min-width: 0;
  background: #fff; border: 1px solid rgba(21,21,28,.06); border-radius: 16px;
  padding: 20px 14px; display: flex; flex-direction: column; gap: 0;
  box-shadow: 0px 1px 2px rgba(20,20,28,.04), 5px 10px 25.4px rgba(20,20,28,.08);
  overflow: hidden;
}
.case-isqod .iq-ba .badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 90px;
  font-weight: 600; font-size: 19px; line-height: 1;
}
.case-isqod .iq-ba .badge .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.case-isqod .iq-ba .badge.bad  { background: var(--iq-pink); color: var(--iq-red-2); }
.case-isqod .iq-ba .badge.bad .dot  { background: var(--iq-red-2); }
.case-isqod .iq-ba .badge.good { background: #ddf5e9; color: #117a45; }
.case-isqod .iq-ba .badge.good .dot { background: #117a45; }

.case-isqod .iq-ba .top { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.case-isqod .iq-ba .mtitle { font-weight: 600; font-size: 19px; color: var(--iq-ink); }
.case-isqod .iq-ba .tinybtn {
  font-weight: 600; font-size: 16px; padding: 8px 12px; border-radius: 6px; line-height: 1; white-space: nowrap;
}
.case-isqod .iq-ba .tinybtn.dark { background: #23232c; color: #fff; opacity: .85; }
.case-isqod .iq-ba .tinybtn.yel  { background: var(--iq-yellow); color: var(--iq-ink); box-shadow: 0 0 0 3px rgba(233,236,45,.4); }

.case-isqod .iq-ba .rows { display: flex; flex-direction: column; width: 100%; }
.case-isqod .iq-ba .row {
  display: flex; gap: 10px; align-items: center; padding: 9px 0 9.9px;
  border-bottom: .909px solid #f0efe7;
}
.case-isqod .iq-ba .row:last-child { border-bottom: none; }
.case-isqod .iq-ba .bar { height: 10px; border-radius: 4px; background: #ecebe2; flex: 0 0 auto; }
.case-isqod .iq-ba .pill-wrap { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
.case-isqod .iq-ba .pill-a {
  background: #ddf5e9; color: #117a45; font-weight: 700; font-size: 16px; line-height: 21px;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.case-isqod .iq-ba .annot { display: flex; align-items: center; min-height: 31.82px; }
.case-isqod .iq-ba .annot.bad  { color: var(--iq-red-2); font-weight: 600; font-size: 19px; }
.case-isqod .iq-ba .annot.good { color: var(--iq-green-2); font-weight: 600; font-size: 19px; padding: 0 16px; }

/* success banner (after card) */
.case-isqod .iq-ba .banner {
  width: 100%; margin: 10px 0; border-radius: 10px; border: 1px solid #ccd000;
  background: linear-gradient(180deg, #fcfde0, #f6f8c4);
  padding: 12.9px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.case-isqod .iq-ba .banner h4 { font-weight: 900; font-size: 16px; line-height: 19.38px; color: var(--iq-ink); }
.case-isqod .iq-ba .banner p  { font-weight: 400; font-size: 14px; line-height: 16.27px; color: #73737e; }
.case-isqod .iq-ba .banner .tinybtn.yel { font-weight: 700; }

/* Hero decorative — 3 concentric rings (Figma "Component 1" node 27:1122) */
.case-isqod .iq-hero-blob {
  position: absolute; left: -210px; top: 150px; width: 520px; height: 520px;
  opacity: .55; pointer-events: none; z-index: 0;
}
.case-isqod .iq-hero-blob i {
  position: absolute; display: block; border: 2px solid #2e5bff; border-radius: 50%;
}
.case-isqod .iq-hero-blob i:nth-child(1) { width: 600px; height: 600px; left: -180px; top: 100px; }
.case-isqod .iq-hero-blob i:nth-child(2) { width: 460px; height: 460px; left: -110px; top: 170px; }
.case-isqod .iq-hero-blob i:nth-child(3) { width: 320px; height: 320px; left: -40px;  top: 240px; }

/* =========================================================
   02 STAT STRIP  (bg #15151c)
   ========================================================= */
.case-isqod .iq-statstrip { background: var(--iq-ink); }
.case-isqod .iq-statstrip .container { padding-block: 0; }
.case-isqod .iq-stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.case-isqod .iq-stats .stat {
  padding: 48px 20px; border-right: 1.2px solid #2a2a34;
  display: flex; flex-direction: column; gap: 9.6px; align-items: flex-start;
}
.case-isqod .iq-stats .stat:last-child { border-right: none; }
.case-isqod .iq-stats .num { font-weight: 800; font-size: 52px; line-height: 1; color: var(--iq-red); }
.case-isqod .iq-stats .lab { font-weight: 600; font-size: 19px; line-height: 1.2; color: #fff; }
.case-isqod .iq-stats .hint { font-weight: 400; font-size: 18px; line-height: 1.5; color: #dedee8; }

/* =========================================================
   03 CONTEXT  (bg #fbfaf3)
   ========================================================= */
.case-isqod .iq-context .row-cards { display: flex; gap: 28.8px; width: 100%; align-items: stretch; }
.case-isqod .iq-bizcard {
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 21.6px;
  padding: 36px; width: 635px; flex: 0 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 14.4px;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-bizcard .h3 { display: flex; align-items: center; gap: 12px; }
.case-isqod .iq-iconchip {
  width: 40.8px; height: 40.8px; border-radius: 10.8px; background: var(--iq-yellow);
  display: grid; place-items: center; flex: 0 0 auto; font-size: 22px; line-height: 1;
}
.case-isqod .iq-iconchip img { width: 32px; height: 32px; display: block; object-fit: contain; }
.case-isqod .iq-bizcard h4 { font-weight: 700; font-size: 28px; color: var(--iq-ink); }
.case-isqod .iq-bizcard p { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); }

.case-isqod .iq-facts { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16.8px; }
.case-isqod .iq-fact {
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 16.8px;
  padding: 19.2px 21.6px; display: flex; flex-direction: column; gap: 4.8px;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-fact .k { font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: var(--iq-muted); }
.case-isqod .iq-fact .v { font-weight: 600; font-size: 19px; color: var(--iq-ink); }

.case-isqod .iq-pains { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-pain {
  flex: 1 1 0; min-width: 0;
  background: #fff; border-left: 4.8px solid #ff5868; border-radius: 14.4px;
  padding: 24px; display: flex; flex-direction: column; gap: 7.2px;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-pain .lab { font-weight: 700; font-size: 20px; color: #ff5868; }
.case-isqod .iq-pain h4 { font-weight: 600; font-size: 19px; color: var(--iq-ink); }
.case-isqod .iq-pain p { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-muted); }

/* =========================================================
   04 PROCESS  (bg #edf1f7)
   ========================================================= */
.case-isqod .iq-proc-top { display: flex; gap: 25px; width: 100%; align-items: flex-start; }
.case-isqod .iq-proc-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 26px; }

.case-isqod .iq-method-card {
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 21.6px;
  padding: 33.6px; display: flex; flex-direction: column; gap: 14.4px; box-shadow: var(--shadow-card);
}
.case-isqod .iq-method-card .mh { display: flex; align-items: center; gap: 12px; }
.case-isqod .iq-method-card h4 { font-weight: 700; font-size: 28px; color: var(--iq-ink); }
.case-isqod .iq-method-card p { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); }
.case-isqod .iq-segs { display: flex; gap: 16.8px; width: 100%; }
.case-isqod .iq-seg {
  flex: 1 1 0; min-width: 0; background: var(--iq-blue-bg); border-radius: 14.4px;
  padding: 19.2px; display: flex; flex-direction: column; align-items: center; gap: 2.4px;
}
.case-isqod .iq-seg .n { font-weight: 700; font-size: 36px; color: var(--iq-ink); }
.case-isqod .iq-seg .l { font-weight: 600; font-size: 16px; color: var(--iq-muted); }

.case-isqod .iq-metrics { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.case-isqod .iq-metrics .ttl { font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: var(--iq-muted); }
.case-isqod .iq-metrics .cw { display: flex; flex-wrap: wrap; gap: 9px 10.8px; }
.case-isqod .iq-metrics .chip {
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 999px;
  padding: 8.4px 15.6px; font-weight: 600; font-size: 16px; color: var(--iq-ink); line-height: 1;
}

/* Affinity map — native dark panel, absolute coords (Figma 652x604) */
.case-isqod .iq-affinity {
  background: #1b1b23; border-radius: 21.6px; box-shadow: 0px 14.4px 36px -19.2px rgba(20,20,28,.12);
  width: 652px; height: 604px; flex: 0 0 auto; overflow: hidden;
}
.case-isqod .iq-affinity-canvas { position: relative; width: 652px; height: 604px; transform-origin: top left; }
.case-isqod .iq-affinity .ttl {
  position: absolute; left: 57.2px; top: 23.48px;
  font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: #8e8e99;
}
.case-isqod .iq-affinity .cat {
  position: absolute; background: rgba(255,255,255,.15); border-radius: 8px; padding: 6px;
  font-weight: 700; font-size: 16px; letter-spacing: .8px; text-transform: uppercase; color: #fff; line-height: 1;
}
.case-isqod .iq-note {
  position: absolute; width: 134.4px; padding: 10.8px; border-radius: 7.2px;
  font-weight: 600; font-size: 16px; line-height: 1.25; color: #222;
}
.case-isqod .iq-note.y { background: #fcfb65; }
.case-isqod .iq-note.p { background: #ffb3c0; }
.case-isqod .iq-note.g { background: #9ee6be; }
.case-isqod .iq-note.v { background: #ae9ee6; color: #000; }

/* charts row */
.case-isqod .iq-charts { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-chart {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1.2px solid var(--iq-card-border);
  border-radius: 21.6px; padding: 33.6px; display: flex; flex-direction: column; gap: 7.2px;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-chart h4 { font-weight: 700; font-size: 28px; color: var(--iq-ink); }
.case-isqod .iq-chart .sub { font-weight: 600; font-size: 16px; color: var(--iq-muted); }

/* Time-on-Task: vertical bars #f2a104, 15px per minute */
.case-isqod .iq-bars { display: flex; gap: 12px; align-items: flex-end; padding-top: 21.6px; width: 100%; }
.case-isqod .iq-bc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.case-isqod .iq-bc .v { font-weight: 700; font-size: 16px; color: var(--iq-ink); }
.case-isqod .iq-bc .bar { width: 36px; background: var(--iq-orange); border-radius: 7.2px 7.2px 0 0; }
.case-isqod .iq-bc .x { font-weight: 600; font-size: 16px; color: var(--iq-muted); }

/* Task Success: horizontal bars, track #f2f1e9, fill #fcfb65 */
.case-isqod .iq-hbar { display: flex; gap: 12px; align-items: center; padding-top: 9.6px; width: 100%; }
.case-isqod .iq-hbar .name { flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 16px; color: var(--iq-ink-2); text-align: right; }
.case-isqod .iq-hbar .track { width: 276px; flex: 0 0 auto; height: 31.2px; background: #f2f1e9; border-radius: 8.4px; overflow: hidden; }
.case-isqod .iq-hbar .fill {
  height: 31.2px; background: var(--iq-yellow); border-radius: 8.4px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 9.6px;
  font-weight: 700; font-size: 13.8px; color: var(--iq-ink);
}
.case-isqod .iq-seqnote { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-muted); margin-top: 7px; }

/* =========================================================
   05 FINDINGS  (bg #fbfaf3)
   ========================================================= */
.case-isqod .iq-findings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; width: 100%; }
.case-isqod .iq-finding {
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 21.6px;
  padding: 33.6px; display: flex; flex-direction: column; gap: 14.4px; justify-content: center;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-finding .no { font-weight: 700; font-size: 28px; color: var(--iq-gold); }
.case-isqod .iq-finding .pills { display: flex; flex-wrap: wrap; gap: 8px 9.6px; }
.case-isqod .iq-finding .pill {
  display: inline-flex; align-items: center; padding: 4.8px 12px 6px; border-radius: 999px;
  font-weight: 600; font-size: 14px; line-height: 1;
}
.case-isqod .iq-finding .pill.cat  { background: #efeee6; color: var(--iq-ink-2); }
.case-isqod .iq-finding .pill.crit { background: var(--iq-pink); color: var(--iq-red-2); }
.case-isqod .iq-finding .pill.cnt  { background: var(--iq-ink); color: #fff; }
.case-isqod .iq-finding h4 { font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--iq-ink); }
.case-isqod .iq-finding p { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink-2); }
.case-isqod .iq-finding blockquote {
  background: #fcfde6; border-left: 4.8px solid #ccd000; border-radius: 0 12px 12px 0;
  padding: 16.8px 19.2px; margin: 0; display: flex; flex-direction: column; gap: 7.2px;
}
.case-isqod .iq-finding blockquote p { font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--iq-ink); font-style: normal; }
.case-isqod .iq-finding blockquote cite { font-weight: 600; font-size: 16px; color: var(--iq-muted); font-style: normal; }

/* =========================================================
   06 RECO  (bg #edf1f7)
   ========================================================= */
.case-isqod .iq-reco-row { display: flex; gap: 36px; width: 100%; align-items: center; }
/* Impact-Effort matrix (Figma 720x600 native) */
.case-isqod .iq-matrix {
  width: 720px; flex: 0 0 auto;
  background: #fff; border: 1.2px solid var(--iq-card-border); border-radius: 21.6px;
  box-shadow: var(--shadow-panel); overflow: hidden;
}
.case-isqod .iq-matrix-canvas { position: relative; width: 720px; height: 600px; transform-origin: top left; }
.case-isqod .iq-matrix .vline { position: absolute; left: 368.4px; top: 51.6px; width: 1.2px; height: 484.8px; background: var(--iq-card-border); }
.case-isqod .iq-matrix .hline { position: absolute; left: 66px; top: 294px; width: 604.8px; height: 1.2px; background: var(--iq-card-border); }
.case-isqod .iq-matrix .q {
  position: absolute; font-weight: 700; font-size: 14px; letter-spacing: .7px; text-transform: uppercase; color: #c7c6bb;
}
.case-isqod .iq-matrix .q.tl { left: 15px; top: 15px; }
.case-isqod .iq-matrix .q.tr { right: 15px; top: 15px; text-align: right; }
.case-isqod .iq-matrix .q.bl { left: 15px; bottom: 15px; }
.case-isqod .iq-matrix .q.br { right: 15px; bottom: 15px; text-align: right; }
.case-isqod .iq-matrix .axx { position: absolute; left: 342px; top: 572.4px; font-weight: 600; font-size: 16px; color: var(--iq-muted); }
.case-isqod .iq-matrix .axy { position: absolute; left: 4px; top: 268px; transform: rotate(-90deg); transform-origin: left top; font-weight: 600; font-size: 16px; color: var(--iq-muted); white-space: nowrap; }
.case-isqod .iq-matrix .dot {
  position: absolute; width: 35px; height: 35px; border-radius: 90px;
  display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #fff;
  box-shadow: var(--shadow-card);
}
.case-isqod .iq-matrix .dot.g { background: var(--iq-green-2); }
.case-isqod .iq-matrix .dot.o { background: var(--iq-orange); }
.case-isqod .iq-matrix .dot.k { background: #181a1f; }

/* legend column */
.case-isqod .iq-legend { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 19.2px; }
.case-isqod .iq-legend .it { display: flex; gap: 14.4px; align-items: flex-start; }
.case-isqod .iq-legend .swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: 7px; }
.case-isqod .iq-legend .swatch.g { background: var(--iq-green-2); }
.case-isqod .iq-legend .swatch.o { background: var(--iq-orange); }
.case-isqod .iq-legend .swatch.k { background: #181a1f; }
.case-isqod .iq-legend .tx { display: flex; flex-direction: column; gap: 3.6px; }
.case-isqod .iq-legend .tx h5 { font-weight: 600; font-size: 19px; color: var(--iq-ink); }
.case-isqod .iq-legend ol { list-style: decimal; padding-left: 27px; margin: 0; }
.case-isqod .iq-legend ol li { font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-muted); }

/* horizons — white cards with coloured header bands + check rows */
.case-isqod .iq-horizons { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-hz {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1.2px solid var(--iq-card-border);
  border-radius: 21.6px; overflow: hidden; box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column;
}
.case-isqod .iq-hz .hd { padding: 24px 26.4px; display: flex; flex-direction: column; gap: 3.6px; }
.case-isqod .iq-hz .hd h4 { font-weight: 700; font-size: 28px; color: #fff; }
.case-isqod .iq-hz .hd p { font-weight: 600; font-size: 19px; color: rgba(255,255,255,.92); }
.case-isqod .iq-hz.green .hd  { background: var(--iq-green); }
.case-isqod .iq-hz.orange .hd { background: var(--iq-orange); }
.case-isqod .iq-hz.black .hd  { background: var(--iq-ink); }
.case-isqod .iq-hz ul { padding: 7.2px 26.4px 14.4px; margin: 0; }
.case-isqod .iq-hz li {
  display: flex; gap: 12px; align-items: center; padding: 14.4px 0;
  border-bottom: 1.2px solid #f2f1e9;
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink);
}
.case-isqod .iq-hz li:last-child { border-bottom: none; }
.case-isqod .iq-hz li .ck {
  width: 16.8px; height: 16.8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--iq-green-2); display: grid; place-items: center;
}
.case-isqod .iq-hz li .ck svg { width: 10px; height: 10px; display: block; }

/* =========================================================
   FORECAST / IMPACT  (bg #fbfaf3)
   ========================================================= */
.case-isqod .iq-impact-grid { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-imp {
  flex: 1 1 0; min-width: 0; background: var(--iq-ink); border-radius: 18px; padding: 42px;
  display: flex; flex-direction: column; gap: 25px; position: relative; overflow: hidden;
}
.case-isqod .iq-imp .glow {
  position: absolute; right: -213px; top: -202px; width: 426px; height: 426px; border-radius: 90px;
  background: radial-gradient(circle at 50% 50%, rgba(233,236,45,.28) 0%, rgba(233,236,45,0) 65%);
  pointer-events: none;
}
.case-isqod .iq-imp .lab { font-weight: 600; font-size: 19px; color: #fff; position: relative; z-index: 1; }
.case-isqod .iq-imp .flow {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
  font-weight: 800; font-size: 52px; line-height: 1; position: relative; z-index: 1;
}
.case-isqod .iq-imp .flow .from { color: var(--iq-red); }
.case-isqod .iq-imp .flow .arr  { color: rgba(255,255,255,.6); }
.case-isqod .iq-imp .flow .to   { color: var(--iq-yellow); }
.case-isqod .iq-imp .note { font-weight: 400; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.8); position: relative; z-index: 1; }

.case-isqod .iq-disclaim {
  width: 100%; background: #fcefd3; border: 1px solid #ebcb7a; border-radius: 14px;
  padding: 18.9px 22.9px; display: flex; gap: 12px; align-items: flex-start;
}
.case-isqod .iq-disclaim .ic { flex: 0 0 auto; width: 20px; height: 20px; color: #7a5400; margin-top: 1px; }
.case-isqod .iq-disclaim .ic svg { width: 20px; height: 20px; display: block; }
.case-isqod .iq-disclaim p { font-weight: 400; font-size: 18px; line-height: 1.5; color: #7a5400; }

/* =========================================================
   TAKEAWAYS / REFLECTION  (bg #edf1f7)
   ========================================================= */
.case-isqod .iq-take-grid { display: flex; gap: 25px; width: 100%; align-items: stretch; }
.case-isqod .iq-take {
  flex: 1 1 0; min-width: 0; border-radius: 18px; padding: 37px 38px 38px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-card);
}
.case-isqod .iq-take.yel { background: var(--iq-yellow); }
.case-isqod .iq-take.wht { background: #fff; border: 1px solid var(--iq-card-border); }
.case-isqod .iq-take h3 { font-weight: 700; font-size: 24px; color: var(--iq-ink); }
.case-isqod .iq-take ul { display: flex; flex-direction: column; }
.case-isqod .iq-take li {
  position: relative; padding: 12px 0 12.9px 30px;
  font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--iq-ink);
}
.case-isqod .iq-take li::before {
  content: ""; position: absolute; left: 2px; top: 18px; width: 20px; height: 5px; background: var(--iq-ink);
}
.case-isqod .iq-take.yel li { border-bottom: .909px solid rgba(21,21,28,.13); }
.case-isqod .iq-take.wht li { border-bottom: .909px solid var(--iq-card-border); }
.case-isqod .iq-take li:last-child { border-bottom: none; }

/* =========================================================
   FOOTER / END CTA  (bg #15151c)
   ========================================================= */
.case-isqod .iq-endcta { background: var(--iq-ink); text-align: center; }
.case-isqod .iq-endcta > .container { align-items: center; gap: 25px; }
.case-isqod .iq-endcta h2 {
  font-weight: 700; font-size: 40px; line-height: 1.06; letter-spacing: -.4px; color: #fff; text-align: center;
}
.case-isqod .iq-endcta h2 .y { color: var(--iq-yellow); }
.case-isqod .iq-end-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.case-isqod .iq-end-actions .btn { font-size: 16px; font-weight: 600; padding: 13px 28px 16px; border-radius: 999px; line-height: 1; }
.case-isqod .iq-end-actions .btn.solid { background: var(--iq-yellow); color: var(--iq-ink); border: none; }
.case-isqod .iq-end-actions .btn.solid:hover { background: var(--iq-yellow); opacity: .9; }
.case-isqod .iq-end-actions .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.case-isqod .iq-end-actions .btn.ghost:hover { background: rgba(255,255,255,.08); }
.case-isqod .iq-endnote { font-weight: 600; font-size: 16px; color: #b4b4b4; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .case-isqod .iq-hero h1 { font-size: 46px; letter-spacing: -.9px; }
  .case-isqod .iq-h2, .case-isqod .iq-endcta h2 { font-size: 34px; }
  .case-isqod .iq-context .row-cards { flex-direction: column; }
  .case-isqod .iq-bizcard { width: 100%; }
  /* Process: stack, affinity panel scales to fit width */
  .case-isqod .iq-proc-top { flex-direction: column; }
  .case-isqod .iq-affinity {
    width: 100%; max-width: 652px; height: 0;
    padding-bottom: calc(604 / 652 * 100%); position: relative;
  }
  /* pad=40 each side in this band → content width = 100vw - 80px; cap scale at 1 */
  .case-isqod .iq-affinity-canvas { position: absolute; top: 0; left: 0; transform: scale(min(calc((100vw - 80px) / 652px), 1)); }
  /* Reco: stack matrix over legend, matrix scales */
  .case-isqod .iq-reco-row { flex-direction: column; align-items: stretch; }
  .case-isqod .iq-matrix { width: 100%; max-width: 720px; height: 0; padding-bottom: calc(600 / 720 * 100%); position: relative; }
  .case-isqod .iq-matrix-canvas { position: absolute; top: 0; left: 0; transform: scale(min(calc((100vw - 80px) / 720px), 1)); }
}
@media (max-width: 860px){
  .case-isqod .iq-stats { grid-template-columns: repeat(2, 1fr); }
  .case-isqod .iq-stats .stat:nth-child(2n) { border-right: none; }
  .case-isqod .iq-charts { flex-direction: column; }
  .case-isqod .iq-findings { grid-template-columns: 1fr; }
  .case-isqod .iq-pains { flex-direction: column; }
  .case-isqod .iq-horizons { flex-direction: column; }
  .case-isqod .iq-impact-grid { flex-direction: column; }
  .case-isqod .iq-take-grid { flex-direction: column; }
  .case-isqod .iq-ba { flex-direction: column; }
  /* stacked: let each mock take its content height (was flex:1 1 0 → collapsed to a clipped sliver) */
  .case-isqod .iq-ba .mock { flex: 0 0 auto; }
  .case-isqod .iq-hero h1 { font-size: 38px; }
  /* decorative hero rings overflow + clutter on small screens — hide */
  .case-isqod .iq-hero-blob { display: none; }
}
@media (max-width: 620px){
  .case-isqod .iq-pad { padding-block: 56px; }
  .case-isqod .iq-hero { padding-block: 56px 32px; }
}
@media (max-width: 520px){
  /* pad=20 each side at <=520 → content width = 100vw - 40px */
  .case-isqod .iq-affinity-canvas { transform: scale(calc((100vw - 40px) / 652px)); }
  .case-isqod .iq-matrix-canvas { transform: scale(calc((100vw - 40px) / 720px)); }
  .case-isqod .iq-stats { grid-template-columns: 1fr; }
  .case-isqod .iq-stats .stat { border-right: none; border-bottom: 1.2px solid #2a2a34; }
  .case-isqod .iq-stats .stat:last-child { border-bottom: none; }
  .case-isqod .iq-hero h1 { font-size: 32px; letter-spacing: -.6px; }
  .case-isqod .iq-h2, .case-isqod .iq-endcta h2 { font-size: 28px; }
  .case-isqod .iq-hbar .track { width: 200px; }
}