/* =====================================================================
   INSIGHTS + LEGAL group: /insights/, /insights/<slug>/, /privacy/, /terms/, /404.html
   Only additions the shared components do not cover. v5 tokens + round 2 type tokens only.
   Article cards reuse v5's home .post / .ins__grid; the topic filter is the shared .fgal.
   ===================================================================== */

/* CTA band with a secondary pill next to the primary */
.cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- article covers (real OG images, 1200x630) ---------- */
.post__img--cover { display: block; aspect-ratio: 40 / 21; overflow: hidden; background: #141415; }
.post__img--cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post:hover .post__img--cover img, .fpost:hover .post__img--cover img { transform: scale(1.03); }
.post__meta time { font-weight: 600; }
.post[hidden] { display: none; }
.post:focus-visible, .fpost:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 4px; }

/* ---------- index: featured article (cover left, text right) ---------- */
.fpost { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  margin-top: 36px; padding: 12px; border-radius: var(--r); text-decoration: none; color: inherit;
  border: 1px solid rgba(217,163,22,.40); background: linear-gradient(135deg, rgba(217,163,22,.10), var(--card) 65%); transition: border-color .3s, transform .4s var(--ease); }
.fpost:hover { border-color: rgba(60,195,197,.55); transform: translateY(-4px); }
.fpost .post__img { margin: 0; }
.fpost__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px 16px 0; }
.fpost .post__meta { padding: 0; }
.fpost__title { font-size: var(--fs-display); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.fpost__ex { color: var(--ink-2); font-size: var(--fs-body); }
.fpost .card__more { margin-top: 6px; }
.fpost:hover .card__more i { transform: translateX(3px); }
.ins__grid--all { margin-top: 0; }

/* ---------- article layout ---------- */
.art__title { max-width: 24ch; }
.phero__meta a { color: var(--ink-2); text-decoration: none; }
.phero__meta a:hover { color: var(--teal-l); }
.phero__meta .tag i { color: inherit; margin: 0; }
.art__cover { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); background: #141415; }
/* OG images carry the title, which the H1 already shows: the cover sits beside the hero as a small card
   (desktop and tablet) instead of a full-width second headline, and is left out on phones. */
.phero__inner:has(.art__cover) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); column-gap: clamp(40px, 6vw, 88px); align-items: start; }
.phero__inner:has(.art__cover) > * { grid-column: 1; }
.phero__inner:has(.art__cover) > .art__cover { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
.art__cover img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .phero__inner:has(.art__cover) { grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 767px) { .phero__inner:has(.art__cover) { display: block; } .art__cover { display: none; } }
.art .prose, .legal .prose { max-width: 70ch; }
.art__table { margin: 0 0 2em; }
.art__table caption { caption-side: top; text-align: left; padding: 0 0 12px; font-size: var(--fs-h4); font-weight: 700; color: var(--ink); }
.art__box { margin-top: 18px; padding: 22px; border-radius: var(--r); border: 1px solid rgba(217,163,22,.40); background: linear-gradient(135deg, rgba(217,163,22,.10), var(--card) 70%); }
.art__box-t { font-weight: 700; font-size: var(--fs-h4); }
.art__box p:not(.art__box-t) { color: var(--ink-2); font-size: var(--fs-sm); margin: 6px 0 16px; }

/* ---------- legal ---------- */
.legal .prose--num h2 { padding-top: 28px; border-top: 1px solid var(--line); }
.legal .prose--num h2:first-child { padding-top: 0; border-top: 0; }

/* ---------- 404: big outlined numerals, drawn once then floating ---------- */
.nf .phero__inner { padding-bottom: 8px; }
.nf__art { width: min(100%, 620px); margin: 8px auto 10px; }
.nf__svg { display: block; width: 100%; height: auto; overflow: visible; }
.nf__d { font-family: inherit; font-size: 250px; font-weight: 800; letter-spacing: -.04em; fill: rgba(60,195,197,.06); stroke: url(#nf-grad); stroke-width: 2.5;
  stroke-dasharray: 1400; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; }
.nf__next { padding-top: clamp(24px, 4vw, 48px); }
@media (prefers-reduced-motion: no-preference) {
  .nf__d { animation: nf-draw 1.6s var(--ease) both, nf-float 4s ease-in-out 1.6s infinite; }
  .nf__d--2 { animation-delay: .15s, 2s; }
  .nf__d--3 { animation-delay: .3s, 2.4s; }
}
@keyframes nf-draw { from { stroke-dashoffset: 1400; fill: rgba(60,195,197,0); } to { stroke-dashoffset: 0; } }
@keyframes nf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 1100px) {
  /* article contents rail is desktop only; on smaller screens the article comes first */
  .art__side { display: none; }
}
@media (max-width: 767px) {
  .fpost { grid-template-columns: 1fr; }
  .fpost__txt { padding: 4px 8px 14px; }
  .cta__btns .pill { width: 100%; }
}
/* 404 stays centred on phones too */
.nf .phero__inner { text-align: center; }
.nf .crumbs ol, .nf .phero__ctas { justify-content: center; }
.nf .phero__title, .nf .phero__lede { margin-left: auto; margin-right: auto; }
.nf .eyebrow::after { left: 50%; transform: translateX(-50%); }

/* ---------- article inline photos (image round) ---------- */
.prose .art__fig { position: relative; margin: 2.2em 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line-2); background: #151516; }
.art__fig img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.art__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,15,16,0) 60%, rgba(15,15,16,.25)); }
@media (max-width: 767px) { .prose .art__fig { margin: 1.8em 0; border-radius: var(--r-s); } }

/* ---------- index: featured article as a large photo-backed card (visual round) ---------- */
.fpost--bg { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 44vw, 600px); padding: 0; overflow: hidden; background: #0d1112; border-color: rgba(217,163,22,.40); }
.fpost--bg > .post__img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; margin: 0; }
.fpost--bg > .post__img img { filter: saturate(.8); transition: transform 1s var(--ease); }
.fpost--bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,12,13,.92) 0%, rgba(6,12,13,.72) 38%, rgba(6,12,13,.12) 72%), linear-gradient(0deg, rgba(6,14,16,.85) 0%, transparent 45%); }
.fpost--bg > .fpost__txt { position: relative; z-index: 2; max-width: 640px; padding: clamp(28px, 4vw, 56px); gap: 14px; }
.fpost--bg .fpost__title { font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
.fpost--bg .fpost__ex { color: rgba(245,245,244,.86); font-size: var(--fs-lead); }
.fpost--bg:hover > .post__img img { transform: scale(1.04); }
@media (max-width: 767px) {
  .fpost--bg { display: block; min-height: 0; }
  .fpost--bg > .post__img { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .fpost--bg::before { background: linear-gradient(180deg, transparent 20%, rgba(6,12,13,.2) 45%, transparent 60%); }
  .fpost--bg > .fpost__txt { padding: 20px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) { .fpost--bg > .post__img img { transition: none; } }