/* =============================================================================
   Insights landing — v2 design (ported from the reference design file).
   Scoped under `.il` so the design's generic selectors (body/h1/.wrap/.card…)
   never leak into the define.global shell or the shared nav. The theme TOKENS
   (:root + html[data-theme=*]) stay global so the nav's theme toggle can drive
   light/dark across the landing.
   ========================================================================== */

:root{
  --il-font-display:'Spectral',Georgia,serif;
  --il-font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --il-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --il-wrap:1240px;
  --il-navy:#360564;
  --il-hero-ink:#f6f1fc; --il-hero-muted:#cbb8ea; --il-hero-line:rgba(255,255,255,.14);
  --il-hero-accent:#b98bf0;
}
html[data-theme="light"]{
  --il-page:#ffffff; --il-surface:#ffffff; --il-panel:#f9f3ff; --il-mist:#f1e7fc;
  --il-ink:#212120; --il-head:#360564; --il-slate:#5f5870; --il-line:#e7ddf5;
  --il-blue:#6321a9; --il-blue-2:#4e1a86; --il-cyan:#8032d8; --il-blue-soft:#f3eafd;
  --il-topbar:rgba(255,255,255,.9);
  --il-shadow:0 16px 44px rgba(54,5,100,.12);
}
html[data-theme="dark"]{
  --il-page:#1a0b2e; --il-surface:#241141; --il-panel:#2b1550; --il-mist:#331a5e;
  --il-ink:#e4dcf3; --il-head:#f4eefb; --il-slate:#a99ac6; --il-line:rgba(200,180,235,.14);
  --il-blue:#a878e6; --il-blue-2:#bb93ee; --il-cyan:#c9a6f0; --il-blue-soft:rgba(168,120,230,.16);
  --il-topbar:rgba(26,11,46,.86);
  --il-shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
/* default (no data-theme) → light tokens so the page renders before the toggle runs */
:root{
  --il-page:#ffffff; --il-surface:#ffffff; --il-panel:#f9f3ff; --il-mist:#f1e7fc;
  --il-ink:#212120; --il-head:#360564; --il-slate:#5f5870; --il-line:#e7ddf5;
  --il-blue:#6321a9; --il-blue-2:#4e1a86; --il-cyan:#8032d8; --il-blue-soft:#f3eafd;
  --il-topbar:rgba(255,255,255,.9);
  --il-shadow:0 16px 44px rgba(54,5,100,.12);
}

/* ---- wrapper + base ---- */
.il{background:var(--il-page);color:var(--il-ink);font-family:var(--il-font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
/* define-main.css styles `body.definePages h1…` (Barlow) and the body font at a
   higher specificity than a bare `.il`/`.il h1`; re-assert the ported design's
   type under the definePages body so the landing renders EXACTLY as designed. */
body.definePages .il{font-family:var(--il-font-body)}
body.definePages .il h1,body.definePages .il h2,body.definePages .il h3,body.definePages .il h4{font-family:var(--il-font-display)}
/* Also darken the page body in dark mode so any wrapper gaps read dark, not white.
   Only loads on the landing, so article pages are unaffected. */
html[data-theme="dark"] body.define-insights-page{background:var(--il-page)}
.il h1,.il h2,.il h3,.il h4{font-family:var(--il-font-display);color:var(--il-head);margin:0;line-height:1.12;letter-spacing:-.01em;font-weight:600}
.il p{margin:0}
.il a{color:var(--il-blue);text-decoration:none}
.il .wrap{max-width:var(--il-wrap);margin:0 auto;padding:0 28px}
.il .mono{font-family:var(--il-font-mono)}
.il .muted{color:var(--il-slate)}
.il img,.il canvas,.il svg{max-width:100%}
.il .eyebrow{font-family:var(--il-font-body);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--il-cyan)}
.il .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--il-font-body);font-weight:600;font-size:15px;padding:13px 22px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:.18s;white-space:nowrap}
.il .btn-primary{background:var(--il-blue);color:#fff}
.il .btn-primary:hover{background:var(--il-blue-2);transform:translateY(-1px)}
.il .btn-ghost{background:transparent;color:var(--il-head);border-color:var(--il-line)}
.il .btn-ghost:hover{border-color:var(--il-cyan);color:var(--il-cyan)}
.il .btn svg{width:16px;height:16px}

/* ---- Insights hero (dark) ---- */
.il .ihero{position:relative;background:linear-gradient(160deg,#2a0b54,#1a0b2e 60%,#12071f);color:var(--il-hero-ink);overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.il .ihero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 82% 18%,rgba(128,50,216,.35),transparent 60%);pointer-events:none}
.il .ihero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:64px 28px 60px}
.il .ihero .eyebrow{color:var(--il-hero-accent);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
.il .ihero .eyebrow .ln{width:26px;height:1px;background:var(--il-hero-accent);opacity:.6}
.il .ihero h1{color:#fff;font-weight:500;font-size:clamp(32px,4.8vw,52px);line-height:1.12;letter-spacing:-.015em}
.il .ihero h1 .em{font-style:italic;background:linear-gradient(100deg,#c9a6f0,#8b5be0);-webkit-background-clip:text;background-clip:text;color:transparent}
.il .ihero .dek{color:var(--il-hero-muted);font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:52ch;margin-top:20px}
.il .ihero-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px;border-top:1px solid var(--il-hero-line);padding-top:22px}
.il .ihero-stats .n{font-family:var(--il-font-display);font-weight:600;font-size:24px;color:#fff}
.il .ihero-stats .n .u{color:var(--il-hero-accent);font-size:15px}
.il .ihero-stats .l{font-size:12px;color:var(--il-hero-muted);margin-top:3px}
.il .ihero-art{position:relative;justify-self:end;width:100%;max-width:420px;aspect-ratio:1/1}
.il .ihero-art svg{width:100%;height:100%;display:block}

/* ---- Featured ---- */
.il .feat-sec{padding:44px 0 48px}
.il .feat-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.il .feat-head .lab{font-family:var(--il-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--il-slate);display:flex;align-items:center;gap:9px}
.il .feat-head .lab .star{color:var(--il-cyan)}
.il .feat-card{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--il-line);border-radius:12px;overflow:hidden;background:var(--il-surface);transition:box-shadow .25s,transform .25s,border-color .25s}
.il .feat-card:hover{box-shadow:var(--il-shadow);border-color:var(--il-cyan)}
.il .feat-cover{position:relative;min-height:340px;background:linear-gradient(150deg,#360564,#6321a9);overflow:hidden}
.il .feat-cover svg,.il .feat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.il .feat-body{padding:34px 36px;display:flex;flex-direction:column}
.il .feat-body .pill{align-self:flex-start;font-family:var(--il-font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--il-blue);padding:5px 11px;border-radius:2px;margin-bottom:16px}
.il .feat-body h2{font-size:clamp(24px,2.6vw,34px);line-height:1.14;margin-bottom:14px}
.il .feat-card:hover h2{color:var(--il-blue)}
.il .feat-body .dek{color:var(--il-slate);font-size:16px;line-height:1.6;margin-bottom:20px}
.il .feat-meta{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--il-font-mono);font-size:12px;color:var(--il-slate)}
.il .feat-meta .dotm{width:3px;height:3px;border-radius:50%;background:var(--il-slate);opacity:.6}
.il .feat-meta .read-cta{margin-left:auto;color:var(--il-blue);font-family:var(--il-font-body);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px}
.il .feat-card:hover .read-cta svg{transform:translateX(3px)}
.il .read-cta svg{width:15px;height:15px;transition:transform .2s}

/* ---- Toolbar (sticky) ---- */
.il .toolbar-outer{position:sticky;top:64px;z-index:40;background:var(--il-topbar);backdrop-filter:blur(10px);border-top:1px solid var(--il-line);border-bottom:1px solid var(--il-line);transition:background .3s}
.il .toolbar{display:flex;align-items:center;gap:16px;padding:14px 0;flex-wrap:wrap}
.il .chips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.il .chip{font-family:var(--il-font-body);font-size:13.5px;font-weight:500;color:var(--il-slate);background:transparent;border:1px solid var(--il-line);padding:8px 14px;border-radius:100px;cursor:pointer;transition:.16s;white-space:nowrap}
.il .chip:hover{border-color:var(--il-cyan);color:var(--il-head)}
.il .chip.on{background:var(--il-blue);border-color:var(--il-blue);color:#fff}
.il .chip .ct{opacity:.6;font-family:var(--il-font-mono);font-size:11px;margin-left:5px}
.il .chip.on .ct{opacity:.8}
.il .search{position:relative;flex:none}
.il .search input{font-family:var(--il-font-body);font-size:14px;color:var(--il-ink);background:var(--il-surface);border:1px solid var(--il-line);border-radius:100px;padding:9px 16px 9px 38px;width:230px;transition:.16s;outline:none}
.il .search input:focus{border-color:var(--il-cyan);width:250px}
.il .search input::placeholder{color:var(--il-slate)}
.il .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--il-slate);pointer-events:none}
.il .search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;background:var(--il-mist);color:var(--il-slate);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:13px;line-height:1}
.il .search.has .clr{display:inline-flex}
.il .sortsel{font-family:var(--il-font-body);font-size:13.5px;color:var(--il-head);background:var(--il-surface);border:1px solid var(--il-line);border-radius:100px;padding:9px 14px;cursor:pointer;outline:none}

/* result meta */
.il .result-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:26px 0 4px;font-family:var(--il-font-mono);font-size:12.5px;color:var(--il-slate)}
.il .result-meta b{color:var(--il-head);font-weight:600}
.il .active-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.il .active-tags .kw{background:var(--il-blue-soft);color:var(--il-blue);border:1px solid var(--il-line);border-radius:100px;padding:4px 10px 4px 12px;font-size:11.5px;display:inline-flex;align-items:center;gap:7px}
.il .active-tags .kw button{border:none;background:none;color:var(--il-blue);cursor:pointer;font-size:13px;line-height:1;padding:0}

/* ---- Grid ---- */
.il .grid-sec{padding:12px 0 20px}
.il .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.il .card{display:flex;flex-direction:column;border:1px solid var(--il-line);border-radius:12px;overflow:hidden;background:var(--il-surface);cursor:pointer;transition:transform .22s,box-shadow .22s,border-color .22s}
.il .card:hover{transform:translateY(-4px);box-shadow:var(--il-shadow);border-color:var(--il-cyan)}
.il .card.hide{display:none}
.il .card-cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.il .card-cover svg,.il .card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.il .card:hover .card-cover svg,.il .card:hover .card-cover img{transform:scale(1.04)}
.il .card-cover .cat{position:absolute;left:12px;bottom:12px;font-family:var(--il-font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(20,7,38,.5);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.16);padding:4px 9px;border-radius:100px}
.il .card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.il .card-body h3{font-size:19px;line-height:1.22;margin-bottom:9px}
.il .card:hover h3{color:var(--il-blue)}
.il .card-body .dek{color:var(--il-slate);font-size:14px;line-height:1.55;margin-bottom:16px}
.il .card-kw{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.il .card-kw .k{font-family:var(--il-font-mono);font-size:10.5px;color:var(--il-slate);background:var(--il-panel);border:1px solid var(--il-line);padding:3px 8px;border-radius:3px;cursor:pointer;transition:.14s}
.il .card-kw .k:hover{color:var(--il-blue);border-color:var(--il-cyan)}
.il .card-meta{margin-top:auto;display:flex;align-items:center;gap:10px;font-family:var(--il-font-mono);font-size:11.5px;color:var(--il-slate);border-top:1px solid var(--il-line);padding-top:14px}
.il .card-meta .dotm{width:3px;height:3px;border-radius:50%;background:var(--il-slate);opacity:.55}

/* empty state */
.il .empty{display:none;text-align:center;padding:60px 20px;border:1px dashed var(--il-line);border-radius:12px}
.il .empty.show{display:block}
.il .empty h3{font-size:22px;margin-bottom:8px}
.il .empty p{color:var(--il-slate);margin-bottom:20px}
.il .loadmore-wrap{display:flex;justify-content:center;padding:16px 0 4px}
.il .loadmore-wrap.hide{display:none}

/* ---- Newsletter ribbon ---- */
.il .ribbon{margin:56px 0 0;background:linear-gradient(150deg,#2a0450,#4a1483);color:#fff;position:relative;overflow:hidden}
.il .ribbon::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 140% at 88% 20%,rgba(185,139,240,.28),transparent 55%);pointer-events:none}
.il .ribbon .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:44px 28px}
.il .ribbon .eyebrow{color:#c9a6f0;margin-bottom:14px;display:block}
.il .ribbon h2{color:#fff;font-size:clamp(24px,2.8vw,32px);line-height:1.14}
.il .ribbon p{color:#d5c6ee;font-size:15px;margin-top:12px;max-width:44ch}
.il .nl-form{display:flex;gap:10px;flex-wrap:wrap}
.il .nl-form input{flex:1;min-width:200px;font-family:var(--il-font-body);font-size:15px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:14px 16px;outline:none;transition:.16s}
.il .nl-form input::placeholder{color:#c3b4e0}
.il .nl-form input:focus{border-color:#c9a6f0;background:rgba(255,255,255,.12)}
.il .nl-form .btn-primary{background:#fff;color:var(--il-navy)}
.il .nl-form .btn-primary:hover{background:#efe6fb}
.il .nl-note{font-family:var(--il-font-mono);font-size:11px;color:#b9a6d8;margin-top:12px}
.il .nl-ok{display:none;align-items:center;gap:10px;font-size:15px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:14px 16px}
/* .is-shown (not .show) — Bootstrap's global `.show{display:block!important}` was
   hijacking the confirmation, forcing block layout (oversized, misaligned box). */
.il .nl-ok.is-shown{display:flex}
.il .nl-ok svg{width:20px;height:20px;color:#8ee6a8;flex:none}

/* toast */
.il-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--il-navy);color:#fff;padding:12px 20px;border-radius:4px;font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.3s;z-index:200}
.il-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.il .reveal{opacity:0;transform:translateY(18px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.il .reveal.in{opacity:1;transform:none}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .il .wrap{padding:0 22px}
  .il .ihero .wrap{grid-template-columns:1fr;gap:26px;padding:48px 22px 44px}
  .il .ihero-art{max-width:300px;justify-self:start}
  .il .feat-card{grid-template-columns:1fr}
  .il .feat-cover{min-height:220px;aspect-ratio:16/9}
  .il .grid{grid-template-columns:repeat(2,1fr)}
  .il .ribbon .wrap{grid-template-columns:1fr;gap:22px;padding:38px 22px}
  .il .toolbar-outer{top:58px}
}
@media(max-width:640px){
  .il .wrap{padding:0 16px}
  .il .ihero .wrap{padding:36px 16px 34px}
  .il .ihero-art{display:none}
  .il .ihero-stats{gap:18px 26px}
  .il .feat-body{padding:24px 20px}
  .il .grid{grid-template-columns:1fr}
  .il .toolbar{gap:12px;flex-direction:column;align-items:stretch}
  .il .search input,.il .search input:focus{width:100%}
  .il .search{order:1}
  .il .chips{order:2;width:100%}
  .il .sortsel{order:3;width:100%}
  .il .toolbar-outer{top:57px}
  .il .result-meta{padding-top:20px}
}
@media (prefers-reduced-motion: reduce){
  .il .reveal{opacity:1;transform:none;transition:none}
}