/* v3 family sheet: insights. Loaded after assets/v3/v3-site.css on every insights page (scripts/inject-chrome.js renderV3).

   The articles keep their hand-authored markup (a bare <main> holding h1, .byline, paragraphs, h2s, .faq blocks and the
   injected .insight-cta), so this sheet gives that markup the section 16 article body rather than asking every page to
   carry the .v3-prose class. Every selector starts html.v3 .v3-sheet.v3-fam-insights so it outranks both the bridge in
   section 25 and the legacy assets/insights.css, which only matter now as a fallback for a page without the v3 layer. */

/* ---------- the reading column ----------
   The column itself is held to 65 characters (of the prose size) and centred, and its children run the full column, so
   a heading starts on the same left edge as the text under it. The bridge held each child to 65ch of its OWN font size,
   which pushed a 54px h2 wider than the paragraphs and hung it off to the left. */
html.v3 .v3-sheet.v3-fam-insights > main {
  box-sizing: border-box; margin: 0 auto; padding: 0 var(--v3-pad-x);
  max-width: calc(var(--v3-measure-prose) + 2 * var(--v3-pad-x));
  font-family: var(--v3-font-body); font-size: var(--v3-fs-prose); line-height: var(--v3-lh-prose); color: var(--v3-ink);
  overflow-wrap: break-word;
}
/* !important on max-width only: the bridge's 25.10 cap reaches (0,5,2) through its :not() chain, and a selector built
   to outrank it would be harder to read than the one flag */
html.v3 .v3-sheet.v3-fam-insights > main > * { max-width: none !important; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; }
html.v3 .v3-sheet.v3-fam-insights > main > * + * { margin-top: 1em; }
html.v3 .v3-sheet.v3-fam-insights > main p { font-size: inherit; line-height: inherit; }

/* headings: Aleo Bold, left aligned, the article h1 a step under the marketing Headline 1 because article titles run to
   a dozen words, the h2 at the Headline 2 role, the h3 in Schibsted Bold a step above the body (section 16) */
html.v3 .v3-sheet.v3-fam-insights > main :is(h1, h2) { font-family: var(--v3-font-display); font-weight: var(--v3-w-display); letter-spacing: 0; color: var(--v3-ink); text-wrap: balance; }
html.v3 .v3-sheet.v3-fam-insights > main h1 { font-size: clamp(34px, 4.1667vw, 80px); line-height: 1.02; }
html.v3 .v3-sheet.v3-fam-insights > main h2 { font-size: var(--v3-fs-h2); line-height: 1.1; scroll-margin-top: var(--v3-stick); }
html.v3 .v3-sheet.v3-fam-insights > main > * + h2 { margin-top: 1.9em; }
html.v3 .v3-sheet.v3-fam-insights > main h3 { font-family: var(--v3-font-body); font-weight: 700; font-size: calc(var(--v3-fs-prose) * 1.15); line-height: 1.2; letter-spacing: 0; }
html.v3 .v3-sheet.v3-fam-insights > main > * + h3 { margin-top: 1.6em; }
html.v3 .v3-sheet.v3-fam-insights > main > :is(h2, h3) + * { margin-top: .55em; }

/* the byline is the article's meta line: card text in ink, under the title and a hairline above the body */
html.v3 .v3-sheet.v3-fam-insights > main .byline {
  font-size: var(--v3-fs-card); line-height: 1.35; color: var(--v3-ink);
  margin-top: clamp(14px, 1.2vw, 24px); padding-bottom: clamp(18px, 1.6vw, 30px); border-bottom: 1px solid var(--v3-black-40);
}
html.v3 .v3-sheet.v3-fam-insights > main .byline + * { margin-top: clamp(20px, 1.8vw, 34px); }

/* links: ink, a 1px underline that thickens on hover (section 7) */
html.v3 .v3-sheet.v3-fam-insights > main a:not([class]) { color: var(--v3-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
html.v3 .v3-sheet.v3-fam-insights > main a:not([class]):hover { text-decoration-thickness: 2px; text-decoration-color: var(--v3-orange-text); }
html.v3 .v3-sheet.v3-fam-insights > main strong { font-weight: 700; }

/* lists: small orange squares (the logo's full stop) for bullets, Aleo numerals in dark orange for steps. Scoped to the
   article's own lists (children of main and lists nested in them), so the breadcrumb <ol> and the .tools grid keep theirs. */
html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol):not(.tools), html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > :is(ul, ol) { padding-left: 1.4em; }
html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li + li { margin-top: .4em; }
html.v3 .v3-sheet.v3-fam-insights > main > ul:not(.tools), html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ul { list-style: none; }
html.v3 .v3-sheet.v3-fam-insights > main > ul:not(.tools) > li, html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ul > li { position: relative; }
html.v3 .v3-sheet.v3-fam-insights > main > ul:not(.tools) > li::before, html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ul > li::before { content: ""; position: absolute; left: -1.05em; top: .62em; width: .34em; height: .34em; background: var(--v3-orange); }
html.v3 .v3-sheet.v3-fam-insights > main > ol, html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ol { list-style: none; counter-reset: v3-ol; }
html.v3 .v3-sheet.v3-fam-insights > main > ol > li, html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ol > li { position: relative; counter-increment: v3-ol; }
html.v3 .v3-sheet.v3-fam-insights > main > ol > li::before, html.v3 .v3-sheet.v3-fam-insights > main > :is(ul, ol) li > ol > li::before { content: counter(v3-ol); position: absolute; left: -1.4em; top: 0; width: 1.1em; text-align: right; font-family: var(--v3-font-display); font-weight: 700; color: var(--v3-orange-text); }

/* ---------- FAQ blocks in the v3 FAQ language (section 13) ----------
   The markup stays <div class="faq"><h3>question</h3><p>answer</p></div>, so the FAQPage JSON-LD keeps matching the
   visible text word for word. Each block reads as an open item of the v3 list: a black 40% hairline above, the question
   in Schibsted SemiBold at the Descriptor size, the answer at the prose size, and a closing hairline under the last one,
   which is the .v3-faq--wide reading because article answers run long. Nothing folds, because the answers are what the search snippet quotes and must stay on the page. */
html.v3 .v3-sheet.v3-fam-insights > main .faq { border-top: 1px solid var(--v3-black-40); padding: clamp(18px, 1.6vw, 28px) 0; margin-top: 0; }
html.v3 .v3-sheet.v3-fam-insights > main h2 + .faq { margin-top: .9em; }
html.v3 .v3-sheet.v3-fam-insights > main .faq:not(:has(+ .faq)) { border-bottom: 1px solid var(--v3-black-40); }
html.v3 .v3-sheet.v3-fam-insights > main .faq h3 {
  margin: 0 0 .6em;
  font-family: var(--v3-font-body); font-weight: 600; line-height: 1.15; color: var(--v3-ink);
  /* the Descriptor role, but never under the answer's prose size (its 14px floor sat below a 17px answer on phones) */
  font-size: max(var(--v3-fs-descriptor), calc(var(--v3-fs-prose) * 1.06));
}
html.v3 .v3-sheet.v3-fam-insights > main .faq p { margin: 0; font-size: inherit; line-height: inherit; color: var(--v3-ink); }
html.v3 .v3-sheet.v3-fam-insights > main .faq p + p { margin-top: .7em; }

/* ---------- tables (section 17) on the scroll box ---------- */
html.v3 .v3-sheet.v3-fam-insights > main .v3-table-wrap { margin-top: .9em; }
html.v3 .v3-sheet.v3-fam-insights > main .v3-table { font-size: max(15px, calc(var(--v3-fs-prose) * .8)); }
html.v3 .v3-sheet.v3-fam-insights > main .v3-table-wrap > .v3-table { min-width: 34em; }
/* Schibsted's tabular figures set the full stop and comma on a figure-wide advance, which printed "GOV . UK" and
   "£50 , 000", so these tables use the proportional figures (the figures still right align in their column) */
html.v3 .v3-sheet.v3-fam-insights > main .v3-table { font-variant-numeric: normal; }
/* on a phone the three columns fit the sheet, with a long value wrapping in its own column, because a sideways scroll
   hid the figures column, the one a reader came for, behind the edge */
@media (max-width: 640px) {
  html.v3 .v3-sheet.v3-fam-insights > main .v3-table-wrap > .v3-table { min-width: 0; }
  html.v3 .v3-sheet.v3-fam-insights > main .v3-table :is(.v3-num, td.num) { white-space: normal; }
  html.v3 .v3-sheet.v3-fam-insights > main .v3-table :is(th, td) { padding-right: .6em; overflow-wrap: break-word; }
}
html.v3 .v3-sheet.v3-fam-insights > main .v3-table th, html.v3 .v3-sheet.v3-fam-insights > main .v3-table td { font-family: var(--v3-font-body); letter-spacing: 0; text-transform: none; }
html.v3 .v3-sheet.v3-fam-insights > main .v3-table thead th { font-size: inherit; color: var(--v3-ink); }
html.v3 .v3-sheet.v3-fam-insights > main .v3-table td:last-child, html.v3 .v3-sheet.v3-fam-insights > main .v3-table th:last-child { padding-right: 0; }

/* ---------- the insight call to action (chrome-cta, written by inject-chrome.js) ----------
   The bridge already makes it a paper card with the sheet shadow and the one primary button; here a strip of tape
   holds its top edge to the sheet, with the card's top padding taller than the tape's reach so it never meets the
   heading, and the button runs full width on phones as every section button does. */
html.v3 .v3-sheet.v3-fam-insights > main .insight-cta { position: relative; margin-top: clamp(48px, 4.4vw, 84px); padding: clamp(46px, 3.4vw, 64px) clamp(22px, 2.6vw, 48px) clamp(26px, 2.6vw, 48px); }
html.v3 .v3-sheet.v3-fam-insights > main .insight-cta::before {
  content: ""; position: absolute; top: calc(var(--v3-tape-h) / -2); left: 50%; width: min(46%, 220px); height: var(--v3-tape-h); pointer-events: none;
  background: url("/assets/v3/img/absolv-object-tape.webp") center / 100% 100% no-repeat; transform: translateX(-50%) rotate(-2deg);
}
html.v3 .v3-sheet.v3-fam-insights > main .insight-cta-head { font-size: var(--v3-fs-h2); line-height: 1.05; margin: 0 0 .45em; }
html.v3 .v3-sheet.v3-fam-insights > main .insight-cta-body { font-size: inherit; margin: 0 0 1.2em; }
html.v3 .v3-sheet.v3-fam-insights > main .insight-cta-link { min-width: min(100%, var(--v3-btn-w)); }
@media (max-width: 640px) { html.v3 .v3-sheet.v3-fam-insights > main .insight-cta-link { width: 100%; } }

/* ---------- the rates page (insights/uk-tax-rates-2026-27, written by scripts/build-rates-page.js) ---------- */
html.v3 .v3-sheet.v3-fam-insights > main .lede { font-size: calc(var(--v3-fs-prose) * 1.12); line-height: 1.4; color: var(--v3-ink); }
html.v3 .v3-sheet.v3-fam-insights > main .stamp, html.v3 .v3-sheet.v3-fam-insights > main .dp-stamp {
  font-family: var(--v3-font-body); font-weight: 600; font-size: max(14px, var(--v3-fs-card)); letter-spacing: 0; text-transform: none; color: var(--v3-ink);
  padding-bottom: clamp(18px, 1.6vw, 30px); border-bottom: 1px solid var(--v3-black-40);
}
html.v3 .v3-sheet.v3-fam-insights > main .lede + .byline { border-bottom: 0; padding-bottom: 0; }
html.v3 .v3-sheet.v3-fam-insights > main .byline + .stamp { margin-top: .3em; }
/* the key fact: a paper card with the sheet shadow, no cream fill and no orange bar */
html.v3 .v3-sheet.v3-fam-insights > main .note { background: var(--v3-paper); border: 0; box-shadow: var(--v3-shadow-sheet-box); padding: clamp(18px, 1.8vw, 32px); margin-top: 1.4em; margin-bottom: .4em; font-size: inherit; }
/* "Run your own numbers": the related-list cards from section 21, ink bordered, lifting onto the hard shadow */
html.v3 .v3-sheet.v3-fam-insights > main .tools { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: clamp(12px, 1.4vw, 24px); }
html.v3 .v3-sheet.v3-fam-insights > main .tools li { margin: 0; }
html.v3 .v3-sheet.v3-fam-insights > main .tools a {
  display: flex; align-items: center; height: 100%; min-height: 56px; padding: 12px 16px;
  background: var(--v3-paper); border: 1px solid var(--v3-ink); color: var(--v3-ink); text-decoration: none; font-weight: 600; line-height: 1.25;
  transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease);
}
html.v3 .v3-sheet.v3-fam-insights > main .tools a:hover { box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }

/* ---------- the hub (insights/index.html) ----------
   A v3 listing: breadcrumbs, the title and lede in the reading column, then the guides as the section 21 related cards
   in a grid that is allowed wider than the column. Each card keeps its <h2><a> so the page outline is unchanged, and
   the link is stretched over the whole card. */
html.v3 .v3-sheet.v3-fam-insights > main.hub { max-width: calc(1180px + 2 * var(--v3-pad-x)); }
html.v3 .v3-sheet.v3-fam-insights > main.hub > :is(.v3-crumbs, h1, .lede) { max-width: var(--v3-measure-prose) !important; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .v3-crumbs { font-size: var(--v3-fs-nav); line-height: 1.3; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .v3-crumbs + h1 { margin-top: clamp(8px, 1vw, 20px); }
html.v3 .v3-sheet.v3-fam-insights > main.hub .lede { margin-bottom: 0; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .hub-list { margin-top: clamp(32px, 3.4vw, 64px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); gap: clamp(16px, 2vw, 32px); }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post {
  position: relative; display: flex; flex-direction: column; gap: .5em; margin: 0; min-height: 8em;
  padding: clamp(18px, 1.8vw, 30px) clamp(18px, 1.8vw, 30px) calc(clamp(18px, 1.8vw, 30px) + 1.6em);
  background: var(--v3-paper); border: 1px solid var(--v3-ink); color: var(--v3-ink);
  transition: transform .12s var(--v3-ease), box-shadow .12s var(--v3-ease);
}
html.v3 .v3-sheet.v3-fam-insights > main.hub .post::after { content: ""; position: absolute; right: clamp(14px, 1.4vw, 24px); bottom: 12px; width: 2.8em; height: 1.6em; background: url("/assets/v3/marks/absolv-mark-arrow-arc-even.svg") center / contain no-repeat; transform: rotate(-12deg); pointer-events: none; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post:hover { box-shadow: var(--v3-shadow-hard); transform: translate(-2px, -2px); }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post h2 { margin: 0; font-family: var(--v3-font-body); font-weight: 700; font-size: var(--v3-fs-keyline); line-height: 1.15; text-wrap: pretty; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post h2 a { color: var(--v3-ink); text-decoration: none; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post h2 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post h2 a:focus-visible { outline: none; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post:has(a:focus-visible) { outline: 3px solid var(--v3-orange-text); outline-offset: 3px; }
html.v3 .v3-sheet.v3-fam-insights > main.hub .post p { margin: 0; font-size: max(15px, var(--v3-fs-card)); line-height: 1.3; color: var(--v3-ink); }

/* the breadcrumb link keeps section 15's look (no underline until hover), which the article link rule above outranks */
html.v3 .v3-sheet.v3-fam-insights > main .v3-crumbs a { text-decoration: none; }
html.v3 .v3-sheet.v3-fam-insights > main .v3-crumbs a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* reduced motion: the cards change their shadow on hover without moving, as section 23 does for .v3-related */
@media (prefers-reduced-motion: reduce) {
  html.v3 .v3-sheet.v3-fam-insights > main .tools a:hover, html.v3 .v3-sheet.v3-fam-insights > main.hub .post:hover { transform: none; }
}