/* ===========================================================================
 * TaxTraks V - site styles
 *
 * The palette comes straight out of the TaxTraks logo artwork:
 *     blue  #006193   green #73aa41   grey #a8a9a8
 *
 * Two notes on why the values below are not all literal logo colors:
 *
 *  - The logo green (#73aa41) only reaches 2.8:1 against white, which is below
 *    the 4.5:1 that text and buttons need to stay readable. So --accent is a
 *    deepened version of it for anything carrying text, and --green keeps the
 *    true logo color for decoration: rules, checkmarks, fills.
 *  - On dark blue bands the green needs to go lighter instead, which is
 *    --green-light.
 *
 * Change --brand and --accent and the whole site restyles.
 * ======================================================================== */

:root {
  /* ---- brand (from the logo artwork) ----------------------------------- */
  --brand:      #006193;   /* logo blue: header, headings          */
  --brand-dark: #004a71;   /* deep bands, footer                   */
  --accent:     #4e7729;   /* buttons, links, active tab (5.3:1)   */
  /* ---------------------------------------------------------------------- */

  --brand-deep:  #003d5e;  /* hero gradient base                   */
  --accent-dark: #436625;  /* button hover                         */
  --accent-soft: #eef6e6;  /* tinted icon backgrounds              */

  --green:       #73aa41;  /* the literal logo green - decoration only */
  --green-light: #9ccf6a;  /* green that reads on dark blue           */

  --ink:    #22313f;
  --muted:  #5c6f7d;
  --line:   #dbe4ea;
  --bg:     #f2f6f9;
  --panel:  #ffffff;

  --good:    #1f6b45;
  --good-bg: #e6f4ec;
  --info:    #1f4e79;
  --info-bg: #e8f1f8;
  --bad:     #93242b;
  --bad-bg:  #fbeaeb;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(18, 58, 77, .06);
  --shadow-lg: 0 12px 32px rgba(12, 42, 56, .12);
  --wrap:      1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
* { box-sizing: border-box; }

/* The browser's own [hidden] rule is display:none at the lowest specificity,
 * so any class that sets display - and the tool pages are full of flex and
 * grid panels that start hidden - silently beats it. The tool scripts toggle
 * .hidden through the attribute, so this has to win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--brand); text-decoration: underline; }

h1, h2, h3, h4 { color: var(--brand); line-height: 1.25; margin: 0 0 14px; }
h1 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: clamp(24px, 3.2vw, 33px); font-weight: 700; letter-spacing: -.3px; }
h3 { font-size: 19px; font-weight: 650; }
p  { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 20px; }

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

/* Visible to a screen reader, invisible on screen. The four table captions on
   the Online Tools pages use it; without this rule they printed as stray
   centred headings above each table. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* --- Layout helpers ------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

.section { padding: 74px 0; }
.section-tight { padding: 52px 0; }
.section-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-brand { background: var(--brand-dark); color: #dce7ee; }
.section-brand h2, .section-brand h3 { color: #fff; }

.section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }
.section-brand .section-head p { color: #a9c1cf; }

.eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
/* Anywhere the background is dark blue, the accent green has to go light or it
   disappears into it. */
.section-brand .eyebrow,
.hero .eyebrow,
.cta-band .eyebrow,
.page-head .eyebrow { color: var(--green-light); }

.lede { font-size: 18.5px; color: var(--muted); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  font: inherit; font-size: 15.5px; font-weight: 650;
  line-height: 1.35;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-quiet { background: #fff; color: var(--brand); border-color: #c3d0dc; }
.btn-quiet:hover { background: #eef3f8; color: var(--brand); border-color: var(--accent); }

.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-block { display: block; width: 100%; }

/* --- Header ---------------------------------------------------------------
 * The bar is allowed to run wider than the content wrap: nine menu items plus
 * a button need more room than a comfortable reading measure. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--brand);
  border-bottom: 4px solid var(--green);
  transition: box-shadow .2s;
}
.site-header.stuck { box-shadow: 0 6px 20px rgba(12, 42, 56, .28); }

.site-header .bar {
  max-width: 1260px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 18px;
}

/* The logo is the reverse (white/green) artwork, so it sits straight on the
   blue with no white pill behind it. */
.brand { display: flex; flex-direction: column; gap: 5px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
/* The artwork already reads "TAX TRAKS", so the text name only appears if the
   logo file is missing. The tagline is not in this lockup, so it always shows. */
.brand-name { display: none; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .3px; }
.brand-nologo .brand-name { display: block; }
.brand-tagline {
  color: #cfdfe8; font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap;
}

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1px; }
.site-nav a {
  /* 8px sides, not 10: ten items, a phone number and a button have to share
     a 1260px bar, and at 10px they do not. */
  display: block; padding: 9px 8px;
  color: #c9d8e6; font-size: 14.5px; font-weight: 500;
  white-space: nowrap;
  border-radius: 5px; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.site-nav a.active { color: #fff; font-weight: 650; border-bottom-color: var(--green); }

.nav-extras { display: flex; align-items: center; gap: 14px; }
.nav-phone { color: #fff; font-weight: 650; font-size: 15px; white-space: nowrap; }
.nav-phone:hover { color: var(--green-light); text-decoration: none; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 40px;
  background: transparent; border: 1px solid rgba(255,255,255,.34);
  border-radius: 6px; cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: #fff;
  margin: 0 auto; content: ""; position: relative;
  transition: transform .2s, opacity .2s;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: -2px; transform: rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 460px at 78% -12%, rgba(115, 170, 65, .26), transparent 62%),
    linear-gradient(168deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #dce7ee;
  padding: 84px 0 78px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 54px; align-items: center;
}
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--green-light); }
.hero .lede { color: #cfdfe8; font-size: 19px; margin-bottom: 28px; max-width: 34em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.hero-chips {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px;
}
.hero-chips li {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #e7f0f6;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

.hero-note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; color: #c5dce9; margin: 0;
}
.hero-note .dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-top: 8px;
}

/* Recovery card sitting in the hero */
.hero-card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-card-head {
  background: #eef3f8; border-bottom: 1px solid var(--line);
  padding: 16px 22px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand);
}
.hero-card ul { list-style: none; margin: 0; padding: 8px 0; }
.hero-card li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 22px; border-bottom: 1px solid #eef2f6;
  color: var(--ink); font-size: 15.5px; font-weight: 600;
}
.hero-card li:last-child { border-bottom: none; }
.hero-card .check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--good-bg); color: var(--good);
  font-size: 13px; font-weight: 800; line-height: 22px; text-align: center;
}
.hero-card-foot {
  background: #fafcfe; border-top: 1px solid var(--line);
  padding: 15px 22px; font-size: 13.5px; color: var(--muted);
}

/* --- Hero scene ------------------------------------------------------------
 * The animated illustration in the hero. Every animation below is a loop with
 * a long, calm period - this sits behind a headline, so it should read as
 * "alive", not "look at me". Anyone with reduce-motion set gets the finished
 * state and nothing moving; that override is at the bottom of this file.
 * -------------------------------------------------------------------------- */
.hero-scene {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.hero-scene svg { display: block; width: 100%; height: auto; }

/* Bars grow from the axis. transform-box keeps the origin on the shape itself
   rather than the whole SVG, which is what makes scaleY behave. */
.hero-scene .bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-grow 9s ease-in-out infinite;
}
.hero-scene .bar-1 { animation-delay: 0s; }
.hero-scene .bar-2 { animation-delay: .18s; }
.hero-scene .bar-3 { animation-delay: .36s; }
.hero-scene .bar-4 { animation-delay: .54s; }
.hero-scene .bar-5 { animation-delay: .72s; }

@keyframes bar-grow {
  0%       { transform: scaleY(.04); }
  22%, 78% { transform: scaleY(1); }
  100%     { transform: scaleY(.04); }
}

/* Sheets lift off the stack and fade, one after the other: the filings being
   worked through. */
.hero-scene .sheet {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sheet-lift 9s ease-in-out infinite;
}
.hero-scene .sheet-1 { animation-delay: 1.2s; }
.hero-scene .sheet-2 { animation-delay: 4.6s; }

@keyframes sheet-lift {
  0%        { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%        { opacity: 1; transform: translate(2px, -6px) rotate(-3deg); }
  26%       { opacity: 1; transform: translate(16px, -34px) rotate(-11deg); }
  40%, 100% { opacity: 0; transform: translate(26px, -52px) rotate(-16deg); }
}

/* Money coming back. */
.hero-scene .coin {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: coin-rise 9s ease-out infinite;
}
.hero-scene .coin-1 { animation-delay: 2.0s; }
.hero-scene .coin-2 { animation-delay: 2.7s; }
.hero-scene .coin-3 { animation-delay: 3.3s; }

@keyframes coin-rise {
  0%        { opacity: 0; transform: translateY(8px)   scale(.6); }
  12%       { opacity: 1; transform: translateY(-6px)  scale(1); }
  34%       { opacity: 1; transform: translateY(-40px) scale(1); }
  46%, 100% { opacity: 0; transform: translateY(-62px) scale(.9); }
}

/* The reviewer's arm nods over the paperwork, and the other points at the
   result. Small angles on purpose - big ones look like waving. */
/* The arm works through the filings and then stops. It used to nod on its own
   3.2s loop forever, which drifted against the 9s scene and meant somebody was
   still shuffling paper long after the claim had been stamped. On the scene's
   own clock it can finish. */
.hero-scene .scene-arm {
  transform-box: fill-box;
  transform-origin: 4px 50%;
  animation: arm-work 9s ease-in-out infinite;
}
@keyframes arm-work {
  0%       { transform: rotate(0deg); }
  4%       { transform: rotate(7deg); }
  8%       { transform: rotate(0deg); }
  12%      { transform: rotate(7deg); }
  16%      { transform: rotate(0deg); }
  20%      { transform: rotate(7deg); }
  24%      { transform: rotate(0deg); }
  28%      { transform: rotate(7deg); }
  32%      { transform: rotate(0deg); }
  36%      { transform: rotate(6deg); }
  40%, 100% { transform: rotate(0deg); }
}

/* The faces. Neutral while the work is going on, a smile once the stamp has
   landed - the stamp fades in at about 44% of the scene and holds to 93%, so
   the mouths change over on the same beat. Two sets of strokes cross-faded
   rather than one morphing path: a morph at this size just looks like a
   wobble. */
.hero-scene .face-done { opacity: 0; }
.hero-scene .face-work { animation: face-neutral 9s ease-in-out infinite; }
.hero-scene .face-done { animation: face-smile 9s ease-in-out infinite; }

@keyframes face-neutral {
  0%, 38%   { opacity: 1; }
  44%, 92%  { opacity: 0; }
  97%, 100% { opacity: 1; }
}
@keyframes face-smile {
  0%, 38%   { opacity: 0; }
  44%, 92%  { opacity: 1; }
  97%, 100% { opacity: 0; }
}

.hero-scene .scene-point {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: point-up 9s ease-in-out infinite;
}
@keyframes point-up {
  0%, 14%   { transform: rotate(0deg); }
  24%, 74%  { transform: rotate(-26deg); }
  86%, 100% { transform: rotate(0deg); }
}

/* The magnifier sweeps across the stack. Positioned entirely by the keyframes
   so the SVG itself stays readable. */
.hero-scene .scene-glass {
  animation: glass-sweep 9s ease-in-out infinite;
}
@keyframes glass-sweep {
  0%        { transform: translate(158px, 236px); opacity: 0; }
  10%       { transform: translate(158px, 236px); opacity: 1; }
  30%       { transform: translate(186px, 228px); opacity: 1; }
  50%       { transform: translate(212px, 238px); opacity: 1; }
  64%, 100% { transform: translate(224px, 230px); opacity: 0; }
}

/* The approved stamp lands after the bars have topped out, then the tick
   draws itself. */
.hero-scene .scene-stamp {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: stamp-land 9s ease-out infinite;
  animation-delay: 3.4s;
}
@keyframes stamp-land {
  0%        { opacity: 0; transform: scale(1.5) rotate(-14deg); }
  7%        { opacity: 1; transform: scale(1)   rotate(-8deg); }
  55%       { opacity: 1; transform: scale(1)   rotate(-8deg); }
  66%, 100% { opacity: 0; transform: scale(1)   rotate(-8deg); }
}

.hero-scene .stamp-tick {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: tick-draw 9s ease-out infinite;
  animation-delay: 3.7s;
}
@keyframes tick-draw {
  0%       { stroke-dashoffset: 46; }
  9%, 62%  { stroke-dashoffset: 0; }
  70%, 100%{ stroke-dashoffset: 46; }
}

/* The word on the screen pulses gently rather than counting, so there is no
   number on the page implying a figure we have not verified. */
.hero-scene .scene-amount {
  letter-spacing: 2px;
  font-size: 15px;
  opacity: .85;
  animation: amount-pulse 9s ease-in-out infinite;
}
@keyframes amount-pulse {
  0%, 18%   { opacity: .35; }
  30%, 76%  { opacity: .95; }
  92%, 100% { opacity: .35; }
}

/* --- Stat strip ----------------------------------------------------------- */
.stats {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.stat-value {
  font-size: clamp(28px, 3.4vw, 38px); font-weight: 750;
  color: var(--brand); line-height: 1.1; letter-spacing: -.5px;
}
.stat-label { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* --- Journal entry account boxes ------------------------------------------
   Blank on purpose and meant to be filled in, so they look like something you
   type in rather than like a column that failed to load. ---------------- */
.je-account {
  width: 100%;
  min-width: 90px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink);
}
.je-account:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 97, 147, .14);
}

/* --- The account name beside a typed number -------------------------------
   So a number typed from memory can be seen to be the right account before it
   is posted, and a number that is not in the listing says so. ---------- */
.je-account-name {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.je-account-unknown { color: #a03a3a; }

/* Gallons by product, folded away under each entry: useful when pricing the
   inventory relief, noise the rest of the time. */
.je-products { margin: 0 0 22px; }
.je-products > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand);
  padding: 6px 0;
}
.je-products > summary:hover { text-decoration: underline; }

/* --- Coding the journal lines once ----------------------------------------
   Seven answers, not three hundred: the account for a line is the same
   whatever the product, so the lines are coded here and every entry uses it. */
.je-coding {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 16px 0 4px;
}
.je-coding-field { display: block; }
.je-coding-field > span:first-child {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-dark);
  margin-bottom: 4px;
}

@media (max-width: 860px) {
  .je-coding { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --- Adding files, or starting a new set ----------------------------------
   Shown between the file picker and the results, where the answer is about to
   be acted on. Tinted rather than red: it is a question, not a problem. --- */
.load-choice {
  background: #fdf6e6;
  border: 1px solid #eddcb8;
  border-left: 4px solid #c98a1a;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 18px 0 0;
}
.load-choice-q {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}
.load-choice-why {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.load-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* --- Code blocks ----------------------------------------------------------
   For the SQL the statement tools hand over. It is meant to be selected and
   copied, so it scrolls sideways rather than wrapping: a wrapped CREATE TABLE
   pasted into a client is a syntax error waiting to happen. ------------- */
.code-block {
  background: #0b2f45;
  color: #e8f1f7;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

/* --- The finding band -----------------------------------------------------
   One number, on its own, immediately under the hero. Deliberately not a stat
   tile: the tiles are four small equal things and this is meant to outrank
   them.

   The number counts up with the same script the stats use (data-count), so it
   holds still for anyone who has asked for reduced motion. -------------- */
.finding {
  background: linear-gradient(180deg, #f4f9ee 0%, #eef6e6 100%);
  border-bottom: 1px solid #d7e7c6;
  padding: 30px 0;
}
.finding-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
}
.finding-figure {
  display: flex; align-items: baseline; gap: 8px;
  border-right: 2px solid #cfe3ba; padding-right: 30px;
}
.finding-number {
  font-size: clamp(48px, 6vw, 68px); font-weight: 800; line-height: 1;
  color: var(--accent); letter-spacing: -2px;
}
.finding-of {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--accent-dark);
  letter-spacing: -.5px; white-space: nowrap;
}
.finding-claim {
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45; color: var(--ink);
  margin: 0 0 8px;
}
.finding-claim strong { color: var(--brand); }
.finding-basis {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0;
  max-width: 62ch;
}

/* --- Cards ---------------------------------------------------------------- */
.card-grid { display: grid; gap: 22px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(18, 58, 77, .10);
  border-color: #c9d8e4;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }

.card-icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card-icon svg { width: 24px; height: 24px; }

/* --- Steps ---------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 12px; }
.step-num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 750;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.section-brand .step h3 { color: #fff; }
.section-brand .step p { color: #a9c1cf; font-size: 15px; margin: 0; }
.step::after {
  content: ""; position: absolute; top: 33px; left: 54px; right: -12px;
  height: 1px; background: rgba(255,255,255,.18);
}
.step:last-child::after { display: none; }

/* --- Split feature -------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center;
}
/* Use when one column is much taller than the other, so the short column sits
   at the top rather than floating in the middle. */
.split-top { align-items: start; }
.checklist { list-style: none; padding: 0; margin: 0 0 26px; }
.checklist li {
  position: relative; padding-left: 32px; margin-bottom: 13px;
  font-size: 16px; color: var(--ink);
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--good-bg);
  box-shadow: inset 0 0 0 1px #bfe0cd;
}
.checklist li::after {
  content: "";
  position: absolute; left: 6px; top: 11px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--good); border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}
.checklist li strong { color: var(--brand); }

/* --- Founders ------------------------------------------------------------- */
.founder {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.founder-initials {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; letter-spacing: .5px;
}
.founder-name { font-size: 18px; font-weight: 700; color: var(--brand); }
.founder-role {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin: 2px 0 9px;
}
.founder p { margin: 0; color: var(--muted); font-size: 15px; }

/* --- Assessment form ------------------------------------------------------ */
.assessment {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.assessment-head {
  background: var(--brand); color: #fff; padding: 24px 28px;
}
.assessment-head h2 { color: #fff; margin: 0 0 6px; font-size: 24px; }
.assessment-head p { margin: 0; color: #a9c1cf; font-size: 15px; }
.assessment-body { padding: 26px 28px 30px; }

.field { margin-bottom: 17px; }
.row { display: flex; gap: 17px; flex-wrap: wrap; }
.row .field { flex: 1 1 220px; }

label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 5px; color: var(--brand); }
label .req { color: var(--accent); }

input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #c3d0dc;
  border-radius: 5px;
  font: inherit; font-size: 15px;
  background: #fff; color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 119, 41, .22);
}
.hint { font-weight: 400; color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.field-error input, .field-error textarea, .field-error select { border-color: #c98b90; }
.err { color: var(--bad); font-size: 13px; margin: 5px 0 0; font-weight: 600; }

/* Honeypot - hidden from people, visible to naive bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 14px 17px; border-radius: var(--radius-sm);
  margin-bottom: 20px; font-size: 15px;
  border: 1px solid transparent;
}
.alert strong { display: block; margin-bottom: 3px; }
.alert-good { background: var(--good-bg); color: var(--good); border-color: #bfe0cd; }
.alert-bad  { background: var(--bad-bg);  color: var(--bad);  border-color: #eccace; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #c8dcec; }

.assessment-aside h2 { margin-bottom: 14px; }
.assessment-aside .lede { font-size: 17px; }
.contact-list { list-style: none; padding: 0; margin: 24px 0 0; }
.contact-list li {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.contact-list li:last-child { border-bottom: none; }
.contact-list .k { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.contact-list .v { font-weight: 600; color: var(--brand); text-align: right; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--brand-dark) 0%, var(--brand-deep) 100%);
  color: #cfdfe8;
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { max-width: 620px; margin: 0 auto 26px; color: #cfdfe8; font-size: 17px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--brand-dark); color: #a9c1cf; font-size: 14.5px; }
.footer-top { max-width: var(--wrap); margin: 0 auto; padding: 52px 22px 34px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-name { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.footer-blurb { color: #b8ccd8; font-size: 14.5px; margin: 0; max-width: 34em; }
.footer-col h3 {
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #a9c1cf; }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px 22px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; color: #a9c1cf;
}
.footer-bottom a { color: #a9c1cf; }
.footer-bottom a:hover { color: #fff; text-decoration: none; }

/* --- Software and downloads ------------------------------------------------ */
.software-card { display: flex; flex-direction: column; }
.software-card .software-tagline {
  color: var(--accent); font-weight: 650; font-size: 15px; margin: 0 0 10px;
}
.software-card > p { color: var(--muted); font-size: 15px; }

.software-points { list-style: none; padding: 0; margin: 14px 0 16px; flex: 1 1 auto; }
.software-points li {
  position: relative; padding-left: 22px; margin-bottom: 8px;
  font-size: 14.5px; color: var(--ink);
}
.software-points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--green);
}

.software-meta {
  font-size: 13px; color: var(--muted); margin: 0 0 16px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.software-meta strong {
  color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; font-size: 12px; margin-right: 6px;
}

.download-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 18px;
}
.download-name { font-weight: 650; color: var(--brand); font-size: 15.5px; }
.download-meta { font-size: 13px; color: var(--muted); }

/* --- Online Tools ------------------------------------------------------------
 * The worksheets deliberately read like a tax return: dense, ruled, numbers
 * right-aligned and tabular so columns of figures line up on the decimal.
 * -------------------------------------------------------------------------- */
.wrap-tool { max-width: 980px; }

.tool-notice {
  background: #fdf6e6;
  border: 1px solid #eddcb8;
  border-left: 4px solid #c98a1a;
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6d4a12;
}
.tool-notice strong { color: #57390a; }

/* Worksheet tabs */
/* Four worksheets now, so the tabs wrap to two rows on a narrow laptop rather
   than squeezing four labels into three columns' worth of space. */
.tool-nav {
  display: grid;
  /* Auto-fit rather than a fixed count: tabs get added, and a row of six
     squeezed into four columns looks like a mistake. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 520px) { .tool-nav { grid-template-columns: 1fr; } }
.tool-tab {
  display: block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color .15s, background .15s;
}
.tool-tab:hover { text-decoration: none; border-color: #c3d6e2; background: #f8fbfd; }
.tool-tab.active { border-bottom-color: var(--green); background: #f4f9fc; }
.tool-tab-label { display: block; font-weight: 700; color: var(--brand); font-size: 15.5px; }
.tool-tab-note  { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* The sheet */
.tool-sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tool-sheet-head {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
  padding: 22px 24px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #cfdfe8;
}
.tool-sheet-head h2 { color: #fff; margin: 0 0 3px; font-size: 20px; }
.tool-sheet-sub { margin: 0; font-size: 13.5px; color: #a9c1cf; }
.tool-sheet-sub a { color: var(--green-light); }

.tool-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.tool-meta dt {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #9db6c5;
}
.tool-meta dd { margin: 2px 0 0; font-size: 15px; font-weight: 650; color: #fff; }

/* The ledger */
.tool-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tool-table th {
  text-align: left; padding: 9px 14px;
  background: #eef4f8; color: var(--brand);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  border-bottom: 1px solid var(--line);
}
.tool-table td { padding: 9px 14px; border-bottom: 1px solid #eef2f6; vertical-align: middle; }
.tool-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tool-table th.num { text-align: right; }
.tool-table .lineno { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tool-table .meta { color: var(--muted); }

.tool-table label { display: inline; font-weight: 600; color: var(--ink); font-size: 14.5px; margin: 0; }
.line-warn {
  display: block; margin-top: 6px;
  background: var(--bad-bg); color: var(--bad);
  border: 1px solid #eccace; border-radius: 4px;
  padding: 7px 10px; font-size: 13px; font-weight: 600; line-height: 1.45;
}
.line-warn[hidden] { display: none; }

.line-help { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.5; }

.tool-table .section-row td {
  background: #f6f9fb; font-weight: 700; color: var(--brand);
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  padding: 8px 14px;
}
.tool-table .subtotal-row td { background: #f8fbfd; }
.tool-table .total-row td    { background: #f8fbfd; }
.tool-table .grand-row td {
  background: #eef6e6; border-top: 2px solid var(--green); border-bottom: none;
  font-size: 15.5px;
}
.tool-table .grand-row strong { color: var(--brand); }

/* Inputs inside the ledger: right-aligned, monospaced digits, unobtrusive
   until you touch them. */
.tool-table input {
  width: 100%; max-width: 180px;
  padding: 7px 10px;
  border: 1px solid #cfdbe4; border-radius: 4px;
  font: inherit; font-size: 14.5px;
  text-align: right; font-variant-numeric: tabular-nums;
  background: #fdfefe; color: var(--ink);
}
.tool-table td:not(.num) input { text-align: left; max-width: none; }
.tool-table input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 119, 41, .18); background: #fff;
}
.tool-table input.input-bad {
  border-color: #c98b90; background: #fdf6f6;
  box-shadow: 0 0 0 3px rgba(147, 36, 43, .12);
}
.rate-suffix { color: var(--muted); font-size: 13px; margin-left: 4px; }

.tool-tax { border-top: 3px solid var(--line); }

/* Reconciliation */
.tool-recon { padding: 22px 24px; border-top: 3px solid var(--line); background: #f8fbfd; }
.tool-recon h3 { margin-bottom: 4px; }
.recon-list { list-style: none; margin: 14px 0 0; padding: 0; }
.recon-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.recon-list li:last-child { border-bottom: none; }

.recon-flag {
  font-size: 13px; font-weight: 700; border-radius: 20px;
  padding: 3px 12px; white-space: nowrap;
}
.recon-ok  { background: var(--good-bg); color: var(--good); }
.recon-bad { background: var(--bad-bg);  color: var(--bad); }

.tool-recon-bar {
  padding: 12px 24px; font-size: 14.5px; font-weight: 650;
  border-bottom: 1px solid var(--line);
}
.tool-recon-bar.recon-ok  { background: var(--good-bg); color: var(--good); border-radius: 0; }
.tool-recon-bar.recon-bad { background: var(--bad-bg);  color: var(--bad);  border-radius: 0; }

.tool-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 20px 24px; border-top: 1px solid var(--line); background: #f8fbfd;
}

.tool-callout {
  margin-top: 24px; padding: 22px 26px;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--green); border-radius: var(--radius);
}
.tool-callout h3 { margin-bottom: 10px; }
.tool-callout p { color: var(--muted); font-size: 15.5px; }

/* Hub cards */
.tool-card { text-decoration: none; display: flex; flex-direction: column; }
.tool-card:hover { text-decoration: none; }
.tool-card h3 { margin-bottom: 4px; }
.tool-card > p { flex: 0 0 auto; }
.tool-card-go {
  margin-top: auto; padding-top: 14px;
  font-weight: 700; font-size: 14.5px; color: var(--accent);
}

@media (max-width: 760px) {
  .tool-nav { grid-template-columns: 1fr; gap: 8px; }
  .tool-table th, .tool-table td { padding: 8px 10px; }
  .tool-table .line-help { font-size: 12.5px; }
  .recon-list li { grid-template-columns: 1fr; gap: 4px; }
  .tool-sheet-head { padding: 18px; }
}

/* --- Services --------------------------------------------------------------- */
.service-card { display: flex; flex-direction: column; }
.service-lead { color: var(--accent); font-weight: 650; font-size: 15px; margin: 0 0 10px; }

/* --- Process list ----------------------------------------------------------- */
.process-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process-list li {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 0 0 26px 0;
  position: relative;
}
/* The connecting rule between steps, stopping short of the last one. */
.process-list li::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: 0;
  width: 2px; background: rgba(255, 255, 255, .18);
}
.process-list li:last-child { padding-bottom: 0; }
.process-list li:last-child::before { display: none; }

.process-num {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 750;
  position: relative; z-index: 1;
}
.process-list h3 { color: #fff; margin: 10px 0 6px; }
.process-list p { color: #a9c1cf; margin: 0; font-size: 15.5px; max-width: 62ch; }

/* The base is the LIGHT version, because a note like this reads on any
   background. The dark treatment is scoped to the dark band it was written
   for - it was the base once, which made the same markup on a white section
   pale grey text on white and effectively invisible. */
.process-note {
  margin: 30px 0 0; padding: 16px 20px;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink); font-size: 15px;
}
.process-note strong { color: var(--brand); }

.section-brand .process-note {
  background: rgba(255, 255, 255, .07);
  color: #cfdfe8;
}
.section-brand .process-note strong { color: #fff; }

/* --- Contact ---------------------------------------------------------------- */
.contact-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.contact-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.contact-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 97, 147, .10);
  border-color: #c3d6e2;
}
.contact-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-label {
  font-size: 12px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--muted);
}
.contact-value {
  font-size: 17px; font-weight: 700; color: var(--brand);
  margin: 4px 0 6px; line-height: 1.3;
}
.contact-note { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.contact-address {
  font-style: normal; font-size: 16px; line-height: 1.7;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 22px 0 0;
}
.contact-address strong { color: var(--brand); }

.panel-hours {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
  box-shadow: var(--shadow);
}
.panel-hours h3 { margin-bottom: 14px; }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list li span:first-child { color: var(--ink); font-weight: 600; }
.hours-list li span:last-child { color: var(--muted); }
.hours-list .closed { color: var(--muted); font-style: italic; }

@media (max-width: 1020px) {
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .contact-cards { grid-template-columns: 1fr; }
  .process-list li { gap: 14px; }
  .process-list li::before { left: 17px; top: 40px; }
  .process-num { width: 36px; height: 36px; font-size: 15px; }
}

/* --- Team ------------------------------------------------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.team-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 97, 147, .10);
  border-color: #c3d6e2;
}

/* A square well, so a photo and a monogram occupy exactly the same space and
   the row stays even whether or not the picture has arrived yet. */
.team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;      /* centre-crops anything that is not square */
  object-position: center 22%;   /* faces sit above centre in most photos */
  display: block;
}
.team-initials {
  color: #fff;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: 1px;
  opacity: .92;
}
/* Belt and braces: if the file 404s, the monogram background is still there. */
.team-photo-empty::after {
  content: "";
  position: absolute; inset: 0;
}

.team-card figcaption { padding: 20px 22px 22px; }
.team-name { font-size: 18px; font-weight: 700; color: var(--brand); line-height: 1.3; }
.team-role {
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
  margin: 4px 0 10px;
}
.team-role-tbc { color: var(--muted); }
.team-card figcaption p { margin: 0; color: var(--muted); font-size: 15px; }

/* --- Testimonials ---------------------------------------------------------- */
.quote-lead {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: var(--radius);
  padding: 34px 38px 28px;
  box-shadow: var(--shadow-lg);
}
.quote-lead blockquote {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.45;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: -.2px;
}

/* Cards stretch to a common height per row and the attribution is pushed to
   the bottom, so the names line up instead of floating mid-card. */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

.quote-card {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 97, 147, .12);
  border-color: #c3d6e2;
}
.quote-card blockquote {
  margin: 0 0 18px;
  flex: 1 1 auto;
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
}

.quote-lead figcaption,
.quote-card figcaption {
  display: flex; align-items: center; gap: 13px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.quote-avatar {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
}
/* A photo drops straight into the same circle the monogram occupies, so a
   mixed row of photos and initials still lines up. */
.quote-photo { object-fit: cover; object-position: center 30%; }
.quote-lead .quote-avatar { width: 48px; height: 48px; font-size: 16.5px; }
.quote-name { display: block; font-weight: 700; color: var(--brand); font-size: 15.5px; }
.quote-company {
  display: block; color: var(--muted); font-size: 13px;
  font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}

/* --- Inner page banner ----------------------------------------------------- */
.page-head {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #cfdfe8;
  padding: 52px 0 46px;
  border-bottom: 4px solid var(--green);
}
.page-head h1 { color: #fff; margin-bottom: 10px; }
.page-head .lede { color: #cfdfe8; margin: 0; max-width: 40em; }
.page-head .eyebrow { color: var(--green-light); }

/* --- Long-form text (privacy policy, terms, articles) ---------------------- */
.wrap-prose { max-width: 820px; }

.prose {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 38px 40px;
  box-shadow: var(--shadow);
  font-size: 15.5px;
  line-height: 1.68;
}
.prose h2 {
  font-size: 19px; font-weight: 650;
  margin: 34px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.prose h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: 15.5px; font-weight: 650; margin: 22px 0 8px; }
.prose p, .prose li { font-size: 15.5px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 7px; }

.prose .dates { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.prose .dates strong { color: var(--ink); font-weight: 600; }

.prose .toc {
  background: #f6f9fb;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px; margin: 0 0 30px;
  font-size: 14.5px;
}
.prose .toc strong { color: var(--brand); }
.prose .toc ol { margin: 8px 0 0; padding-left: 20px; column-count: 2; column-gap: 30px; }
.prose .toc li { margin-bottom: 4px; break-inside: avoid; }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; }

.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: #eef4f8; color: var(--brand); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }

@media (max-width: 700px) {
  .prose { padding: 24px 20px 28px; border-radius: 0; margin: 0 -22px; border-left: none; border-right: none; }
  .prose .toc ol { column-count: 1; }
}

/* --- Reveal on scroll (progressive enhancement) ---------------------------
 * Sections fade up as they come into view. The important part of this block is
 * the failsafe: content that is hidden waiting for JavaScript must never be
 * able to stay hidden. If site.js fails to load, throws, is blocked by an
 * extension, or the observer never fires, the animation below reveals
 * everything anyway after two seconds. A missing effect is a shrug; an
 * invisible team page is a bug reported as "the page is empty".
 *
 * The keyframe only ever moves things toward visible, so it cannot fight the
 * .in class the observer adds. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
  animation: reveal-failsafe 0.01s linear 2s forwards;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid  { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Ten menu items plus a phone number plus a button is more than the bar can
   hold on a laptop, so the phone drops out first - it is still in the footer,
   and the mobile menu puts it back. Below 1200 the whole menu goes behind the
   burger, because that is where the links start colliding. Both breakpoints
   moved up when "Online Tools" became the tenth item; measured, not guessed. */
@media (max-width: 1520px) {
  .nav-phone { display: none; }
  .site-nav a { padding: 9px 8px; font-size: 14px; }
  .btn { padding: 11px 18px; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: block; }
  .nav-phone { display: block; }
  .site-nav a { font-size: 16px; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--brand-dark);
    border-bottom: 4px solid var(--green);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 14px 18px;
    box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 12px 10px; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .site-nav a.active { border-bottom-color: var(--accent); }
  .nav-extras { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
  .nav-phone { text-align: center; font-size: 17px; }
  .site-header .bar { position: relative; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .section { padding: 52px 0; }
  .hero { padding: 56px 0 52px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .finding-grid { grid-template-columns: 1fr; gap: 14px; }
  .finding-figure { border-right: 0; padding-right: 0; }
  .card-grid-2, .card-grid-3, .card-grid-4, .quote-grid, .team-grid, .steps { grid-template-columns: 1fr; }
  .quote-lead { padding: 24px 22px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-list li { flex-direction: column; gap: 3px; }
  .contact-list .v { text-align: left; }
  html { scroll-padding-top: 80px; }
}

/* ---------------------------------------------------------------------------
   Clients scene
   Gold coins falling past a jobber who is pleased about it. Same approach as
   the hero: CSS only, so it stops dead under prefers-reduced-motion.
   --------------------------------------------------------------------------- */

.page-head-split .wrap {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 48px; align-items: center;
}
@media (max-width: 900px) {
  .page-head-split .wrap { grid-template-columns: 1fr; gap: 30px; }
}

.client-scene {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.client-scene svg { display: block; width: 100%; height: auto; }

/* Each coin falls on its own clock - duration and delay are set inline per
   coin, because nine near-identical rules would be nine chances to mistype
   one. */
.client-scene .rain-coin {
  animation-name: coin-fall;
  animation-timing-function: cubic-bezier(.45, .05, .75, .6);
  animation-iteration-count: infinite;
}
@keyframes coin-fall {
  0%   { transform: translateY(-46px); opacity: 0; }
  7%   { opacity: 1; }
  76%  { opacity: 1; }
  94%  { opacity: 0; }
  100% { transform: translateY(312px); opacity: 0; }
}

/* The layer behind the figure sits back a little. */
.client-scene .coin-rain-back { opacity: .82; }

/* Squashing horizontally reads as a coin turning over. A real rotation would
   need a 3D transform on an SVG group, which Safari renders unevenly. */
.client-scene .rain-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: coin-flip;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes coin-flip {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.18); }
}

/* A small lift, on a slow beat that shares no factor with any coin, so the
   figure never appears to bob in time with one. */
.client-scene .client-figure {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: client-lift 5.3s ease-in-out infinite;
}
@keyframes client-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  /* Must out-specify ".js .reveal" above, or turning off animations would
     leave every section stuck at zero opacity - which is exactly the bug
     this rule exists to prevent. */
  .js .reveal,
  .js .reveal.in,
  .reveal { opacity: 1 !important; transform: none !important; }

  /* The hero scene stops on its finished frame rather than disappearing: the
     bars full height, the coins and stamp simply absent. */
  .hero-scene .bar { transform: scaleY(1) !important; }
  .hero-scene .sheet,
  .hero-scene .coin,
  .hero-scene .scene-stamp,
  .hero-scene .scene-glass { opacity: 0 !important; }
  .hero-scene .scene-amount { opacity: .95 !important; }
  /* The finished frame is the one where they are pleased about it. */
  .hero-scene .face-work { opacity: 0 !important; }
  .hero-scene .face-done { opacity: 1 !important; }

  /* The clients scene holds a still frame: coins in the air, nobody moving.
     Each one gets its own height. Two rules alternating odd and even put them
     in tidy pairs, which reads as a diagram rather than as rain. */
  .client-scene .rain-coin { opacity: 1 !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(1) { transform: translateY( 26px) !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(2) { transform: translateY(148px) !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(3) { transform: translateY( 74px) !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(4) { transform: translateY(204px) !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(5) { transform: translateY(112px) !important; }
  .client-scene .coin-rain .rain-coin:nth-of-type(6) { transform: translateY( 48px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(1) { transform: translateY(168px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(2) { transform: translateY( 38px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(3) { transform: translateY(226px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(4) { transform: translateY( 92px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(5) { transform: translateY(186px) !important; }
  .client-scene .coin-rain-back .rain-coin:nth-of-type(6) { transform: translateY(130px) !important; }
}

/* ---------------------------------------------------------------------------
   Signed-in strip
   Shown at the top of pages gated to portal accounts, so it is never a mystery
   whose session is open or how to get out of it.
   --------------------------------------------------------------------------- */
.portal-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin: 0 0 22px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.88rem;
  color: var(--muted);
}
.portal-strip-who strong { color: var(--ink); font-weight: 600; }
.portal-strip-role {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.portal-strip-links a {
  margin-left: 16px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.portal-strip-links a:hover { border-bottom-color: currentColor; }
@media (max-width: 520px) {
  .portal-strip { flex-direction: column; align-items: flex-start; }
  .portal-strip-links a { margin: 0 16px 0 0; }
}

/* ---------------------------------------------------------------------------
   Import a filed return (Online Tools)
   --------------------------------------------------------------------------- */
.import-card {
  margin: 0 0 26px;
  padding: 22px 24px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.import-card-head h2 { margin: 0 0 6px; font-size: 1.18rem; }
.import-card-head p  { margin: 0 0 16px; color: var(--muted); font-size: 0.94rem; max-width: 66ch; }

.import-drop {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.import-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.import-drop svg { width: 34px; height: 34px; color: var(--brand); flex: 0 0 auto; }
.import-drop input[type="file"] {
  /* Hidden from sight but still reachable: the <label> is the visible control
     and clicking it opens the picker, while keyboard focus still lands here. */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.import-drop input[type="file"]:focus-visible + .import-drop-note,
.import-drop input[type="file"]:focus + .import-drop-note { outline: 2px solid var(--brand); outline-offset: 3px; }
.import-drop label.btn { cursor: pointer; }
.import-drop-note { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }

.import-privacy {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  max-width: 78ch;
}
.import-privacy strong { color: var(--ink); }

.import-status {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--info-bg);
  color: var(--info);
}
.import-status.import-bad  { background: var(--bad-bg);  color: var(--bad); }
.import-status.import-busy { background: var(--info-bg); color: var(--info); }

.import-summary {
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.import-head h3 { margin: 0; font-size: 1.05rem; }
.import-meta    { margin: 2px 0 14px; font-size: 0.86rem; color: var(--muted); }

.import-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.import-table td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.import-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Column separation has to go on the FOLLOWING cell, not on the figure cell.
   A right-aligned number sits flush against its own cell's right edge, so
   padding it does nothing; without this, "$8,356.42" and the sentence in the
   next column are printed with no gap between them at all. Putting it on the
   cell that follows also keeps every figure lined up under its heading. */
.import-table td + td { padding-left: 18px; }
.import-table tr.is-zero td { color: var(--muted); }

.import-tie {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
}
.import-tie.recon-ok  { background: var(--good-bg); color: var(--good); }
.import-tie.recon-bad { background: var(--bad-bg);  color: var(--bad); }

.import-notes { margin: 14px 0 0; padding-left: 20px; font-size: 0.88rem; color: var(--muted); }
.import-notes li { margin-bottom: 5px; }
.import-notes li.import-problem { color: var(--bad); }

.import-unmapped {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--brand);
  background: var(--info-bg);
  border-radius: var(--radius-sm);
}
.import-unmapped h4 { margin: 0 0 8px; font-size: 0.95rem; }
.import-unmapped ul { margin: 0; padding-left: 20px; font-size: 0.88rem; }
.import-unmapped li { margin-bottom: 6px; }
.import-unmapped-note { margin: 10px 0 0; font-size: 0.86rem; color: var(--muted); }

/* The jobber review. Deliberately not styled as an error: every line in it can
   be legitimately nil, and the panel says so. Green rather than red, because
   what it is really pointing at is money that may be recoverable. */
.import-review {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: #f1f7ee;
  border-radius: var(--radius-sm);
}
.import-review h4 { margin: 0 0 10px; font-size: 0.95rem; }
.import-review-lead, .import-review-ok { margin: 0 0 10px; font-size: 0.88rem; }
.import-review-ok { color: var(--accent); font-weight: 600; }

.import-profile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin: 0 0 12px; padding: 0 0 12px;
  border-bottom: 1px solid #d5e4c9;
  font-size: 0.86rem;
}
.import-profile-lead { color: var(--muted); font-weight: 600; }
.import-profile-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.import-profile-opt input { margin: 0; }

.import-review-list { margin: 0; padding: 0; list-style: none; }
.import-review-list > li {
  padding: 9px 0;
  border-top: 1px solid #d5e4c9;
  font-size: 0.88rem;
}
.import-review-list > li:first-child { border-top: 0; padding-top: 0; }
.import-review-list p { margin: 3px 0 0; }
.import-review-where {
  display: inline-block; margin-left: 8px;
  font-size: 0.74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.import-review-unless { color: var(--muted); font-style: italic; }

.import-review-prepay {
  margin: 12px 0 0; padding: 11px 13px;
  background: #fff; border: 1px solid #d5e4c9;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.import-review-prepay p { margin: 4px 0 0; }

/* The site-list loader on the statement tool. Deliberately quiet: it is an
   optional improvement to the report, not a step you have to complete. */
.site-directory {
  margin: 18px 0 0; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.site-directory-head { margin-bottom: 10px; font-size: 0.9rem; }
.site-directory-head strong { display: block; margin-bottom: 3px; }
.site-directory-head span { color: var(--muted); }
.site-directory input[type="file"] { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-directory-note { margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
.site-directory-good { color: var(--accent); font-weight: 600; }
.site-directory-bad  { color: #a03a3a; font-weight: 600; }

/* The street under the town, in the site table. */
.site-address { display: block; font-size: 0.82rem; color: var(--muted); }

/* =====================================================================
   The code sections reference. Long, dense and meant to be searched
   rather than read start to finish, so the section number is the anchor
   the eye lands on and everything else is subordinate to it.
   ===================================================================== */

.code-map { margin: 0 0 8px; }
.code-map h2 { margin-top: 0; }
.code-map-table { width: 100%; border-collapse: collapse; margin: 18px 0 10px; }
.code-map-table th {
  text-align: left; font-size: 0.74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--brand); padding: 0 14px 7px 0; font-weight: 700;
}
.code-map-table td {
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; font-size: 0.94rem;
}
.code-map-table tr:last-child td { color: var(--muted); }
.code-map-note { font-size: 0.88rem; color: var(--muted); margin: 6px 0 0; }

/* The filter sits above the parts and stays put while you scroll them. It is a
   full-width bar so that the sticky element is a child of the wrapper holding
   every part - stick it inside one section and it leaves with that section. */
.code-filter {
  position: sticky; top: 0; z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(12, 42, 56, .06);
}
.code-filter-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding-top: 12px; padding-bottom: 12px;
}
.code-filter label {
  font-size: 0.74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.code-filter input[type="search"] {
  flex: 1 1 320px; min-width: 0;
  padding: 9px 12px; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
.code-filter input[type="search"]:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.code-filter-count { font-size: 0.86rem; color: var(--muted); white-space: nowrap; }

.code-part-head { margin-bottom: 22px; }
.code-part-head h2 { margin: 4px 0 10px; }
.code-part-note {
  margin: 12px 0 0; padding: 11px 14px;
  background: var(--info-bg); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.code-part-toc { margin: 12px 0 0; font-size: 0.88rem; }

.code-group { margin: 0 0 26px; }
.code-group h3 {
  font-size: 1rem; margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 2px solid var(--brand);
}

.code-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.code-table th {
  text-align: left; font-size: 0.72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 16px 7px 0; font-weight: 700; white-space: nowrap;
}
.code-table td {
  padding: 11px 16px 11px 0; border-top: 1px solid var(--line);
  vertical-align: top;
}
.code-table tr[hidden] { display: none; }

.code-col-s { width: 1%; white-space: nowrap; }
.code-col-s a {
  font-variant-numeric: tabular-nums; font-weight: 700;
  text-decoration: none; color: var(--brand);
}
.code-col-s a:hover { text-decoration: underline; }
.code-col-h { width: 30%; }
.code-heading { font-weight: 600; color: var(--ink); }

/* A section whose CDTFA page shows a repealed version above the live one.
   Amber rather than red: the law is fine, the page is just confusing. */
.code-flag {
  display: block; margin-top: 5px;
  font-size: 0.8rem; line-height: 1.45; color: #8a5a00;
}
.code-flag::before { content: "Note  "; font-weight: 700; letter-spacing: .04em; }

.code-rate { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.code-when { color: var(--muted); font-size: 0.88rem; }

@media (max-width: 720px) {
  .code-col-h { width: auto; }
  .code-table { font-size: 0.88rem; }
  .code-filter { position: static; }
}

/* A quarter is nine statements, and a table with a column for each of them is
   wider than the card. It scrolls inside its own box rather than making the
   whole page scroll sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 100%; }

/* A button that has to sit in a table cell and read as a link. Kept a real
   <button> because it does something rather than going somewhere. */
.link-button {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 0.86rem; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--brand); }

/* The citation table on the Principals page. A table on a bare background
   reads as raw data; on a panel it reads as a reference list, which is what
   it is. Padding goes on the wrapper because a table will not take it. */
.source-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 22px 14px;
  overflow-x: auto;
}
.source-table td { vertical-align: top; }
.source-table td:first-child { padding-right: 22px; white-space: normal; }
.source-table a { font-weight: 600; }

.import-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.import-warn { margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
.import-file { margin: 4px 0 0; font-size: 0.84rem; color: var(--muted); }

@media (max-width: 620px) {
  .import-card { padding: 18px 16px; }
  .import-drop { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.import-compare-head { margin: 18px 0 6px; font-size: 0.95rem; }
.import-compare th { padding: 4px 0; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.import-compare th.num, .import-compare td.num { text-align: right; }
.import-compare th + th { padding-left: 18px; }
.import-compare td.is-different { color: var(--bad); font-weight: 600; }

/* ---------------------------------------------------------------------------
   District rate table
   --------------------------------------------------------------------------- */
.rates-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding: 16px 20px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rates-stat { display: flex; flex-direction: column; }
.rates-stat .k {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.rates-stat .v { font-size: 1.25rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.rates-actions { margin-left: auto; }

.rates-source { font-size: 0.86rem; color: var(--muted); margin: 0 0 20px; max-width: 78ch; }

.rates-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  margin-bottom: 14px;
}
.rates-field { display: flex; flex-direction: column; gap: 4px; }
.rates-field label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600;
}
.rates-field input[type="search"],
.rates-field input[type="date"],
.rates-field select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  min-width: 190px;
}
.rates-field input:focus, .rates-field select:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.rates-field-check { flex-direction: row; align-items: center; }
.rates-field-check label {
  text-transform: none; letter-spacing: 0; font-size: 0.88rem;
  font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 7px;
}
.rates-count { margin: 0 0 0 auto; font-size: 0.86rem; color: var(--muted); align-self: flex-end; }

.rates-table { font-size: 0.9rem; }
.rates-table td { padding: 7px 12px; }
.rates-table th { padding: 9px 12px; }
.rates-stj { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; }
.rates-date { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.rates-empty { padding: 24px; text-align: center; color: var(--muted); margin: 0; }

.import-good { background: var(--good-bg); color: var(--good); }
.rates-errors { margin: 8px 0 0; padding-left: 20px; font-size: 0.88rem; }
.rates-errors li { margin-bottom: 3px; }

/* --- the update panel --- */
.rates-upload .import-drop { margin-bottom: 14px; }
.rates-upload input[type="file"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rates-paste { margin-bottom: 14px; font-size: 0.9rem; }
.rates-paste summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.rates-paste textarea {
  width: 100%; margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem; resize: vertical;
}

.rates-diff { padding: 4px 0 0; }
.rates-diff h3 { margin: 0 0 12px; font-size: 1.05rem; }
.rates-diff-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 0.9rem; color: var(--muted); }
.rates-diff-stats strong { color: var(--ink); font-size: 1.1rem; }
.rates-diff-stats .is-add    strong { color: var(--good); }
.rates-diff-stats .is-change strong { color: var(--info); }
.rates-diff-stats .is-remove strong { color: var(--bad); }
.rates-diff-head { margin: 14px 0 6px; font-size: 0.9rem; }
.rates-diff-head.rates-add    { color: var(--good); }
.rates-diff-head.rates-change { color: var(--info); }
.rates-diff-head.rates-remove { color: var(--bad); }
.rates-diff-list { margin: 0; padding-left: 20px; font-size: 0.88rem; color: var(--muted); }
.rates-diff-list li { margin-bottom: 3px; }
.rates-diff-list strong { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
.rates-diff-more { font-style: italic; }
.rates-diff-none { padding: 10px 14px; background: var(--info-bg); color: var(--info); border-radius: var(--radius-sm); font-size: 0.9rem; }
.rates-diff-warn { margin-top: 14px; padding: 10px 14px; background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-sm); font-size: 0.9rem; }
.rates-confirm { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.rates-history { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.rates-history h4 { margin: 0 0 8px; font-size: 0.88rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rates-history ul { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--muted); }
.rates-history li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 3px 0; }
.rates-history-when { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .rates-actions { margin-left: 0; width: 100%; }
  .rates-actions .btn { width: 100%; }
  .rates-count { margin-left: 0; }
  .rates-field input, .rates-field select { min-width: 0; width: 100%; }
  .rates-field { width: 100%; }
}

/* --- district rows checked against the published table --- */
.rate-check-bar {
  padding: 9px 22px;
  font-size: 0.86rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.rate-check-bar.recon-ok  { background: var(--good-bg); color: var(--good); }
.rate-check-bar.recon-bad { background: var(--bad-bg);  color: var(--bad); }
.rate-check {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.rate-check-ok   { background: var(--good-bg); color: var(--good); }
.rate-check-bad  { background: var(--bad-bg);  color: var(--bad); }
.rate-check-none { background: var(--bg);      color: var(--muted); }

/* --- the CDTFA upload steps --- */
.step-card { position: relative; }
.step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.step-num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.step-head h2 { margin: 0 0 4px; font-size: 1.1rem; }
.step-head p  { margin: 0; color: var(--muted); font-size: 0.92rem; }

.source-choice { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.source-option {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  font-size: 0.92rem;
}
.source-option:has(input:checked) { border-color: var(--brand); background: var(--info-bg); }
.source-option input { margin-top: 3px; flex: 0 0 auto; }
.source-option strong { display: block; color: var(--ink); }
.source-note { display: block; color: var(--muted); font-size: 0.86rem; margin-top: 2px; }
.source-inline { background: none; border: 0; padding: 0; align-items: center; }

.column-picker { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 14px 0; }
.column-picker select { min-width: 210px; }
.column-picker select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font: inherit; font-size: 0.9rem; color: var(--ink);
}
.cdtfa-figures { display: flex; flex-wrap: wrap; gap: 16px 22px; margin: 0 0 18px; }
.cdtfa-figures .rates-field input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font: inherit; font-size: 0.95rem; color: var(--ink);
  text-align: right; min-width: 200px; font-variant-numeric: tabular-nums;
}
.cdtfa-figures .rates-field input.input-bad { border-color: var(--bad); background: var(--bad-bg); }

/* --- fetching CDTFA's template --- */
.get-template {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid #d5e6c4;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.get-template-note { font-size: 0.88rem; color: var(--muted); flex: 1 1 260px; }
.template-manual { margin-top: 6px; font-size: 0.92rem; }
.template-manual summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-bottom: 12px; }
.template-manual[open] summary { margin-bottom: 14px; }

/* --- fuel pre-collection: column mapping and the gallons balance --- */
.fuel-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 4px 0 14px;
}
.fuel-group {
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.fuel-group h4 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brand);
}
.fuel-group .rates-field { margin-bottom: 8px; }
.fuel-group .rates-field:last-child { margin-bottom: 0; }
.fuel-group select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
}

.balance-table { font-size: 0.92rem; }
.balance-table td.num, .balance-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.balance-table tr.is-zero td { color: var(--muted); }
.balance-input {
  width: 130px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font: inherit;
  font-size: 0.88rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.balance-input.input-bad { border-color: var(--bad); background: var(--bad-bg); }
.balance-ok  { color: var(--good); font-weight: 700; }
.balance-bad { color: var(--bad);  font-weight: 700; }

/* ---------------------------------------------------------------------------
   Grouped tool navigation
   The return and its two schedules are one job; the CDTFA filings are another;
   cardlock is another again. Grouping them says so without a paragraph.
   --------------------------------------------------------------------------- */
.tool-nav-groups { display: grid; gap: 18px; margin-bottom: 26px; }
.tool-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand);
}
.tool-group-title span {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.tool-nav-groups .tool-nav { margin-bottom: 0; }

/* The cardlock group has one tab; let it sit at a readable width rather than
   stretching a single card across the page. */
.tool-group:last-child .tool-nav { grid-template-columns: repeat(auto-fit, minmax(210px, 340px)); }

/* --- the hub, in the same three groups --- */
.tool-section { margin-bottom: 38px; }
.tool-section:last-child { margin-bottom: 0; }
.tool-section-head { margin-bottom: 16px; }
.tool-section-head h2 { margin: 0 0 4px; font-size: 1.28rem; }
.tool-section-head p  { margin: 0; color: var(--muted); max-width: 72ch; }

/* --- cardlock breakdown tabs --- */
.cardlock-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cardlock-tab {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.cardlock-tab:hover { border-color: #c3d6e2; color: var(--ink); }
.cardlock-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ===========================================================================
 * Learn - the public training library (learn.php)
 *
 * Cards of a fixed minimum width rather than a fixed column count, so three
 * videos on a desktop become one on a phone without a media query per step.
 * ======================================================================== */
.learn-shelf { margin-bottom: 42px; }
.learn-shelf h2 { margin: 0 0 4px; }
.learn-blurb { color: var(--muted); margin: 0 0 18px; }

.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.learn-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(18, 40, 56, .05);
  display: flex;
  flex-direction: column;
}

.learn-card video { width: 100%; display: block; background: #000; }

/* 16:9 without aspect-ratio, which older Safari does not support. */
.learn-embed { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.learn-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.learn-doc {
  display: flex; align-items: center; justify-content: center;
  height: 132px;
  background: linear-gradient(135deg, #e8f1f8, #f2f6f9);
  color: var(--brand);
  font-weight: 700; font-size: 30px; letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}

.learn-body { padding: 16px 18px 18px; flex: 1 1 auto; display: flex; flex-direction: column; }
.learn-body h3 { margin: 0 0 6px; font-size: 18px; }
.learn-body p  { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }

/* p.learn-meta, not .learn-meta: `.learn-body p` above sets a margin and would
   otherwise win on specificity, killing the auto top margin that pushes the
   footer of a short card down to meet a tall one beside it. */
.learn-body p.learn-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: auto 0 12px; padding-top: 4px;
  font-size: 13px; color: var(--muted);
}
.learn-meta span { white-space: nowrap; }
.learn-meta span + span { border-left: 1px solid var(--line); padding-left: 14px; }