/* Tool-page styles, "the worksheet" (2026-09 redesign). References tokens in
   base.css, never redefines them. Mobile-first: everything stacks in one
   column by default; the 7/5 worksheet-plus-total layout only starts at
   900px.

   Page anatomy, top to bottom:
     breadcrumb, header (category, H1, lede, sourcing meta)
     worksheet (ruled inputs) beside the sticky total panel
     "more calculators" strip (formerly a right-hand sidebar)
     related tools, explainer, FAQ, next steps, all on the same left edge. */

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--color-neutral-400);
}

.breadcrumb__list li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-1);
}

/* Header: a single left-aligned column, capped to a reading measure so the
   H1 and lede never stretch across a wide screen. The markup order is
   category, H1, sourcing strap, lede, byline; flex `order` puts the lede
   directly under the H1 and demotes the sourcing lines below it. */
.tool-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 820px;
  margin: var(--space-3) 0 var(--space-1);
}

.tool-header__eyebrow { order: 0; }
.tool-header h1 { order: 1; }
.tool-header__subtitle { order: 2; }
.tool-header__trust-strap { order: 3; }
.tool-header .byline-block { order: 4; }

.tool-header__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
}

.tool-header__category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--category-color, var(--color-primary));
  flex-shrink: 0;
}

.tool-header__category-chip svg {
  width: 100%;
  height: 100%;
}

.tool-header__category-label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--category-color, var(--color-primary));
}

.tool-header > * {
  max-width: 100%;
}

.tool-header h1 {
  font-size: clamp(2.125rem, 4.8vw, 3.125rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--space-2);
  /* A long slash-joined word ("Uninsured/Underinsured") has no break
     opportunity; anywhere lets it wrap instead of overflowing 375px. */
  overflow-wrap: anywhere;
}

.tool-header__subtitle {
  font-size: 1.1875rem;
  color: var(--color-neutral-400);
  max-width: 60ch;
  line-height: 1.55;
  margin: 0 0 var(--space-2);
}

.tool-header__trust-strap {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  max-width: none;
  margin: 0;
}

/* Reviewer line: plain text under a rule, not a pill. */
.byline-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--space-1);
  width: 100%;
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: var(--space-2) 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-border);
}

.byline-block__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.byline-block a {
  color: var(--color-ink);
  font-weight: 600;
}

.byline-block__updated {
  color: var(--color-neutral-400);
}

/* Trust strip: the plain-text "Data sourced from" row, never a badge or
   seal graphic. See includes/trust-strip.php. */
.trust-strip {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: var(--space-1) 0 0;
}

.trust-strip__label {
  font-weight: 600;
  color: var(--color-ink);
  margin-right: 4px;
}

/* Page frame: one full-width column. The category sidebar used to sit in a
   280px right rail beside the calculator, which squeezed the worksheet and
   the total into two narrow columns and made the result number wrap; it is
   now a strip below the calculator (.tool-sidebar). minmax(0, 1fr) keeps
   wide content, such as a scrolling comparison table, from forcing the
   whole grid wider than the viewport. */
.tool-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--space-1);
}

/* Worksheet on the left (7 parts), total on the right (5 parts). */
.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .tool-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-6);
  }
}

/* The worksheet: a sheet of paper with a 3px rule at the top in the
   category color, and each input as a ruled row separated by dashed
   lines, like a printed form. */
/* The form: a plain white sheet, hairline border, inputs separated by
   hairline rows. */
.tool-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  padding: var(--space-1) 20px;
}

@media (min-width: 640px) {
  .tool-card {
    padding: var(--space-1) var(--space-4);
  }
}

.tool-form {
  display: flex;
  flex-direction: column;
}

.tool-form > * {
  padding: var(--space-3) 0;
}

.form-field label,
.form-field legend {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

/* Non-slider inputs: a boxed field whose bottom edge is inked, so it reads
   as a line to write on. Focus fills it with the marker color. */
.form-field select,
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  background: var(--color-bg-card);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
  font-family: var(--font-body);
  resize: vertical;
}

.form-field select:focus,
.form-field input[type="number"]:focus,
.form-field input[type="date"]:focus,
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="password"]:focus,
.form-field textarea:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14);
  outline: none;
}

/* Custom chevron, no default OS select styling. Font is the body face
   because option text is words, not figures. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

/* Slider field: label and typed value share the top line, the slider spans
   the full row beneath. The value appears once (in the typed entry), which
   replaces the old floating bubble plus number box plus trailing unit. */
.form-field--slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-2);
  row-gap: 14px;
  align-items: center;
}

.form-field--slider > label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.form-field__entry {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 7px 12px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field__entry:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.14);
}

.form-field .form-field__entry input[type="number"] {
  width: 9ch;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: right;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  -moz-appearance: textfield;
}

.form-field .form-field__entry input[type="number"]:focus {
  background: transparent;
}

.form-field__entry input[type="number"]::-webkit-inner-spin-button,
.form-field__entry input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.form-field__unit {
  color: var(--color-neutral-400);
  font-size: 0.9375rem;
}

.form-field--slider > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
}

.form-field--slider > .form-field__error {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Slider: a thin rule filled in the category color up to the value (the
   --fill-percent custom property is set by calc-engine.js's
   bindSliderSync on every input, including initial bind), with a marker
   yellow, ink-outlined bar as the handle. */
input[type="range"] {
  --fill-percent: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-primary) var(--fill-percent),
    var(--color-neutral-200) var(--fill-percent),
    var(--color-neutral-200) 100%
  );
  cursor: pointer;
  outline-offset: 10px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(var(--color-ink-rgb), 0.25);
  cursor: grab;
  transition: box-shadow var(--transition-fast);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
}

input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0.12), 0 2px 6px rgba(var(--color-ink-rgb), 0.25);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-neutral-200);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary);
  box-shadow: 0 2px 6px rgba(var(--color-ink-rgb), 0.25);
  cursor: grab;
}

.form-field__error {
  color: var(--color-warning);
  font-size: 0.875rem;
  margin: var(--space-1) 0 0;
}

/* Radio group: options are bordered option buttons in a wrapping row;
   the chosen one fills navy. The native radio is visually hidden but stays
   in place, focusable and announced, and keyboard focus is drawn on the
   whole option via :has(:focus-visible). */
.form-field--radio-group {
  border: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--space-1);
}

/* float takes the legend out of the fieldset border edge (a floated
   legend is ordinary content), so it sits inside the row padding like
   every other field label. In the flex fieldset the float itself is
   ignored; flex-basis 100% puts it on its own line. */
.form-field--radio-group legend {
  float: left;
  flex: 0 0 100%;
  padding: 0;
  margin-bottom: 0;
}

.form-field__radio-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.form-field__radio-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.form-field__radio-option:hover {
  border-color: var(--color-primary);
}

.form-field__radio-option:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.form-field__radio-option:has(input:focus-visible) {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Ruled rows: every direct child of the form after the first gets the
   dashed rule. Declared after the radio group so it wins over that
   fieldset's border reset. */
/* Drawn as a positioned ::before, not a border or inset shadow: on a
   <fieldset> (radio groups) the browser seats the <legend> across the top
   edge, so either of those drew a line through the group title. */
.tool-form > * + * {
  position: relative;
}

.tool-form > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}

/* Exceptions to the row treatment. The contact form honeypot must stay
   parked off-canvas (base.css .form-honeypot), so it gets neither the
   relative positioning nor the row padding; the submit button is a normal
   button, not a ruled row. */
.tool-form > .form-honeypot {
  position: absolute;
  padding: 0;
}

.tool-form > .form-honeypot::before,
.tool-form > .form-honeypot + *::before,
.tool-form > button::before {
  content: none;
}

.tool-form > button {
  align-self: flex-start;
  padding: 12px 22px;
  margin: var(--space-1) 0 var(--space-3);
}

/* The result: the one deliberately bold object on the page, laid out like
   the summary page of a policy. A navy band (.result-panel__summary) holds
   the answer in the serif face; the white body below holds the breakdown,
   method and sources. Sticky beside the form on wide screens, and the
   only element with real elevation (--shadow-panel). It is a size
   container so the figure scales to the panel's own width, which keeps
   "$1,000,000" on one line at every panel width. */
.result-panel {
  container-type: inline-size;
  position: relative;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 0 var(--space-3) var(--space-3);
  overflow: hidden;
}

.result-panel__summary {
  margin: 0 calc(-1 * var(--space-3)) var(--space-1);
  padding: var(--space-3);
  background: var(--color-primary);
  background-image: radial-gradient(ellipse 80% 120% at 100% 0%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 60%);
  color: #fff;
}

@media (min-width: 900px) {
  .result-panel {
    padding: 0 var(--space-4) var(--space-4);
  }

  .result-panel__summary {
    margin: 0 calc(-1 * var(--space-4)) var(--space-1);
    padding: var(--space-4);
  }
}

/* Sticky only when the viewport is tall enough to show the whole panel
   under the sticky header; on a short window a sticky panel taller than
   the screen would hide its own bottom half. */
@media (min-width: 900px) and (min-height: 760px) {
  .result-panel {
    position: sticky;
    top: 88px;
  }
}

/* Same pulse as the shared .is-updating, but it keeps the panel shadow
   instead of replacing it for the length of the animation. */
@keyframes pulse-panel {
  0% { box-shadow: var(--shadow-panel), 0 0 0 0 rgba(var(--color-accent-rgb), 0.45); }
  100% { box-shadow: var(--shadow-panel), 0 0 0 10px rgba(var(--color-accent-rgb), 0); }
}

.result-panel.is-updating {
  animation-name: pulse-panel;
}

.result-panel__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 6px;
}

/* The headline number: white serif lining figures on the navy band. */
.result-panel__value {
  display: block;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 16cqi, 3.75rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Text answers ("Optional in this state"): the same serif at a sentence
   size. Toggled by watchResultValueLength() in calc-engine.js. */
.result-panel__value--text {
  font-size: clamp(1.5rem, 7.5cqi, 2rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Plain-language framing sentence directly under the number, populated by
   JS into #result-context; hidden entirely when a tool has not wired it. */
.result-panel__context {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: var(--space-2) 0 0;
}

.result-panel__context:empty {
  display: none;
}

/* Honest range instead of false precision. Populated by JS into
   #confidence-range. */
.result-panel__range {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  margin: var(--space-1) 0 0;
}

.result-panel__summary a {
  color: #fff;
}

.result-panel__range:empty {
  display: none;
}

.result-panel__chart {
  width: 100%;
  height: 40px;
  margin-top: var(--space-2);
  border-radius: 4px;
  display: block;
}

.breakdown-legend {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
}

.breakdown-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.breakdown-legend__label {
  flex: 1;
}

.breakdown-legend__value {
  font-weight: 600;
}

.result-panel__methodology {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
}

.result-panel__methodology summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  padding: 6px 0;
}

.result-panel__methodology summary::-webkit-details-marker {
  display: none;
}

.result-panel__methodology summary::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.result-panel__methodology[open] summary::before {
  transform: rotate(45deg);
}

.result-panel__source {
  font-size: 0.8125rem;
  color: var(--color-neutral-400);
  margin: var(--space-2) 0 0;
}

.result-panel__assumptions {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: var(--space-2) 0 0;
  padding-left: var(--space-2);
}

/* "More calculators" strip: replaces the old right-hand sidebar. Category
   note on the left, that category's other calculators in two columns on
   the right, sitting under a full-width ink rule. */
.tool-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
}

@media (min-width: 900px) {
  .tool-sidebar {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      'category nav'
      'all nav';
    align-items: start;
  }

  .tool-sidebar__category { grid-area: category; }
  .tool-sidebar__nav { grid-area: nav; }
  .tool-sidebar__all-link { grid-area: all; align-self: start; }
}

.tool-sidebar__category {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}

.tool-sidebar__category-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--category-color, var(--color-primary));
}

.tool-sidebar__category-icon svg {
  width: 100%;
  height: 100%;
}

.tool-sidebar__category-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  margin: 0 0 4px;
}

.tool-sidebar__category-desc {
  font-size: 0.9375rem;
  color: var(--color-neutral-400);
  margin: 0;
  max-width: 44ch;
}

.tool-sidebar__nav-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 var(--space-2);
}

.tool-sidebar__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .tool-sidebar__nav-list {
    columns: 2;
    column-gap: var(--space-4);
  }
}

.tool-sidebar__nav-list li {
  break-inside: avoid;
  margin-bottom: 12px;
}

.tool-sidebar__nav-list a {
  display: inline-block;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tool-sidebar__nav-list a:hover {
  color: var(--category-color, var(--color-primary));
  text-decoration-thickness: 2px;
}

.tool-sidebar__all-link {
  font-weight: 600;
  color: var(--color-ink);
}

/* Everything below the calculator shares one left edge (the container's)
   and one reading measure, instead of the old centered 70ch column that
   did not line up with the full-width calculator above it. */
.tool-explainer,
.faq-block,
.related-tools,
.next-steps,
.blog-cta-wrap {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

@media (min-width: 768px) {
  .tool-explainer,
  .faq-block,
  .related-tools,
  .next-steps,
  .blog-cta-wrap {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.tool-explainer {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* One reading column (about 70 characters of body copy) shared by the
   explainer, FAQ and next steps, so their right edges line up too. */
.tool-explainer > * {
  max-width: 44rem;
}

/* Body copy: slightly larger, more open leading, and a clear gap between
   paragraphs so the short paragraphs read as separate thoughts. */
.tool-explainer p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.tool-explainer h2 {
  margin-bottom: var(--space-3);
}

.related-tools {
  margin-top: var(--space-8);
  margin-bottom: 0;
}

.related-tools__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .related-tools__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.related-tools__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.related-tools__card:hover {
  border-color: var(--color-rule);
  box-shadow: var(--shadow-card-hover);
}

.related-tools__card:hover .related-tools__card-title {
  color: var(--color-primary);
}

.related-tools__card-icon {
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  color: var(--category-color, var(--color-primary));
  flex-shrink: 0;
}

.related-tools__card-icon svg {
  width: 100%;
  height: 100%;
}

.related-tools__card-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-ink);
  transition: color var(--transition-fast);
}

.related-tools__card-blurb {
  display: block;
  font-size: 0.875rem;
  color: var(--color-neutral-400);
}

/* FAQ: ruled rows on the page itself, no tinted box. */
.faq-block {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.faq-block__item {
  max-width: 44rem;
  border-top: 1px solid var(--color-border);
  padding: 18px 0;
}

.faq-block__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.faq-block__item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-ink);
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.faq-block__item summary::-webkit-details-marker {
  display: none;
}

.faq-block__item summary::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
}

.faq-block__item[open] summary::before {
  transform: rotate(45deg);
}

.faq-block__answer {
  max-width: 42rem;
  margin-top: var(--space-1);
  padding-left: calc(8px + var(--space-1));
  color: var(--color-ink);
}

.faq-block__answer p {
  line-height: 1.65;
  margin: 0 0 0.875rem;
}

.faq-block__answer p:last-child {
  margin-bottom: 0;
}

/* "Compare your result" prompt: a single editorial line under the result
   panel nudging to a related tool. Not a CTA button. */
.compare-prompt {
  font-size: 0.9375rem;
  margin: var(--space-2) 0 0;
}

.compare-prompt a {
  font-weight: 600;
}

/* Next steps: a genuine ordered checklist, so the numbers are meaningful.
   Numbers in the mono face, matching the site's other sequence
   (how-it-works on the homepage). */
.next-steps {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.next-steps h2,
.next-steps__list {
  max-width: 44rem;
}

.next-steps__list {
  list-style: none;
  counter-reset: next-steps;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.next-steps__list li {
  counter-increment: next-steps;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.next-steps__list li:last-child {
  border-bottom: 1px solid var(--color-border);
}

.next-steps__list li::before {
  content: counter(next-steps);
  flex-shrink: 0;
  min-width: 1.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  font-variant-numeric: lining-nums;
  line-height: 1.15;
  color: var(--color-accent);
}