/* =====================================================================
   Data & AI Insights — McKinsey-Insights-style layout.
   Built on main.css tokens; theme-aware via inherited custom properties.
   ===================================================================== */

/* ---------- hero ---------- */
.in-hero{padding:48px 0 30px;position:relative;overflow:hidden}
.in-hero::before{content:"";position:absolute;top:-45%;right:-8%;width:540px;height:540px;border-radius:50%;
  pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
.in-hero > .wrap{position:relative;z-index:1}
.in-eyebrow{display:block;font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin:16px 0 16px}
.in-hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;
  letter-spacing:-.038em;margin:0 0 20px}
.in-lead{font-family:var(--f-body);font-size:1.1875rem;line-height:1.6;color:var(--fg-dim);max-width:64ch;margin:0}

/* ---------- featured strip ---------- */
.in-feature{padding:20px 0 40px}
.in-feature-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:26px;align-items:stretch}
@media (max-width:900px){ .in-feature-grid{grid-template-columns:minmax(0,1fr)} }
.in-lead-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  background:var(--bg);overflow:hidden;transition:border-color .18s,transform .18s}
.in-lead-card:hover{border-color:color-mix(in srgb,var(--h,var(--accent)) 55%,var(--line));transform:translateY(-2px)}
.in-thumb{background:
    radial-gradient(120% 140% at 15% 12%, color-mix(in srgb,var(--h,var(--accent)) 42%,transparent), transparent 60%),
    radial-gradient(130% 130% at 88% 88%, color-mix(in srgb,var(--h,var(--accent)) 26%,transparent), transparent 55%),
    var(--paper);position:relative}
.in-thumb::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(color-mix(in srgb,var(--h,var(--accent)) 8%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--h,var(--accent)) 8%,transparent) 1px,transparent 1px);
  background-size:26px 26px}
.in-thumb-lg{min-height:260px}
.in-lead-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.in-lead-body h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.14;
  letter-spacing:-.025em;margin:12px 0 12px;color:var(--fg)}
.in-feature-side{display:grid;grid-template-rows:1fr 1fr;gap:26px;min-width:0}

/* ---------- category eyebrow ---------- */
.in-cat{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-body);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--h,var(--accent))}
.in-cat::before{content:"";width:16px;height:2px;background:var(--h,var(--accent))}

/* ---------- article card ---------- */
.in-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);background:var(--bg);
  overflow:hidden;transition:border-color .18s,transform .18s}
.in-card:hover{border-color:color-mix(in srgb,var(--h,var(--accent)) 55%,var(--line));transform:translateY(-2px)}
.in-card .in-thumb{min-height:120px}
.in-card .in-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.in-card h3{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.25;letter-spacing:-.02em;
  margin:10px 0 8px;color:var(--fg)}
.in-dek{font-family:var(--f-body);font-size:.86rem;line-height:1.55;color:var(--fg-dim);margin:0 0 14px;flex:1}
.in-meta{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;color:var(--fg-faint)}
.in-meta i{width:3px;height:3px;border-radius:50%;background:var(--fg-faint);display:inline-block}

/* ---------- list + filter bar ---------- */
.in-list{padding:16px 0 40px}
.in-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;margin:0 0 24px;
  padding-top:26px;border-top:1px solid var(--line)}
.in-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.025em;
  margin:0;color:var(--fg)}
.in-chips{display:flex;flex-wrap:wrap;gap:8px}
.in-chip{font-family:var(--f-body);font-size:12.5px;font-weight:600;color:var(--fg-dim);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .15s}
.in-chip:hover{border-color:var(--fg);color:var(--fg)}
.in-chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){ .in-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .in-grid{grid-template-columns:minmax(0,1fr)} }
.in-card.hide{display:none}
.in-empty{font-family:var(--f-body);color:var(--fg-dim);padding:20px 0}

/* ---------- subscribe / CTA band ---------- */
.in-sub{padding:20px 0 72px}
.in-sub-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:30px 32px;border:1px solid var(--line);
  border-left:3px solid var(--accent);background:var(--paper)}
.in-sub-card > div{flex:1;min-width:260px}
.in-sub-t{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;margin:0 0 6px;color:var(--fg)}
.in-sub-s{font-family:var(--f-body);font-size:.9375rem;line-height:1.5;color:var(--fg-dim);margin:0}
.in-sub-card .btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.in-sub-card .btn svg{width:14px;height:14px}
.btn.btn-p{display:inline-flex}

/* ---------- article detail ---------- */
.art-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--signal));transition:width .1s ease-out}
.in-article{padding:40px 0 8px}
.in-narrow{max-width:740px}
.in-article h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.05;
  letter-spacing:-.032em;margin:14px 0 16px;color:var(--fg);text-wrap:balance}
.in-standfirst{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:1.3125rem;line-height:1.5;
  color:var(--fg-dim);margin:0 0 22px;max-width:60ch}
.in-byline{display:flex;align-items:center;gap:13px;margin:0}
.in-avatar{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--h,var(--accent)) 16%,transparent)}
.in-avatar svg{width:22px;height:22px}
.in-bywho{display:flex;flex-direction:column;line-height:1.3}
.in-bywho b{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;color:var(--fg)}
.in-bywho em{font-family:var(--f-mono);font-style:normal;font-size:11.5px;color:var(--fg-faint)}
/* the header sits ON a gradient panel — no empty band, space used for content */
.in-art-head{position:relative;overflow:hidden;padding:36px 0 30px;margin-bottom:34px;
  border-bottom:1px solid var(--line);background:
    radial-gradient(55% 130% at 100% 0%, color-mix(in srgb,var(--h,var(--accent)) 24%,transparent), transparent 60%),
    radial-gradient(45% 120% at 0% 100%, color-mix(in srgb,var(--h,var(--accent)) 13%,transparent), transparent 55%),
    var(--bg)}
.in-art-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--h,var(--accent)) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--h,var(--accent)) 6%,transparent) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask:linear-gradient(100deg,#000,transparent 62%);mask:linear-gradient(100deg,#000,transparent 62%)}
.in-art-head > .wrap{position:relative;z-index:1}
.in-art-head .in-byline{margin-top:20px}
.in-prose p{font-family:var(--f-body);font-size:1.1875rem;line-height:1.78;color:var(--fg);margin:0 0 22px}
.in-prose > p:first-of-type::first-letter{float:left;font-family:var(--f-display);font-weight:700;font-size:3.6em;
  line-height:.78;padding:8px 12px 2px 0;color:var(--h,var(--accent))}
.in-prose p strong{font-weight:700;color:var(--fg)}
.in-prose h2{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:34px 0 14px;color:var(--fg)}
.in-prose{padding-bottom:8px}
.in-endmark{margin:8px 0 0}
.in-endmark::after{content:"";display:inline-block;width:12px;height:12px;background:var(--h,var(--accent));transform:rotate(45deg)}

/* ---------- prose lists (playbook + metrics in long insights) ---------- */
.in-prose ol,.in-prose ul{margin:2px 0 24px;padding:0;list-style:none}
.in-prose ol{counter-reset:step}
.in-prose ol li{counter-increment:step;position:relative;padding:2px 0 15px 46px;
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.62;color:var(--fg)}
.in-prose ol li::before{content:counter(step);position:absolute;left:0;top:-1px;width:31px;height:31px;
  border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--h,var(--accent)) 15%,transparent);
  color:var(--h,var(--accent));font-family:var(--f-display);font-weight:700;font-size:.92rem}
.in-prose ul li{position:relative;padding:0 0 12px 22px;font-family:var(--f-body);font-size:1.0625rem;
  line-height:1.6;color:var(--fg)}
.in-prose ul li::before{content:"";position:absolute;left:1px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--h,var(--accent))}
.in-prose li strong{color:var(--fg);font-weight:700}
.in-prose h2 + p{margin-top:0}

/* real SCIKIQ mark as the author avatar */
.in-avatar{background:var(--paper);border:1px solid var(--line)}
.in-avatar img.av{width:100%;height:100%;border-radius:50%;object-fit:contain;padding:5px;display:block}