/* TaxCharter brand overrides — loaded after organic.css */
:root {
  --color-bg: #f7f9fb;
  --color-surface: #e7eff4;
  --color-text: #333333;
  --color-accent: #29abe2;
  --color-accent-2: #f7941e;
  --color-divider: color-mix(in srgb, #333333 16%, transparent);

  --color-neutral-100: #f7f9fa; --color-neutral-200: #eef2f4; --color-neutral-300: #dde4e8;
  --color-neutral-400: #c2ccd2; --color-neutral-500: #9aa5ac; --color-neutral-600: #78838a;
  --color-neutral-700: #5a6469; --color-neutral-800: #41484c; --color-neutral-900: #2d3235;

  --color-accent-100: #e8f7fe; --color-accent-200: #cbecfb; --color-accent-300: #9fdcf7;
  --color-accent-400: #63c4ee; --color-accent-500: #29abe2; --color-accent-600: #1b8dbd;
  --color-accent-700: #146d93; --color-accent-800: #0e4d68; --color-accent-900: #093243;

  --color-accent-2-100: #fff4e3; --color-accent-2-200: #ffe6c2; --color-accent-2-300: #ffd196;
  --color-accent-2-400: #fbb257; --color-accent-2-500: #f7941e; --color-accent-2-600: #d97a0c;
  --color-accent-2-700: #a95c07; --color-accent-2-800: #7a4205; --color-accent-2-900: #4d2903;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 48px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-divider); }
.site-head > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.topbar { background: var(--color-accent-800); color: #cbecfb; font-size: 15px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 11px; padding-bottom: 11px; flex-wrap: wrap; }
.topbar-tag { letter-spacing: .04em; }
.topbar-links { display: flex; align-items: center; gap: 28px; }
.topbar a { color: #ffffff; font-weight: 600; }
.topbar a:hover { color: #ffd196; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.site-nav a:not(.btn) { font-weight: 700; font-size: 16px; padding: 12px 16px; border-radius: 999px; color: var(--color-neutral-700); white-space: nowrap; }
.site-nav a:not(.btn):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.site-nav a:not(.btn)[aria-current="page"] { background: color-mix(in srgb, var(--color-text) 9%, transparent); color: var(--color-text); }
.site-nav a.btn { margin-left: 14px; padding: 14px 26px; font-size: 16px; white-space: nowrap; color: #fff; }
.site-nav a.btn:hover { background: var(--color-accent-600); color: #fff; }
.nav-toggle { display: none; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-2-700); }
.pill { display: inline-flex; padding: 10px 22px; border-radius: 999px; background: var(--color-accent-2-200); color: var(--color-accent-2-800); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lede { font-size: 19px; line-height: 1.6; color: var(--color-neutral-700); max-width: 44ch; }
.grid { display: grid; gap: 30px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tile { background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: 38px 36px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.tile h3 { font-family: var(--font-heading); font-size: 21px; margin: 0; line-height: 1.2; }
.tile p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); }
.price { margin-top: auto; padding-top: 16px; font-size: 15px; font-weight: 700; color: var(--color-accent-700); }
.step-num { width: 58px; height: 58px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 22px; color: #fff; }

.cta { background: var(--color-text); border-radius: var(--radius-lg); padding: 68px 64px; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta h2 { margin: 0 0 12px; font-size: 34px; color: var(--color-bg); }
.cta p { margin: 0; font-size: 17px; color: var(--color-neutral-300); }

.site-foot { background: var(--color-text); color: var(--color-neutral-300); padding: 56px 0 36px; margin-top: 20px; }
.site-foot a { color: var(--color-neutral-300); }
.site-foot a:hover { color: #fff; }
.foot-cols { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.foot-h { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-neutral-500); font-weight: 700; margin-bottom: 4px; }
.foot-legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; color: var(--color-neutral-500); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

html { scroll-behavior: smooth; }
section { padding: 84px 0; scroll-margin-top: 190px; }
section.tight { padding: 48px 0; }

@media (max-width: 1240px) {
  .brand img { height: 88px; }
  .topbar { font-size: 14px; }
  .topbar-links { gap: 18px; }
  .site-nav { gap: 2px; }
  .site-nav a:not(.btn) { font-size: 14px; padding: 9px 11px; }
  .site-nav a.btn { font-size: 14px; padding: 12px 18px; margin-left: 8px; }
}
@media (max-width: 1040px) {
  .brand img { height: 72px; }
  .site-nav a:not(.btn) { font-size: 13px; padding: 8px 9px; }
  .site-nav a.btn { font-size: 13px; padding: 11px 15px; margin-left: 6px; }
}
@media (max-width: 940px) {
  .site-head > .wrap { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
  .topbar-tag { display: none; }
  .topbar .wrap { justify-content: center; }
  .site-nav { width: 100%; }
}
@media (max-width: 860px) {
  html { font-size: 17px; }
  .wrap { padding: 0 22px; }
  section { padding: 56px 0; }
  .lede { font-size: 17px; }
  h1 { font-size: 34px !important; }
  .split { grid-template-columns: 1fr !important; }
  .cta { padding: 36px 28px; }
  .site-nav a:not(.btn) { padding: 9px 12px; font-size: 15px; }
  .site-nav a.btn { padding: 12px 20px; font-size: 15px; margin-left: 4px; }
  .brand img { height: 64px; }
  .topbar { font-size: 13px; }
  .topbar-links { gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* Primary actions: deep blue so white label clears WCAG AA.
   #29ABE2 stays for the mark, decorative shapes and step badges (chrome). */
.btn-primary,
.site-nav a.btn.btn-primary { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.btn-primary:hover,
.site-nav a.btn.btn-primary:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); color: #fff; }
.btn-primary:active,
.site-nav a.btn.btn-primary:active { background: var(--color-accent-900); border-color: var(--color-accent-900); }
.cta .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #062f42; font-weight: 700; }
.cta .btn-primary:hover { background: var(--color-accent-300); border-color: var(--color-accent-300); color: #062f42; }

.tag { white-space: nowrap; }
.tag-outline { color: var(--color-accent-700); border-color: var(--color-accent-300); }
.tag.jump { border-radius: 999px; height: auto; line-height: 1; padding: 15px 28px; font-size: 16px; letter-spacing: .02em; font-weight: 700; color: var(--color-accent-700); border-color: var(--color-accent-300); border-width: 2px; }
.tag.jump:hover { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-accent-800); }

/* Hero: stack earlier so the image column isn't a chip beside a tall text column */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .split > div:last-child { max-width: 620px; }
}