/* ============================================================
   ORIGO — Insights (articles + hub)
   Static editorial pages. Reuses the design-system tokens from
   colors_and_type.css + the .brand / .footer styles in site.css.
   ============================================================ */

/* ---- Static header (decoupled from the React nav so these pages
        stay dependency-free) ---- */
.ihead{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border-1);}
.ihead-in{display:flex;align-items:center;gap:24px;height:64px;}
.ihead .brand{display:inline-flex;align-items:center;font-weight:600;font-size:27px;letter-spacing:-.02em;color:var(--fg-strong);}
.ihead-nav{display:flex;align-items:center;gap:24px;margin-left:8px;}
.ihead-nav a{font-size:14px;color:var(--fg-muted);transition:color .15s;}
.ihead-nav a:hover{color:var(--fg-strong);}
.ihead-nav a.active{color:var(--fg-strong);}
.ihead-cta{margin-left:auto;}

/* ---- Article shell ---- */
.article{padding:64px 0 96px;}
.article-wrap{max-width:var(--col-narrow);margin:0 auto;padding:0 24px;}
.art-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:34px;transition:color .15s;}
.art-back:hover{color:var(--fg-strong);}
.art-eyebrow{display:inline-block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:#16b9f3;margin-bottom:20px;}
.article h1{font-size:clamp(34px,5vw,52px);line-height:1.07;letter-spacing:-.035em;margin:0 0 24px;}
.art-lede{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-200);margin:0 0 28px;}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding-bottom:30px;border-bottom:1px solid var(--border-1);margin-bottom:42px;}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-500);}

/* ---- Prose ---- */
.prose{font-size:18px;line-height:1.78;color:var(--ink-100);}
.prose > * + *{margin-top:24px;}
.prose h2{font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--fg-strong);margin-top:56px;margin-bottom:0;}
.prose h3{font-size:21px;line-height:1.3;letter-spacing:-.02em;color:var(--fg-strong);margin-top:40px;}
.prose h2 + p,.prose h3 + p{margin-top:14px;}
.prose p{color:var(--ink-100);}
.prose a{color:#3ac0f5;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(58,192,245,.4);transition:text-decoration-color .15s;}
.prose a:hover{text-decoration-color:#3ac0f5;}
.prose strong{color:var(--fg-strong);font-weight:600;}
.prose em{font-style:italic;}
.prose ul,.prose ol{padding-left:24px;}
.prose li{margin-top:10px;padding-left:6px;}
.prose ul li::marker{color:#16b9f3;}
.prose ol li::marker{color:var(--fg-faint);font-family:var(--font-mono);font-size:.9em;}
.prose blockquote{margin:34px 0;padding:6px 0 6px 24px;border-left:2px solid #16b9f3;color:var(--ink-200);font-size:20px;line-height:1.55;font-style:italic;}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--well);border:1px solid var(--border-1);border-radius:6px;padding:2px 6px;color:var(--ink-100);}
.prose pre{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r-md);padding:18px 20px;overflow-x:auto;font-family:var(--font-mono);font-size:14px;line-height:1.6;}
.prose pre code{background:none;border:none;padding:0;}
.prose hr{border:none;border-top:1px solid var(--border-1);margin:48px 0;}
.prose img{max-width:100%;border-radius:var(--r-md);border:1px solid var(--border-1);}
.prose .lede-answer{font-size:20px;line-height:1.6;color:var(--ink-100);border-left:2px solid #16b9f3;padding-left:22px;}

/* ---- FAQ block (also emitted as FAQPage schema) ---- */
.art-faq{margin-top:72px;padding-top:48px;border-top:1px solid var(--border-1);}
.art-faq h2{font-size:26px;letter-spacing:-.03em;color:var(--fg-strong);margin-bottom:8px;}
.faq-q{font-size:18px;font-weight:600;color:var(--fg-strong);margin-top:30px;}
.faq-a{font-size:17px;line-height:1.7;color:var(--ink-200);margin-top:8px;}

/* ---- Bottom CTA ---- */
.art-cta{margin-top:72px;padding:40px;background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--r-lg);text-align:center;}
.art-cta h2{font-size:28px;letter-spacing:-.03em;margin-bottom:10px;}
.art-cta p{color:var(--ink-200);max-width:46ch;margin:0 auto 22px;}

/* ============================================================
   Insights hub (index)
   ============================================================ */
.ihub{padding:72px 0 96px;}
.ihub-head{max-width:var(--col-narrow);margin:0 auto 56px;padding:0 24px;text-align:center;}
.ihub-head .eyebrow{display:inline-block;margin-bottom:18px;color:#16b9f3;}
.ihub-head h1{font-size:clamp(38px,5.5vw,60px);letter-spacing:-.04em;line-height:1.05;margin:0 0 18px;}
.ihub-head p{font-size:var(--fs-lead);color:var(--ink-200);max-width:54ch;margin:0 auto;}
.ihub-grid{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.icard{display:flex;flex-direction:column;padding:30px;background:var(--surface-2);border:1px solid var(--border-1);border-radius:var(--r-lg);transition:border-color .18s,transform .18s,background .18s;}
.icard:hover{border-color:var(--border-3);background:var(--surface-3);transform:translateY(-3px);}
.icard-cat{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:#16b9f3;margin-bottom:16px;}
.icard h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;color:var(--fg-strong);margin:0 0 12px;}
.icard-ex{font-size:15px;line-height:1.6;color:var(--ink-300);margin:0;flex:1;}
.icard-meta{margin-top:22px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);}
.ihub-empty{max-width:var(--col-narrow);margin:0 auto;padding:0 24px;text-align:center;color:var(--fg-muted);}

/* ---- Entrance animations (reuse the site keyframes om-navdrop / om-rise / om-pop) ---- */
@media (prefers-reduced-motion: no-preference){
  /* header (.nav) is intentionally static — never animates */
  /* hub */
  .ihub-head .eyebrow{animation:om-rise .7s var(--ease-out) both .08s;}
  .ihub-head h1{animation:om-rise .8s var(--ease-out) both .16s;}
  .ihub-head p{animation:om-rise .8s var(--ease-out) both .28s;}
  .ihub-grid .icard{animation:om-pop .8s var(--ease-out) both .40s;}
  .ihub-grid .icard:nth-child(2){animation-delay:.48s;}
  .ihub-grid .icard:nth-child(3){animation-delay:.56s;}
  .ihub-grid .icard:nth-child(4){animation-delay:.64s;}
  .ihub-grid .icard:nth-child(n+5){animation-delay:.70s;}
  /* article */
  .article .art-back{animation:om-rise .6s var(--ease-out) both .04s;}
  .article .art-eyebrow{animation:om-rise .7s var(--ease-out) both .12s;}
  .article h1{animation:om-rise .8s var(--ease-out) both .20s;}
  .article .art-lede{animation:om-rise .8s var(--ease-out) both .32s;}
  .article .art-meta{animation:om-rise .8s var(--ease-out) both .42s;}
  .article .prose{animation:om-rise .9s var(--ease-out) both .52s;}
}


/* ---- Responsive ---- */
@media (max-width:760px){
  .ihead-nav{display:none;}
  .ihub-grid{grid-template-columns:1fr;}
  .article{padding:40px 0 64px;}
  .prose{font-size:17px;}
  .prose h2{font-size:26px;margin-top:44px;}
  .art-cta{padding:30px 22px;}
}