/* Long-form insight pages (Insights, Why Websites Matter Again, After the Referral)
   on the shared So It Sticks design system: Archivo, the 1280 grid, pill buttons, rounded cards. */
.hero{background:var(--ink);color:#fff;padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px)}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-weight:900;font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-.035em;max-width:980px;margin:0 0 24px}
.hero p{max-width:760px;color:var(--n400);font-size:clamp(17px,1.5vw,21px);line-height:1.55}
.hero p a{color:#fff;font-weight:700}
.article,.insights{padding:var(--section-y) 0}

/* Article body */
.prose{max-width:720px}
.prose h2,.article-wrap h2{font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1.02;letter-spacing:-.03em;margin:56px 0 16px}
.prose h3{font-weight:900;font-size:24px;line-height:1.15;letter-spacing:-.02em;margin:36px 0 10px}
.prose p,.article-wrap p{font-size:18px;line-height:1.65;color:var(--n800);margin:0 0 20px}
.prose .lede,.article-wrap .lede{font-size:clamp(20px,1.9vw,24px);line-height:1.5;color:var(--ink);font-weight:500}
.article-wrap{max-width:760px}

/* Stat cards */
.data-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 clamp(48px,6vw,72px)}
.data{background:#fff;border:1px solid var(--n300);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px}
.data strong{font-family:var(--font);font-weight:900;font-size:clamp(40px,4.4vw,56px);line-height:1;letter-spacing:-.04em}
.data p{font-size:15px;line-height:1.5;color:var(--n800);margin:0}
.data a{margin-top:auto;font-size:13px;font-weight:700;color:var(--n700)}
@media (max-width:860px){.data-grid{grid-template-columns:1fr}}

/* Article with a sticky reading rail */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,6vw,96px);align-items:start}
.sidebar{position:sticky;top:calc(var(--header-h) + 32px);background:#fff;border:1px solid var(--n300);border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:6px}
.sidebar p{font-size:15px;line-height:1.5;color:var(--n800);margin:0 0 8px}
.sidebar a{font-size:15px;font-weight:700;padding:8px 0;border-top:1px solid var(--n200);text-decoration:none}
.sidebar a:hover{color:var(--accent-700)}
@media (max-width:900px){.article-grid{grid-template-columns:1fr}.sidebar{position:static}}

/* Callouts and sources */
.callout{border-radius:24px;padding:clamp(24px,4vw,40px);margin:40px 0}
.prose .callout{background:var(--ink);color:#fff}
.prose .callout h3{margin:0 0 12px;font-size:clamp(24px,2.4vw,30px)}
.prose .callout p{color:var(--n400);margin:0}
.article-wrap .callout{background:var(--accent-100);border:1px solid var(--accent-300)}
.article-wrap .callout strong{display:block;font-size:22px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.article-wrap .callout p{font-size:16px;margin:0}
.sources,.source-box{border-top:1px solid var(--n300);margin-top:56px;padding-top:24px}
.sources h3{font-size:18px;margin:0 0 8px}
.sources ul{padding-left:18px}
.sources li,.source-box p{font-size:14px;line-height:1.5;color:var(--n700);margin:6px 0}

/* Referral path */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:36px 0 48px}
.flow div{background:#fff;border:1px solid var(--n300);border-radius:18px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;gap:6px}
.flow small{color:var(--accent-700);font-weight:800;font-size:12px;letter-spacing:.12em}
.flow strong{font-size:16px;font-weight:800}
@media (max-width:640px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Closing call to action */
.cta,.next{background:var(--ink);color:#fff;padding:var(--section-y) 0}
.cta .eyebrow,.next .eyebrow{color:var(--accent)}
.cta h2,.next h2{font-weight:900;font-size:clamp(36px,5vw,64px);line-height:.98;letter-spacing:-.035em;max-width:900px;margin:0 0 16px}
.cta p,.next p{color:var(--n400);font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:680px;margin:0 0 32px}

/* Insights index: one featured piece beside two, no orphan card */
.ins-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
.ins-card{background:#fff;border:1px solid var(--n300);border-radius:24px;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:12px}
.ins-card.featured{grid-row:span 2;background:var(--ink);color:#fff;border-color:var(--ink);min-height:440px}
.ins-card.featured .eyebrow{color:var(--accent)}
.ins-card h2{font-weight:900;font-size:clamp(34px,4vw,56px);line-height:.98;letter-spacing:-.035em}
.ins-card h3{font-weight:900;font-size:clamp(24px,2.4vw,30px);line-height:1.08;letter-spacing:-.025em}
.ins-card p{font-size:16px;line-height:1.55;color:var(--n800)}
.ins-card.featured p{color:var(--n400);font-size:18px}
.ins-card a{margin-top:auto;padding-top:8px;font-weight:800;font-size:15px}
.ins-card.featured a{color:var(--accent)}
.ins-note{margin-top:clamp(48px,6vw,72px);border-top:2px solid var(--ink);padding-top:28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px)}
.ins-note h2{font-weight:900;font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.03em}
.ins-note p{font-size:17px;line-height:1.6;color:var(--n800)}
@media (max-width:860px){.ins-grid,.ins-note{grid-template-columns:1fr}.ins-card.featured{grid-row:auto;min-height:0}}