/* public/css/knowledge-insight.css */
/* Coutts Insights — premium editorial article + landing. Navy/gold/ivory tokens, Manrope + Inter. */

:root {
    --kins-navy: #0B1626;
    --kins-navy-deep: #07111F;
    --kins-gold: #C9A227;
    --kins-ink: var(--cx-ink);
    --kins-body: var(--cx-ink-soft);
    --kins-mute: var(--cx-muted);
    --kins-ivory: var(--cx-paper);
    --kins-line: #e6e2d6;
    --kins-measure: 760px;
}

.kins-wrap { max-width: var(--cx-container-prose); margin: 0 auto; padding: 0 24px; }
/* Featured Insight, Latest Insights and the Explore/discovery section all share this width so
   they align on the same left/right axes — previously Featured used 1120px while everything
   else used the narrower 820px reading-width container, which is why the page felt like
   several modules bolted together rather than one publication. The Hero/intro above keeps its
   own narrower reading width deliberately — that's editorial styling, not a container bug. */
.kins-content-wrap { max-width: var(--cx-container); margin: 0 auto; padding: 0 24px; }
.kins-eyebrow { font: 600 .78rem/1 var(--cx-display); letter-spacing: .14em; text-transform: uppercase; color: var(--kins-gold); margin: 0 0 16px; }
.kins-eyebrow--gold { color: var(--kins-gold); }

/* Buttons */
.kins-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--cx-btn-weight); font-size: var(--cx-btn-fs); line-height: 1; font-family: var(--cx-display); padding: 0 var(--cx-btn-pad-x); border-radius: var(--cx-btn-radius); text-decoration: none; transition: all var(--cx-duration-sm) ease; white-space: nowrap; min-height: var(--cx-btn-h);}
.kins-btn span[aria-hidden] { transition: transform var(--cx-duration-sm) ease; }
.kins-btn:hover span[aria-hidden] { transform: translateX(3px); }
.kins-btn--gold { background: var(--kins-gold); color: var(--kins-navy) !important; }
.kins-btn--gold:hover { background: #b8941f; }
.kins-btn--ghost { background: transparent; color: var(--kins-navy) !important; border: 1px solid rgba(11,22,38,.28); }
.kins-btn--ghost:hover { border-color: var(--kins-gold); }
.kins-btn--ghost-light { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.35); }
.kins-btn--ghost-light:hover { border-color: var(--kins-gold); }

/* Preview flag + reading progress */
.kins-preview-flag { background: var(--kins-navy); color: var(--kins-gold); text-align: center; padding: .5rem; font: 600 .8rem/1 var(--cx-display); letter-spacing: .1em; text-transform: uppercase; }
.kins-progress { position: sticky; top: 0; left: 0; height: 3px; width: 100%; background: transparent; z-index: 40; }
.kins-progress span { display: block; height: 100%; width: 0; background: var(--kins-gold); transition: width .1s linear; }

/* ---------- Split hero ---------- */
.kins-hero { background: var(--kins-ivory); border-bottom: 1px solid var(--kins-line); }
.kins-hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 57% 43%; align-items: stretch; }
.kins-hero-copy { padding: 56px clamp(24px, 4vw, 56px) 52px; align-self: center; }
.kins-crumb { font: 500 .8rem/1.4 var(--cx-sans); color: var(--kins-mute); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kins-crumb a { color: var(--kins-mute); text-decoration: none; }
.kins-crumb a:hover { color: var(--kins-gold); }
.kins-crumb span { color: var(--kins-line); }
.kins-title { font: 600 clamp(24px, 2.4vw, 34px)/1.2 var(--cx-display); letter-spacing: -.01em; color: var(--kins-navy); margin: 0 0 18px; }
.kins-standfirst { font: 400 clamp(14px, 1.05vw, 16px)/1.55 var(--cx-sans); color: var(--kins-body); margin: 0 0 20px; max-width: 44ch; }
.kins-meta { font: 500 .84rem/1.5 var(--cx-sans); color: var(--kins-mute); margin: 0 0 26px; }
.kins-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kins-hero-media { position: relative; min-height: 340px; overflow: hidden; }
.kins-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); }
.kins-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--kins-ivory) 0%, rgba(247,245,239,.15) 22%, transparent 45%); }

/* ---------- Shell: sticky TOC + main column ---------- */
.kins-shell { max-width: var(--cx-container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.kins-toc { position: sticky; top: calc(var(--cc-header-h, 122px) + 24px); align-self: start; padding-top: 48px; }
.kins-toc-toggle { display: none; }
.kins-toc-h { font: 600 .72rem/1 var(--cx-display); letter-spacing: .12em; text-transform: uppercase; color: var(--kins-mute); margin: 0 0 14px; }
.kins-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kins-line); }
.kins-toc li { margin: 0; }
.kins-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font: 500 .84rem/1.35 var(--cx-sans); color: var(--kins-mute); text-decoration: none; }
.kins-toc a:hover { color: var(--kins-navy); }
.kins-toc a.is-active { color: var(--kins-navy); border-left-color: var(--kins-gold); font-weight: 600; }
.kins-toc a:focus-visible { outline: 2px solid var(--kins-gold); outline-offset: 2px; }
.kins-main { min-width: 0; }

/* ---------- Article body ---------- */
.kins-body { max-width: var(--kins-measure); padding-top: 48px; font: 400 clamp(15px, 1.05vw, 16px)/1.65 var(--cx-sans); color: var(--kins-body); }
.kins-body > *:first-child { margin-top: 0; }
.kins-body h2 { font: 600 clamp(19px, 1.8vw, 23px)/1.28 var(--cx-display); color: var(--kins-navy); margin: 2.2em 0 .6em; letter-spacing: -.01em; scroll-margin-top: calc(var(--cc-header-h, 122px) + 16px); }
.kins-body h3 { font: 600 clamp(16px, 1.3vw, 18px)/1.35 var(--cx-display); color: var(--kins-ink); margin: 1.8em 0 .5em; scroll-margin-top: calc(var(--cc-header-h, 122px) + 16px); }
.kins-body h4 { font: 600 clamp(14.5px, 1.1vw, 16px)/1.4 var(--cx-display); color: var(--kins-ink); margin: 1.6em 0 .5em; letter-spacing: -.005em; }
.kins-body p { margin: 0 0 1.25em; }
.kins-body ul, .kins-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.kins-body li { margin: 0 0 .55em; padding-left: .25em; }
.kins-body li::marker { color: var(--kins-gold); }
.kins-body a { color: #0d5aa8; text-decoration: underline; text-underline-offset: 2px; }
.kins-body strong { color: var(--kins-ink); font-weight: 600; }

/* Tables — clean, restrained, navy headings, limited gold accent. Wrapped so a wide comparison
   table scrolls horizontally on mobile instead of breaking the page (§15). */
.kins-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .94rem; }
.kins-body caption { caption-side: top; text-align: left; font: 600 .78rem/1.3 var(--cx-display);
    letter-spacing: .04em; color: var(--kins-mute); margin-bottom: .6em; }
.kins-body th, .kins-body td { padding: .7em .9em; text-align: left; border-bottom: 1px solid var(--kins-line); vertical-align: top; }
.kins-body thead th { font: 700 .78rem/1.3 var(--cx-display); letter-spacing: .04em; text-transform: uppercase;
    color: var(--kins-navy); border-bottom: 2px solid var(--kins-gold); white-space: nowrap; }
.kins-body tbody tr:last-child th, .kins-body tbody tr:last-child td { border-bottom: none; }
.kins-body tbody tr:nth-child(even) { background: rgba(247,245,239,.6); }
.kins-body figcaption { font: 400 .82rem/1.5 var(--cx-sans); color: var(--kins-mute); margin-top: .6em; }
@media (max-width: 640px) {
    .kins-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* Editorial callout — the general-purpose family (§16). One thin gold left border, one pale
   warm background, one small uppercase gold label generated per variant — no dynamic label
   attribute needed, since attributes beyond class/href/title never survive EditorialHtml. */
.kins-body .ins-callout { margin: 1.8em 0; padding: 1.1em 1.4em; background: #FBF8F1;
    border-left: 3px solid var(--kins-gold); border-radius: 0 6px 6px 0; }
.kins-body .ins-callout p:last-child { margin-bottom: 0; }
.kins-body .ins-callout::before { display: block; font: 700 .68rem/1 var(--cx-display);
    letter-spacing: .12em; text-transform: uppercase; color: var(--kins-gold); margin-bottom: .55em; }
.kins-body .ins-callout--perspective::before { content: 'Coutts Perspective'; }
.kins-body .ins-callout--practical::before { content: 'Practical Point'; }
.kins-body .ins-callout--important::before { content: 'Important'; }
.kins-body .ins-callout--founders::before { content: 'For International Founders'; }
.kins-body .ins-callout--banking::before { content: 'Banking Consideration'; }

/* Editorial figures — allowed to extend past the reading measure */
.kins-figure { margin: 2.8em 0; max-width: min(960px, 96vw); border-radius: var(--cx-radius); overflow: hidden; box-shadow: var(--cx-shadow-4); }
.kins-figure img { width: 100%; height: auto; display: block; aspect-ratio: 16/8; object-fit: cover; object-position: var(--img-pos, 50% 50%); }

/* Pull quotes — from existing blockquotes only */
.kins-body blockquote, .kins-pullquote { margin: 2em 0; padding: .3em 0 .3em 1.4em; border-left: 3px solid var(--kins-gold);
    font: 500 clamp(19px, 2.2vw, 23px)/1.5 var(--cx-display); color: var(--kins-navy); }

/* Key Takeaways — premium executive summary (from extracted .ins-takeaways) */
.kins-body .ins-takeaways { margin: 2.6em 0; padding: 34px 38px; background: #fff; border: 1px solid var(--kins-line);
    border-top: 3px solid var(--kins-gold); border-radius: var(--cx-radius); }
.kins-body .ins-takeaways h2 { margin: 0 0 1.1em; font-size: clamp(15px,1.5vw,18px); color: var(--kins-navy); letter-spacing: .01em; }
.kins-body .ins-takeaways-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em 2.4em; }
.kins-body .ins-takeaways-list li { display: block; position: relative; margin: 0; padding: 0 0 0 2.6em; font-size: .9rem; line-height: 1.6; }
.kins-body .ins-takeaways-list li::marker { content: none; }
.ins-takeaway-n { position: absolute; left: 0; top: .05em; font: 700 .95rem/1 var(--cx-display); color: var(--kins-gold); }

/* Coutts Perspective — navy panel */
.kins-body .ins-perspective { margin: 2.8em 0; padding: 34px 38px; background: var(--kins-navy); color: #dfe5ec;
    border: 1px solid var(--kins-navy-deep); border-radius: var(--cx-radius); }
.kins-body .ins-perspective h2 { margin: 0 0 .6em; color: var(--kins-gold); font-size: clamp(18px,2vw,22px); }
.kins-body .ins-perspective p { color: #cfd6df; }
.kins-body .ins-perspective a { color: #e9c65a; }

/* ---------- Related blocks ---------- */
.kins-block { max-width: var(--kins-measure); border-top: 1px solid var(--kins-line); margin-top: 44px; padding-top: 36px; }
.kins-block-h { font: 600 1.15rem/1.25 var(--cx-display); color: var(--kins-navy); margin: 0 0 20px; }

/* Relevant jurisdictions */
.kins-juris-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kins-juris { border: 1px solid var(--kins-line); border-radius: var(--cx-radius); padding: 14px 16px; transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease; }
.kins-juris:hover { border-color: var(--kins-gold); box-shadow: var(--cx-shadow-3); }
.kins-juris-main { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.kins-juris-main .fi { width: 1.5em; height: 1.5em; border-radius: var(--cx-radius-xs); flex: 0 0 auto; }
.kins-juris-name { font: 600 1rem/1.25 var(--cx-display); color: var(--kins-navy); }
.kins-juris-guide { display: inline-block; margin-top: .5rem; font: 600 .78rem/1 var(--cx-display); color: var(--kins-gold); text-decoration: none; }
.kins-juris-guide:hover { text-decoration: underline; }

/* Related guides — real covers */
.kins-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.kins-guide-card { display: flex; gap: 16px; text-decoration: none; padding: 16px; border: 1px solid var(--kins-line); border-radius: var(--cx-radius-lg); background: #fff; transition: box-shadow var(--cx-duration-sm) ease, border-color var(--cx-duration-sm) ease; }
.kins-guide-card:hover { border-color: var(--kins-gold); box-shadow: var(--cx-shadow-3); }
.kins-guide-cover { flex: 0 0 auto; width: 66px; }
.kins-guide-cover img { width: 100%; height: auto; border-radius: var(--cx-radius-xs); box-shadow: var(--cx-shadow-2); display: block; }
.kins-guide-meta { display: flex; flex-direction: column; }
.kins-guide-eyebrow { font: 600 .66rem/1 var(--cx-display); letter-spacing: .12em; text-transform: uppercase; color: var(--kins-gold); margin-bottom: 6px; }
.kins-guide-title { font: 600 1.02rem/1.3 var(--cx-display); color: var(--kins-navy); margin-bottom: auto; }
.kins-guide-go { font: 600 .8rem/1 var(--cx-display); color: var(--kins-mute); margin-top: 10px; }

/* Continue reading */
.kins-cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kins-cr-card { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--kins-line); border-radius: var(--cx-radius-lg); text-decoration: none; background: #fff; transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease; }
.kins-cr-card:hover { border-color: var(--kins-gold); box-shadow: var(--cx-shadow-3); }
.kins-cr-media { display: block; position: relative; margin-bottom: 14px; border-radius: var(--cx-radius-sm); overflow: hidden; aspect-ratio: 16/10; background: var(--kins-ivory); }
.kins-cr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block; }
.kins-cr-media-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--kins-navy) 0%, #16293f 100%); }
.kins-cr-cat { font: 600 .68rem/1 var(--cx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--kins-gold); margin-bottom: 8px; }
.kins-cr-title { font: 600 1.05rem/1.32 var(--cx-display); color: var(--kins-navy); margin-bottom: 8px; }
.kins-cr-dek { font: 400 .88rem/1.5 var(--cx-sans); color: var(--kins-body); margin-bottom: 10px; }
.kins-cr-meta { font: 500 .8rem/1 var(--cx-sans); color: var(--kins-mute); margin-top: auto; }

/* How Coutts can help — extracted service categories */
.kins-help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kins-help-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--kins-line); border-radius: var(--cx-radius-lg); background: #fff; text-decoration: none; transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease; }
.kins-help-card:hover { border-color: var(--kins-gold); box-shadow: var(--cx-shadow-3); }
.kins-help-name { font: 600 1.08rem/1.3 var(--cx-display); color: var(--kins-navy); margin-bottom: 8px; }
.kins-help-desc { font: 400 .92rem/1.55 var(--cx-sans); color: var(--kins-body); margin-bottom: 14px; }
.kins-help-go { font: 600 .82rem/1 var(--cx-display); color: var(--kins-gold); margin-top: auto; }
.kins-help-go span { transition: transform var(--cx-duration-sm) ease; display: inline-block; }
.kins-help-card:hover .kins-help-go span { transform: translateX(3px); }

/* CTA + disclaimer */
.kins-published-by { max-width: var(--kins-measure); font: 600 .82rem/1 var(--cx-display); color: var(--kins-mute); letter-spacing: .02em; padding-top: 40px; margin: 0; }
.kins-disclaimer { max-width: var(--kins-measure); font: 400 .82rem/1.6 var(--cx-sans); color: var(--kins-mute); padding: 12px 0 56px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .kins-shell { grid-template-columns: 1fr; }
    .kins-toc { position: static; padding-top: 0; margin-bottom: 32px; border: 1px solid var(--kins-line); border-radius: var(--cx-radius); overflow: hidden; }
    /* Collapsed by default (§11): a static list of a dozen headings above the article is a wall
       of navigation, not an aid. JS reveals the toggle only once the TOC actually has content. */
    .kins-toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 14px 18px; border: 0; background: #fff; cursor: pointer;
        font: 600 .82rem/1 var(--cx-display); letter-spacing: .06em; text-transform: uppercase; color: var(--kins-navy); }
    .kins-toc-toggle span { color: var(--kins-gold); transition: transform var(--cx-duration-sm) ease; }
    .kins-toc--open .kins-toc-toggle span { transform: rotate(180deg); }
    .kins-toc-h { display: none; }
    .kins-toc ol { display: none; padding: 4px 18px 14px; border-left: none; }
    .kins-toc--open ol { display: block; }
    .kins-toc a { border-left: none; padding: 8px 0; }
    .kins-toc a.is-active { border-left: none; color: var(--kins-gold); }
    .kins-body, .kins-block, .kins-disclaimer { max-width: 100%; }
}
/* Literal, not a token: var() is not permitted in a media condition —
   custom properties are resolved per-element, and a media query has no element. */
@media (max-width: 820px) {
    .kins-hero-inner { grid-template-columns: 1fr; }
    .kins-hero-media { order: -1; min-height: 220px; }
    .kins-hero-media::after { background: linear-gradient(0deg, var(--kins-ivory) 0%, transparent 40%); }
    .kins-hero-copy { padding: 32px 24px 36px; }
    .kins-body .ins-takeaways-list { grid-template-columns: 1fr; gap: .9em; }
    .kins-figure { max-width: 100%; }
}

/* ---------- Landing ---------- */
.kins-lhero { position: relative; background: var(--kins-navy); color: #fff; padding: 52px 0 44px; overflow: hidden; }
.kins-lhero-bg { position: absolute; inset: 0; }
.kins-lhero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.kins-lhero-scrim { position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(7,17,31,.96) 0%, rgba(7,17,31,.9) 38%, rgba(7,17,31,.72) 62%, rgba(7,17,31,.58) 100%); }
.kins-lhero-inner { position: relative; z-index: 2; }
.kins-lhero .kins-eyebrow { color: var(--kins-gold); }
.kins-lhero-title { font: 600 clamp(30px,4vw,44px)/1.12 var(--cx-display); color: #fff; margin: 0 0 16px; letter-spacing: -.015em; }
.kins-lhero-lead { font: 400 clamp(15px,1.3vw,17px)/1.6 var(--cx-sans); color: #b9c2cd; max-width: 42em; margin: 0; }

.kins-filter-banner { padding: 18px 24px 0; max-width: var(--cx-container); }
.kins-filter-banner p { font: 500 .88rem/1.5 var(--cx-sans); color: var(--kins-mute); margin: 0; }
.kins-filter-banner a { color: var(--kins-gold); text-decoration: none; font-weight: 600; margin-left: .4em; }
.kins-filter-banner a:hover { text-decoration: underline; }

.kins-lh-eyebrow { font: 600 .72rem/1 var(--cx-display); letter-spacing: .14em; text-transform: uppercase;
    color: var(--kins-gold); margin: 0 0 18px; }

.kins-lfeat-wrap { padding: 8px 24px 8px; max-width: var(--cx-container); margin: 0 auto; }
/* 45/55 landscape editorial split — the Featured Insight must be the clearly dominant single
   editorial item on the page, not a narrow horizontal strip smaller than the ordinary cards
   beneath it. Still shares this page's own scale system: substantial, not full-screen. */
.kins-lfeat {
    display: grid; grid-template-columns: 46fr 54fr; gap: 0;
    align-items: stretch; border-radius: var(--cx-radius-xl); overflow: hidden; background: #fff;
    border: 1px solid var(--kins-line); box-shadow: var(--cx-shadow-1);
    transition: box-shadow var(--cx-duration-sm) ease;
}
.kins-lfeat:hover { box-shadow: var(--cx-shadow-4); }
.kins-lfeat-media {
    display: block; position: relative; min-height: 260px;
    background: var(--kins-ivory);
}
.kins-lfeat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); display: block; }
.kins-lfeat-fallback { position: absolute; inset: 0; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 28px;
    background: linear-gradient(135deg, var(--kins-navy) 0%, var(--kins-navy-deep) 100%); }
.kins-lfeat-fallback-cat { font: 700 .82rem/1.3 var(--cx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--kins-gold); }
.kins-lfeat-body { display: flex; flex-direction: column; justify-content: center; padding: 32px 40px; }
.kins-lfeat-eyebrow { font: 700 .74rem/1 var(--cx-display); letter-spacing: .13em; text-transform: uppercase; color: var(--kins-gold); margin-bottom: 14px; }
.kins-lfeat-title {
    font: 700 clamp(24px, 2.6vw, 32px)/1.22 var(--cx-display); color: var(--kins-navy);
    margin-bottom: 16px; text-decoration: none; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kins-lfeat-title:hover { color: var(--kins-gold); }
.kins-lfeat-dek {
    font: 400 1.02rem/1.6 var(--cx-sans); color: var(--kins-body); margin-bottom: 18px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kins-lfeat-meta { font: 500 .85rem/1 var(--cx-sans); color: var(--kins-mute); margin-bottom: 24px; }
.kins-lfeat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.kins-lfeat-pdf { font: 600 .88rem/1 var(--cx-display); color: var(--kins-mute); text-decoration: none; }
.kins-lfeat-pdf:hover { color: var(--kins-gold); }

.kins-llatest, .kins-lsubjects { padding: 44px 24px; max-width: var(--cx-container); margin: 0 auto; }
.kins-lh { font: 600 1.35rem/1.2 var(--cx-display); color: var(--kins-navy); margin: 0 0 18px; }
.kins-lh--light { color: #fff; }
.kins-lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
/* Cap desktop at the actual card count so 1–2 published Insights don't stretch into a lone
   oversized card or leave visible empty grid space (§9). */
.kins-lgrid--count-1 { grid-template-columns: minmax(210px, 320px); }
.kins-lgrid--count-2 { grid-template-columns: repeat(2, minmax(200px, 1fr)); max-width: 560px; }
@media (min-width: 900px) { .kins-lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .kins-lgrid--count-1 { grid-template-columns: minmax(210px, 320px); } }
@media (min-width: 900px) { .kins-lgrid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } }
.kins-lcard { display: flex; flex-direction: column; text-decoration: none; }
.kins-lcard-media { display: block; position: relative; margin-bottom: 10px; border-radius: var(--cx-radius-sm); overflow: hidden; box-shadow: var(--cx-shadow-3); aspect-ratio: 16/9; background: var(--kins-ivory); }
.kins-lcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); }
.kins-lcard-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--kins-navy) 0%, var(--kins-navy-deep) 100%); }
.kins-lcard-cat { font: 600 .66rem/1 var(--cx-display); letter-spacing: .1em; text-transform: uppercase; color: var(--kins-gold); margin-bottom: 6px; }
.kins-lcard-title {
    font: 600 .95rem/1.3 var(--cx-display); color: var(--kins-navy); margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kins-lcard-meta { font: 500 .74rem/1 var(--cx-sans); color: var(--kins-mute); margin-top: auto; }
.kins-load-more { display: flex; justify-content: center; margin-top: 40px; }

/* ---- Explore Coutts Insights — combined compact discovery (Subject + Jurisdiction) --------
   Replaces two previous treatments: large padded white Subject cards, and a separate navy
   Jurisdiction band. Both discovery axes now share one pill component and one section, cutting
   the combined vertical footprint roughly in half while keeping each pill easy to scan and tap.
   margin-bottom leaves genuine room before the global footer CTA that follows this section
   directly — that CTA pulls itself up by 45px (.free-guide .guide-box { margin-top:-45px }),
   which without this would eat straight into this section's own padding and leave the two
   touching with no visible gap, the same issue already fixed on the Homepage stats band. */
.kins-discover { padding: 36px 24px 44px; margin-bottom: 70px; }
.kins-discover-group + .kins-discover-group { margin-top: 28px; }
.kins-discover-label {
    font: 700 .72rem/1 var(--cx-display); letter-spacing: .12em; text-transform: uppercase;
    color: var(--kins-mute); margin: 0 0 12px;
}
.kins-pill-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.kins-pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem;
    border-radius: 999px; background: #fff; border: 1px solid var(--kins-line);
    text-decoration: none; transition: border-color var(--cx-duration-sm) ease, box-shadow var(--cx-duration-sm) ease;
}
.kins-pill:hover { border-color: var(--kins-gold); box-shadow: var(--cx-shadow-2); }
.kins-pill-name { font: 600 .86rem/1 var(--cx-display); color: var(--kins-navy); }
.kins-pill-count {
    font: 700 .72rem/1 var(--cx-display); color: var(--kins-gold);
    background: rgba(201,162,39,.12); border-radius: 999px; padding: .15rem .5rem;
}
.kins-pill-flag { width: 1.15em; height: 1.15em; border-radius: 50%; flex: none; }

@media (max-width: 900px) {
    .kins-lfeat-body { padding: 24px; }
}
@media (max-width: 767px) {
    .kins-lfeat { grid-template-columns: 1fr; gap: 20px; }
    /* Stretch only helps a two-column row; stacked to one column, the media block needs its
       own explicit height rather than the 130px floor collapsing it too short. */
    .kins-lfeat-media { aspect-ratio: 16/10; min-height: 0; }
    .kins-lfeat-body { padding: 20px; }
    .kins-lhero { padding: 40px 0 32px; }
    .kins-lhero-scrim { background: linear-gradient(180deg, rgba(7,17,31,.9) 0%, rgba(7,17,31,.85) 100%); }
    .kins-juris-grid { gap: .5rem; }
}