/* =========================================================
   FINAXIL — insights: homepage carousel, index grid, article pages
   Colour comes from the category accents, so the pages stay vibrant
   without loosening the rest of the site's palette.
   ========================================================= */

:root {
  --cat-tax:       #D1A659;
  --cat-setup:     #18A88C;
  --cat-accounts:  #2E9A84;
  --cat-tech:      #6B7FC7;
  --cat-funding:   #C9713F;
  --cat-default:   #D1A659;
}
/* the fallback must come first: these selectors share specificity, so order decides */
[data-cat]                 { --cat: var(--cat-default); }
[data-cat="Tax"]           { --cat: var(--cat-tax); }
[data-cat="Business setup"]{ --cat: var(--cat-setup); }
[data-cat="Accounting"]    { --cat: var(--cat-accounts); }
[data-cat="Technology"]    { --cat: var(--cat-tech); }
[data-cat="Funding"]       { --cat: var(--cat-funding); }

/* a generated banner, used when a post has no photograph */
.ins-banner {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 8%, color-mix(in srgb, var(--cat) 60%, transparent) 0%, transparent 58%),
    linear-gradient(135deg, #1A1A22 0%, #101016 100%);
}
.ins-banner::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
}
.ins-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) contrast(1.05) brightness(.8); }
.ins-banner__mark {
  position: absolute; right: -6%; bottom: -28%; z-index: 1;
  font-family: var(--display); font-weight: 800; font-size: 13rem; line-height: 1;
  color: var(--cat); opacity: .22; letter-spacing: -.05em; user-select: none;
}
.ins-cat {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 500; color: #12121A; background: var(--cat);
  padding: 4px 10px;
}

/* ---------- homepage carousel ---------- */
.hm-ins { background: #14141B; color: #fff; padding-block: 72px 80px; }
.hm-ins__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.hm-ins__head .hm-h2 { font-size: clamp(28px, 3vw, 40px); color: #fff; }
.hm-ins__nav { display: flex; gap: 8px; }
.hm-ins__nav button {
  width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); background: transparent;
  color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 15px;
}
.hm-ins__nav button:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,.07); }
.hm-ins__nav button:disabled { opacity: .3; cursor: default; }

.hm-ins__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.hm-ins__track::-webkit-scrollbar { display: none; }
/* the carousel is the one dark context, so it flips the card text back to light */
.hm-ins .ins-card { color: #fff; }
.hm-ins .ins-card p { color: #B4B4C0; }
.hm-ins .ins-card__meta { color: #8C8C9A; }
/* Cards default to dark text, because two of the three places they appear
   (the index grid and the related strip) sit on the light paper background.
   Only the homepage carousel is dark, and it overrides below. */
.ins-card { scroll-snap-align: start; display: flex; flex-direction: column; color: var(--ink); }
.ins-card .ins-banner { border-bottom: 3px solid var(--cat); }
.ins-card__body { padding: 18px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* the index grid uses h2 and the other two use h3, so match both */
.ins-card h2, .ins-card h3 { font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.32; margin: 0; }
.ins-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; flex: 1; }
.ins-card__meta { font-size: 12.5px; color: #6E6C78; display: flex; gap: 10px; align-items: center; }
.ins-card:hover h2, .ins-card:hover h3 { text-decoration: underline; text-decoration-color: var(--cat); text-underline-offset: 4px; }
.ins-card:hover .ins-banner__mark { opacity: .32; transition: opacity .4s var(--ease); }

/* ---------- index page ---------- */
.ins-main { padding-top: 65px; }
.ins-hero { background: #14141B; color: #fff; padding-block: 56px 48px; }
.ins-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); margin: 12px 0 14px; letter-spacing: -.02em; }
.ins-hero p { color: var(--light-soft); font-size: 17px; max-width: 56ch; margin: 0; }
.ins-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ins-filters button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #C4C4CE; cursor: pointer;
}
.ins-filters button:hover { border-color: #fff; color: #fff; }
.ins-filters button.is-active { background: #fff; border-color: #fff; color: #14141B; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding-block: 56px 80px; }
.ins-grid .ins-card[hidden] { display: none; }

/* ---------- article page ---------- */
.art-hero { position: relative; background: #14141B; color: #fff; }
/* A banner strip, not a cover image. A 21:9 block at full width ran to roughly
   750px on a desktop screen and pushed the headline off the fold, so the height
   is capped and the aspect ratio left to follow it. */
.art-hero .ins-banner { aspect-ratio: auto; height: clamp(130px, 20vh, 200px); }
.art-hero .ins-banner__mark { font-size: 7rem; right: -1%; bottom: -34%; }
.art-hero__inner { max-width: 820px; margin-inline: auto; padding: 44px clamp(16px, 4vw, 40px) 0; }
.art-crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8C8C9A; margin: 0 0 16px; }
.art-crumb a { color: #8C8C9A; }
.art-crumb a:hover { color: var(--cat); }
.art-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.02em; margin: 14px 0 16px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13.5px; color: #A4A4B0; padding-bottom: 36px; }

.article { max-width: 820px; margin-inline: auto; padding: 48px clamp(16px, 4vw, 40px) 8px; }
.article > p { font-size: 17.5px; line-height: 1.68; color: var(--ink); margin: 0 0 22px; }
.article > p.lede { font-size: 20px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 30px; }
.article h2 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin: 42px 0 16px; }
.article ul { display: grid; gap: 11px; margin: 0 0 24px; }
.article li { position: relative; padding-left: 20px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.article li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--cat); }
.article__key {
  background: #14141B; color: #fff; padding: 26px 28px; margin: 34px 0; border-left: 4px solid var(--cat);
}
.article__key p { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cat); }
.article__key ul { gap: 9px; margin: 0; }
.article__key li { color: #E4E4EC; font-size: 15.5px; }
.article__key li::before { background: var(--cat); }
.article__note { font-size: 13px; color: var(--ink-soft); line-height: 1.6; border-top: 1px solid var(--hairline); padding-top: 18px; margin-top: 36px; }

.art-cta { background: var(--char-2); color: #fff; margin-top: 56px; }
.art-cta__inner { max-width: 820px; margin-inline: auto; padding: 44px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.art-cta h2 { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 8px; max-width: 22ch; }
.art-cta p { color: var(--light-soft); margin: 0; font-size: 15px; }

.art-related { padding-block: 64px 80px; }
.art-related h2 { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 28px; }
.art-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 900px) {
  .hm-ins__track { grid-auto-columns: minmax(260px, 78%); }
  .ins-grid, .art-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hm-ins__track { grid-auto-columns: 86%; }
  .ins-grid, .art-related__grid { grid-template-columns: 1fr; }
  .hm-ins__head { flex-direction: column; align-items: flex-start; }
  .ins-banner__mark { font-size: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .hm-ins__track { scroll-behavior: auto; } }