/* ==========================================================================
   getswansonx.com — components that only this site needs.

   style.css is COPIED VERBATIM from swansonx.com and must stay that way, so
   the two sites cannot drift apart visually. Everything specific to the
   comparison site lives here instead of being patched into it.

   The rule from style.css still holds: no hex literals below this line. Every
   colour asks for a semantic token by the JOB it does, so both themes work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The comparison matrix — four options across, one of them mine.

   .cmp already exists in style.css at three columns. The only additions here
   are a wider minimum (four columns of prose do not fit 620px) and the tint on
   my own column, which is what stops a reader having to count across to find
   it. The tint is --accent-soft in both themes, and --text sits on it at well
   over 4.5:1 either way — do not swap it for a stronger fill without
   remeasuring the text on top.
   -------------------------------------------------------------------------- */
table.cmp--wide { min-width: 940px; }
table.cmp .mine { background: var(--accent-soft); }
table.cmp thead th.mine { color: var(--heading); }
table.cmp td.mine { color: var(--text); }
table.cmp th.mine, table.cmp td.mine { padding-left: 22px; }
table.cmp tbody th {
  text-align: left; font-weight: 500; color: var(--heading);
  padding: 20px 22px 20px 0; border-bottom: 1px solid var(--border); font-size: .95rem;
}
table.cmp .rowhead { width: 22%; }
table.cmp caption {
  caption-side: bottom; text-align: left; color: var(--text-muted);
  font-size: .86rem; line-height: 1.6; padding-top: 20px; max-width: 74ch;
}

/* --------------------------------------------------------------------------
   The hour ledger — where a quote actually comes from.

   Right-aligned, tabular figures, and a ruled total row. This is the table
   that has to look like arithmetic rather than marketing, so it gets no
   colour at all beyond the total.
   -------------------------------------------------------------------------- */
.ledger { width: 100%; border-collapse: collapse; }
.ledger caption {
  caption-side: top; text-align: left;
  font-family: var(--font-body); font-weight: 600; color: var(--heading);
  font-size: 1.02rem; padding-bottom: 18px;
}
.ledger th, .ledger td {
  padding: 15px 0; border-bottom: 1px solid var(--border);
  font-size: .95rem; text-align: left; vertical-align: baseline;
}
.ledger thead th {
  color: var(--text-muted); font-family: var(--font-body);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom-color: var(--border-strong);
}
.ledger td:last-child, .ledger th:last-child { text-align: right; white-space: nowrap; }
.ledger td:last-child { font-variant-numeric: tabular-nums; color: var(--heading); }
.ledger tfoot th, .ledger tfoot td {
  border-bottom: 0; border-top: 2px solid var(--heading);
  padding-top: 18px; font-weight: 600; color: var(--heading); font-size: 1.02rem;
}
.ledger tfoot td { font-variant-numeric: tabular-nums; }
.ledger .sub { display: block; color: var(--text-muted); font-size: .86rem; font-weight: 400; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Arithmetic set as a line — used for the care-plan maths and the three-year
   totals. Numbers in the display serif, operators muted, so the eye reads the
   result rather than the punctuation.
   -------------------------------------------------------------------------- */
.maths { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 20px; margin: 8px 0 22px; }
.maths span { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums; }
.maths .op { color: var(--text-muted); font-size: .8em; }
.maths .out { color: var(--accent); }
.maths small { display: block; font-family: var(--font-body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.section--navy .maths span { color: var(--feature-heading); }
.section--navy .maths .op, .section--navy .maths small { color: var(--feature-text); }
.section--navy .maths .out { color: var(--feature-accent); }

/* --------------------------------------------------------------------------
   "Choose X if" — the honest routing cards. The whole point of this site is
   that three of the four send you somewhere that is not me, so they are
   styled identically. Making mine louder would undo the argument.
   -------------------------------------------------------------------------- */
.route { border-top: 1px solid var(--border); padding-top: 26px; }
.route__who {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.route h3 { margin-bottom: 12px; }
.route p { color: var(--text-muted); font-size: .96rem; margin-bottom: 16px; }
.route ul, .route__pts { list-style: none; padding: 0; display: grid; gap: 9px; }
.route li, .route__pts li { position: relative; padding-left: 20px; font-size: .93rem; color: var(--text-muted); }
.route li::before, .route__pts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--border-strong); }
.route__pts { margin-top: 18px; }
.route__pts strong { color: var(--heading); font-weight: 600; }

/* Inside an inverted band the muted/accent tokens are the LIGHT-ground ones and
   measure ~3.1:1 on near-black — a real failure, caught by scanning rather than
   by eye, because dark-on-dark still looks deliberate. The feature-* tokens are
   the inverted-ground set: --feature-text is 8.6:1 here and --feature-accent
   9.5:1. Any new component placed in .section--navy needs the same treatment. */
.section--navy .route { border-top-color: var(--feature-border); }
.section--navy .route__who { color: var(--feature-accent); }
.section--navy .route p,
.section--navy .route li,
.section--navy .route__pts li { color: var(--feature-text); }
.section--navy .route li::before,
.section--navy .route__pts li::before { background: var(--feature-border); }
.section--navy .route__pts strong { color: var(--feature-heading); }

/* --------------------------------------------------------------------------
   The question list — a checklist to take to ANYONE, with my answer under it.

   The bad-answer line is deliberately not red. Nothing here is an alarm; it
   is a description of what you will hear, and colouring it as a warning would
   read as an attack on other developers rather than advice to a buyer.
   -------------------------------------------------------------------------- */
.qa { display: grid; gap: 0; counter-reset: q; }
.qa__item { border-top: 1px solid var(--border); padding: 38px 0; }
.qa__item:last-child { border-bottom: 1px solid var(--border); }
.qa__q {
  display: flex; gap: 18px; align-items: baseline;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem); line-height: 1.22;
  color: var(--heading); letter-spacing: -.015em; margin-bottom: 20px;
}
.qa__q::before {
  counter-increment: q; content: counter(q, decimal-leading-zero);
  flex: none; font-size: .52em; color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; position: relative; top: -.15em;
}
.qa__body { display: grid; gap: 18px; padding-left: 0; }
@media (min-width: 860px) { .qa__body { padding-left: 54px; } }
.qa__label {
  display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.qa__why p, .qa__bad p { color: var(--text-muted); font-size: .97rem; }
.qa__mine { border-left: 2px solid var(--accent); padding-left: 22px; }
.qa__mine p { color: var(--text); font-size: 1.02rem; }
.qa__mine p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Small print that has to be read — caveats under a number, sources under a
   claim. Muted, but never below .86rem, because the whole promise of this
   site is that the qualifications are legible.
   -------------------------------------------------------------------------- */
.note { color: var(--text-muted); font-size: .88rem; line-height: 1.65; max-width: 74ch; }
.note + .note { margin-top: 12px; }
.section--navy .note { color: var(--feature-text); }

/* A definition-style pair used for the identity block. */
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 20px 0; border-top: 1px solid var(--border); }
@media (min-width: 720px) { .facts > div { grid-template-columns: 240px 1fr; gap: 24px; align-items: baseline; } }
.facts > div:last-child { border-bottom: 1px solid var(--border); }
.facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin: 0; color: var(--text); font-size: 1rem; }
.facts dd small { display: block; color: var(--text-muted); font-size: .88rem; margin-top: 5px; }

/* Prices sitting in a range, for the market-rate section. */
.band { display: grid; gap: 0; }
.band__row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--border); }
.band__row:last-child { border-bottom: 1px solid var(--border); }
.band__row--mine { background: var(--accent-soft); padding-inline: 18px; }
.band__who { color: var(--text); font-size: .97rem; }
.band__who small { display: block; color: var(--text-muted); font-size: .87rem; margin-top: 4px; }
.band__amt { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); color: var(--heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
.band__row--mine .band__amt { color: var(--accent); }

/* The single-column hero on this site: no image, because the argument is the
   product. Left-aligned so the eye starts where the text starts. */
.hero--plain { padding-block: clamp(90px, 11vw, 170px) clamp(60px, 7vw, 96px); }
.hero--plain h1 { margin-bottom: 26px; }
.hero--plain .lede { max-width: 66ch; }
.hero--plain .hero__actions { margin-top: 38px; }

/* --------------------------------------------------------------------------
   A bare h3 in style.css carries no bottom margin — only .card h3 does — so a
   paragraph placed directly after one in a plain grid column sits hard against
   it. Restore the gap without touching the card rule, which already has one.
   -------------------------------------------------------------------------- */
h3 + p, h3 + ul, h3 + .maths, h3 + .band, h3 + .note, h3 + .trust-list { margin-top: 14px; }
.card h3 + p, .card h3 + ul { margin-top: 0; }

/* --------------------------------------------------------------------------
   A link inside <small> or a <dd> is not inside a <p>, so style.css's prose
   rule — which marks links with a hairline under them rather than a hue —
   never matches them. A link distinguished ONLY by colour fails WCAG 1.4.1,
   and axe found exactly one on /questions. Same treatment, same look.
   -------------------------------------------------------------------------- */
.facts dd a, small a, .ledger a, table.cmp caption a {
  color: var(--heading);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: .04em;
  transition: color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.facts dd a:hover, small a:hover, .ledger a:hover, table.cmp caption a:hover {
  color: var(--accent); border-bottom-color: var(--accent);
}