/* EmployerCalculator on the portfolio design system (owner request 26 Oct 2026: "resemble Settle Probate, keep showing
   ads, restructure to optimise sales"; same approach as aftertaxsalary ats.css / soletradertaxcalculator st.css).
   custom.css and cards.css are copied in from the shared system; this file restyles this site's own components onto it
   (nav, footer, offer cards, guides, calculators, the pack page, cookie banner) and adds the homepage top block.
   Display only: no ad code, no ad containers touched (AdSense Auto ads via the loader in base.html / landing.html),
   behaviour, maths, copy and tracking unchanged. */

:root {
  --accent: #1B6B6B;
  --accent-light: #E8F5F5;
  --accent-hover: #155A5A;
  --font-display: 'BenSerifF', 'Fraunces', Georgia, serif;
  --sp-bg: #F7F7F4;
  --st-ink: #1C2928;
  --st-muted: #667370;
  --st-teal: #176C69;
  --st-line: #E4E6E3;
  --st-warm: #7A5A33;
  --st-shadow: 0 1px 2px rgba(28,41,40,.04), 0 12px 32px -24px rgba(28,41,40,.28);
  --st-serif: 'BenSerifF', 'Fraunces', Georgia, serif;
}
body.gradient-bg { background: #FAFAF8; color: #1A1A18; }
html, body { overflow-x: clip; }
.st-main h1, .st-main h2, .st-main h3 { font-family: var(--st-serif); font-variation-settings: 'opsz' 24; }
.st-main h1 { font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: #1A1A18; }
.st-main h2 { font-weight: 600; letter-spacing: -.015em; color: #1A1A18; }
.st-main a { text-underline-offset: 3px; }

/* Tailwind emerald accents (guides, blog, legal) → the system teal */
.st-main .text-emerald-700, .st-main .text-emerald-600, .st-main .text-emerald-800, .st-main .hover\:text-emerald-700:hover { color: #1B6B6B; }
.st-main .bg-emerald-50, .st-main .bg-emerald-50\/70 { background-color: #EEF5F4; }
.st-main .border-emerald-200 { border-color: #CFE3E1; }
.st-main .bg-emerald-600, .st-main .bg-emerald-700 { background-color: #1B6B6B; }
.st-main .rounded-2xl { border-radius: 16px; }
.st-main .rounded-xl { border-radius: 12px; }
.st-main .font-extrabold { font-weight: 600; }
.st-main h1.font-extrabold { font-weight: 500; }
.st-main .text-slate-600 { color: #5F5C55; }

/* ── Site nav (Settle site-nav) ─────────────────────────── */
.nav.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid #E8E6E1; }
.site-nav .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1.25rem; position: relative; }
@media (min-width: 768px) { .site-nav .nav-inner { height: 72px; padding: 0 1.25rem; } }
.site-nav .nav-brand { font-family: var(--st-serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -.015em; color: #1A1A18; white-space: nowrap; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-nav .nav-brand span { color: var(--accent); }
.site-nav .nav-brand:hover { color: var(--accent); }
.site-nav .nav-links { display: flex; gap: 20px; align-items: center; white-space: nowrap; }
.site-nav .nav-links a { color: #6B6860; background: none; font-size: .9375rem; font-weight: 500; padding: 6px 0; border-radius: 6px; text-decoration: none; }
.site-nav .nav-links a:hover, .site-nav .nav-links a.active { color: var(--accent); background: none; }
.site-nav .nav-links a.site-nav__cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; line-height: 1; box-shadow: 0 1px 2px rgba(14,74,71,.18); }
.site-nav .nav-links a.site-nav__cta:hover { background: var(--accent-hover); color: #fff; }
.site-nav .nav-links a:focus-visible, .site-nav .nav-brand:focus-visible { outline: 3px solid rgba(27,107,107,.38); outline-offset: 3px; }
.site-nav .nav-mobile-toggle { display: none; flex: 0 0 auto; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; }
.site-nav .nav-mobile-toggle svg { width: 22px; height: 22px; color: #1A1A18; }
@media (min-width: 1280px) { .site-nav .nav-links { gap: 26px; } }
@media (max-width: 1099px) {
  .site-nav .nav-mobile-toggle { display: flex; }
  .site-nav .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; z-index: 101; flex-direction: column; align-items: stretch; gap: .25rem;
    background: #fff; border-bottom: 1px solid #E8E6E1; box-shadow: 0 10px 24px -12px rgba(28,41,40,.25); padding: 1rem 1.25rem 1.25rem; white-space: normal; }
  .site-nav .nav-links.open { display: flex; }
  .site-nav .nav-links a { padding: .55rem 0; font-size: 1rem; color: #1A1A18; }
  .site-nav .nav-links a.site-nav__cta { justify-content: center; margin-top: .6rem; min-height: 48px; color: #fff; }
}
@media (min-width: 768px) and (max-width: 1099px) { .site-nav .nav-links { top: 72px; } }
@media (max-width: 380px) { .site-nav .nav-brand { font-size: 1.05rem; } }

/* ── Footer (Settle footer) ─────────────────────────────── */
.footer.st-footer { background: #F5F4F0; border-top: 1px solid #E8E6E1; padding: 3rem 1rem 2.25rem; margin-top: 4rem; }
@media (min-width: 768px) { .footer.st-footer { padding-left: 1.25rem; padding-right: 1.25rem; } }
.st-footer__notice { max-width: 1120px; margin: 0 auto 2rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #E8E6E1; border-radius: 12px; font-size: .875rem; line-height: 1.6; color: #6B6860; }
.st-footer__notice strong { color: #1A1A18; font-weight: 600; }
.st-footer__brand { max-width: 1120px; margin: 0 auto 1.75rem; }
.st-footer__logo { font-family: var(--st-serif); font-weight: 600; font-size: 1.125rem; color: #1A1A18; margin: 0 0 .25rem; }
.st-footer__logo span { color: var(--accent); }
.st-footer__tag { font-size: .875rem; color: #6B6860; margin: 0; max-width: 32rem; }
.st-footer .footer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.st-footer .footer-col h4 { font-family: 'DM Sans', system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9C9890; margin: 0 0 .7rem; }
.st-footer .footer-col a { display: block; font-size: .875rem; color: #6B6860; padding: .22rem 0; text-decoration: none; overflow-wrap: break-word; }
.st-footer .footer-col a:hover { color: var(--accent); }
.st-footer .footer-bottom { max-width: 1120px; margin: 2rem auto 0; padding-top: 1.25rem; text-align: center; font-size: .75rem; line-height: 1.6; color: #9C9890; border-top: 1px solid #E8E6E1; }
.st-footer .footer-bottom p { margin: 0 0 .3rem; }
.st-footer .footer-bottom a { color: inherit; text-decoration: underline; }
@media (max-width: 900px) { .st-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } }

/* ── Buttons on this site's own classes → the system button ─ */
.pko .pko-btn, .hbp-btn, .upc .upc-btn, .ups .ups-btn {
  border-radius: 12px !important; font-weight: 600 !important; letter-spacing: -.005em;
  background: var(--sp-teal, #176C69); color: #fff; box-shadow: 0 1px 2px rgba(14,74,71,.18);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.pko .pko-btn:hover, .hbp-btn:hover, .upc .upc-btn:hover, .ups .ups-btn:hover { background: var(--sp-teal-hover, #125A57); color: #fff; filter: none; transform: none; }

/* ── In-content offer cards (.pko) → Settle offer panel ─── */
.pko { background: #fff; border: 1px solid var(--st-line); border-left: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); padding: 1.25rem; gap: 1.125rem; color: var(--st-ink); }
.pko-cover { box-shadow: none; border-radius: 4px; overflow: visible; background: none; }
.pko-cover img { border-radius: 4px; border: 1px solid rgba(28,41,40,.10); box-shadow: 0 4px 12px -6px rgba(28,41,40,.25); }
.pko .pko-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--st-teal); margin-bottom: .375rem; }
.pko .pko-head { font-family: var(--st-serif); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; color: var(--st-ink); line-height: 1.3; }
.pko .pko-text { font-size: .9375rem; color: var(--st-muted); line-height: 1.55; }
.pko .pko-btn { min-height: 46px; padding: .75rem 1.15rem; font-size: .9375rem; display: inline-block; text-align: center; line-height: 1.3; }
.pko .pko-micro { font-size: .8125rem; color: var(--st-muted); }
.pko-alt { color: var(--st-muted); }
.pko-alt a { color: var(--st-teal); }
@media (max-width: 639px) { .pko .pko-btn { display: block; width: 100%; } .pko { padding: 1.05rem; } }
.upc { border: 1px solid var(--st-line); border-left: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); }
.pack-inline-link { color: var(--st-muted); }
.pack-inline-link a { color: var(--st-teal); }

/* ── Calculator pages ───────────────────────────────────── */
.st-calc-intro { padding-top: 2rem !important; }
.st-calc-intro h1 { font-family: var(--st-serif) !important; font-weight: 500 !important; }
#salary-calc > div:first-child { border: 1px solid var(--st-line) !important; border-top: 1px solid var(--st-line) !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(28,41,40,.04), 0 18px 44px -28px rgba(28,41,40,.35) !important; }
.ats-calc-head-title { font-family: var(--st-serif) !important; font-weight: 600 !important; }
.calc-year-badge { background: #E8F5F5 !important; color: #1B6B6B !important; border-radius: 999px !important; }
.section-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--st-warm); }
.section-h2 { font-family: var(--st-serif) !important; font-weight: 600 !important; letter-spacing: -.015em; line-height: 1.25; }
.tool-card, .guide-card, .hiw-card, .method-card, .about-card { background: #fff; border: 1px solid var(--st-line) !important; border-radius: 14px !important; box-shadow: 0 1px 2px rgba(28,41,40,.04); }
.tool-card:hover, .guide-card:hover, .method-card:hover { border-color: rgba(23,108,105,.45) !important; box-shadow: 0 1px 2px rgba(28,41,40,.05), 0 18px 40px -22px rgba(28,41,40,.38); transform: none; }
.tool-card-title, .guide-card-title, .hiw-title, .method-card-title { font-family: var(--st-serif); font-weight: 600; }
.popular-link { border-radius: 10px !important; border-color: var(--st-line) !important; }
.faq-item { background: #fff; border: 1px solid #E8E6E1; border-radius: .75rem; }
.mft-card { border-radius: 14px !important; border-color: var(--st-line) !important; }

/* ── Guides and blog (content_page / blog_post) ─────────── */
.st-main .max-w-5xl h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.12; max-width: 26ch; }
.st-main .max-w-5xl h2 { font-size: 1.375rem; }
.st-main .max-w-5xl p.text-slate-600 { font-size: 1rem; line-height: 1.72; }
.st-main .max-w-5xl figure table { border-radius: 14px; border-color: var(--st-line); }
.st-main aside .rounded-2xl, .st-main .lg\:sticky { border-radius: 16px; }
.st-main .pko-wrap { margin: 1.75rem 0; }

/* Plain pages (contact, editorial) that use .section / .badge */
.st-main > .section { max-width: 820px; margin: 0 auto; padding: 2.25rem 1rem 1rem; }
.st-main > .section .badge { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #E8F5F5; color: #1B6B6B; font-size: .8125rem; font-weight: 600; margin-bottom: .75rem; }
.st-main > .section h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); margin: 0 0 1rem; }

/* ── Homepage (data-home-*) ─────────────────────────────── */
.st-home-hero { padding-left: 1rem; padding-right: 1rem; text-align: center; }
.st-home-hero .hh__title { max-width: 18ch; font-size: clamp(2.05rem, .9rem + 3.6vw, 3.6rem); }
.st-home-hero .hh__lede { font-size: clamp(1rem, .9rem + .4vw, 1.1875rem); max-width: 680px; }
@media (max-width: 767px) { .st-home-hero { min-height: 0; padding-top: 32px; padding-bottom: 26px; } }
@media (max-width: 380px) { .st-home-hero .hh__btn { padding: 0 18px; font-size: 1rem; } }
.hh__btn { white-space: nowrap; }
.st-sm { display: none; }
@media (max-width: 639px) { .st-lg { display: none; } .st-sm { display: inline; } }
.st-xsite { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: 1rem; font-size: .875rem; line-height: 1.45; }
.st-xsite a { color: #6B6860; text-decoration: none; }
.st-xsite a span { color: var(--accent); font-weight: 600; }
.st-xsite a:hover span { text-decoration: underline; }
.st-band { background: var(--sp-bg); border-top: 1px solid #E8E6E1; border-bottom: 1px solid #E8E6E1; padding: 2.5rem 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .st-band { padding: 3.5rem 1.25rem; } }
.st-wrap { max-width: 980px; margin: 0 auto; }
.st-sec-h { font-family: var(--st-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; color: #1A1A18; margin: 0 0 .5rem; }
@media (min-width: 768px) { .st-sec-h { font-size: 1.875rem; } }
.st-sec-lede { color: #6B6860; font-size: 1rem; line-height: 1.6; margin: 0 0 1.75rem; max-width: 40rem; }
.st-center { text-align: center; }
.st-center .st-sec-lede { margin-left: auto; margin-right: auto; }
/* The pack card: cover + a real inside page on the left, the value stack on the right (desktop). */
.st-pack { max-width: 880px; margin: 0 auto; height: auto; }
.st-pack .sp-badge::before { content: none; }
.st-pack .sp-badge { text-transform: none; letter-spacing: .02em; font-size: .8125rem; }
.st-pack .sp-title { font-family: var(--st-serif); font-size: 1.375rem; }
.st-vticks { margin: 1.1rem 0 1.25rem; gap: .7rem; }
.st-vticks b { font-weight: 600; color: var(--st-ink); }
.st-vticks span { color: #46524F; }
.st-pack__buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.st-pack__btn { flex: 1 1 auto; white-space: nowrap; min-height: 50px; }
.st-pack .sp-price small { margin-left: .35rem; }
.st-pack__note { text-align: left; }
@media (min-width: 768px) {
  .st-pack { display: grid; grid-template-columns: 330px minmax(0, 1fr); }
  .st-pack .sp-media--pack { height: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--sp-border); padding: 28px 20px; }
  .st-pack .sp-media--pack .sp-cover { height: 300px; }
  .st-pack .sp-media--pack .sp-page--back { height: 240px; }
  .st-pack .sp-body { padding: 1.75rem 1.75rem 1.5rem; }
  .st-pack__btn { flex: 0 1 auto; }
}
@media (max-width: 767px) {
  .st-pack .sp-media--pack { height: 230px; padding: 18px 16px; }
  .st-pack .sp-body { padding: 1.25rem 1.1rem 1.2rem; }
  .st-pack__buy { gap: .6rem; }
  .st-pack .sp-price { width: 100%; }
  .st-pack__btn { width: 100%; }
  .st-pack__note { text-align: center; }
}
/* Homepage top block (partials/home_landing_top.html): the product cards, as on the CGT / HomeBuyingCosts homepages.
   Desktop: cover on top, side by side; phones: compact panel with the cover on the left. */
.st-home-hero .hh__title { max-width: 19ch; font-size: clamp(2.125rem, .9rem + 4vw, 4rem); }
.st-band--top { margin-top: 0; }
@media (min-width: 768px) { .st-band--top { padding: 4.5rem 1.25rem; } }
.st-band--top .st-wrap { max-width: 1120px; }
.st-band--top .st-sec-lede { margin-bottom: 2rem; }
.st-packs { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 760px; margin: 0 auto; }
@media (min-width: 640px) { .st-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.st-packs .sp-badge::before { content: none; }
.st-packs .sp-media--pack { height: 230px; padding: 20px 16px 18px; }
.st-packs .sp-body { padding: 1.25rem; }
.st-packs .sp-title { font-family: var(--st-serif); font-size: 1.125rem; }
.st-packs .sp-line { font-size: .9rem; }
.st-packs .sp-ticks { font-size: .875rem; gap: .5rem; margin: 1rem 0 1.25rem; }
.st-packs .sp-btn { font-size: .9375rem; padding: .7rem 1rem; }
.st-packs .sp-badge { margin-bottom: .5rem; letter-spacing: .03em; text-transform: none; font-size: .8125rem; }
.st-packs .sp-note span { white-space: nowrap; }
.st-packs .bp-line { margin-top: .5rem; text-align: center; }
.st-tpack__price { font-size: .875rem; color: var(--st-muted); white-space: nowrap; font-weight: 500; }
@media (max-width: 639px) {
  .st-packs .sp-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .st-packs .sp-media--pack { height: auto; padding: 1rem 0 0 1rem; background: none; border: 0; justify-content: flex-start; }
  .st-packs .sp-media--pack .sp-page--back { display: none; }
  .st-packs .sp-media--pack .sp-page--cover { width: 80px; height: auto; }
  .st-packs .sp-body { padding: 1rem 1rem 1.1rem .9rem; }
  .st-packs .sp-ticks { display: none; }
  .st-packs .sp-line { margin-bottom: .85rem; }
  .st-packs .sp-btn, .st-packs .sp-note { margin-left: -94px; width: calc(100% + 94px); }
  .st-packs .sp-btn { min-height: 46px; white-space: nowrap; font-size: .9375rem; }
  .st-packs .sp-note { text-align: center; }
  .st-packs .bp-line { margin-left: -94px; width: calc(100% + 94px); text-align: center; }
  .st-packs .sp-title { font-size: 1.0625rem; }
  .st-packs .sp-line { font-size: .875rem; line-height: 1.5; }
}
.st-free-line { max-width: 46rem; margin: 1.75rem auto 0; text-align: center; font-size: .9375rem; line-height: 1.55; color: var(--st-muted); }
.st-free-line a { color: var(--st-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Homepage result bar: hidden while the calculator is still below the screen (static/js/home-sticky.js). */
html.sr-pre .sticky-result { transform: translateY(calc(100% + var(--cc-h, 0px))) !important; visibility: hidden; }

/* ── Pack page (/pack) on the Settle /pack structure ─────── */
.hbp h1 { font-family: var(--st-serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; color: var(--st-ink); }
@media (min-width: 861px) { .hbp h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); } }
.hbp h2 { font-family: var(--st-serif); font-weight: 600; letter-spacing: -.015em; color: var(--st-ink); }
.hbp-badge { background: #E8F5F5; color: #1B6B6B; font-weight: 600; }
.hbp-label { color: var(--st-warm); font-weight: 600; }
.hbp-buy { border: 1px solid var(--st-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(28,41,40,.04), 0 16px 40px -28px rgba(28,41,40,.35); padding: 1.25rem 1.3rem; }
.hbp-price strong { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -.02em; color: var(--st-ink); }
.hbp-btn { min-height: 54px; font-size: 1.0625rem; display: flex; align-items: center; justify-content: center; }
.hbp-final .hbp-btn { min-height: 50px; }
.hbp-trust span { background: #fff; border-color: var(--st-line); }
.hbp-cover img { border: 1px solid rgba(28,41,40,.10); box-shadow: 0 1px 2px rgba(28,41,40,.06), 0 18px 40px -22px rgba(28,41,40,.45); }
.hbp-card { border: 1px solid var(--st-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(28,41,40,.04); }
.hbp-card h3 { font-family: var(--st-serif); font-weight: 600; font-size: 1rem; }
.hbp-card .pg { color: #1B6B6B; font-weight: 600; }
.hbp-previews button { border-radius: 4px; border-color: var(--st-line); box-shadow: 0 1px 2px rgba(28,41,40,.05), 0 10px 24px -18px rgba(28,41,40,.35); }
.hbp-faq details { border: 1px solid var(--st-line); border-radius: 12px; padding: 0; }
.hbp-faq summary { padding: 1rem 1.25rem; font-weight: 600; color: var(--st-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hbp-faq summary::-webkit-details-marker { display: none; }
.hbp-faq summary::after { content: "+"; color: #9C9890; font-weight: 400; font-size: 1.25rem; line-height: 1; }
.hbp-faq details[open] summary::after { content: "\2212"; }
.hbp-faq details p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--st-muted); }
.hbp-final { border: 1px solid var(--st-line); border-top: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); background: #fff; }
/* Phones: the value-stack card under the H1, then the real pages; the long preamble is hidden. */
.pkm { display: none; }
@media (max-width: 860px) {
  .hbp { display: flex; flex-direction: column; padding-left: 1rem; padding-right: 1rem; }
  .hbp > section { order: 3; } .hbp > .hbp-hero { order: 0; } .hbp > .hbp-look { order: 1; } .hbp > .hbp-insec { order: 2; } .hbp > .hbp-final { order: 4; }
  .hbp-hero { display: block; padding-bottom: .5rem; }
  .hbp-hero .hbp-side, .hbp-heroinfo, .hbp-about, .hbp-insec .hbp-card p { display: none !important; }
  .hbp-hero .hbp-badge { display: inline-flex; }
  .hbp-hero h1 { font-size: 1.6rem; }
  .hbp-look { margin-top: 1.25rem; }
  .hbp-insec .hbp-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hbp-insec .hbp-card { padding: .75rem; }
  .hbp-insec .hbp-card h3 { font-size: .95rem; margin: .2rem 0 0; }
  .pkm { display: block; margin: 1rem 0 .4rem; padding: 1.1rem 1rem 1rem; border: 1px solid var(--st-line); border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(20,40,60,.10); }
  .pkm-head { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: .8rem; align-items: start; }
  .pkm-head img { width: 78px; height: auto; border-radius: 3px; box-shadow: 0 8px 16px rgba(20,40,60,.25); }
  .pkm-name { margin: 0; font-family: var(--st-serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--st-ink); }
  .pkm-fmt { margin: .35rem 0 0; font-size: .85rem; color: var(--accent); font-weight: 600; }
  .pkm-ticks { list-style: none; margin: .9rem 0 0; padding: 0; }
  .pkm-ticks li { position: relative; padding: 0 0 0 1.6rem; margin: 0 0 .75rem; font-size: .97rem; line-height: 1.45; color: #24323d; }
  .pkm-ticks li::before { content: "\2713"; position: absolute; left: .1rem; top: 0; font-weight: 800; color: var(--accent); }
  .pkm-ticks b { color: var(--st-ink); }
  .pkm-plus { margin: .2rem 0 0; padding-top: .75rem; border-top: 1px solid #e7ecee; font-size: .88rem; line-height: 1.45; color: #4a5862; }
  .pkm-btn { width: 100%; margin-top: 1rem; }
  .pkm-micro { margin: .6rem 0 0; text-align: center; font-size: .82rem; color: #3b4852; }
  .pkm-chk { margin: .2rem 0 0; text-align: center; font-size: .76rem; color: #6b7780; }
}
@media (max-width: 400px) { .pkm .hbp-btn { font-size: .98rem; padding-left: .6rem; padding-right: .6rem; } }

/* ── Packs index (pk-*) ─────────────────────────────────── */
.pk-wrap h1 { font-family: var(--st-serif); font-weight: 500; }

/* ── Cookie banner (Settle cc-card look; behaviour unchanged) ─ */
#cookie-consent-banner { background: transparent !important; border-top: 0 !important; box-shadow: none !important; padding: .75rem !important; pointer-events: none; }
#cookie-consent-banner .cc-inner { pointer-events: auto; max-width: 40rem !important; background: #fff; border: 1px solid #E8E6E1; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); padding: 1rem; }
#cookie-consent-banner .cc-long { color: #6B6860 !important; font-size: .78rem !important; }
#cookie-consent-banner .cc-long a { color: #1B6B6B !important; }
#cookie-consent-banner #cookie-accept-btn { background: #1B6B6B !important; border-radius: .75rem !important; padding: .55rem 1.1rem !important; }
#cookie-consent-banner #cookie-decline-btn { border-radius: .75rem !important; border: 1px solid #E8E6E1 !important; color: #6B6860 !important; padding: .55rem 1.1rem !important; }
@media (max-width: 640px) {
  html #cookie-consent-banner.cc-compact { padding: .4rem .75rem !important; background: #fff !important; box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important; border-top: 1px solid #E8E6E1 !important; }
  html #cookie-consent-banner.cc-compact .cc-inner { max-width: none !important; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
  #cookie-consent-banner.cc-compact #cookie-accept-btn, #cookie-consent-banner.cc-compact #cookie-decline-btn { padding: .4rem .75rem !important; }
}

/* ── AfterTaxSalary additions (26 Oct 2026) ─────────────── */
/* The homepage calculator intro (the unchanged H1) sits under the top block now. */
.ec-calc-intro { padding-top: 2.25rem !important; }
.ec-calc-intro h1 { font-family: var(--st-serif) !important; font-weight: 500 !important; }
.st-main .card { border-color: var(--st-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(28,41,40,.04), 0 12px 32px -26px rgba(28,41,40,.30); }
.st-main .card-hover:hover { transform: none; border-color: rgba(23,108,105,.45); }
.st-main .text-blue-600, .st-main .hover\:text-blue-600:hover { color: #1B6B6B !important; }
.st-main .bg-blue-50\/60 { background-color: #EEF5F4 !important; }

/* Matched top offer on the payslip / tax-code pages: the free payslip check (tc_inline) in the Settle top-offer
   panel look. Same form, fields and tracking; one offer at the top of the article. */
.tc.tc-inline.ats-top-offer { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); padding: 1.25rem 1.25rem 1.1rem; margin: 0 0 1.75rem; }
.tc.tc-inline.ats-top-offer .tc-eyebrow { color: var(--st-teal); font-weight: 600; letter-spacing: .06em; }
.tc.tc-inline.ats-top-offer .tc-h2 { font-family: var(--st-serif); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.01em; color: var(--st-ink); margin-bottom: .4rem; }
.tc.tc-inline.ats-top-offer .tc-btn { border-radius: 12px; font-weight: 600; background: var(--st-teal); box-shadow: 0 1px 2px rgba(14,74,71,.18); }
.tc.tc-inline.ats-top-offer .tc-btn:hover { background: #125A57; }
.tc.tc-inline.ats-top-offer input, .tc.tc-inline.ats-top-offer select { border: 1px solid #D5D9D6; border-radius: 10px; }
.tc.tc-inline.ats-top-offer .ats-top-offer__note { margin: .7rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--st-muted); }
@media (min-width: 640px) { .tc.tc-inline.ats-top-offer { padding: 1.5rem 1.6rem 1.25rem; } }

/* Tax check pages (/tax-check, result) on the system look. */
.tc-card, .tc-offer { border-radius: 16px; border-color: var(--st-line); box-shadow: var(--st-shadow); }
.tc-btn { border-radius: 12px; font-weight: 600; }
.tc-h1 { font-family: var(--st-serif); }
.st-footer .footer-col ul { list-style: none; margin: 0; padding: 0; }
.st-footer .footer-col li { margin: 0; }

/* ── EmployerCalculator additions ─────────────────────────── */
.footer.st-footer .footer-inner > div, .footer.st-footer .footer-col { min-width: 0; }
.footer.st-footer a { display: block; font-size: .875rem; color: #6B6860; padding: .22rem 0; text-decoration: none; }
.footer.st-footer .footer-bottom a { display: inline; padding: 0; }
.ec-calc-intro.hero { padding-top: 2.25rem; }
.ec-calc-intro.hero h1 { font-family: var(--st-serif); font-weight: 500; }
.breadcrumbs ol { text-wrap: pretty; }
/* Matched top offer (Settle top-offer panel): sp-panel from cards.css with the pack cover. */
.ec-top { margin: 1.25rem 0 1.75rem; text-align: left; }
.ec-top .sp-panel { align-items: flex-start; }
.ec-top .sp-panel__thumb img { width: 72px; height: auto; border-radius: 3px; box-shadow: 0 6px 14px -6px rgba(20,40,60,.35); }
.ec-top .sp-top__meta { margin-top: .55rem; font-size: .8125rem; line-height: 1.45; color: var(--st-muted); }
.ec-top .sp-top__meta span { white-space: nowrap; }
.ec-top .sp-btn { white-space: nowrap; }
@media (max-width: 639px) { .ec-top .sp-panel__thumb img { width: 56px; } .ec-top .sp-btn { width: 100%; justify-content: center; } }
.st-packs--3 { max-width: 1060px; }
@media (min-width: 900px) { .st-packs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .st-packs--3 > :last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; } }

/* 26 Oct 2026: on phones the pack card's button (and the small print under it) spans the whole card instead of the
   narrow column beside the cover, so "See what's in the New Starter Pack ->" stays on one line. Display only. */
@media (max-width: 639px) {
  .pko:not(.pko--compact) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: 0; align-items: start; }
  .pko:not(.pko--compact) > .pko-cover { grid-column: 1; grid-row: 1 / span 3; }
  .pko:not(.pko--compact) > .pko-body { display: contents; }
  .pko:not(.pko--compact) > .pko-body > * { grid-column: 2; }
  .pko:not(.pko--compact) > .pko-body > .pko-btn,
  .pko:not(.pko--compact) > .pko-body > .pko-btn ~ * { grid-column: 1 / -1; }
  .pko:not(.pko--compact) > .pko-body > .pko-btn { margin-top: .85rem; padding-left: .75rem; padding-right: .75rem; font-size: .875rem; }
}

/* ── Tap targets (26 Oct 2026): every control a thumb uses is at least 44px tall. Display only. ── */
.site-nav .nav-mobile-toggle { width: 44px; height: 44px; }
.quick-amounts button, #annual-chips button { min-height: 44px !important; }
#mode-annual, #mode-hourly { min-height: 44px !important; padding: 0 .9rem !important; font-size: .78rem; }
details > summary { min-height: 44px; box-sizing: border-box; align-content: center; }