/* calc.css: shared look for the calculator pages (renewal, reverse mortgage, debt consolidation).
   Hand-written; not part of the Tailwind build. Load it after /styles.v3.css and /assets/site-nav.css.

   How it is organised
   - Every class starts with jc-. Every colour, size and font is a custom property declared on .jc,
     the wrapper class that goes on <main>. Nothing here styles the shared header or footer on screen;
     the only rules that reach outside .jc are the print rules at the end, which hide them on paper.
   - States use is-* classes (is-error, is-stale, is-visible) or attributes (aria-invalid, data-tone,
     data-jc-example). Scripts toggle those; they never write colours.
   - Values come from the home page and /mortgage-tools/ (the mtj-* rules), renamed. What those pages
     did not have (form controls, result numbers, error and caution colours) is defined once here.
   - This file is frozen for the three page builds. Page-only rules go in a small inline <style> on the
     page with that page's own prefix. Builder guide: calc-css-guide.md in the rebuild artifacts folder.

   Sizes: body 17px, nothing under 14px, every control at least 48px tall, inputs 17px (no iOS zoom).
   Breakpoints, mobile first: 40rem, 64rem (the ones the site already uses). */

@font-face { font-family: "Literata Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 101.5%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.7%; }

/* ---------- 1. Tokens and base ---------- */
.jc {
  --jc-green: #1B4D3E;
  --jc-green-hover: #163F33;
  --jc-deep: #123329;
  --jc-gold: #C8A96E;
  --jc-gold-dark: #6B5216;
  --jc-gold-text: #8A6D1F;
  --jc-chip: #F0E8D9;
  --jc-cream: #F8F6F3;
  --jc-white: #FFFFFF;
  --jc-tint: #EEF2EE;
  --jc-good-bg: #F0F7F4;
  --jc-good-line: #B8C8BE;
  --jc-caution-bg: #FAF3E3;
  --jc-caution-line: #DCC48F;
  --jc-warn: #8A3B12;
  --jc-warn-bg: #FBF1EA;
  --jc-warn-line: #D9A283;
  --jc-error: #A4262C;
  --jc-error-bg: #FCEFEE;
  --jc-line: #E7E2DA;
  --jc-border: #6F8B7E;          /* control borders: 3.7:1 on white, 3.4:1 on cream */
  --jc-ink: #1A1A1A;
  --jc-body: #292524;
  --jc-muted: #57534E;
  --jc-disabled-bg: #F1EFEC;
  --jc-focus: #AA5319;           /* the one focus-ring colour */
  --jc-font-head: "Literata", "Literata Fallback", Georgia, serif;
  --jc-font-display: "Literata", Georgia, serif;
  --jc-font-body: "Inter", "Inter Fallback", Arial, sans-serif;
  --jc-radius: 0.75rem;
  --jc-radius-sm: 0.5rem;
  --jc-control-h: 3rem;          /* 48px */
  --jc-header-h: 4.5625rem;      /* the fixed site header, 73px */
  --jc-sticky-top: 6rem;         /* sticky panels and anchor targets clear the header */
  --jc-gutter: 1.5rem;
  color: var(--jc-ink);
  font-family: var(--jc-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.jc *, .jc *::before, .jc *::after { box-sizing: border-box; }
.jc [hidden] { display: none !important; }
.jc [id] { scroll-margin-top: var(--jc-sticky-top); }
:where(.jc) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend) { margin: 0; padding: 0; }
:where(.jc) :where(fieldset) { border: 0; min-width: 0; }
:where(.jc) :where(h1, h2, h3) { font-family: var(--jc-font-head); color: var(--jc-green); line-height: 1.15; }
:where(.jc) :where(h1) { font-family: var(--jc-font-display); font-size: clamp(1.75rem, 7.6vw, 2.125rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.018em; }
:where(.jc) :where(h2) { font-size: 1.625rem; font-weight: 700; }
:where(.jc) :where(h3) { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; }
:where(.jc) :where(h4) { font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--jc-green); }
:where(.jc) :where(a) { color: var(--jc-green); text-decoration: underline; text-underline-offset: 3px; }
:where(.jc) :where(a:focus-visible) { border-radius: 4px; }
:where(.jc) :where(b, strong) { font-weight: 700; }
.jc :focus-visible { outline: 3px solid var(--jc-focus); outline-offset: 3px; }
.jc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--jc-tint); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }

/* helpers */
.jc-wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--jc-gutter); }
.jc-narrow { max-width: 46rem; }
.jc-center { margin-left: auto; margin-right: auto; }
.jc-stack > * + * { margin-top: 0.875rem; }
.jc-muted { color: var(--jc-muted); }
.jc-small { font-size: 0.9375rem; line-height: 1.55; }
.jc-fine { font-size: 0.875rem; line-height: 1.55; color: var(--jc-muted); }
.jc-num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.jc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.jc-print-only { display: none; }
.jc-eyebrow { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jc-green); line-height: 1.4; }

/* ---------- 2. Page shell ---------- */
.jc-white { background: var(--jc-white); }
.jc-cream { background: var(--jc-cream); }
.jc-tint { background: var(--jc-tint); }

/* Hero: one short centred column. The top padding clears the fixed header. It is kept short on purpose,
   so the first inputs and the first result number start on the first phone screen. */
.jc-hero { padding: 5.375rem 0 1.125rem; background: var(--jc-cream); text-align: center; text-wrap: balance; }
.jc-hero-in { max-width: 54rem; }
.jc-hero h1 { margin-top: 0.375rem; }
.jc-hero-sub { margin-top: 0.5rem; font-family: var(--jc-font-display); font-size: 1.125rem; font-style: italic; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--jc-gold-text); }
.jc-lede { max-width: 36rem; margin: 1rem auto 0; font-size: 1.0625rem; line-height: 1.6; color: var(--jc-muted); }

/* trust chips and the one-line privacy note */
.jc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 0.75rem; list-style: none; }
.jc-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem; border-radius: 9999px; background: var(--jc-chip); color: var(--jc-gold-dark); font-size: 0.875rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.jc-chip::before { content: ""; flex: none; width: 0.875rem; height: 0.875rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B5216' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.jc-chip--plain::before { content: none; }
.jc-privacy { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--jc-muted); }
.jc-privacy::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2357534E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.2 7V5a2.8 2.8 0 015.6 0v2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* tool band: the calculator sits on cream, straight under the hero */
.jc-tool { padding: 0 0 3rem; background: var(--jc-cream); }

/* content sections under the tool */
.jc-sec { padding: 3.5rem 0; }
.jc-head { margin-bottom: 1.75rem; max-width: 44rem; }
.jc-head h2 { margin-top: 0.5rem; }
.jc-head p { margin-top: 0.75rem; color: var(--jc-muted); font-size: 1.0625rem; }
.jc-prose { max-width: 46rem; font-size: 1.0625rem; line-height: 1.7; color: var(--jc-body); }
.jc-prose > * + * { margin-top: 1rem; }
.jc-prose h3 { margin-top: 1.75rem; }
.jc-prose ul, .jc-prose ol { padding-left: 1.375rem; }
.jc-prose ul { list-style: disc; }
.jc-prose ol { list-style: decimal; }
.jc-prose li + li { margin-top: 0.375rem; }
.jc-prose li::marker { color: var(--jc-green); font-weight: 700; }

/* ---------- 3. Buttons ---------- */
.jc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.375rem; border: 1px solid var(--jc-green); border-radius: var(--jc-radius-sm); background: var(--jc-green); color: #fff; font-family: var(--jc-font-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.jc-btn svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-btn--line { background: #fff; color: var(--jc-green); }
.jc-btn--quiet { padding-left: 0.5rem; padding-right: 0.5rem; border-color: transparent; background: transparent; color: var(--jc-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jc-btn--gold { background: var(--jc-gold); border-color: var(--jc-gold); color: var(--jc-deep); }
.jc-btn--light { background: transparent; border-color: rgba(248, 246, 243, .7); color: #fff; }
.jc-btn--pill { min-height: 3.5rem; padding: 1rem 1.875rem; border-radius: 9999px; font-weight: 600; }
.jc-btn--block { display: flex; width: 100%; }
.jc-btn:disabled, .jc-btn[aria-disabled="true"] { border-color: #C9C4BC; background: var(--jc-disabled-bg); color: var(--jc-muted); cursor: not-allowed; text-decoration: none; }
@media (hover: hover) {
  .jc-btn:hover { background: var(--jc-green-hover); border-color: var(--jc-green-hover); }
  .jc-btn--line:hover { background: var(--jc-tint); border-color: var(--jc-green); }
  .jc-btn--quiet:hover { background: var(--jc-tint); border-color: transparent; }
  .jc-btn--gold:hover { background: #D4B981; border-color: #D4B981; }
  .jc-btn--light:hover { background: rgba(248, 246, 243, .1); border-color: #fff; }
  .jc-btn:disabled:hover, .jc-btn[aria-disabled="true"]:hover { border-color: #C9C4BC; background: var(--jc-disabled-bg); }
}
/* a text link that acts as a secondary action: full 44px tap height */
.jc-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1rem; font-weight: 600; }

/* ---------- 4. Calculator layout ---------- */
/* Stacked on phones and tablets. From 64rem: inputs left, results right, results sticky under the header. */
.jc-calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 70rem; margin: 0 auto; }
.jc-calc--single { max-width: 44rem; }
.jc-card { background: #fff; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); padding: 1rem; }
.jc-card-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.jc-card-title + * { margin-top: 0.875rem; }
.jc-form, .jc-result { display: flex; flex-direction: column; gap: 1rem; }
.jc-form > *, .jc-result > * { min-width: 0; }
.jc-group-title { font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--jc-green); }
.jc-form > .jc-group-title { margin-top: 0.5rem; }
.jc-form > .jc-group-title + * { margin-top: -0.375rem; }
.jc-group-title + .jc-fields, .jc-group-title + .jc-rows { margin-top: 0.625rem; }

/* "Example figures, change any number": a banner at the top of the form, plus a quiet tint on the
   prefilled values while data-jc-example="true" is on the form (remove the attribute on first edit). */
.jc-example { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--jc-radius-sm); background: var(--jc-chip); color: var(--jc-gold-dark); font-size: 0.9375rem; line-height: 1.4; }
.jc-example::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%236B5216' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5l3 3L6 15H3v-3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.jc-example b { font-weight: 700; }
.jc-example .jc-example-reset { margin: -0.375rem -0.375rem -0.375rem auto; min-height: 2.75rem; padding: 0 0.625rem; border: 0; border-radius: var(--jc-radius-sm); background: transparent; color: var(--jc-gold-dark); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
[data-jc-example="true"] .jc-input, [data-jc-example="true"] .jc-select { color: var(--jc-muted); }
.jc-tag { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; background: var(--jc-chip); color: var(--jc-gold-dark); font-size: 0.875rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }

/* ---------- 5. Fields ---------- */
/* Order inside a field: label, hint, control, error. The control is pushed to the bottom of the field,
   so two fields side by side keep their inputs on one line even when one label wraps. */
.jc-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 0.875rem; }
.jc-fields--2, .jc-fields--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jc-field { display: flex; flex-direction: column; min-width: 0; }
.jc-field--full { grid-column: 1 / -1; }
.jc-label { display: block; padding-bottom: 0.375rem; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--jc-ink); }
.jc-opt { font-weight: 400; color: var(--jc-muted); }
.jc-hint { margin-top: -0.1875rem; padding-bottom: 0.4375rem; font-size: 0.875rem; line-height: 1.4; color: var(--jc-muted); }
.jc-field > .jc-input, .jc-field > .jc-select, .jc-field > .jc-affix, .jc-field > .jc-seg, .jc-field > .jc-range { margin-top: auto; }

.jc-input, .jc-select { display: block; width: 100%; min-width: 0; min-height: var(--jc-control-h); margin: 0; padding: 0.625rem 0.875rem; border: 1px solid var(--jc-border); border-radius: var(--jc-radius); background-color: #fff; color: var(--jc-ink); font-family: var(--jc-font-body); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; -webkit-appearance: none; appearance: none; }
.jc-input::placeholder { color: #6B6661; font-weight: 400; opacity: 1; }
.jc-input[type="number"] { -moz-appearance: textfield; }
.jc-input[type="number"]::-webkit-outer-spin-button, .jc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jc-select { padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B4D3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem; cursor: pointer; text-overflow: ellipsis; }
@media (hover: hover) {
  .jc-input:hover, .jc-select:hover { border-color: var(--jc-green); box-shadow: inset 0 0 0 1px var(--jc-green); }
}
.jc-input:focus, .jc-select:focus { border-color: var(--jc-green); box-shadow: inset 0 0 0 1px var(--jc-green); }
.jc-input:focus-visible, .jc-select:focus-visible { outline: 3px solid var(--jc-focus); outline-offset: 2px; }

/* $ in front, % or a unit behind. The symbol is decoration (aria-hidden); say the unit in the label. */
.jc-affix { position: relative; display: block; }
.jc-affix-sym { position: absolute; top: 0; height: var(--jc-control-h); display: flex; align-items: center; color: var(--jc-muted); font-size: 1.0625rem; font-weight: 500; line-height: 1; pointer-events: none; }
.jc-affix--pre > .jc-affix-sym { left: 0.875rem; }
.jc-affix--suf > .jc-affix-sym, .jc-affix--unit > .jc-affix-sym { right: 0.875rem; }
.jc-affix--pre > .jc-input { padding-left: 1.875rem; }
.jc-affix--suf > .jc-input { padding-right: 2.125rem; }
.jc-affix--unit > .jc-input { padding-right: 4.25rem; }

/* error: aria-invalid="true" on the control, is-error on the field, message in .jc-error */
.jc-input[aria-invalid="true"], .jc-select[aria-invalid="true"], .jc-field.is-error .jc-input, .jc-field.is-error .jc-select { border-color: var(--jc-error); box-shadow: inset 0 0 0 1px var(--jc-error); background-color: #FFFAFA; }
.jc-error { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--jc-error); }
.jc-error::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.09rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23A4262C'/%3E%3Cpath d='M9 4.6v5.2' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='1.15' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.jc-error:empty { display: none; }
.jc-error-summary { padding: 0.875rem 1rem; border: 2px solid var(--jc-error); border-radius: var(--jc-radius); background: var(--jc-error-bg); color: var(--jc-ink); font-size: 1rem; line-height: 1.5; }
.jc-error-summary h2, .jc-error-summary h3, .jc-error-summary strong { display: block; font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--jc-error); }
.jc-error-summary ul { margin-top: 0.25rem; padding-left: 1.25rem; list-style: disc; }
.jc-error-summary a { display: inline-block; padding: 0.3125rem 0; color: var(--jc-error); font-weight: 600; }

/* disabled and read-only */
.jc-input:disabled, .jc-select:disabled { border-color: #C9C4BC; border-style: dashed; background-color: var(--jc-disabled-bg); color: var(--jc-muted); box-shadow: none; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--jc-muted); }
.jc-input[readonly] { background-color: var(--jc-tint); box-shadow: none; }
.jc-field.is-disabled .jc-label, .jc-field.is-disabled .jc-hint, .jc-field.is-disabled .jc-affix-sym { color: #6B6661; }

/* segmented choice, 2 to 4 options: radios inside labels */
.jc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--jc-border); border-radius: var(--jc-radius); background: #fff; }
.jc-seg-opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.jc-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.jc-seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.25rem 0.5rem; border-radius: 0.5625rem; color: var(--jc-green); font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; }
.jc-seg-opt input:checked + span { background: var(--jc-green); color: #fff; }
.jc-seg-opt input:focus-visible + span { outline: 3px solid var(--jc-focus); outline-offset: 2px; }
.jc-seg-opt input:disabled + span { color: #6B6661; cursor: not-allowed; }
.jc-seg-opt input:disabled:checked + span { background: #C9C4BC; color: var(--jc-ink); }
@media (hover: hover) { .jc-seg-opt input:not(:checked):not(:disabled) + span:hover, .jc-seg-opt:hover input:not(:checked):not(:disabled) + span { background: var(--jc-tint); } }

/* checkbox and toggle switch: a native checkbox inside its label */
.jc-check, .jc-toggle { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 3rem; padding: 0.6875rem 0; font-size: 1rem; line-height: 1.45; color: var(--jc-ink); cursor: pointer; }
.jc-check small, .jc-toggle small { display: block; font-size: 0.875rem; color: var(--jc-muted); }
.jc-check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.03rem 0 0; border: 2px solid var(--jc-border); border-radius: 0.375rem; background: #fff center / 1rem no-repeat; -webkit-appearance: none; appearance: none; cursor: pointer; }
.jc-check input:checked { border-color: var(--jc-green); background-color: var(--jc-green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E"); }
.jc-toggle { justify-content: space-between; }
.jc-toggle input { order: 2; flex: none; position: relative; width: 3.25rem; height: 2rem; margin: -0.21rem 0 0; border: 2px solid var(--jc-border); border-radius: 9999px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.jc-toggle input::before { content: ""; position: absolute; top: 50%; left: 0.25rem; width: 1.25rem; height: 1.25rem; margin-top: -0.625rem; border-radius: 50%; background: var(--jc-border); }
.jc-toggle input:checked { border-color: var(--jc-green); background: var(--jc-green); }
.jc-toggle input:checked::before { left: calc(100% - 1.5rem); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B4D3E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.3'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.jc-check input:disabled, .jc-toggle input:disabled { border-color: #C9C4BC; border-style: dashed; background-color: var(--jc-disabled-bg); cursor: not-allowed; }
.jc-check input:focus-visible, .jc-toggle input:focus-visible { outline: 3px solid var(--jc-focus); outline-offset: 2px; }
@media (hover: hover) { .jc-check:hover input:not(:disabled), .jc-toggle:hover input:not(:disabled) { border-color: var(--jc-green); } }

/* range slider. Optional: set --jc-range-fill (for example 40%) from script to colour the filled part. */
.jc-range { display: block; }
.jc-range input[type="range"] { display: block; width: 100%; height: var(--jc-control-h); margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.jc-range input[type="range"]::-webkit-slider-runnable-track { height: 0.5rem; border: 1px solid var(--jc-border); border-radius: 9999px; background: linear-gradient(to right, var(--jc-green) var(--jc-range-fill, 0%), #fff var(--jc-range-fill, 0%)); }
.jc-range input[type="range"]::-moz-range-track { height: 0.375rem; border: 1px solid var(--jc-border); border-radius: 9999px; background: #fff; }
.jc-range input[type="range"]::-moz-range-progress { height: 0.5rem; border-radius: 9999px; background: var(--jc-green); }
.jc-range input[type="range"]::-webkit-slider-thumb { width: 1.75rem; height: 1.75rem; margin-top: -0.6875rem; border: 3px solid #fff; border-radius: 50%; background: var(--jc-green); box-shadow: 0 0 0 1px var(--jc-green); -webkit-appearance: none; appearance: none; }
.jc-range input[type="range"]::-moz-range-thumb { width: 1.375rem; height: 1.375rem; border: 3px solid #fff; border-radius: 50%; background: var(--jc-green); box-shadow: 0 0 0 1px var(--jc-green); }
.jc-range input[type="range"]:focus-visible { outline: 3px solid var(--jc-focus); outline-offset: 0; border-radius: var(--jc-radius-sm); }
.jc-range input[type="range"]:disabled { cursor: not-allowed; opacity: .55; }
.jc-range-scale { display: flex; justify-content: space-between; margin-top: -0.375rem; font-size: 0.875rem; line-height: 1.4; color: var(--jc-muted); font-variant-numeric: tabular-nums lining-nums; }
.jc-range-value { font-weight: 700; color: var(--jc-green); font-variant-numeric: tabular-nums lining-nums; }

/* repeating rows (a list of debts): each row is a small panel with a 44px remove button */
.jc-rows { display: grid; gap: 0.75rem; list-style: none; }
.jc-row { padding: 0.375rem 0.875rem 0.875rem; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: var(--jc-cream); }
.jc-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.75rem; }
.jc-row-title { font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--jc-green); }
.jc-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.jc-remove { position: relative; flex: none; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; padding: 0; border: 0; border-radius: var(--jc-radius-sm); background: transparent; color: var(--jc-muted); cursor: pointer; }
.jc-remove::before, .jc-remove::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.125rem; height: 2px; margin: -1px 0 0 -0.5625rem; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.jc-remove::after { transform: rotate(-45deg); }
.jc-remove:disabled { color: #C9C4BC; cursor: not-allowed; }
@media (hover: hover) { .jc-remove:not(:disabled):hover { background: var(--jc-error-bg); color: var(--jc-error); } }
.jc-add { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 3rem; margin-top: 0.75rem; padding: 0.625rem 1rem; border: 1px dashed var(--jc-border); border-radius: var(--jc-radius); background: transparent; color: var(--jc-green); font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.25; cursor: pointer; }
.jc-add::before { content: "+"; font-size: 1.375rem; font-weight: 400; line-height: 1; margin-top: -0.125rem; }
.jc-add:disabled { border-color: #C9C4BC; color: #6B6661; cursor: not-allowed; }
@media (hover: hover) { .jc-add:not(:disabled):hover { border-style: solid; border-color: var(--jc-green); background: var(--jc-tint); } }

/* Where the browser supports subgrid (all current ones), fields in one row share four row tracks
   (label, hint, control, error), so the inputs line up even when one field has a hint, a wrapped label
   or an error message and its neighbour does not. Older browsers keep the flex layout above. */
@supports (grid-template-rows: subgrid) {
  .jc-fields, .jc-row-fields { row-gap: 0; margin-bottom: -1rem; }
  .jc-fields > .jc-field, .jc-row-fields > .jc-field { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; padding-bottom: 1rem; }
  .jc-fields > .jc-field > .jc-label, .jc-row-fields > .jc-field > .jc-label { grid-row: 1; align-self: end; }
  .jc-fields > .jc-field > .jc-hint, .jc-row-fields > .jc-field > .jc-hint { grid-row: 2; }
  .jc-fields > .jc-field > :is(.jc-input, .jc-select, .jc-affix, .jc-seg, .jc-range), .jc-row-fields > .jc-field > :is(.jc-input, .jc-select, .jc-affix, .jc-seg, .jc-range) { grid-row: 3; margin-top: 0; }
  .jc-fields > .jc-field > .jc-error, .jc-row-fields > .jc-field > .jc-error { grid-row: 4; }
}

/* "More options": <details class="jc-more"><summary>…</summary><div class="jc-more-body">…</div></details> */
.jc-more { border-top: 1px solid var(--jc-line); }
.jc-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: 0.5rem 0; color: var(--jc-green); font-size: 1rem; font-weight: 700; line-height: 1.3; cursor: pointer; }
.jc-more > summary::-webkit-details-marker { display: none; }
.jc-more > summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin: -0.25rem 0.375rem 0 0; border-right: 2px solid var(--jc-green); border-bottom: 2px solid var(--jc-green); transform: rotate(45deg); }
.jc-more[open] > summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.jc-more > summary small { display: block; font-size: 0.875rem; font-weight: 400; color: var(--jc-muted); }
.jc-more > summary:focus-visible { outline-offset: 0; border-radius: 4px; }
.jc-more-body { padding: 0.375rem 0 1rem; }
.jc-more-body > * + * { margin-top: 1rem; }
.jc-form > .jc-more:last-child { margin-bottom: -0.5rem; }
.jc-form > .jc-more:last-child[open] { margin-bottom: 0; }
@media (hover: hover) { .jc-more > summary:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- 6. Results ---------- */
/* data-tone="neutral" (default), "good" or "caution" changes the panel's background and border.
   The tone is always also said in words in .jc-tone, with its own icon shape, never by colour alone. */
.jc-result { --jc-panel-line: var(--jc-line); position: relative; padding: 1rem; border: 1px solid var(--jc-panel-line); border-radius: var(--jc-radius); background: #fff; }
.jc-result[data-tone="good"] { --jc-panel-line: var(--jc-good-line); background: var(--jc-good-bg); }
.jc-result[data-tone="caution"] { --jc-panel-line: var(--jc-caution-line); background: var(--jc-caution-bg); }
.jc-result-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.jc-result-title { font-family: var(--jc-font-body); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--jc-green); }
.jc-tone { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--jc-muted); }
.jc-tone::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2357534E'/%3E%3Cpath d='M6 8h8M6 12h8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-tone="good"] .jc-tone { color: var(--jc-green); }
[data-tone="good"] .jc-tone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231B4D3E'/%3E%3Cpath d='M5.8 10.4l2.9 2.9 5.6-5.9' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-tone="caution"] .jc-tone { color: var(--jc-gold-dark); }
[data-tone="caution"] .jc-tone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8L19 17.6H1z' fill='%236B5216' stroke='%236B5216' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6v4.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.9' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }

/* the one large number */
.jc-big { display: block; }
.jc-big-label { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--jc-body); }
.jc-big-num { display: block; margin-top: 0.125rem; font-family: var(--jc-font-display); font-size: clamp(2.75rem, 13vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--jc-green); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.jc-big-num small { font-family: var(--jc-font-body); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--jc-body); white-space: normal; }
.jc-big-note { display: block; margin-top: 0.25rem; font-size: 1rem; line-height: 1.45; color: var(--jc-body); }
.jc-verdict { font-family: var(--jc-font-head); font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--jc-ink); text-wrap: pretty; }
.jc-verdict b, .jc-verdict strong { font-weight: 700; color: var(--jc-green); font-variant-numeric: tabular-nums lining-nums; }

/* three stats: label, number, small note. Rows by default (label left, number right, note under); three tiles
   side by side only from 48rem to 64rem, where the result panel has the full page width. A number too long for
   its row or tile drops to its own line or wraps, so it can never run into the next cell. */
.jc-stats { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; border: 1px solid var(--jc-panel-line, var(--jc-line)); border-radius: var(--jc-radius); background: #fff; }
.jc-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; padding: 0.75rem 0.875rem; }
.jc-stat + .jc-stat { border-top: 1px solid var(--jc-panel-line, var(--jc-line)); }
.jc-stat-label { flex: 1 1 7rem; min-width: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--jc-body); }
.jc-stat-num { font-family: var(--jc-font-head); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--jc-green); font-variant-numeric: tabular-nums lining-nums; text-align: right; flex: 0 1 auto; max-width: 100%; margin-left: auto; overflow-wrap: anywhere; }
.jc-stat-note { flex: 0 0 100%; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.4; color: var(--jc-muted); }

/* notices: a warning the reader must not miss, or a plain note */
.jc-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--jc-good-line); border-left-width: 4px; border-radius: var(--jc-radius-sm); background: #fff; font-size: 0.9375rem; line-height: 1.5; color: var(--jc-ink); }
.jc-notice::before { content: ""; grid-row: 1 / span 3; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%231B4D3E'/%3E%3Cpath d='M10 9.2v5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6' r='1.15' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.jc-notice > * { grid-column: 2; }
.jc-notice strong, .jc-notice h3 { display: block; font-family: var(--jc-font-body); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--jc-green); }
.jc-notice--warn { border-color: var(--jc-warn-line); border-left-color: var(--jc-warn); background: var(--jc-warn-bg); }
.jc-notice--warn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8L19 17.6H1z' fill='%238A3B12' stroke='%238A3B12' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 7.6v4.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.9' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.jc-notice--warn strong, .jc-notice--warn h3 { color: var(--jc-warn); }

/* assumptions line, live "results updated" line, out-of-date and empty states */
.jc-assume { padding-left: 0.75rem; border-left: 3px solid var(--jc-gold); font-size: 0.875rem; line-height: 1.55; color: var(--jc-body); }
.jc-assume b { font-weight: 700; color: var(--jc-ink); }
.jc-updated { display: flex; align-items: center; gap: 0.4375rem; min-height: 1.25rem; font-size: 0.875rem; line-height: 1.4; color: var(--jc-muted); }
.jc-updated::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--jc-green); }
.jc-updated:empty::before { content: none; }
.jc-stale { display: none; }
.jc-result.is-stale .jc-stale { display: grid; }
/* .8, not lower: at .45 the dimmed figures measured 2.3:1. At .8 the weakest is above 4.5:1 on every panel tone. */
.jc-result.is-stale .jc-big-num, .jc-result.is-stale .jc-stat-num, .jc-result.is-stale .jc-verdict, .jc-result.is-stale .jc-compare td { opacity: .8; }
.jc-result.is-stale .jc-updated::before { background: transparent; box-shadow: inset 0 0 0 2px var(--jc-muted); }
.jc-empty { padding: 1.5rem 0.5rem; text-align: center; color: var(--jc-muted); font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .jc-updated.is-flash::before { animation: jc-pulse 1.2s ease-out 1; }
  @keyframes jc-pulse { 0% { box-shadow: 0 0 0 0 rgba(27, 77, 62, .45); } 100% { box-shadow: 0 0 0 0.5rem rgba(27, 77, 62, 0); } }
}

/* comparison table: one card per row on a phone (no sideways scrolling), a real table from 40rem.
   Each <td> needs data-label="its column heading". */
.jc-compare { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; text-align: left; font-variant-numeric: tabular-nums lining-nums; }
.jc-compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jc-compare tbody, .jc-compare tr, .jc-compare th, .jc-compare td { display: block; }
.jc-compare tr { padding: 0.625rem 0.875rem; border: 1px solid var(--jc-panel-line, var(--jc-line)); border-radius: var(--jc-radius-sm); background: #fff; }
.jc-compare tr + tr { margin-top: 0.5rem; }
.jc-compare th[scope="row"] { padding-bottom: 0.1875rem; font-weight: 700; color: var(--jc-green); }
.jc-compare td { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.125rem 1rem; padding: 0.1875rem 0; color: var(--jc-ink); font-weight: 600; text-align: right; }
.jc-compare td::before { content: attr(data-label); flex: none; margin-right: auto; font-weight: 400; color: var(--jc-muted); text-align: left; }
.jc-compare td.is-better { color: var(--jc-green); font-weight: 700; }
.jc-compare td.is-better::after { content: "lower"; order: 3; flex: none; margin-left: -0.5rem; padding: 0 0.4375rem; border: 1px solid var(--jc-good-line); border-radius: 9999px; background: var(--jc-good-bg); font-size: 0.875rem; font-weight: 600; line-height: 1.5; }
.jc-compare td.is-better[data-flag]::after { content: attr(data-flag); }

/* next step under the result: a short reason, one primary button, one quiet link */
.jc-next { padding-top: 1rem; border-top: 1px solid var(--jc-panel-line, var(--jc-line)); }
.jc-next-why { font-size: 1rem; line-height: 1.5; color: var(--jc-ink); }
.jc-next-why b { font-weight: 700; color: var(--jc-green); }
.jc-next-actions { display: grid; gap: 0.25rem; margin-top: 0.75rem; justify-items: center; }
.jc-next-actions .jc-btn:not(.jc-btn--quiet) { width: 100%; }

/* ---------- 7. Sticky phone summary bar (optional) ---------- */
/* Below 64rem the result panel sits under the inputs, so the headline number would be off screen while
   someone types. This bar repeats it. It is the first child of .jc-calc-in (the inputs column) and is
   position: sticky inside that column: it starts in the page flow just above the form, stays under the
   site header while the inputs scroll past, and leaves with them when the result panel arrives. No
   script is needed to show or hide it; a script only copies the headline number into .jc-bar-num.
   It sits at the top, not the bottom, so the analytics notice never covers it. */
.jc-calc-in { min-width: 0; }
.jc-bar { position: sticky; top: calc(var(--jc-header-h) + 0.5rem); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.25rem; margin-bottom: 0.5rem; padding: 0.375rem 0.875rem; border: 1px solid var(--jc-good-line); border-radius: var(--jc-radius); background: var(--jc-good-bg); color: var(--jc-ink); text-decoration: none; }
.jc-bar::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: calc(100% + 1px); height: 0.5625rem; background: var(--jc-cream); }
.jc-bar[data-tone="caution"] { border-color: var(--jc-caution-line); background: var(--jc-caution-bg); }
.jc-bar[data-tone="neutral"] { border-color: var(--jc-border); background: #fff; }
.jc-bar-text { min-width: 0; font-size: 0.875rem; line-height: 1.3; color: var(--jc-body); }
.jc-bar-num { display: block; font-family: var(--jc-font-head); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--jc-green); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-bar-go { flex: none; display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.9375rem; font-weight: 700; color: var(--jc-green); white-space: nowrap; }
.jc-bar-go::after { content: ""; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.jc-bar:focus-visible { outline-offset: 2px; }
.jc-calc-in:has(> .jc-bar) :is([id], input, select, button, summary) { scroll-margin-top: calc(var(--jc-sticky-top) + 4rem); }
@media (min-width: 64rem) {
  .jc-bar { display: none; }
  .jc-calc-in:has(> .jc-bar) :is([id], input, select, button, summary) { scroll-margin-top: var(--jc-sticky-top); }
}

/* ---------- 8. Content blocks under the tool ---------- */
/* label / value pairs: worked example, facts for AI assistants, print summary */
.jc-kv { display: grid; }
.jc-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--jc-line); }
.jc-kv > div:first-child { border-top: 0; }
.jc-kv dt { color: var(--jc-body); }
.jc-kv dd { flex: none; max-width: 60%; font-weight: 700; color: var(--jc-ink); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.jc-kv--text > div { display: block; }
.jc-kv--text dt { font-weight: 700; color: var(--jc-green); }
.jc-kv--text dd { max-width: none; font-weight: 400; text-align: left; overflow-wrap: anywhere; }

/* worked example */
.jc-worked { display: grid; gap: 1rem; max-width: 60rem; }
.jc-worked-part { padding: 1rem 1.125rem; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: #fff; font-size: 1rem; }
.jc-worked-part h3 { margin-bottom: 0.375rem; font-size: 1.0625rem; }
.jc-worked-part--out { border-color: var(--jc-good-line); background: var(--jc-good-bg); }
.jc-worked-part--out .jc-kv > div { border-color: var(--jc-good-line); }
.jc-worked-say { grid-column: 1 / -1; padding-left: 1rem; border-left: 3px solid var(--jc-gold); font-size: 1.0625rem; line-height: 1.6; color: var(--jc-ink); }

/* method and assumptions */
.jc-method { display: grid; gap: 1.25rem; }
.jc-method > div { border-left: 3px solid var(--jc-gold); padding: 0.125rem 0 0.125rem 1rem; }
.jc-method h3 { font-size: 1.0625rem; margin-bottom: 0.25rem; }
.jc-method p { font-size: 1rem; line-height: 1.7; color: var(--jc-body); }
.jc-callout { padding: 0.875rem 1rem; border-radius: var(--jc-radius-sm); background: var(--jc-good-bg); font-size: 1rem; line-height: 1.55; color: var(--jc-body); }
.jc-note { padding-left: 0.75rem; border-left: 3px solid var(--jc-gold); font-size: 0.9375rem; line-height: 1.55; color: var(--jc-ink); }

/* FAQ accordion */
.jc-acc { border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: #fff; overflow: hidden; }
.jc-white .jc-acc { background: var(--jc-cream); }
.jc-acc + .jc-acc { margin-top: 0.75rem; }
.jc-acc > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.125rem; min-height: 3.5rem; cursor: pointer; font-family: var(--jc-font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--jc-green); }
.jc-acc > summary::-webkit-details-marker { display: none; }
.jc-acc > summary::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem; border-right: 2px solid var(--jc-green); border-bottom: 2px solid var(--jc-green); transform: rotate(45deg); }
.jc-acc[open] > summary::after { transform: rotate(-135deg); }
.jc-acc > summary:focus-visible { outline-offset: -3px; border-radius: var(--jc-radius); }
.jc-acc > summary h3 { font: inherit; color: inherit; line-height: inherit; margin: 0; }
.jc-acc-body { padding: 0 1.125rem 1.125rem; font-size: 1rem; line-height: 1.7; color: var(--jc-body); }
.jc-acc-body > * + * { margin-top: 0.875rem; }
@media (hover: hover) { .jc-acc > summary:hover { background: var(--jc-tint); } }
@media (prefers-reduced-motion: no-preference) { .jc-acc > summary::after, .jc-more > summary::after { transition: transform .15s; } }

/* "For AI assistants" */
.jc-ai { max-width: 60rem; padding: 1.25rem; border: 1px solid var(--jc-good-line); border-radius: var(--jc-radius); background: #fff; font-size: 1rem; line-height: 1.65; color: var(--jc-body); }
.jc-ai > * + * { margin-top: 0.875rem; }
.jc-ai h2, .jc-ai h3 { font-size: 1.25rem; }
.jc-ai pre { margin: 0; padding: 0.75rem 0.875rem; border-radius: var(--jc-radius-sm); background: var(--jc-tint); font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.jc-ai pre code { padding: 0; background: none; font-size: inherit; }

/* identity and licence block; the one-line identity under a hero or a result */
.jc-pub { max-width: 60rem; padding: 1.25rem; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: var(--jc-cream); }
.jc-cream .jc-pub { background: #fff; }
.jc-pub p { font-size: 1rem; line-height: 1.7; color: var(--jc-body); }
.jc-pub .jc-pub-name { font-size: 1.0625rem; font-weight: 600; color: var(--jc-ink); }
.jc-identity { font-size: 0.875rem; line-height: 1.6; color: var(--jc-muted); }

/* related links */
.jc-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: 1rem; font-weight: 600; }
.jc-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.jc-routes { display: grid; gap: 0.75rem; list-style: none; }
.jc-route { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 4.5rem; padding: 1rem 1.125rem; border: 1px solid var(--jc-line); border-radius: var(--jc-radius); background: var(--jc-cream); text-decoration: none; }
.jc-cream .jc-route { background: #fff; }
.jc-route b { display: block; font-family: var(--jc-font-head); font-size: 1.0625rem; line-height: 1.3; color: var(--jc-green); }
.jc-route span span { display: block; font-size: 0.9375rem; line-height: 1.45; color: var(--jc-muted); }
.jc-route i { flex: none; font-style: normal; font-size: 1.25rem; color: var(--jc-green); }
@media (hover: hover) { .jc-route:hover { border-color: var(--jc-green); } }

/* the one dark band: talk to Jenny */
.jc-dark { background: var(--jc-green); color: var(--jc-cream); }
.jc-dark :focus-visible { outline-color: #fff; }
.jc-dark h2 { color: #fff; }
.jc-dark .jc-eyebrow { color: var(--jc-cream); border-left: 3px solid var(--jc-gold); padding-left: 0.5rem; }
.jc-dark p { color: rgba(248, 246, 243, .9); }
.jc-dark a:not(.jc-btn) { color: #fff; }
.jc-look { display: grid; gap: 1.5rem; align-items: center; }
.jc-look-who { display: flex; gap: 1rem; align-items: center; }
.jc-look-who img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--jc-gold); }
.jc-look-actions { display: grid; gap: 0.75rem; }

/* ---------- 9. Wider screens ---------- */
@media (max-width: 39.99rem) {
  /* phones: the card runs closer to the screen edge so two short fields fit side by side */
  .jc-tool > .jc-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  .jc-hero > .jc-wrap { padding-left: 1rem; padding-right: 1rem; }
  .jc-seg--stack { grid-auto-flow: row; }
}
@media (min-width: 40rem) {
  :where(.jc) :where(h1) { font-size: clamp(2.25rem, 4.3vw, 3.25rem); }
  .jc-hero { padding: 6.25rem 0 1.75rem; }
  .jc-hero h1 { margin-top: 0.5rem; }
  .jc-hero-sub { margin-top: 0.625rem; font-size: clamp(1.25rem, 2vw, 1.625rem); }
  .jc-chips { gap: 0.5rem; margin-top: 1rem; }
  .jc-chip { padding: 0.25rem 0.75rem; }
  .jc-lede { font-size: 1.1875rem; }
  .jc-tool { padding-bottom: 4rem; }
  .jc-calc { gap: 1.25rem; }
  .jc-card, .jc-result { padding: 1.5rem; }
  .jc-fields { column-gap: 1rem; }
  .jc-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jc-row-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jc-big-num { font-size: 3.75rem; }
  .jc-verdict { font-size: 1.3125rem; }
  .jc-stat { padding: 0.875rem 1rem; }
  .jc-compare { border: 1px solid var(--jc-panel-line, var(--jc-line)); border-radius: var(--jc-radius); border-collapse: separate; border-spacing: 0; background: #fff; overflow: hidden; }
  .jc-compare thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: table-header-group; }
  .jc-compare tbody { display: table-row-group; }
  .jc-compare tr { display: table-row; padding: 0; border: 0; border-radius: 0; background: none; }
  .jc-compare tr + tr { margin-top: 0; }
  .jc-compare th, .jc-compare td { display: table-cell; padding: 0.625rem 0.875rem; vertical-align: baseline; }
  .jc-compare thead th { background: var(--jc-tint); font-size: 0.875rem; font-weight: 700; color: var(--jc-deep); text-align: right; }
  .jc-compare thead th:first-child { text-align: left; }
  .jc-compare th[scope="row"] { padding-bottom: 0.625rem; font-weight: 600; color: var(--jc-ink); }
  .jc-compare tbody th, .jc-compare tbody td { border-top: 1px solid var(--jc-panel-line, var(--jc-line)); }
  .jc-compare td { text-align: right; white-space: nowrap; }
  .jc-compare td::before { content: none; }
  /* the pill sits under its amount, so amounts line up in their column and a long amount cannot push the table wider than the panel */
  .jc-compare td.is-better::after { display: block; width: fit-content; margin: 0.125rem 0 0 auto; }
  .jc-next-actions { grid-template-columns: auto auto; justify-content: start; justify-items: start; align-items: center; gap: 0.5rem 1rem; }
  .jc-next-actions .jc-btn:not(.jc-btn--quiet) { width: auto; }
  .jc-worked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jc-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jc-look-actions { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .jc-kv--text > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; }
  .jc-ai, .jc-pub { padding: 1.5rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .jc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jc-stat { display: block; }
  .jc-stat + .jc-stat { border-top: 0; border-left: 1px solid var(--jc-panel-line, var(--jc-line)); }
  .jc-stat-label, .jc-stat-num, .jc-stat-note { display: block; }
  .jc-stat-num { margin-top: 0.25rem; text-align: left; }
  .jc-stat-note { margin-top: 0.25rem; }
}
@media (min-width: 64rem) {
  :where(.jc) :where(h2) { font-size: 2.125rem; }
  .jc-hero { padding: 7rem 0 2.25rem; }
  .jc-tool { padding-bottom: 5rem; }
  .jc-sec { padding: 5rem 0; }
  .jc-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .jc-calc--single { grid-template-columns: minmax(0, 1fr); }
  .jc-calc > .jc-result { position: sticky; top: var(--jc-sticky-top); }
  .jc-calc--single > .jc-result { position: static; }
  .jc-card, .jc-result { padding: 1.75rem; }
  .jc-next-actions { grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0.25rem; }
  .jc-next-actions .jc-btn:not(.jc-btn--quiet) { width: 100%; }
  .jc-next-actions .jc-btn--quiet, .jc-next-actions .jc-link { justify-self: center; }
  .jc-method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }
  .jc-look { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; }
  .jc-look-actions { grid-template-columns: 1fr; justify-content: stretch; }
}
@media (min-width: 80rem) {
  .jc-calc { gap: 2rem; }
}

/* ---------- 10. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jc-btn, .jc-add, .jc-remove, .jc-seg-opt span, .jc-route { transition: background-color .15s, border-color .15s, color .15s; }
  .jc-input, .jc-select, .jc-check input, .jc-toggle input { transition: border-color .15s, box-shadow .15s, background-color .15s; }
  .jc-toggle input::before { transition: left .15s, background-color .15s; }
  .jc-result .jc-big-num, .jc-result .jc-stat-num, .jc-result .jc-verdict { transition: opacity .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .jc *, .jc *::before, .jc *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 11. Print ---------- */
/* Paper shows the calculator only: a print heading, the inputs and the result. Everything else on the
   page is hidden unless it carries jc-print-keep. These are the only rules that touch the shared
   header and footer. Open any <details> you want printed from a beforeprint handler. */
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  body > nav, body > header, body > footer, body > a[href^="#"], #jenny-measurement-consent, #cookie-notice, #sticky-cta { display: none !important; }
  .jc { font-size: 11pt; line-height: 1.45; color: #000; }
  .jc-fine, .jc-small, .jc-hint, .jc-stat-label, .jc-stat-note, .jc-big-label, .jc-big-note, .jc-big-num small, .jc-tone, .jc-notice, .jc-notice strong, .jc-row-title, .jc-group-title, .jc-result-title, .jc-check, .jc-toggle, .jc-check small, .jc-toggle small, .jc-more > summary, .jc-range-value { font-size: 10.5pt; }
  .jc > *:not(.jc-tool):not(.jc-print-keep), .jc-bar, .jc-no-print, .jc-next, .jc-add, .jc-remove, .jc-example, .jc-updated, .jc-error-summary { display: none !important; }
  .jc-print-only { display: block; }
  .jc-print-head { margin-bottom: 8pt; padding-bottom: 6pt; border-bottom: 1pt solid #000; }
  .jc-print-head h2 { font-size: 16pt; color: #000; }
  .jc-print-head p { font-size: 10.5pt; color: #333; }
  .jc-tool { padding: 0; background: none; }
  .jc-tool > .jc-wrap { max-width: none; padding: 0; }
  .jc-calc { display: block; max-width: none; }
  .jc-card, .jc-result, .jc-result[data-tone] { padding: 0; border: 0; background: none; }
  .jc-calc > .jc-result { position: static; margin-top: 12pt; padding-top: 10pt; border-top: 1pt solid #000; border-radius: 0; }
  .jc-form, .jc-result { gap: 8pt; }
  .jc-fields, .jc-fields--2, .jc-fields--3, .jc-row-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12pt; margin-bottom: 0; }
  .jc-field, .jc-fields > .jc-field, .jc-row-fields > .jc-field { padding-bottom: 6pt; }
  .jc-label { padding-bottom: 1pt; font-size: 10.5pt; font-weight: 600; color: #333; }
  .jc-hint, .jc-more > summary small { display: none; }
  .jc-input, .jc-select { min-height: 0; padding: 2pt 0; border: 0; border-bottom: 0.75pt solid #777; border-radius: 0; background: none; box-shadow: none; color: #000 !important; font-size: 11pt; font-weight: 700; }
  .jc-affix-sym { position: static; display: inline; height: auto; color: #000; font-size: 11pt; font-weight: 700; }
  .jc-affix { display: flex; align-items: baseline; gap: 2pt; border-bottom: 0.75pt solid #777; }
  .jc-affix > .jc-input { padding-left: 0; padding-right: 0; border-bottom: 0; }
  .jc-affix--suf > .jc-affix-sym, .jc-affix--unit > .jc-affix-sym { order: 2; }
  .jc-seg { display: block; padding: 0; border: 0; }
  .jc-seg-opt { display: none; }
  .jc-seg-opt:has(input:checked) { display: block; }
  .jc-seg-opt input:checked + span { display: block; min-height: 0; padding: 2pt 0; border-bottom: 0.75pt solid #777; border-radius: 0; background: none; color: #000; font-size: 11pt; font-weight: 700; text-align: left; }
  .jc-range-scale { display: none; }
  .jc-check, .jc-toggle { min-height: 0; padding: 2pt 0; }
  .jc-check input, .jc-toggle input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jc-row { padding: 4pt 0 6pt; border: 0; border-top: 0.75pt solid #bbb; border-radius: 0; background: none; break-inside: avoid; }
  .jc-row-head { min-height: 0; margin-bottom: 3pt; }
  .jc-more { border: 0; }
  .jc-more > summary { min-height: 0; padding: 0 0 2pt; color: #000; }
  .jc-more > summary::after { content: none; }
  .jc-privacy { font-size: 10.5pt; }
  .jc-privacy::before, .jc-tone::before, .jc-notice::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .jc-big-num { font-size: 30pt; color: #000; }
  .jc-verdict { font-size: 12.5pt; }
  .jc-verdict b, .jc-verdict strong, .jc-stat-num, .jc-tone, [data-tone] .jc-tone { color: #000; }
  .jc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0.75pt solid #777; border-radius: 0; break-inside: avoid; }
  .jc-stat { display: block; padding: 6pt 8pt; }
  .jc-stat + .jc-stat { border-top: 0; border-left: 0.75pt solid #777; }
  .jc-stat-label, .jc-stat-num, .jc-stat-note { display: block; text-align: left; }
  .jc-stat-num { font-size: 15pt; }
  .jc-notice, .jc-notice--warn { border: 0.75pt solid #000; border-left-width: 3pt; border-radius: 0; background: none; break-inside: avoid; }
  .jc-notice strong, .jc-notice--warn strong { color: #000; }
  .jc-assume { border-left: 2pt solid #777; font-size: 10.5pt; color: #000; }
  .jc-compare { border: 0; border-collapse: collapse; border-radius: 0; font-size: 10.5pt; }
  .jc-compare thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: table-header-group; }
  .jc-compare tbody { display: table-row-group; }
  .jc-compare tr { display: table-row; padding: 0; border: 0; background: none; break-inside: avoid; }
  .jc-compare th, .jc-compare td { display: table-cell; padding: 3pt 6pt 3pt 0; border-top: 0.75pt solid #999; background: none !important; color: #000; text-align: right; }
  .jc-compare thead th { border-top: 0; }
  .jc-compare th:first-child { text-align: left; }
  .jc-compare td::before { content: none; }
  .jc-compare td.is-better::after { display: inline; border: 0; background: none; padding: 0; margin: 0 0 0 4pt; font-size: 10.5pt; }
  .jc a { color: #000; }
  .jc-result.is-stale .jc-big-num, .jc-result.is-stale .jc-stat-num, .jc-result.is-stale .jc-verdict, .jc-result.is-stale .jc-compare td { opacity: 1; }
}