/* ==========================================================================
   Accountants for Landlords: the concept design layer (Andy's concept, 11 Sep 2026)
   Loaded after styles.css on every page. The homepage is built from the .afl-*
   classes; every interior page gets the same system through the shared
   components (page_hero, cta_band, accreditations, cards, notes, tables...).

   Grounds are white or a NEUTRAL near-white. Warm beige (#f4f2ec and friends)
   reads as grubby to Andy and has been rejected on four sites, so --paper is a
   cool grey, not cream.
   ========================================================================== */
:root {
  --ground: #ffffff;
  --card: #ffffff;
  --ink: #0e3833;
  --tx: #43524f;
  --mut: #66756f;
  --line: #e2e7e5;
  --acc: #c94d35;
  --acc-d: #a93d29;
  --acc-soft: #fbede8;
  --green: #0f433c;
  --green-deep: #0b332e;
  --paper: #f5f6f5;
  --max: 1240px;
  --gut: clamp(20px, 4vw, 48px);
}

body { background: #fff; color: var(--tx); }
.topbar { display: none; }
.inner { max-width: var(--max); padding-inline: var(--gut); }
h1, h2, h3, h4, .display { color: var(--ink); font-weight: 700; letter-spacing: -.03em; }
h1 { font-size: clamp(2.3rem, 3.6vw, 3.2rem); }
h2 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.12; }
h3 { font-weight: 700; }
a { color: var(--acc); }
strong { color: var(--ink); }

/* one stroke style for every icon on the site */
.afl-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- masthead: a flat white bar ---------- */
header.site {
  position: sticky; top: 0; z-index: 80; padding: 0;
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
header.site .inner { min-height: 78px; padding: 10px var(--gut); border-radius: 0; box-shadow: none; background: transparent; }
.wordmark { gap: 10px; flex: none; }
.wordmark .wm-mark {
  width: 42px; height: 42px; padding: 0; border-radius: 0; color: transparent;
  background: transparent url('/assets/logo-mark.svg') center / contain no-repeat;
}
.wordmark .wm-mark svg { display: none; }
.wordmark .wm-top { color: var(--ink); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.wordmark .wm-main { color: var(--ink); font-size: 1.4rem; font-weight: 700; letter-spacing: -.035em; }
nav.primary { gap: 4px; }
nav.primary a, nav.primary .nav-group > button { color: var(--ink); font-weight: 600; font-size: .9rem; padding: 10px 12px; border-radius: 4px; }
nav.primary a:hover, nav.primary .nav-group > button:hover { background: var(--paper); color: var(--ink); }
nav.primary .btn.btn-primary, nav.primary .btn.btn-bright {
  background: var(--acc); border-color: var(--acc); color: #fff; border-radius: 4px; box-shadow: none; padding: 13px 20px; margin-left: 6px;
}
nav.primary .btn.btn-primary:hover, nav.primary .btn.btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; white-space: nowrap; }
.nav-phone .afl-ico { width: 17px; height: 17px; stroke-width: 1.9; }
.nav-group .sub { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px rgba(10,40,36,.12); }
.nav-group .sub a { border-radius: 4px; }

/* ==========================================================================
   Homepage
   ========================================================================== */
.home-refresh { overflow: hidden; }
.afl-wrap { width: min(var(--max), 100%); margin-inline: auto; padding-inline: var(--gut); }
.afl-kicker { display: block; color: var(--acc); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }

/* buttons */
.afl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.afl-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 20px; border: 1.5px solid transparent; border-radius: 4px;
  font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.afl-button:hover { text-decoration: none; }
.afl-button .afl-ico { width: 18px; height: 18px; stroke-width: 2; }
.afl-button-primary { background: var(--acc); color: #fff; }
.afl-button-primary:hover { background: var(--acc-d); color: #fff; }
.afl-button-secondary { background: #fff; color: var(--ink); border-color: #8a9894; }
.afl-button-secondary:hover { color: var(--ink); border-color: var(--ink); }
.afl-button-white { background: #fff; color: var(--ink); min-width: 280px; gap: 28px; }
.afl-button-white:hover { color: var(--acc-d); }

/* hero: copy on white, the photograph bleeding off the right edge */
.afl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 480px; background: #fff; }
.afl-hero-copy { padding: 60px 36px 60px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); align-self: center; }
.afl-hero h1 { font-size: clamp(2.3rem, 3.1vw, 2.6rem); line-height: 1.08; margin: 0 0 18px; }
/* each sentence is its own block, so on a phone each one balances over two lines */
.afl-hero h1 span { display: block; text-wrap: balance; }
.afl-hero p { font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.55; max-width: 500px; margin: 0; }
.afl-hero-image, .afl-split-image { position: relative; overflow: hidden; }
.afl-hero-image { min-height: 480px; }
.afl-hero-image img, .afl-split-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.afl-hero-image img { object-position: 55% 40%; }
.afl-hero-image::after, .afl-split-image::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20%;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); pointer-events: none;
}

/* trust band (also under every interior hero) */
.afl-trust-band { background: var(--paper); border-block: 1px solid var(--line); }
.afl-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.afl-trust > div { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; color: var(--ink); font-size: .92rem; }
.afl-trust > div + div::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: #d2d9d6; }
.afl-trust strong { font-weight: 600; }
.afl-trust .afl-ico { width: 30px; height: 30px; color: var(--green); stroke-width: 1.6; }

/* HMRC sign-up notice */
.afl-notice { background: #fff; border-bottom: 1px solid var(--line); }
.afl-notice .afl-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; text-align: center; }
.afl-notice .afl-ico { width: 22px; height: 22px; color: var(--acc); }
.afl-notice p { margin: 0; color: var(--ink); font-size: .95rem; }
.afl-notice a { font-weight: 700; }

/* sections */
.afl-section { padding: 72px 0; }
.afl-heading { margin-bottom: 34px; }
.afl-heading-centred { text-align: center; }
.afl-heading h2 { font-size: clamp(1.85rem, 2.6vw, 2.5rem); margin: 0 0 10px; }
.afl-heading p { margin: 0 auto; max-width: 680px; font-size: 1.04rem; }

/* audience cards */
.afl-audiences { background: #fff; }
.afl-audience-grid, .afl-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.afl-audience-card {
  display: block; color: var(--ink); background: #fff; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(10,40,36,.05);
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.afl-audience-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,40,36,.10); text-decoration: none; }
.afl-audience-card img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 3px; }
.afl-card-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 8px 8px; }
.afl-card-row strong { display: block; font-size: 1.12rem; color: var(--ink); margin-bottom: 4px; }
.afl-card-row small { display: block; color: var(--tx); font-size: .88rem; line-height: 1.45; }
.afl-card-row .afl-ico { width: 22px; height: 22px; color: var(--ink); stroke-width: 2; }
.afl-more-links { text-align: center; margin: 26px 0 0; font-size: .95rem; }

/* split: checklist left, photograph right */
.afl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 520px; background: #fff; border-top: 1px solid var(--line); }
.afl-split-copy { padding: 72px 56px 72px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); align-self: center; }
.afl-split-copy h2 { font-size: clamp(1.9rem, 2.7vw, 2.5rem); line-height: 1.1; margin: 0 0 14px; max-width: 24ch; }
.afl-split-copy > p { font-size: 1.04rem; max-width: 520px; margin: 0; }
.afl-checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.afl-checks li { position: relative; padding-left: 32px; color: var(--ink); }
.afl-checks li::before, ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: .12em; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: #13795f; color: #fff; font-size: .72rem; font-weight: 900;
}
.afl-split-image { min-height: 520px; }
.afl-split-image img { object-position: 88% 40%; }

/* tools */
.afl-tools { background: var(--paper); }
.afl-tool-card {
  display: flex; flex-direction: column; min-height: 260px; padding: 28px; border-radius: 6px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 8px 24px rgba(10,40,36,.04);
  text-decoration: none; transition: transform .2s ease;
}
.afl-tool-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-3px); }
.afl-tool-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #edf1ef; color: var(--green); margin-bottom: 20px; }
.afl-tool-icon .afl-ico { width: 28px; height: 28px; stroke-width: 1.7; }
.afl-tool-card strong { color: var(--ink); font-size: 1.2rem; }
.afl-tool-card p { color: var(--tx); font-size: .94rem; line-height: 1.5; margin: 10px 0 20px; }
.afl-tool-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--acc); font-weight: 700; font-size: .92rem; }
.afl-tool-link .afl-ico { width: 18px; height: 18px; stroke-width: 2; }

/* switching steps */
.afl-switching { background: #fff; }
.afl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 40px 0 0; padding: 0; }
.afl-steps li { position: relative; text-align: center; padding: 0 22px; }
.afl-steps li::before { content: ""; position: absolute; top: 21px; left: calc(-50% + 28px); width: calc(100% - 56px); height: 1px; background: #9aa9a6; }
.afl-steps li:first-child::before { display: none; }
.afl-steps li > span {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 16px;
  border: 2px solid var(--acc); border-radius: 50%; background: #fff; color: var(--acc); font-weight: 800;
}
.afl-steps li:first-child > span { background: var(--acc); color: #fff; }
.afl-steps strong { display: block; color: var(--ink); margin-bottom: 7px; }
.afl-steps p { font-size: .9rem; line-height: 1.5; margin: 0; }

/* common questions */
.afl-home-faq { background: var(--paper); }
.afl-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.afl-home-faq .afl-heading { margin: 0; }
.afl-home-faq .afl-heading p { margin: 0; }
.afl-faq-list, .faq { border-top: 1px solid #cfd7d4; }
.afl-faq-list details, .faq details { border-bottom: 1px solid #cfd7d4; }
.afl-faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 22px 46px 22px 0; color: var(--ink); font-weight: 700; font-size: 1.04rem; }
.afl-faq-list summary::-webkit-details-marker { display: none; }
.afl-faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 17px; color: var(--acc); font-size: 1.5rem; font-weight: 400; }
.afl-faq-list details[open] summary::after { content: "−"; }
.afl-faq-list details p { max-width: 68ch; margin: 0; padding: 0 42px 22px 0; font-size: .95rem; line-height: 1.65; }

/* the people band */
.afl-people { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); background: var(--green); color: #fff; }
.afl-people-copy { padding: 68px 48px 68px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); align-self: center; }
.afl-people h2 { color: #fff; margin: 0 0 14px; font-size: clamp(1.9rem, 2.7vw, 2.5rem); }
.afl-people p { max-width: 560px; margin: 0; font-size: 1.02rem; color: #dcebe7; }
.afl-badges { display: flex; flex-wrap: wrap; row-gap: 22px; margin-top: 34px; }
.afl-badges > span { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 22px; border-left: 1px solid rgba(255,255,255,.24); font-size: .78rem; color: #dcebe7; }
.afl-badges > span:first-child { padding-left: 0; border-left: 0; }
.afl-badges img { display: block; height: 30px; width: auto; max-width: 118px; object-fit: contain; object-position: left center; }
.afl-people-photos {
  display: flex; justify-content: center; align-items: center; gap: 20px;
  padding: 60px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 60px 24px; background: var(--green-deep);
}
.afl-people-photos figure { margin: 0; flex: 1 1 0; max-width: 230px; }
.afl-people-photos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.afl-people-photos figcaption { margin-top: 12px; font-size: .84rem; line-height: 1.4; color: #bcd3cd; }
.afl-people-photos figcaption strong { display: block; color: #fff; font-size: 1rem; }

/* closing call to action */
.afl-final-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
  padding: 44px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); background: var(--acc); color: #fff;
}
.afl-final-cta h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin: 0 0 6px; }
.afl-final-cta p { margin: 0; color: #fff; }

/* ==========================================================================
   Interior pages: the same system, through the shared components
   ========================================================================== */

/* ---------- buttons ---------- */
.btn { border-radius: 4px; box-shadow: none; padding: 13px 22px; font-weight: 700; }
.btn:hover { transform: none; }
.btn-primary, .btn-bright { background: var(--acc); border-color: var(--acc); color: #fff; box-shadow: none; }
.btn-primary:hover, .btn-bright:hover { background: var(--acc-d); border-color: var(--acc-d); color: #fff; box-shadow: none; }
.btn-ghost, .btn-ghost-dark, .btn-quiet { background: #fff; color: var(--ink); border-color: #8a9894; box-shadow: none; }
.btn-ghost:hover, .btn-ghost-dark:hover, .btn-quiet:hover { color: var(--ink); border-color: var(--ink); }
.on-dark a.btn, .cta-band a.btn { text-decoration: none; }
.on-dark .btn-primary, .on-dark .btn-bright, .cta-band .btn-primary, .cta-band .btn-bright, .calc-results .btn-primary {
  background: #fff; color: var(--ink); border-color: #fff; box-shadow: none;
}
.on-dark .btn-primary:hover, .on-dark .btn-bright:hover, .cta-band .btn-bright:hover { background: #fff; color: var(--acc-d); }
.on-dark .btn-ghost, .on-dark .btn-ghost-dark, .cta-band .btn-ghost, .cta-band .btn-ghost-dark, .calc-results .btn-ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none;
}
.on-dark .btn-ghost:hover, .cta-band .btn-ghost:hover, .calc-results .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ---------- labels ---------- */
.eyebrow, .doc-mark {
  display: inline-block; color: var(--acc); background: transparent; padding: 0; border-radius: 0;
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.on-dark .eyebrow, .cta-band .eyebrow, .split-block > .eyebrow { color: #fff; background: transparent; }
.lede, .section-head p { color: var(--tx); }

/* ---------- hero ---------- */
.hero.hero-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; padding: 0; background: #fff !important; }
.hero.hero-page.no-aside { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.page-hero-copy { align-self: center; min-width: 0; padding: 52px 40px 52px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); }
.no-aside .page-hero-copy { padding-right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); }
.no-aside .page-hero-copy > * { max-width: 48rem; }
.page-hero-copy h1 { font-size: clamp(2.1rem, 3.1vw, 2.6rem); line-height: 1.08; margin: 0 0 16px; max-width: none; }
.page-hero-copy h1 .accent { color: inherit; }
.page-hero-copy .crumbs { margin-bottom: 14px; font-size: .84rem; }
.page-hero-copy .lede { margin: 0; font-size: 1.06rem; max-width: 36em; }
.page-hero-copy .hero-stamp { margin: 1rem 0 0; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.page-hero-copy .hero-acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero-image { min-height: 440px; }
.page-hero-image img { object-position: center 40%; }
.page-hero-aside {
  display: flex; align-items: center; justify-content: center; background: var(--paper);
  padding: 44px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 44px 44px;
}
.page-hero-aside .hero-panel { grid-column: auto; width: 100%; max-width: 540px; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(10,40,36,.06); }
.hero-panel .hp-flag { border-radius: 4px; }
.facts-panel .hp-inner { padding: 22px 26px 8px; }
.facts-panel .hp-head { margin-bottom: 4px; }
.facts-panel .fp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts-panel .fp-row:last-child { border-bottom: 0; }
.facts-panel .fp-k { color: var(--mut); font-size: .9rem; }
.facts-panel .fp-v { color: var(--ink); font-weight: 700; text-align: right; }
.facts-panel .fp-v strong { display: block; }

/* the contact page's enquiry form, in the hero where a photograph would be */
.page-hero-aside .form-card { width: 100%; max-width: 560px; background: #fff; padding: 28px 28px 20px; box-shadow: 0 8px 24px rgba(10,40,36,.06); }
.form-card .form-head { font-size: 1.3rem; line-height: 1.25; margin: 0 0 18px; }
.page-hero-copy .hero-alt { margin: 22px 0 0; color: var(--tx); }
.page-hero-copy .hero-alt a { color: var(--ink); font-weight: 700; }
/* The sticky bar links to this form, so on the page that holds the form it only covers the fields. */
body:has(form[name="enquiry"]) .sticky-cta { display: none !important; }

/* the key-facts version of the grey band */
.facts-band .afl-trust { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.facts-band .afl-trust > .fact {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 0;
  padding: 20px 28px; font-size: .85rem; line-height: 1.45; color: var(--mut); text-align: left; overflow-wrap: anywhere;
}
.facts-band .afl-trust > .fact:first-child { padding-left: 0; }
.facts-band .fact-k { display: none; }
.facts-band .fact strong { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 700; }

/* ---------- sections and long-form ---------- */
.section.bg-tint, .section.bg-paper { background: var(--paper); }
.section.doc-sec, .doc-sec + .doc-sec, .section + .section.doc-sec { padding: 64px 0; }
.doc-sec:not(.bg-paper):not(.bg-tint) + .doc-sec:not(.bg-paper):not(.bg-tint),
.doc-sec.bg-paper + .doc-sec.bg-paper { padding-top: 0; }
.afl-trust-band + .factstrip { padding-top: 44px; }
.doc-rail { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: none; padding: 20px 22px; }
.doc-rail .drt { color: var(--acc); font-weight: 800; letter-spacing: .04em; }
.doc-rail a { color: var(--tx); font-size: .88rem; }
.doc-rail a:hover, .doc-rail a.on { color: var(--acc); }

.split > div > h2 { margin: .3rem 0 1rem; }

/* ---------- cards ---------- */
.card { border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(10,40,36,.05); }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,40,36,.10); }
.card .icon { width: 52px; height: 52px; border-radius: 50%; background: #edf1ef; padding: 13px; }
.card .icon svg { stroke: var(--green); }
.card h3 { font-size: 1.12rem; }
.card p { color: var(--tx); }
.card .card-link { font-weight: 700; }
.factstrip { padding: 0; }
.factstrip .inner { margin-top: 0; }
.factstrip .fs { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; color: var(--tx); }
.factstrip .fs b { font-size: 1.55rem; font-weight: 700; color: var(--ink); }

/* ---------- callouts, rules, tables ---------- */
.note { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 4px; padding: 20px 24px; }
.note .note-label { letter-spacing: .04em; font-weight: 800; }
.note p { color: var(--tx); }
.rulebox { border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 4px; box-shadow: none; }
.rulebox .rb-ref { color: var(--green); letter-spacing: .04em; font-weight: 800; }
.pull { border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 4px; box-shadow: none; font-weight: 600; }
.nl-inline { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.tbl { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.tbl th { background: var(--paper); color: var(--ink); letter-spacing: .04em; }

/* ---------- steps: the homepage's numbered circles, stacked ---------- */
.steps { gap: 0; }
.step { background: transparent; box-shadow: none; border-radius: 0; padding: 0 0 26px 60px; }
.step::before {
  left: 0; top: -6px; width: 42px; height: 42px; background: #fff; color: var(--acc);
  border: 2px solid var(--acc); font-size: .9rem; font-weight: 800;
}
.step:first-child::before { background: var(--acc); color: #fff; }
.step::after { content: ""; position: absolute; left: 20px; top: 40px; bottom: 2px; width: 1px; background: #9aa9a6; }
.step:last-child::after { display: none; }

/* ---------- questions: the homepage's ruled list ---------- */
.faq { gap: 0; margin-top: 1.2rem; }
.section-head.centred ~ .faq { max-width: 860px; margin-inline: auto; }
.faq details { background: transparent; border-radius: 0; box-shadow: none; }
.faq summary { padding: 20px 46px 20px 0; font-size: 1.04rem; font-weight: 700; }
.faq summary::after { background: transparent; width: auto; height: auto; right: 8px; top: 15px; font-size: 1.5rem; font-weight: 400; color: var(--acc); }
.faq details[open] summary::after { content: "−"; }
.faq details .faq-body { padding: 0 42px 20px 0; }

/* ---------- the green two-column panel ---------- */
.split-block { background: var(--green); color: #dcebe7; border-radius: 6px; padding: 42px 40px 18px; margin: 1.8rem 0; }
.split-block h2 { color: #fff; margin: .5rem 0 .6rem; }
.split-cols > div { padding: 22px 28px 22px 0; }
.split-cols > div + div { padding-left: 28px; padding-right: 0; border-left: 1px solid rgba(255,255,255,.2); }
.split-cols h3 { color: #fff; }
.split-cols p { color: #dcebe7; }
.split-cols strong { color: #fff; }
.split-cols .micro { color: #b7ccc6; }

/* ---------- photograph quote bands: full width, green fade, like the homepage bands ---------- */
.imgband { width: 100%; max-width: none; margin: 0; border-radius: 0; min-height: 340px; }
.imgband::after { background: linear-gradient(90deg, rgba(11,51,46,.95) 0%, rgba(11,51,46,.84) 45%, rgba(11,51,46,.2) 100%); }
.imgband blockquote { font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.2; max-width: 24em; }
.imgband cite { color: #cfe0dc; }

/* ---------- calculators ---------- */
.calc-inputs { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.calc-results { background: var(--green); color: #dcebe7; border-radius: 6px; }
.calc-results strong, .calc-results em, .calc-results b { color: #fff; }
/* styles.css whitens the last cell of every .calc-row; the tax calendar reuses
   .calc-row on a light ground, where that made the descriptions invisible */
.calc-row span:last-child, .calc-row strong { color: inherit; font-weight: 400; }
.calc-results .calc-row span:last-child, .calc-results .calc-row strong { color: #fff; font-weight: 600; }
.calc-verdict { font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.calc-hint { color: #b7ccc6; }

/* ---------- forms ---------- */
input, select, textarea { background: #fff; border: 1.5px solid #cfd7d4; border-radius: 4px; color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--acc); background: #fff; }
.form-card { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }

/* ---------- accreditation band, then the closing call to action ---------- */
.accred-band { background: var(--green); color: #dcebe7; padding: 54px 0; }
.accred-band > .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.accred-band h2 { color: #fff; font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin: 0 0 10px; }
.accred-band p { color: #dcebe7; font-size: .92rem; margin: 0; }
.accred-band .afl-badges { margin-top: 0; }
.cta-band { background: var(--acc); padding: 0; border-radius: 0; }
.cta-band > .inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: transparent; border-radius: 0; padding: 44px var(--gut); color: #fff; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.5rem); margin: 0 0 6px; }
.cta-band p { color: #fff; font-size: 1rem; margin: 0; max-width: 42em; }
.cta-band .btn-row { flex: none; }

/* ---------- newsletter strip ---------- */
.nl-band { background: var(--paper); padding: 44px 0; border-top: 1px solid var(--line); }
.nl-band .inner { background: transparent; border-radius: 0; box-shadow: none; padding: 0 var(--gut); }
.nl-band h3 { font-weight: 700; color: var(--ink); }
.nl-band p { color: var(--tx); }

.wa-float { background: var(--green); box-shadow: 0 10px 26px rgba(11,51,46,.3); }
.sticky-cta .btn { border-radius: 4px; }

/* ---------- footer ---------- */
footer.site { background: var(--green-deep); color: #c9dbd6; border-radius: 0; padding: 60px 0 28px; }
footer.site .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 40px; }
footer.site h4 { color: #fff; font-size: .95rem; letter-spacing: 0; text-transform: none; margin-bottom: .9rem; }
footer.site a { color: #dfeae7; }
footer.site a:hover { color: #fff; }
footer.site .wordmark .wm-top, footer.site .wordmark .wm-main { color: #fff; }
footer.site .wordmark .wm-mark { filter: brightness(0) invert(1); }
footer.site .f-tag { margin-top: 1.1rem; max-width: 30em; color: #c9dbd6; }
footer.site .f-contact li { display: flex; align-items: center; gap: 10px; }
footer.site .f-contact .afl-ico { width: 17px; height: 17px; color: #fff; }
footer.site .cols { border-bottom-color: rgba(255,255,255,.14); }
footer.site .fine { color: #9fb6b0; }
footer.site .fine a { color: #dfeae7; }
footer.site .f-areas { padding: 20px 0 4px; font-size: .86rem; line-height: 1.9; color: #9fb6b0; }
footer.site .f-areas strong { color: #fff; font-weight: 600; margin-right: 4px; }
footer.site .f-areas a { white-space: nowrap; }
footer.site .f-areas a:not(:last-child)::after { content: " ·"; color: #9fb6b0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .afl-hero, .afl-split, .afl-people, .hero.hero-page { grid-template-columns: minmax(0, 1fr); }
  .hero.hero-page { min-height: 0; }
  .afl-hero-copy, .afl-split-copy, .afl-people-copy, .page-hero-copy, .no-aside .page-hero-copy { padding: 48px var(--gut); }
  .afl-hero-image, .afl-split-image { min-height: 400px; }
  .page-hero-image { min-height: 320px; }
  .afl-hero-image::after, .afl-split-image::after { display: none; }
  .page-hero-aside { padding: 0 var(--gut) 44px; background: #fff; }
  .afl-people-photos { justify-content: flex-start; padding: 0 var(--gut) 56px; background: var(--green); }
  .accred-band > .inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  header.site .inner { min-height: 70px; }
  .nav-toggle { display: block; }
  nav.primary { top: calc(100% + 1px); left: 0; right: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
  .nav-phone { margin-left: 0; }
  .afl-audience-grid, .afl-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afl-audience-card:last-child, .afl-tool-card:last-child { grid-column: 1 / -1; }
  .afl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 8px; }
  .afl-trust > div:nth-child(3)::before { display: none; }
  .facts-band .afl-trust { grid-template-columns: minmax(0, 1fr); }
  .facts-band .afl-trust > .fact { padding: 14px 0; }
  .facts-band .afl-trust > .fact::before { display: none; }
  .facts-band .afl-trust > .fact + .fact { border-top: 1px solid #d2d9d6; }
  .afl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 0; }
  .afl-steps li:nth-child(3)::before { display: none; }
  .afl-final-cta { padding-inline: var(--gut); }
  .afl-faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .cta-band > .inner { flex-direction: column; align-items: flex-start; }
  .split-cols > div, .split-cols > div + div { padding: 22px 0; border-left: 0; }
  .split-cols > div + div { border-top: 1px solid rgba(255,255,255,.2); }
}

@media (max-width: 680px) {
  .wordmark .wm-mark { width: 36px; height: 36px; }
  .wordmark .wm-main { font-size: 1.2rem; }
  .afl-hero-copy { padding-block: 44px; }
  .afl-hero h1 { font-size: clamp(2.05rem, 9.4vw, 2.7rem); }
  .page-hero-copy h1 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
  .afl-hero-image { min-height: 280px; }
  .page-hero-image { min-height: 240px; }
  .afl-actions, .afl-final-cta { flex-direction: column; align-items: stretch; }
  .afl-button, .afl-button-white { width: 100%; min-width: 0; }
  .afl-trust > div { justify-content: flex-start; min-height: 0; padding: 12px 6px; font-size: .82rem; }
  .afl-trust > div::before { display: none; }
  .afl-trust .afl-ico { width: 26px; height: 26px; }
  .afl-notice .afl-wrap { justify-content: flex-start; text-align: left; padding-block: 12px; }
  .afl-section { padding: 54px 0; }
  .afl-audience-grid, .afl-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .afl-audience-card:last-child, .afl-tool-card:last-child { grid-column: auto; }
  .afl-audience-card img { height: 170px; }
  .afl-split-image { min-height: 300px; }
  .afl-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .afl-steps li::before { display: none; }
  .afl-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .afl-badges > span { padding: 0; border-left: 0; }
  .afl-people-photos figure { max-width: none; }
  .split-block { padding: 30px 22px 8px; }
  .imgband { min-height: 280px; }
  .page-hero-aside .hero-panel { padding: 0; }
  .page-hero-aside .hp-inner { padding: 18px 18px 12px; }
  .page-hero-aside .hero-panel .hp-row { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 2px 12px; }
  .page-hero-aside .hero-panel .hp-row .v { grid-column: 2; font-size: 1rem; }
  .page-hero-aside .form-card { padding: 22px 18px 14px; }
  .page-hero-copy .hero-acts { flex-direction: column; align-items: stretch; }
  .page-hero-copy .hero-acts .btn { text-align: center; }
  .cta-band .btn-row { width: 100%; }
  .cta-band .btn-row .btn { flex: 1 1 auto; text-align: center; }
  footer.site .cols { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Offer pages (16 Sep 2026): Making Tax Digital done for you, and the page for
   letting agents. Scoped class names, so nothing else on the site changes.
   ========================================================================== */
.offer-section { padding: 92px 0; background: #fff; }
.offer-section.paper { background: var(--paper); border-block: 1px solid var(--line); }
.offer-wrap { width: min(var(--max), 100%); margin-inline: auto; padding-inline: var(--gut); }
.offer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 92px); align-items: center; }
.offer-grid.top { align-items: start; }
.offer-grid.narrow-left { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.offer-copy h2 { margin: 12px 0 18px; max-width: 19ch; }
.offer-copy > p { font-size: 1.04rem; line-height: 1.68; max-width: 560px; }
.offer-copy .afl-checks { margin-top: 26px; }
.offer-copy .afl-actions { margin-top: 34px; }
.offer-sticky { position: sticky; top: 112px; }
.offer-centre { justify-content: center; }

/* hero: what the fee covers, under the lede */
.offer-covers { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 24px 0 0; padding: 0; }
.offer-covers li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: .96rem; }
.offer-covers .afl-ico { width: 20px; height: 20px; color: #13795f; stroke-width: 2.4; }

/* the form cards */
.offer-form .opt { color: var(--mut); font-weight: 400; }
.offer-form .hint { margin: 6px 0 0; font-size: .8rem; color: var(--mut); }
.offer-form .form-privacy { margin: .9rem 0 0; font-size: .78rem; color: var(--mut); }
.offer-section .offer-form { background: #fff; padding: 30px 30px 22px; box-shadow: 0 18px 44px rgba(10,40,36,.08); }

/* a photograph with the deadlines card laid over its corner */
.offer-figure { position: relative; margin: 0 0 56px 56px; }
.offer-figure img { display: block; width: 100%; height: 540px; object-fit: cover; object-position: 50% 40%; border-radius: 6px; }
.offer-figure .offer-float { position: absolute; left: -56px; bottom: -56px; width: min(400px, 82%); }
.offer-float .hero-panel { grid-column: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 22px 50px rgba(10,40,36,.16); }
.offer-float .hp-inner { padding: 20px 22px 12px; }
.offer-float .hp-head { margin-bottom: 8px; }
.offer-float .hp-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; }
.offer-float .hp-row.now { margin: 0 -12px; padding: 11px 12px; border-radius: 4px; }
.offer-float .hp-row .l { font-size: .84rem; }
.offer-float .hp-row .v { font-size: .96rem; white-space: nowrap; }

/* numbered list: what we need */
.offer-needs { list-style: none; margin: 0; padding: 0; counter-reset: need; border-top: 1px solid #cfd7d4; }
.offer-needs li { counter-increment: need; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 26px 0; border-bottom: 1px solid #cfd7d4; }
.offer-needs li::before { content: counter(need, decimal-leading-zero); grid-row: 1 / span 2; color: var(--acc); font-weight: 800; font-size: 1.1rem; line-height: 1.5; }
.offer-needs strong { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: 4px; }
.offer-needs span { display: block; color: var(--tx); font-size: .97rem; line-height: 1.62; }

/* cards: the illustrative statement and the message to landlords */
.offer-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 44px rgba(10,40,36,.08); }
.offer-statement { padding: 26px 28px 22px; }
.os-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.os-title { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.os-flag { font-size: .72rem; font-weight: 700; color: var(--acc); background: var(--acc-soft); padding: 5px 10px; border-radius: 4px; white-space: nowrap; }
.os-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.os-item { color: var(--ink); font-weight: 700; }
.os-cat { color: var(--tx); font-size: .9rem; }
.os-amt { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.os-row.muted { border-bottom: 0; }
.os-row.muted .os-item, .os-row.muted .os-amt { color: var(--mut); font-weight: 500; }
.os-foot { margin: 10px 0 0; padding: 14px 16px; background: #eef5f2; border-radius: 4px; color: var(--ink); font-size: .9rem; line-height: 1.5; }
.offer-message { padding: 30px 34px 26px; }
.om-subject { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.om-subject span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; }
.om-body p { margin: 0 0 .95em; font-size: .96rem; line-height: 1.65; color: var(--tx); }
.om-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.om-done { font-size: .88rem; font-weight: 700; color: #13795f; }

/* the examples panel sits inside the page's measure, not full width */
.offer-examples { margin: 0; padding: 48px 48px 26px; }
.offer-examples .split-cols p { font-size: 1rem; line-height: 1.65; }
.offer-examples .micro { margin: 10px 0 0; font-size: .82rem; color: #b7ccc6; }

/* the who-it-suits split: a note on who is outside it */
.offer-aside-line { margin-top: 24px !important; font-size: .92rem !important; color: var(--mut); }
.offer-who .afl-split-image img { object-position: 30% 60%; }

/* forms on these pages: the sticky bar would cover the fields it links to */
body:has(form[name="mtd-start"]) .sticky-cta,
body:has(form[name="introducer-letting-agent"]) .sticky-cta { display: none !important; }

@media (max-width: 980px) {
  .offer-section { padding: 68px 0; }
  .offer-grid, .offer-grid.narrow-left { grid-template-columns: minmax(0, 1fr); }
  .offer-sticky { position: static; }
  .offer-figure { margin: 0; }
  .offer-figure img { height: 380px; }
  .offer-figure .offer-float { position: relative; left: auto; bottom: auto; width: auto; margin: -72px 18px 0; }
}
@media (max-width: 680px) {
  .offer-section { padding: 54px 0; }
  .offer-figure img { height: 280px; }
  .offer-figure .offer-float { margin: -48px 10px 0; }
  .offer-float .hp-row { grid-template-columns: 40px minmax(0, 1fr); }
  .offer-float .hp-row .v { grid-column: 2; }
  .os-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .os-cat { grid-column: 1; grid-row: 2; }
  .os-amt { grid-row: 1 / span 2; align-self: center; }
  .offer-message { padding: 24px 20px 20px; }
  .offer-examples { padding: 30px 22px 12px; }
  .offer-section .offer-form { padding: 22px 18px 14px; }
}

/* ==========================================================================
   Whole-site refinements (16 Sep 2026)
   ========================================================================== */

/* the contents rail stays beside the reader for the whole document (site.js) */
.doc-rail.rail-fixed { position: fixed; top: 104px; z-index: 5; max-height: calc(100vh - 128px); overflow: auto; transition: opacity .2s ease; }
.doc-rail.rail-hidden { opacity: 0; pointer-events: none; }
@media (min-width: 1100px) {
  body:has(.doc-rail) .doc-side .doc-mark { display: none; }
  /* a fixed rail leaves the grid, and the text would move into its 250px column */
  .doc > .doc-body { grid-column: 2; }
}

/* one call to action halfway down a long document (build.docify) */
.doc-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin: 2.6rem 0 2.8rem; padding: 24px 26px; border-radius: 6px;
  background: var(--green); color: #dcebe7;
}
.doc-cta strong { display: block; color: #fff; font-size: 1.12rem; line-height: 1.3; margin-bottom: 4px; }
.doc-cta span { display: block; font-size: .93rem; line-height: 1.5; color: #dcebe7; }
.doc-cta .btn { flex: none; background: #fff; border-color: #fff; color: var(--ink); }
.doc-cta .btn:hover { background: #fff; color: var(--acc-d); }
.doc-body .doc-cta + h2 { margin-top: 0; }

/* cards: no decorative icons, a stronger title and a clear link */
.card .icon { display: none; }
.card { padding: 28px 28px 24px; display: flex; flex-direction: column; border-top: 3px solid var(--green); }
.card h3 { font-size: 1.16rem; line-height: 1.3; margin: 0 0 .55rem; }
.card p { font-size: .95rem; line-height: 1.6; }
.card .card-link { margin-top: auto; padding-top: .6rem; }

/* the photograph bands no longer carry a quoted line (build.imgband) */
.imgband.imgband-plain { min-height: 0; height: 380px; background-size: cover; background-position: center 55%; }
.imgband.imgband-plain::after, .imgband.imgband-plain::before { display: none; }

/* on a phone the floating WhatsApp button sat over the form fields */
@media (max-width: 680px) {
  body:has(.form-card) .wa-float { display: none; }
  .doc-cta { flex-direction: column; align-items: stretch; padding: 20px; }
  .doc-cta .btn { text-align: center; }
  .imgband.imgband-plain { height: 240px; }
}

/* homepage: Making Tax Digital done for you */
.afl-mtd { background: #fff; border-top: 1px solid var(--line); }
.afl-mtd-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.afl-mtd-copy h2 { font-size: clamp(1.9rem, 2.7vw, 2.5rem); line-height: 1.1; margin: 0 0 16px; max-width: 22ch; }
.afl-mtd-copy > p { font-size: 1.04rem; max-width: 540px; margin: 0; }
.afl-mtd-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 34px; }
.afl-mtd-panel .hero-panel { grid-column: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 44px rgba(10,40,36,.10); }
.afl-mtd-panel .hp-row.now { margin: 0 -12px; padding: 14px 12px; border-radius: 4px; }
@media (max-width: 980px) {
  .afl-mtd-grid { grid-template-columns: minmax(0, 1fr); }
  .afl-mtd-panel { padding: 16px; }
}
@media (max-width: 680px) {
  .afl-mtd-panel .hp-row { grid-template-columns: 40px minmax(0, 1fr); }
  .afl-mtd-panel .hp-row .v { grid-column: 2; }
}

/* guides and articles hubs: grouped, with the heading beside its cards */
.hub-section { padding: 72px 0 80px; }
.hub-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(28px, 4vw, 64px); padding: 44px 0; border-top: 1px solid var(--line); }
.hub-group:first-child { border-top: 0; padding-top: 0; }
.hub-group-head h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin: 0 0 10px; }
.hub-group-head p { font-size: .95rem; line-height: 1.6; margin: 0; color: var(--tx); }
.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hub-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.hub-card {
  display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 20px; background: #fff; color: var(--tx);
  border: 1px solid var(--line); border-top: 3px solid var(--green); border-radius: 6px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(10,40,36,.04); transition: transform .2s ease, box-shadow .2s ease;
}
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(10,40,36,.10); text-decoration: none; color: var(--tx); }
.hub-card strong { color: var(--ink); font-size: 1.12rem; line-height: 1.3; }
.hub-card strong .accent { color: inherit; }
.hub-card span { font-size: .93rem; line-height: 1.55; }
.hub-card em { margin-top: auto; padding-top: 6px; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--acc); }
.hub-kicker { font-size: .74rem !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.hub-card-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; padding: 36px 40px; background: var(--green); border-color: var(--green); color: #dcebe7; }
.hub-card-lead:hover { color: #dcebe7; }
.hub-card-lead .hub-kicker { grid-column: 1 / -1; color: #fff; }
.hub-card-lead strong { color: #fff; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; grid-row: 2 / span 2; }
.hub-card-lead span { color: #dcebe7; font-size: 1rem; }
.hub-card-lead em { color: #fff; }
.hub-foot { margin: 36px 0 0; font-size: .95rem; color: var(--mut); max-width: 60ch; }
@media (max-width: 980px) {
  .hub-group { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hub-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-card-lead { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .hub-card-lead strong { grid-row: auto; }
}
@media (max-width: 680px) {
  .hub-cards, .hub-cards-3 { grid-template-columns: minmax(0, 1fr); }
}
.hub-card strong span, .hub-card-lead strong span { font-size: inherit; line-height: inherit; color: inherit; }

/* a hero whose right half is a form: the copy starts at the top, not halfway down the form */
@media (min-width: 1081px) {
  .hero.hero-page:has(.form-card) .page-hero-copy { align-self: start; padding-top: 88px; }
}

/* styles.css takes the top margin off the first heading of every document. Where the
   document opens with text instead (articles, city pages, the tax calendar), that left
   the heading sitting on the paragraph above it. */
.doc-body > :not(h2) + h2:first-of-type { margin-top: 2.9rem; }

/* the locations hub: a nation with several city pages shows them in threes */
.hub-cards-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .hub-cards-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .hub-cards-cities { grid-template-columns: minmax(0, 1fr); } }

/* Tables of two or three columns fit a phone screen instead of scrolling sideways, which
   hid the last column (the deadline, the amount) off the right-hand edge. */
@media (max-width: 680px) {
  .tbl table:not(:has(tr > :nth-child(4))) { min-width: 0; }
  .tbl th, .tbl td { padding: 12px 14px; }
}
/* styles.css lets table cells break anywhere, which also lets a column shrink below its
   longest word ("Secon" / "d"); break-word still breaks a long email address */
.tbl td { overflow-wrap: break-word; }
.hub-cards > .hub-card:only-child { align-self: start; }