/* =========================================================
   Nottingham CPA PC — site styles
   Design tokens mirror the TaxNucleus app (src/app/globals.css)
   so the marketing site and the client portal read as one firm.
   ========================================================= */

/* ---------- Tokens: light (complete set, defined here) ---------- */
:root {
  --ground:          #f6f8f5;
  --surface:         #ffffff;
  --surface-sunk:    #edf1ec;
  --ink:             #1a2620;
  --ink-deep:        #0f1a14;
  --muted:           #5a695f;   /* 5.4:1 on --ground */
  --muted-strong:    #3d4a42;
  --rule:            #dfe6de;
  --rule-strong:     #c6d2c6;

  --green:            #355e3b;
  /* The sticky header is 102px tall; anything that sticks below it, or
     scrolls to sit below it, measures from here. */
  --header-h:         102px;
  --stick:            calc(var(--header-h) + 18px);
  --green-hover:      #2a4b2f;
  --green-soft:       rgba(53, 94, 59, 0.10);
  --brass:           #8a5808;   /* 5.6:1 on --ground at eyebrow size */
  --brass-soft:      rgba(138, 88, 8, 0.12);
  --danger:          #b3261e;
  --danger-bg:       #fdecea;
  --on-accent:       #ffffff;

  /* Dark band (hero / footer) — constant in both themes, it is a solid
     object. Derived from the brand green so the dark sections read as
     this firm's colour rather than a generic near-black. */
  --band:            #12211a;
  --band-sunk:       #0d1913;
  --band-ink:        #eef3ee;
  --band-muted:      #a9bdae;
  --band-rule:       rgba(255, 255, 255, 0.13);
  --band-accent:     #7fc08e;
  --brass-onband:    #d9a441;   /* 7.4:1 on --band */

  --shadow-sm: 0 1px 2px rgba(27, 24, 21, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(27, 24, 21, 0.18);

  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --gutter: clamp(1rem, 5vw, 4rem);
  --measure: 68ch;
  --radius: 4px;
}

/* ---------- Tokens: dark (redefine only) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #121a15;
    --surface:      #18231c;
    --surface-sunk: #1e2a22;
    --ink:          #e8efe8;
    --ink-deep:     #f4f8f3;
    --muted:        #93a597;
    --muted-strong: #c2d0c4;
    --rule:         #263329;
    --rule-strong:  #38473b;

    --green:         #7cb88a;
    --green-hover:   #97c8a2;
    --green-soft:    rgba(124, 184, 138, 0.16);
    --brass:        #dba956;
    --brass-soft:   rgba(219, 169, 86, 0.16);
    --danger:       #e5776e;
    --danger-bg:    rgba(229, 119, 110, 0.14);
    --on-accent:    #14211f;

    --band:         #0c1712;
    --band-sunk:    #121e17;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --ground:       #121a15;
  --surface:      #18231c;
  --surface-sunk: #1e2a22;
  --ink:          #e8efe8;
  --ink-deep:     #f4f8f3;
  --muted:        #93a597;
  --muted-strong: #c2d0c4;
  --rule:         #263329;
  --rule-strong:  #38473b;

  --green:         #7cb88a;
  --green-hover:   #97c8a2;
  --green-soft:    rgba(124, 184, 138, 0.16);
  --brass:        #dba956;
  --brass-soft:   rgba(219, 169, 86, 0.16);
  --on-accent:    #14211f;

  --band:         #0c1712;
  --band-sunk:    #121e17;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  color: var(--ink-deep);
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.012em;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-hover); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  /* --ink-deep inverts with the theme, so the skip link was light on
     light in dark mode. The band pair is dark in both. */
  position: absolute; left: -9999px;
  background: var(--band); color: var(--band-ink);
  padding: 0.75rem 1.25rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--sunk { background: var(--surface-sunk); }

.stack { display: flex; flex-direction: column; }
.stack--xs  { gap: 0.5rem; }
.stack--sm  { gap: 0.85rem; }
.stack--md  { gap: 1.5rem; }
.stack--lg  { gap: 2.5rem; }
.stack--xl  { gap: 3.5rem; }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1rem; }

/* ---------- The letterhead rule ----------
   The logo sets its name between two hairlines. That device is
   reused as the section eyebrow so the mark and the page agree. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}
.eyebrow--onband { color: var(--brass-onband); }
.eyebrow--onband::before, .eyebrow--onband::after { background: var(--band-rule); }

/* ---------- Type scale ---------- */
.t-display { font-size: clamp(2.6rem, 6.2vw, 4.4rem); }
.t-h2      { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.t-h3      { font-size: clamp(1.2rem, 1.9vw, 1.4rem); }
.t-lead    { font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--muted-strong); }
.t-small   { font-size: 0.875rem; }
.t-muted   { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
  font-weight: 600;
  font-family: var(--sans);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.btn:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }

.btn--primary { background: var(--green); color: var(--on-accent); }
.btn--primary:hover { background: var(--green-hover); color: var(--on-accent); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--onband { background: transparent; color: var(--band-ink); border-color: var(--band-rule); }
.btn--onband:hover { background: rgba(255,255,255,0.08); color: var(--band-ink); border-color: rgba(255,255,255,0.32); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
  padding-block: 0.75rem;
}
.header__logo {
  display: block;
  color: var(--green);
  flex-shrink: 0;
  line-height: 0;
}
.header__logo svg, .header__logo img { width: 190px; height: auto; display: block; }

.nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav a {
  position: relative;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted-strong);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color 140ms ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--green); }
@media (prefers-reduced-motion: reduce) { .nav a::after { transition: none; } }

.header__cta { display: flex; align-items: center; gap: 0.9rem; }

@media (max-width: 900px) {
  .nav { display: none; }
  .header__cta { margin-left: auto; }
  .header__logo svg, .header__logo img { width: 150px; }
}
@media (max-width: 460px) {
  .header__cta .btn--ghost { display: none; }
}

/* ---------- Hero (the letterhead band) ---------- */
.hero {
  background: var(--band);
  color: var(--band-ink);
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 11vw, 8rem);
}
/* Faint ledger ruling — the paper this firm actually works on */
.hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 39px,
    var(--band-rule) 39px 40px
  );
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  /* Nudged very slightly by cursor position on desktop — see site.js.
     Falls back to 0,0 (i.e. motionless) everywhere else. */
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { color: var(--band-ink); }
.hero h1 em {
  font-style: italic;
  color: var(--band-accent);
}
.hero__lead {
  color: var(--band-muted);
  max-width: 46ch;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.6;
}
/* The hero shares the page's content column — it must start where the
   logo and every section heading start, not float centered in the
   viewport. So the wrap keeps its own width and the measure is applied
   to the text inside it. */
.hero__inner { display: grid; gap: 2.25rem; justify-items: start; }
.hero__inner > p, .hero__inner > h1 { max-width: 62ch; }
.hero__inner > .creds { justify-self: stretch; }

/* Credential row — facts, not counters */
.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem 2.25rem;
  width: 100%;
  margin-top: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--band-rule);
  list-style: none;
  padding-inline: 0;
}
.creds li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-block: 0.6rem;
}
.creds dt, .creds .creds__k {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--band-ink);
  line-height: 1.2;
}
.creds .creds__v {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-muted);
}

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Flip cards ----------
   Every service / industry / tax-center card is a two-sided plate:
   the front is the card as it always was, the back peeks at what's
   inside before you click through. Triggers on hover/keyboard-focus
   only — on touch, where there's no hover, the front alone is a
   complete, fully-functional card; nothing is lost, the flip is a
   bonus for pointer/keyboard visitors. */
.flip {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  perspective: 1400px;
}
.flip__inner {
  position: relative;
  height: 100%;
  min-height: 100%;
  transform-style: preserve-3d;
  transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .flip:hover .flip__inner,
html.js .flip:focus-visible .flip__inner {
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
}

.flip__face {
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.flip:hover .flip__face, .flip:focus-visible .flip__face {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
}
.flip__face--front {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem 1.5rem;
}
.flip__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.6rem 1.5rem;
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--green) 45%, var(--rule));
}

.flip__back-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0;
}
.flip__back-fact {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-deep);
  line-height: 1.35;
}
.flip__face--back .check-list { flex: 1; }
.flip__face--back .check-list li { font-size: 0.88rem; }

.service h3 { font-size: 1.18rem; }
.service p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.service__more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
}

/* Industries: quieter, they are a list of specialisms not products */
.industry {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
}
.industry:last-child { border-bottom: 0; }
.industry__name { font-family: var(--serif); font-size: 1.12rem; color: var(--ink-deep); }
.industry__note { font-size: 0.88rem; color: var(--muted); margin-left: auto; text-align: right; }
@media (max-width: 520px) {
  .industry { flex-direction: column; gap: 0.25rem; }
  .industry__note { margin-left: 0; text-align: left; }
}

/* ---------- "Come to us when" — a real conditional list ---------- */
.when { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.when li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}
.when li:last-child { border-bottom: 0; }
.when__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--brass);
  line-height: 1.5;
}
.when__text { color: var(--muted-strong); }

/* ---------- Pledges ---------- */
.pledge {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brass);
}
.pledge h3 { font-size: 1.08rem; }
.pledge p { color: var(--muted); font-size: 0.94rem; }

/* ---------- Bio ---------- */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) { .bio { grid-template-columns: minmax(0, 1fr); } }

.bio__card {
  background: var(--band);
  color: var(--band-ink);
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
}
.bio__name { font-family: var(--serif); font-size: 1.6rem; color: var(--band-ink); line-height: 1.2; }
.bio__role {
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-onband); margin-top: 0.4rem;
}
.bio__quals { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--band-rule); display: grid; gap: 0.7rem; }
.bio__quals li { font-size: 0.9rem; color: var(--band-muted); display: grid; gap: 0.1rem; }
.bio__quals strong { color: var(--band-ink); font-weight: 500; }

/* ---------- Testimonials ---------- */
.quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink-deep);
}
.quote figcaption {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.quote figcaption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--brass);
}

/* ---------- Pricing note ---------- */
.pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--green-soft);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius: var(--radius);
}
@media (max-width: 760px) { .pricing { grid-template-columns: minmax(0, 1fr); } }
.pricing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pricing li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; align-items: start; font-size: 0.95rem; color: var(--muted-strong); }
.pricing li svg { width: 1.1rem; height: 1.1rem; margin-top: 0.28rem; color: var(--green); }

/* ---------- Tax center teaser ---------- */
.tools { display: grid; gap: 0; }
.tool {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 160ms ease, color 160ms ease;
}
.tool:last-child { border-bottom: 0; }
.tool:hover { padding-left: 0.5rem; color: var(--green); }
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } .tool:hover { padding-left: 0; } }
.tool__name { font-weight: 500; }
.tool__desc { color: var(--muted); font-size: 0.88rem; margin-left: auto; text-align: right; }
.tool__arrow { color: var(--brass); flex-shrink: 0; }
@media (max-width: 560px) {
  .tool { flex-wrap: wrap; gap: 0.2rem 1rem; }
  .tool__desc { margin-left: 0; text-align: left; width: 100%; order: 3; }
}

/* ---------- Contact ---------- */
.contact {
  background: var(--band);
  color: var(--band-ink);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.contact > .wrap { position: relative; z-index: 1; }
.contact h2 { color: var(--band-ink); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
.contact__lead { color: var(--band-muted); }
/* Links inside a dark band need the band's accent — the page's green
   is close to invisible against it. */
.contact a:not(.btn) { color: var(--band-accent); text-decoration-color: color-mix(in srgb, var(--band-accent) 45%, transparent); }
.contact a:not(.btn):hover { color: var(--band-ink); }
.hero a:not(.btn) { color: var(--band-accent); }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
/* The form sits on the white intake card, not on the dark band behind
   it, so the fields take the page's light palette. */
.field label {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface-sunk);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.72rem 0.85rem;
  width: 100%;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--green); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: transparent;
  background: var(--surface);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.8rem; color: var(--muted); }

/* ---------- Footer ---------- */
.footer {
  background: var(--band-sunk);
  color: var(--band-muted);
  padding-block: 3.5rem 2rem;
  border-top: 1px solid var(--band-rule);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

.footer__logo { color: var(--band-accent); display: block; line-height: 0; }
.footer__logo svg, .footer__logo img { width: 180px; height: auto; }
.footer h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-ink);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer a { color: var(--band-muted); text-decoration: none; font-size: 0.9rem; }
.footer a:hover { color: var(--band-ink); text-decoration: underline; text-underline-offset: 0.2em; }

.footer__base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--band-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}
.footer__social { display: flex; gap: 1.1rem; }
.footer__social a { display: inline-flex; }
.footer__social svg { width: 1.05rem; height: 1.05rem; }

/* ---------- Entrance: from a visible resting state ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .rise-2 { animation-delay: 90ms; }
  .rise-3 { animation-delay: 180ms; }
  @keyframes rise {
    from { opacity: 0.001; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Logo mark ----------
   Inline <symbol> + <use> (see the sprite at the top of <body>)
   so the one vector file recolors with currentColor wherever it's
   placed — cream header, ink footer — with no external-resource
   fetch involved. */
.logo-mark {
  display: block;
  width: 190px;
  height: auto;
  color: inherit;
  overflow: visible;
}

/* =========================================================
   Site expansion: mobile nav, breadcrumbs, page headers,
   pricing comparison, FAQ, data tables, check lists.
   ========================================================= */

/* ---------- Mobile nav (native <details>, no JS) ---------- */
.nav-mobile { display: none; margin-left: auto; position: relative; }
.nav-mobile summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile__icon { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-mobile__icon span { display: block; height: 2px; background: var(--ink); border-radius: 1px; }
.nav-mobile[open] summary { border-color: var(--ink); }
.nav-mobile__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(78vw, 320px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 50;
}
.nav-mobile__panel nav { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-mobile__panel nav a {
  padding: 0.65rem 0.4rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.nav-mobile__panel nav a:last-child { border-bottom: 0; }
.nav-mobile__panel .btn-row { flex-direction: column; }
.nav-mobile__panel .btn-row .btn { width: 100%; }

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .nav-mobile { display: block; }
}

/* ---------- Page header (secondary hero, for subpages) ---------- */
.hero--page { padding-block: clamp(3rem, 7vw, 5rem); }
.hero--page .hero__inner { gap: 1.25rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--rule-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.crumbs li[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---------- Numbered steps (a real sequence: estimate -> work -> final price) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; counter-increment: step; }
.step__num {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--on-accent);
  background: var(--green);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.step p { color: var(--muted-strong); font-size: 0.95rem; }

/* ---------- Pricing model comparison ---------- */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 820px) { .compare { grid-template-columns: minmax(0, 1fr); } }
.compare__card {
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.compare__card--highlight {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green-soft);
  position: relative;
}
.compare__tag {
  position: absolute;
  top: -0.7rem;
  left: 1.2rem;
  background: var(--green);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.compare__card h3 { font-size: 1.1rem; }
.compare__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.compare__card li { font-size: 0.9rem; color: var(--muted-strong); display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; align-items: start; }
.compare__card li svg { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex-shrink: 0; }
.compare__card--con li svg { color: var(--danger); }
.compare__card--pro li svg, .compare__card--highlight li svg { color: var(--green); }

/* ---------- FAQ (native <details>) ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.1rem;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.3rem;
  color: var(--brass);
  flex-shrink: 0;
  transition: transform 160ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 0.85rem; color: var(--muted-strong); max-width: 65ch; }

/* ---------- Data tables (tax rates, due dates) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 480px;
}
table.data caption { text-align: left; padding: 0.9rem 1.1rem; font-weight: 600; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--rule); }
table.data th, table.data td {
  padding: 0.75rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
table.data thead th { background: var(--surface-sunk); font-weight: 600; color: var(--muted-strong); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-sunk); }

.note {
  font-size: 0.86rem;
  color: var(--muted);
  padding: 1rem 1.1rem;
  background: var(--surface-sunk);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Check list (reusable, was .pricing li) ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.check-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; align-items: start; font-size: 0.95rem; color: var(--muted-strong); }
.check-list li svg { width: 1.1rem; height: 1.1rem; margin-top: 0.28rem; color: var(--green); flex-shrink: 0; }

/* ---------- Related links row ---------- */
.related-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.related-links a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--ink);
}
.related-links a:hover { border-color: var(--green); color: var(--green); }

/* ---------- Simple two-column content layout for subpages ---------- */
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .content-grid { grid-template-columns: minmax(0, 1fr); } }

.side-card {
  padding: 1.5rem;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.side-card h3 { font-size: 1.05rem; }
.side-card p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Scroll reveal ----------
   Sections rise into view as the page scrolls. Gated behind html.js
   (set synchronously in <head>, before first paint) so a page with
   JS blocked or failed simply shows everything at full opacity —
   this is a bonus, never a requirement to read the page. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.js .reveal.is-visible { opacity: 1; transform: none; }

  /* Staggered cascade: grid children within a revealed section rise in
     one after another instead of all at once. Reuses the hero's own
     @keyframes rise, so the whole site shares one motion signature. */
  html.js .reveal .grid > *, html.js .reveal .compare > *, html.js .reveal .steps > * { opacity: 0.001; }
  html.js .reveal.is-visible .grid > *,
  html.js .reveal.is-visible .compare > *,
  html.js .reveal.is-visible .steps > * { animation: rise 550ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js .reveal.is-visible .grid > *:nth-child(1), html.js .reveal.is-visible .compare > *:nth-child(1), html.js .reveal.is-visible .steps > *:nth-child(1) { animation-delay: 0ms; }
  html.js .reveal.is-visible .grid > *:nth-child(2), html.js .reveal.is-visible .compare > *:nth-child(2), html.js .reveal.is-visible .steps > *:nth-child(2) { animation-delay: 90ms; }
  html.js .reveal.is-visible .grid > *:nth-child(3), html.js .reveal.is-visible .compare > *:nth-child(3), html.js .reveal.is-visible .steps > *:nth-child(3) { animation-delay: 180ms; }
  html.js .reveal.is-visible .grid > *:nth-child(4) { animation-delay: 270ms; }
  html.js .reveal.is-visible .grid > *:nth-child(5) { animation-delay: 360ms; }
  html.js .reveal.is-visible .grid > *:nth-child(6) { animation-delay: 450ms; }

  /* Eyebrow rule grows in from the left as its section reveals — the
     same letterhead device the logo and section labels already share. */
  .eyebrow::after, .eyebrow--center::before { transform-origin: left; }
  html.js .reveal .eyebrow::after,
  html.js .reveal .eyebrow--center::before {
    transform: scaleX(0);
  }
  html.js .reveal.is-visible .eyebrow::after,
  html.js .reveal.is-visible .eyebrow--center::before {
    animation: eyebrow-grow 750ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  }
  @keyframes eyebrow-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ---------- Complexity selector (Pricing page) ----------
   Pure CSS, no JavaScript: three radio inputs drive which tab is
   highlighted, how full the meter reads, and which example panel
   shows. Works with JS disabled, keyboard-operable as a native radio
   group (arrow keys move between options). */
.complexity { display: grid; gap: 1.5rem; }
.complexity__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.complexity__tabs {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.complexity__tab {
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.complexity__radio:focus-visible + .complexity__tabs .complexity__tab,
.complexity__tab:hover { border-color: var(--green); }

.complexity__meter {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.complexity__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--brass));
  transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 18%;
}
@media (prefers-reduced-motion: reduce) { .complexity__fill { transition: none; } }

.complexity__panel {
  display: none;
  padding: 1.6rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.complexity__panel h3 { font-size: 1.1rem; margin-bottom: 0.9rem; }
.complexity__panel .t-small { margin-top: 1rem; }

/* Wiring: each radio (by id) reveals its own tab highlight, meter
   width, and panel. Radios sit before their targets in the DOM so the
   general sibling combinator (~) can reach forward to them. */
#cx-simple:checked ~ .complexity__tabs label[for="cx-simple"],
#cx-moderate:checked ~ .complexity__tabs label[for="cx-moderate"],
#cx-complex:checked ~ .complexity__tabs label[for="cx-complex"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-accent);
}
#cx-simple:checked ~ .complexity__meter .complexity__fill { width: 18%; }
#cx-moderate:checked ~ .complexity__meter .complexity__fill { width: 58%; }
#cx-complex:checked ~ .complexity__meter .complexity__fill { width: 97%; }

#cx-simple:checked ~ .complexity__panels [data-panel="simple"],
#cx-moderate:checked ~ .complexity__panels [data-panel="moderate"],
#cx-complex:checked ~ .complexity__panels [data-panel="complex"] {
  display: block;
}

/* ---------- Intake form (Contact page) ----------
   An original visual treatment for the one interaction most CPA sites
   render as a generic form: styled like a paper intake sheet, with a
   live date stamp and a rubber-stamp confirmation on success. */
.intake {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.intake__ref {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px dashed var(--rule-strong);
  font-family: var(--sans);
}
html.js .intake__ref-date { display: inline; }
.intake__ref-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.intake__ref-date {
  /* Filled in by site.js. Without it there is no date to show, so the
     placeholder dash is hidden rather than left looking broken. */
  display: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-deep);
}

/* Success state: the form is replaced with a stamped confirmation.
   Hidden by default; site.js swaps visibility on a successful submit.
   Also reachable with JS disabled via a real page (see /thank-you.html) —
   this inline version is purely a same-page bonus for JS visitors. */
.intake__success { display: none; text-align: center; padding-block: 1.5rem; }
.intake.is-sent .intake__form { display: none; }
.intake.is-sent .intake__success { display: block; }

.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border: 3px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-8deg) scale(0.4);
  opacity: 0;
}
.intake.is-sent .stamp {
  animation: stamp-down 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .intake.is-sent .stamp { animation: none; opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes stamp-down {
  0%   { opacity: 0; transform: rotate(-8deg) scale(2.2); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.intake__error {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--danger-bg);
  border: 1px solid rgba(179,38,30,0.3);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.88rem;
}
.intake.has-error .intake__error { display: block; }

/* ---------- Deadline countdown ---------- */
.creds [data-countdown-num] { font-variant-numeric: tabular-nums; color: var(--band-accent); }

.countdown-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--band);
  border-radius: var(--radius);
  color: var(--band-ink);
}
.countdown-card [data-countdown-num] {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--band-accent);
  font-variant-numeric: tabular-nums;
}
.countdown-card__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.countdown-card__caption {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-muted);
}
.countdown-card [data-countdown-label] { font-size: 0.98rem; color: var(--band-ink); }
@media (max-width: 480px) { .countdown-card { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }

/* ---------- Portal preview (Client Portal page) ----------
   An interactive, clearly-labeled mockup — no JS, same radio/label
   tab mechanism as the complexity selector. Every name and figure
   inside is fabricated for illustration; see the caption underneath. */
.portal-demo {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.portal-demo__chrome {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule);
}
.portal-demo__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.portal-demo__url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.3rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--muted);
  font-family: var(--sans);
}

.portal-demo__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.portal-demo__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.portal-demo__tab {
  flex: 1;
  text-align: center;
  padding: 0.85rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.portal-demo__tab:hover { color: var(--ink); }

.portal-demo__screen { display: none; padding: 1.5rem; min-height: 340px; }
#pd-dash:checked ~ .portal-demo__tabs label[for="pd-dash"],
#pd-docs:checked ~ .portal-demo__tabs label[for="pd-docs"],
#pd-msgs:checked ~ .portal-demo__tabs label[for="pd-msgs"] { color: var(--green); border-color: var(--green); }
#pd-dash:checked ~ .portal-demo__screens [data-screen="dash"],
#pd-docs:checked ~ .portal-demo__screens [data-screen="docs"],
#pd-msgs:checked ~ .portal-demo__screens [data-screen="msgs"] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .portal-demo__screen { animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

.portal-demo__greeting { font-family: var(--serif); font-size: 1.3rem; color: var(--ink-deep); margin-bottom: 1.25rem; }
.portal-demo__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-bottom: 1.5rem; }
.portal-demo__stat {
  padding: 1rem;
  background: var(--surface-sunk);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.portal-demo__stat-num { font-family: var(--serif); font-size: 1.5rem; color: var(--green); display: block; }
.portal-demo__stat-label { font-size: 0.76rem; color: var(--muted); }
.portal-demo__progress { height: 8px; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--rule); overflow: hidden; margin-bottom: 0.5rem; }
.portal-demo__progress span { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--green), var(--brass)); border-radius: 999px; }

.portal-demo__file {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}
.portal-demo__file:last-child { border-bottom: 0; }
.portal-demo__file-icon { color: var(--brass); flex-shrink: 0; width: 1.2rem; height: 1.2rem; }
.portal-demo__file-name { font-weight: 500; color: var(--ink); }
.portal-demo__file-meta { margin-left: auto; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

.portal-demo__msg { display: flex; margin-bottom: 1rem; }
.portal-demo__msg--me { justify-content: flex-end; }
.portal-demo__bubble {
  max-width: 75%;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.portal-demo__msg--them .portal-demo__bubble { background: var(--surface-sunk); border: 1px solid var(--rule); border-bottom-left-radius: 2px; }
.portal-demo__msg--me .portal-demo__bubble { background: var(--green); color: var(--on-accent); border-bottom-right-radius: 2px; }
.portal-demo__typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html.js #pd-msgs:checked ~ .portal-demo__screens .portal-demo__typewriter {
    width: 0;
    animation: type-in 1.4s steps(34, end) 500ms forwards, blink-caret 700ms step-end infinite;
  }
}
@keyframes type-in { to { width: 100%; } }
@keyframes blink-caret { 50% { border-color: var(--on-accent); } }

.portal-demo__caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* ---------- Testimonial carousel ----------
   One quote shown large at a time, radio-driven dots to switch —
   same no-JS-required mechanism as the complexity selector. */
.carousel { position: relative; max-width: 62ch; margin-inline: auto; }
.carousel__radio {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.carousel__slide { display: none; text-align: center; }
.carousel__slide blockquote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink-deep);
  margin: 0;
}
.carousel__slide figcaption {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#t1:checked ~ .carousel__slides [data-slide="1"],
#t2:checked ~ .carousel__slides [data-slide="2"],
#t3:checked ~ .carousel__slides [data-slide="3"] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .carousel__slide { animation: rise 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

.carousel__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.carousel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule-strong);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.carousel__dot:hover { background: var(--brass); }
#t1:checked ~ .carousel__dots label[for="t1"],
#t2:checked ~ .carousel__dots label[for="t2"],
#t3:checked ~ .carousel__dots label[for="t3"] { background: var(--green); transform: scale(1.3); }

/* ---------- Card icon badge ---------- */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  margin-bottom: 0.3rem;
}
.card-icon svg { width: 1.35rem; height: 1.35rem; }

/* =========================================================
   Tax Nucleus portal walkthrough
   A faithful recreation of the real portal's layout and
   navigation (see hunter0008/taxnucleus src/app/portal),
   rendered in this site's palette so the marketing site and
   the product read as one brand. Every name, document, and
   figure inside is fabricated — see the caption in markup.
   ========================================================= */
.tn { display: flex; flex-direction: column; gap: 1rem; }

.tn__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  box-shadow: 0 24px 60px -24px rgba(27, 24, 21, 0.45);
  background: var(--surface);
}

.tn__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule);
}
.tn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
.tn__urlbar {
  flex: 1;
  margin-left: 0.4rem;
  padding: 0.28rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--muted);
}
.tn__badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--green);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- app shell ---- */
.tn__app { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 430px; }

.tn__side {
  background: var(--band);
  padding: 1rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* On phones the sidebar becomes a horizontal nav strip rather than
   disappearing — the same nav elements, so the walkthrough still has
   something to drive and visitors can still click through it. */
@media (max-width: 720px) {
  .tn__app { grid-template-columns: minmax(0, 1fr); }
  .tn__side {
    flex-direction: row;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.6rem;
    -webkit-overflow-scrolling: touch;
  }
  .tn__side .tn__brand,
  .tn__side .tn__section-label,
  .tn__side .tn__side-foot { display: none; }
  .tn__side .tn__section {
    margin: 0; padding: 0; border: 0;
    display: flex; gap: 0.4rem;
  }
  .tn__nav, .tn__year { width: auto; white-space: nowrap; margin: 0; }
  .tn__nav.is-active::before { display: none; }
  .tn__year span { display: none; }
}

.tn__brand { color: var(--band-accent); padding: 0.1rem 0.4rem 1.1rem; }
.tn__brand .logo-mark { width: 128px; }

.tn__nav {
  position: relative;
  display: block;
  border: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--band-muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.tn__nav:hover { background: rgba(255, 255, 255, 0.07); color: var(--band-ink); }
.tn__nav.is-active { background: var(--green); color: #fff; }
.tn__nav.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 15px; width: 2px;
  border-radius: 999px;
  background: var(--band-accent);
}

.tn__section {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--band-rule);
}
.tn__section-label {
  padding: 0 0.7rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(202, 191, 178, 0.7);
}
.tn__year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--band-rule);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 7px;
  padding: 0.42rem 0.65rem;
  margin-bottom: 0.3rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--band-muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tn__year:hover { background: rgba(255, 255, 255, 0.07); color: var(--band-ink); }
.tn__year.is-active { background: var(--green); border-color: var(--band-accent); color: #fff; }
.tn__year span { font-size: 0.66rem; font-weight: 400; opacity: 0.75; }

.tn__side-foot {
  margin-top: auto;
  padding: 0.9rem 0.7rem 0;
  border-top: 1px solid var(--band-rule);
  font-size: 0.65rem;
  line-height: 1.6;
  color: rgba(202, 191, 178, 0.7);
}

/* ---- main panel ---- */
.tn__main { background: var(--surface); padding: 1.4rem 1.5rem; overflow: hidden; }
.tn__screen { display: none; }
.tn__screen.is-active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html.js .tn__screen.is-active { animation: rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

.tn__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.tn__h1 { font-family: var(--sans); font-size: 1.12rem; font-weight: 600; color: var(--ink-deep); }
.tn__sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.tn__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--rule); background: var(--surface);
  border-radius: 999px; padding: 0.3rem 0.7rem;
  font-size: 0.7rem; font-weight: 500; color: var(--muted-strong);
  box-shadow: var(--shadow-sm);
}
.tn__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }

/* project card */
.tn__project { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.tn__project-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--band); padding: 0.7rem 1rem; color: var(--band-ink);
}
.tn__project-title { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; }
.tn__status {
  border-radius: 999px; padding: 0.22rem 0.6rem;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--rule);
}
.tn__status--prog { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 40%, transparent); }
.tn__status--done { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }

.tn__progress-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1rem; border-bottom: 1px solid var(--rule); background: var(--surface-sunk);
}
.tn__bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.07); overflow: hidden; }
.tn__bar span { display: block; height: 100%; border-radius: 999px; background: var(--brass); width: 60%; transition: width 700ms cubic-bezier(0.22,1,0.36,1); }
.tn__progress-label { font-size: 0.68rem; font-weight: 500; color: var(--muted-strong); white-space: nowrap; }

.tn__steps { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem; }
.tn__step {
  flex: 1 1 7.5rem; min-width: 7.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); padding: 0.75rem 0.5rem; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.tn__step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tn__step-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.04); color: var(--muted);
}
.tn__step-icon svg { width: 16px; height: 16px; }
.tn__step--done .tn__step-icon { background: var(--green-soft); color: var(--green); }
.tn__step--prog .tn__step-icon { background: var(--brass-soft); color: var(--brass); }
.tn__step-n { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tn__step-name { font-size: 0.71rem; font-weight: 600; line-height: 1.25; color: var(--ink-deep); }
.tn__step-status {
  border-radius: 999px; padding: 0.18rem 0.5rem;
  font-size: 0.55rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--muted-strong);
}
.tn__step--done .tn__step-status { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.tn__step--prog .tn__step-status { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 40%, transparent); }

/* files */
.tn__crumbs { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.8rem; }
.tn__row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.3rem; border-bottom: 1px solid var(--rule); font-size: 0.78rem;
}
.tn__row:last-child { border-bottom: 0; }
.tn__row svg { width: 16px; height: 16px; flex-shrink: 0; }
.tn__row--folder svg { color: var(--brass); }
.tn__row--file svg { color: var(--muted); }
.tn__row-name { color: var(--ink); font-weight: 500; }
.tn__row-meta { margin-left: auto; font-size: 0.68rem; color: var(--muted); white-space: nowrap; }

/* ask nuclei */
.tn__ask-input {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.6rem 0.8rem; background: var(--surface-sunk);
  font-size: 0.79rem; color: var(--muted);
  margin-bottom: 1rem;
}
.tn__ask-send {
  margin-left: auto; background: var(--green); color: var(--on-accent);
  border-radius: 6px; padding: 0.28rem 0.65rem; font-size: 0.68rem; font-weight: 700;
}
.tn__qa { border-left: 2px solid var(--green); padding-left: 0.9rem; }
.tn__q { font-size: 0.8rem; font-weight: 600; color: var(--ink-deep); margin-bottom: 0.45rem; }
.tn__a { font-size: 0.78rem; line-height: 1.6; color: var(--muted-strong); }
.tn__sources {
  margin-top: 0.7rem; font-size: 0.7rem; font-weight: 700; color: var(--green);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.tn__source-list { margin-top: 0.5rem; display: grid; gap: 0.3rem; }
.tn__source {
  font-size: 0.68rem; color: var(--muted); padding: 0.35rem 0.55rem;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--surface-sunk);
}

/* e-sign */
.tn__doc {
  border: 1px solid var(--rule); border-radius: 8px; padding: 1rem;
  background: var(--surface-sunk); margin-bottom: 0.9rem;
}
.tn__doc-line { height: 6px; border-radius: 999px; background: rgba(0,0,0,0.07); margin-bottom: 0.5rem; }
.tn__sign {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px dashed var(--green); border-radius: 8px; padding: 0.8rem 1rem;
  background: var(--green-soft); flex-wrap: wrap;
}
.tn__sign-label { font-size: 0.74rem; color: var(--muted-strong); }
.tn__sign-btn {
  background: var(--green); color: var(--on-accent); border-radius: 6px;
  padding: 0.4rem 0.9rem; font-size: 0.74rem; font-weight: 700;
}
.tn__signed {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-deep);
}

/* ---- simulated cursor ---- */
.tn__cursor {
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease;
}
.tn__cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
.tn.is-playing .tn__cursor { opacity: 1; }
.tn__cursor::after {
  content: "";
  position: absolute;
  top: -9px; left: -9px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  transform: scale(0.3);
}
.tn__cursor.is-clicking::after { animation: tn-ripple 520ms ease-out; }
@keyframes tn-ripple {
  0%   { opacity: 0.85; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .tn__cursor { display: none; }
  .tn__bar span { transition: none; }
}

/* ---- controls ---- */
.tn__controls { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
.tn__play {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--rule-strong); background: var(--surface);
  border-radius: 999px; padding: 0.4rem 0.95rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.tn__play:hover { border-color: var(--green); color: var(--green); }
.tn__play svg { width: 12px; height: 12px; }
.tn__caption { font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ---------- Light-ground variants used by rendered content ---------- */
.creds--light {
  border-top-color: var(--rule-strong);
  gap: 0 2rem;
}
.creds--light .creds__k { color: var(--ink-deep); }
.creds--light .creds__v { color: var(--muted); }

.pullquote {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--brass);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-deep);
}
.pullquote figcaption {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Article table of contents ----------
   Built by site.js from the headings the renderer emits. Hidden
   entirely when a page has fewer than three headings to index. */
.toc { display: none; }
.toc.is-ready { display: block; }
@media (min-width: 1080px) {
  .toc.is-ready {
    position: sticky;
    top: var(--stick);
    align-self: start;
    border-left: 2px solid var(--rule);
    padding-left: 1.1rem;
  }
}
.toc__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.toc a {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted-strong);
  text-decoration: none;
  display: block;
}
.toc a:hover { color: var(--green); }
.toc a.is-current { color: var(--green); font-weight: 600; }

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
@media (min-width: 1080px) {
  .article-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 3rem; }
}
.block-head { scroll-margin-top: var(--stick); }

/* ---------- Split sections ----------
   Long content pages read badly as one narrow ribbon down the left and
   nothing on the right. So each group of blocks becomes a section whose
   heading lives in its own rail: numbered, ruled, and sticky on desktop
   so it tracks the reader down through the prose beside it. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split__rail { position: sticky; top: var(--stick); }
}
.split__rail { display: grid; gap: 0.7rem; }
.split__num {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.split__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--brass), transparent);
  opacity: 0.5;
}
.section--sunk .split__num { color: var(--brass); }
.split__rail h2 { margin: 0; }
.split__rail .split__dek {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
  max-width: 34ch;
}

/* ---------- Reading progress ----------
   A hairline across the top of a long article, filling as you read.
   Injected by site.js only on pages that have an article rail. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.progress > span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(to right, var(--green), var(--brass));
}

/* ---------- Pointer lean ----------
   The pricing comparison cards tip a few degrees toward the cursor. The custom
   properties default to zero, so with JS off nothing moves. */
.compare__card {
  --lean-x: 0deg;
  --lean-y: 0deg;
  transform: perspective(900px) rotateY(var(--lean-x)) rotateX(var(--lean-y));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .compare__card { transform: none; transition: none; }
}


/* ---------- Cursor light ----------
   A soft glow that follows the pointer across the dark bands — the
   hero and every closing call to action. Added by site.js on pointer
   devices only; the bands are fully painted without it. */
.contact, .hero { --spot-x: 50%; --spot-y: 50%; }
.contact::after, .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms ease;
  background: radial-gradient(
    520px circle at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--band-accent) 18%, transparent),
    transparent 72%);
}
.contact.is-lit::after, .hero.is-lit::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .contact::after, .hero::after { display: none; }
}

/* A large ghosted numeral in the section rail — the same figure as the
   small one above it, set big and faint so a long section has something
   holding the left column instead of white space. Decorative only, and
   only where there's room for it. */
@media (min-width: 900px) {
  .split__rail::after {
    content: var(--n, "");
    font-family: var(--serif);
    font-size: 8rem;
    line-height: 0.8;
    font-weight: 500;
    color: var(--green);
    opacity: 0.07;
    margin-top: 0.5rem;
    user-select: none;
    pointer-events: none;
  }
  .section--sunk .split__rail::after { opacity: 0.09; }
}

/* ---------- Reference flow ----------
   A page that mixes prose with reference tables can't cap the whole
   column at a reading measure — a bracket table is a grid of numbers,
   and squeezing it into 68ch makes every cell wrap. So the measure is
   applied to the text children and the tables run the full column. */
.reference > p,
.reference > h2,
.reference > h3,
.reference > ul,
.reference > ol,
.reference > .note { max-width: var(--measure); }
.reference > .table-wrap { max-width: 100%; }
/* Deadline tables: the date column never wraps — "September 15, 2026"
   split over two lines is harder to scan than a slightly wider column. */
table.data--dates td:first-child { white-space: nowrap; }

/* The heading above a card grid, set against its own standfirst so the
   grid doesn't open with a lone narrow column of text. */
.grid-head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) {
  .grid-head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}
.grid-head > p { color: var(--muted); max-width: 46ch; }

/* ---------- The step spine ----------
   A rule connects each numbered step to the next, and fills in as you
   scroll past it — so a five-step process reads as one continuous
   thread rather than five separate rows. With JS off every step is lit
   and the spine is solid, which is also what reduced-motion gets. */
.steps { position: relative; }
.step { position: relative; }
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.35rem;
  bottom: -2.1rem;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
}
.step:not(:last-child)::before { background: var(--rule); }
.step:not(:last-child)::after {
  background: linear-gradient(to bottom, var(--green), var(--brass));
  transform-origin: 50% 0;
  transform: scaleY(1);
}
.step__num { transition: background-color 420ms ease, color 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }

html.js .step:not(:last-child)::after { transform: scaleY(0); transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1); }
html.js .step__num { background: var(--rule-strong); color: var(--surface); }
html.js .step.is-lit:not(:last-child)::after { transform: scaleY(1); }
html.js .step.is-lit .step__num { background: var(--green); color: var(--on-accent); transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  html.js .step:not(:last-child)::after { transform: scaleY(1); transition: none; }
  html.js .step__num { background: var(--green); color: var(--on-accent); transition: none; }
  html.js .step.is-lit .step__num { transform: none; }
}

/* The opening statement above a page's first heading. Two columns on a
   wide screen so it reads as a standfirst filling the measure, one
   column everywhere narrower. */
.lead-flow { font-size: 1.05rem; }
.lead-flow .prose { max-width: none; }
@media (min-width: 900px) {
  .lead-flow > .prose {
    /* .stack makes this a grid, and multi-column layout does not apply
       to grid containers — so the lead opts back out to block flow. */
    display: block;
    columns: 2;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    orphans: 2;
    widows: 2;
  }
  .lead-flow > .prose > p { break-inside: avoid-column; margin-top: 0; }
  .lead-flow > .prose > p + p { margin-top: 1rem; }
}

/* When a reference page's figures were last read out of the source. A
   page full of dated numbers with no date on it gives the reader no way
   to know whether to trust it. */
.checked {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--muted);
  max-width: var(--measure);
}
.checked__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  transform: translateY(-1px);
}
.checked > span:last-child { flex: 1; }

/* ---------- Print ----------
   The Tax Center pages are reference material, and reference material
   gets printed. Strip the furniture, drop the dark bands so a deadline
   table doesn't cost half a cartridge, and print link targets so a
   paper copy still tells you where a citation went. */
@media print {
  .header, .footer, .progress, .toc, .nav-mobile, .skip,
  .contact, .cta-band, .carousel__dots, .tn, .related-links,
  .countdown-card { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  /* The hero is a dark band on screen; on paper it is just the title. */
  .hero { background: #fff !important; padding-block: 0 0 1rem !important; }
  .hero::before, .hero::after { display: none !important; }
  .hero h1, .hero .t-lead, .hero__lead { color: #000 !important; }
  .eyebrow--onband { color: #555 !important; }
  .creds { border-top-color: #999 !important; }
  .creds .creds__k, .creds .creds__v { color: #000 !important; }
  .section, .section--sunk { background: #fff !important; padding-block: 0.5rem !important; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; }

  .wrap { max-width: none; padding-inline: 0; }
  .split { display: block; }
  .split__rail { position: static; }
  .split__rail::after { display: none; }
  .grid-head { display: block; }

  h1, h2, h3 { color: #000 !important; break-after: avoid; }
  p, li, tr { break-inside: avoid; }
  .table-wrap { overflow: visible; border-color: #999; }
  table.data { font-size: 9.5pt; }
  table.data th { background: #eee !important; color: #000 !important; }

  a { color: #000 !important; text-decoration: underline; }
  /* Spell out where a link went, since a printed page can't be clicked. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  main a[href^="/"]::after { content: " (nottinghamcpa.com" attr(href) ")"; font-size: 8pt; }

  .note, .checked { border-color: #999; background: #f4f4f4 !important; }
}

/* A caution that appears on its own once a reference page's figures no
   longer cover the tax year the reader is in. */
.note--warn {
  border-left-color: var(--danger);
  background: var(--danger-bg);
  color: var(--ink);
}

/* A deadline that has already gone by, inside a whole-year reference
   table. Still worth showing — it is the shape of the year — but it is
   not something to act on. */
.data--dates tr.is-past td { color: var(--muted); }
.data--dates tr.is-past td:first-child { text-decoration: line-through; }