/* =============================================================
   Headland Marketing — Insights section stylesheet
   Shared by /insights/ hub and all pillar/spoke pages.
   Design system matches the main site (Headland v15 tokens).
============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'PP Editorial New';
  src: url('/fonts/PPEditorialNew-Regular.woff2') format('woff2'),
       url('/fonts/PPEditorialNew-Regular.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Editorial New';
  src: url('/fonts/PPEditorialNew-Italic.woff2') format('woff2'),
       url('/fonts/PPEditorialNew-Italic.woff')  format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green:#e9fcd4; --blue:#aab7f4; --purple:#280a28; --kraft:#e4d6c4;
  --grey-dark:#4A4A4A; --grey-light:#F7F5F2; --white:#FFFFFF; --black:#0A0A0A;
  --font-body:'DM Sans', sans-serif;
  --font-head:'PP Editorial New', serif;
  --shadow:0 4px 24px rgba(40,10,40,0.10);
  --transition:0.3s ease;
  --maxw:1120px;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font-body); color:var(--grey-dark);
  background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--purple); line-height:1.15; font-weight:400; }
h1 { font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 .5em; }
h2 { font-size:clamp(1.6rem,3.2vw,2.2rem); margin:2.2em 0 .6em; }
h3 { font-size:1.25rem; margin:1.6em 0 .4em; }
p { margin:0 0 1.1em; }
a { color:var(--purple); text-decoration:underline; text-underline-offset:2px; transition:opacity var(--transition); }
a:hover { opacity:.65; }
img { max-width:100%; height:auto; }

/* ---------- Nav ---------- */
.nav { position:sticky; top:0; z-index:95; background:rgba(255,255,255,0.97);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--grey-light); }
.nav-inner { max-width:1140px; margin:0 auto; padding:0 24px; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { display:inline-flex; align-items:center; }
.nav-monogram { height:32px; width:auto; color:var(--purple); }
.nav-links { list-style:none; display:flex; gap:32px; margin:0; padding:0; align-items:center; }
.nav-links a { text-decoration:none; color:var(--grey-dark); font-size:.9rem; font-weight:500; }
.nav-links a:hover { color:var(--purple); opacity:1; }
.nav-links a.active { color:var(--purple); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span { width:24px; height:2px; background:var(--purple); display:block; }
@media (max-width:820px){
  .nav-toggle{ display:flex; }
  .nav-links{ display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column;
    gap:18px; background:rgba(255,255,255,0.98); padding:24px; box-shadow:var(--shadow); }
  .nav-links.open{ display:flex; }
}

/* ---------- Layout ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:64px 0; }

/* ---------- Hub hero ---------- */
.insights-hero { background:var(--purple); color:var(--white); padding:72px 0 64px; }
.insights-hero .wrap { max-width:820px; }
.insights-hero .kicker { color:var(--blue); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:.8rem; margin:0 0 14px; }
.insights-hero h1 { color:var(--white); }
.insights-hero p { color:rgba(255,255,255,0.85); font-size:1.15rem; margin:0; max-width:640px; }

/* ---------- Pillar cards ---------- */
.pillar-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.pillar-card { border:1px solid var(--grey-light); border-radius:14px; padding:28px;
  background:var(--white); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.pillar-card h3 { margin-top:0; }
.pillar-card p { color:var(--grey-dark); font-size:.98rem; flex:1; }
.pillar-card .tag { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px; margin-bottom:14px; }
.tag.live { background:var(--green); color:var(--purple); }
.tag.soon { background:var(--grey-light); color:var(--grey-dark); }
.pillar-card a.card-link { text-decoration:none; font-weight:600; color:var(--purple); }
.pillar-card.disabled { opacity:.7; }
.card-feature { background:var(--kraft); border:0; }

/* ---------- Article (pillar/spoke) ---------- */
.breadcrumb { font-size:.85rem; color:var(--grey-dark); padding:22px 0 0; }
.breadcrumb a { text-decoration:none; }
.insight-pillar { max-width:760px; margin:0 auto; padding:20px 0 40px; }
.insight-pillar .tldr { background:var(--kraft); border-radius:12px; padding:20px 24px;
  font-size:1.05rem; color:var(--purple); margin:0 0 1.6em; }
.insight-pillar .toc { background:var(--grey-light); border-radius:12px; padding:18px 24px; margin:0 0 2em; }
.insight-pillar .toc h2 { font-size:1rem; margin:0 0 .5em; text-transform:uppercase;
  letter-spacing:.06em; font-family:var(--font-body); font-weight:700; color:var(--grey-dark); }
.insight-pillar .toc ul { margin:0; padding-left:1.1em; }
.insight-pillar .toc li { margin:.3em 0; }
.table-scroll { overflow-x:auto; margin:0 0 1.6em; }
.insight-pillar table { border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
.insight-pillar th, .insight-pillar td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--grey-light); vertical-align:top; }
.insight-pillar thead th { background:var(--purple); color:var(--white); font-family:var(--font-body); font-weight:600; }
.insight-pillar tbody td:first-child { font-weight:600; color:var(--purple); }
.insight-pillar .faq h3 { font-size:1.1rem; }
.author-bio { background:var(--grey-light); border-radius:12px; padding:24px; margin:2.4em 0 0; }
.author-bio h2 { margin-top:0; font-size:1.2rem; }
.cta-inline { display:inline-block; background:var(--green); color:var(--purple); text-decoration:none;
  font-weight:600; padding:14px 26px; border-radius:100px; margin-top:8px; }
.cta-inline:hover { opacity:.85; }

/* ---------- Footer ---------- */
.footer { background:var(--purple); color:var(--white); padding:48px 0; margin-top:64px; }
.footer-inner { max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.footer-links a { color:var(--white); text-decoration:none; font-size:.9rem; opacity:.85; }
.footer-links a:hover { opacity:1; }
.footer-copy { width:100%; color:rgba(255,255,255,0.6); font-size:.82rem; margin:8px 0 0; }

/* ---------- Cookie banner ---------- */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:100; background:var(--purple);
  color:var(--white); padding:18px 24px; display:none; box-shadow:0 -4px 24px rgba(0,0,0,.2); }
.cookie-banner.visible { display:block; }
.cookie-inner { max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between; }
.cookie-text { margin:0; font-size:.88rem; color:rgba(255,255,255,0.85); max-width:640px; }
.cookie-text a { color:var(--blue); }
.cookie-actions { display:flex; gap:12px; }
.cookie-btn { border:0; cursor:pointer; font-weight:600; padding:10px 18px; border-radius:100px; font-size:.85rem; }
.cookie-btn-reject { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.4); }
.cookie-btn-accept { background:var(--green); color:var(--purple); }