/* Shared components. Colors come from tokens.css only. Turquoise is used for interactive accents, charts and highlights, never for body text on light. */

/* ---- small text ---- */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--turquoise);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--teal-text); }
.lead { font-size: var(--fs-lg); color: var(--on-dark-soft); max-width: 36rem; line-height: 1.6; }
.lead--ink { color: var(--ink-soft); }
.note { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--on-dark-soft); }
.micro { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3.25rem; padding: 0 var(--space-5);
  background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:hover { border-color: var(--ink); background: color-mix(in srgb, var(--deep-forest) 5%, transparent); }
.btn--primary { background: var(--deep-forest); color: var(--ivory); border-color: transparent; }
.btn--primary:hover { background: var(--forest); border-color: transparent; }
.on-dark .btn--primary, .btn--accent { background: var(--turquoise); color: var(--deep-forest); border-color: transparent; }
.on-dark .btn--primary:hover, .btn--accent:hover { background: var(--turquoise-hover); border-color: transparent; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--deep-forest) 5%, transparent); }
.on-dark .btn--ghost { color: var(--ivory); border-color: var(--line-dark); }
.on-dark .btn--ghost:hover { border-color: var(--ivory); background: color-mix(in srgb, var(--ivory) 8%, transparent); }
.btn--lg { min-height: 3.75rem; padding: 0 var(--space-6); font-size: var(--fs-lg); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn__arrow { font-weight: 400; }

/* ---- banners ---- */
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--line); background: var(--ivory-soft); }
.banner--warning { background: var(--note-bg); border-color: var(--stone); }
.placeholder { color: var(--ink-soft); font-style: italic; }

/* ---- wizard ---- */
.wizard {
  background: var(--ivory-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: var(--space-5); min-height: 30rem; display: flex; flex-direction: column;
}
.wizard form { display: flex; flex-direction: column; flex: 1; }
.progress { margin-block-end: var(--space-5); }
.progress__text { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-block-end: var(--space-2); }
.progress__text b { color: var(--ink); font-variant-numeric: tabular-nums; }
.progress__track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--stone) 45%, transparent); overflow: hidden; }
.progress__fill { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: var(--forest); transition: width var(--t-step) var(--ease); }

.step { flex: 1; display: flex; flex-direction: column; }
.step[data-dir="fwd"] { animation: step-in-fwd var(--t-step) var(--ease); }
.step[data-dir="back"] { animation: step-in-back var(--t-step) var(--ease); }
@keyframes step-in-fwd { from { opacity: 0; transform: translateX(-18px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(18px); } }
.step__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin-block-end: var(--space-3); max-width: 22ch; }
.step__title:focus { outline: none; }
.step__intro { color: var(--ink-soft); max-width: 34rem; }
.step__body { flex: 1; margin-block: var(--space-3) var(--space-4); }
.step__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.step__nav .btn--primary { min-width: 11rem; }

/* ---- financial summary ---- */
.summary { position: sticky; top: var(--space-4); background: var(--forest); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow); }
.summary__title { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; color: var(--turq-light); margin: 0 0 var(--space-3); }
.summary__list { margin: 0; display: grid; gap: var(--space-3); }
.summary__row { padding-block-end: var(--space-3); border-bottom: 1px solid var(--line-dark); }
.summary__row:last-child { padding-block-end: 0; border-bottom: 0; }
.summary__row dt { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.summary__row dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.summary__row small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--on-dark-soft); line-height: 1.4; margin-block-start: var(--space-1); }
.summary__row--estimate dd { color: var(--ivory); }
.summary__row.is-updated { animation: flash 700ms var(--ease); }
@keyframes flash { from { background: color-mix(in srgb, var(--turquoise) 28%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--turquoise) 28%, transparent); } to { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.summary__empty { margin: 0; font-size: var(--fs-sm); color: var(--on-dark-soft); }

/* ---- fields ---- */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { display: block; padding: 0; margin-block-end: var(--space-2); font-weight: 600; color: var(--ink); }
.field__help { margin: 0 0 var(--space-3); font-size: var(--fs-base); color: var(--ink-soft); }
.field__error { margin: var(--space-2) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--error); }
.field__error:not([hidden])::before { content: "! "; font-weight: 800; }
.field__reveal { margin-block-start: var(--space-3); }

.input-affix { position: relative; display: flex; align-items: center; }
.input-affix__sym { position: absolute; inset-inline-start: var(--space-3); color: var(--ink-soft); font-weight: 600; pointer-events: none; }
.input-affix .input { padding-inline-start: 2.5rem; }
.input {
  flex: 1; min-width: 0; min-height: 3.25rem; padding: 0 var(--space-3); font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:hover { border-color: var(--ink); }
.input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquoise) 35%, transparent); outline: 2px solid transparent; }
.input:disabled { background: var(--ivory); color: var(--ink-soft); border-style: dashed; }
.input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.step .input { min-height: 4.25rem; font-size: var(--fs-xl); font-weight: 600; max-width: 28rem; }
.step .input-affix__sym { font-size: var(--fs-lg); }
.step .input-affix .input { padding-inline-start: 3rem; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.choice, .check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.choice {
  position: relative; min-height: 4rem; padding: var(--space-3) var(--space-4); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border-color: var(--forest); background: var(--ivory-soft); box-shadow: inset 0 0 0 1.5px var(--forest); font-weight: 600; }
.choice:has(input:checked)::after { content: "✓"; margin-inline-start: auto; color: var(--forest); font-weight: 800; }
.choice:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.choice input, .check input { width: 1.375rem; height: 1.375rem; accent-color: var(--forest); flex: none; }
.check { min-height: 3rem; font-weight: 500; }
.choices[aria-invalid], .field:has([aria-invalid="true"]) .choice { border-color: var(--error); }

/* ---- results ---- */
.results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }
.results__head h2 { margin: 0; max-width: 24ch; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
#results-heading:focus { outline: none; }
.results__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-5); align-items: start; }

.payment { background: var(--forest); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-dark); }
.payment__label { margin: 0 0 var(--space-1); color: var(--on-dark-soft); font-weight: 600; display: flex; gap: var(--space-2); align-items: center; }
.payment__value { margin: 0; font-size: var(--fs-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--ivory); font-variant-numeric: tabular-nums; transition: opacity var(--t-fast) var(--ease); }
.payment__value--none { font-size: var(--fs-2xl); }
.payment__note { margin: var(--space-2) 0 0; color: var(--on-dark-soft); }
.tag { display: inline-block; padding: 0.1rem 0.6rem; border: 1px solid currentColor; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; }
.tag--estimate { color: var(--turq-light); }
.tag--input { color: var(--on-dark-soft); }

.chart { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-top: 1px solid var(--line-dark); }
.chart__title { margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark-soft); }
.bar { display: flex; height: 0.875rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ivory) 12%, transparent); }
.bar__seg { display: block; width: var(--w, 0%); min-width: 0; transition: width 420ms var(--ease); }
.bar__seg--equity { background: var(--stone); }
.bar__seg--loan { background: var(--turquoise); }
.bar__seg--payment { background: var(--turquoise); }
.bar__seg--commit { background: repeating-linear-gradient(135deg, var(--stone) 0 4px, var(--stone-dark) 4px 8px); }
.legend { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--fs-sm); color: var(--on-dark-soft); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend b { color: var(--ivory); font-variant-numeric: tabular-nums; }
.swatch { width: 0.875rem; height: 0.875rem; border-radius: 3px; flex: none; }
.swatch--equity { background: var(--stone); }
.swatch--loan, .swatch--payment { background: var(--turquoise); }
.swatch--commit { background: repeating-linear-gradient(135deg, var(--stone) 0 3px, var(--stone-dark) 3px 6px); }
.swatch--free { background: color-mix(in srgb, var(--ivory) 12%, transparent); border: 1px solid var(--line-dark); }

.stats-group { margin-block-end: var(--space-4); }
.stats-group__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--ivory); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.stat { background: var(--forest); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: var(--space-3); }
.stat--estimate { border-color: color-mix(in srgb, var(--turquoise) 55%, transparent); }
.stat dt { font-size: var(--fs-sm); color: var(--on-dark-soft); margin-block-end: var(--space-1); line-height: 1.35; }
.stat dd { margin: 0; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ivory); }

.controls { border: 1px solid var(--line-dark); border-radius: var(--radius); padding: var(--space-3) var(--space-4) var(--space-4); margin: var(--space-4) 0 0; background: color-mix(in srgb, var(--ivory) 4%, transparent); }
.controls legend { padding-inline: var(--space-2); font-weight: 700; }
.slider + .slider { margin-block-start: var(--space-3); }
.slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.slider__value { font-weight: 800; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; color: var(--ivory); }
.slider input[type="range"] { width: 100%; min-height: 2.75rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to left, var(--turquoise) var(--fill, 50%), color-mix(in srgb, var(--ivory) 22%, transparent) var(--fill, 50%)); }
.slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ivory) 22%, transparent); }
.slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--turquoise); }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -0.6875rem; border-radius: 50%; background: var(--ivory); border: 4px solid var(--turquoise); box-shadow: 0 2px 6px rgb(0 0 0 / 30%); }
.slider input[type="range"]::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--ivory); border: 4px solid var(--turquoise); }

.explain { color: var(--on-dark-soft); margin-block: var(--space-4) var(--space-3); max-width: 40rem; }
.disclaimer {
  margin: 0; padding: var(--space-3) var(--space-4); background: var(--note-bg); color: var(--ink);
  border: 1px solid var(--stone); border-inline-start: 6px solid var(--turquoise); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.6;
}
.results .banner { background: var(--forest); border-color: var(--line-dark); color: var(--ivory); }

/* ---- contact ---- */
.contact__head { margin-block-end: var(--space-4); }
.contact__head h2 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
.contact__card { background: var(--ivory-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-5); }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { margin-block-start: var(--space-3); }
.consent .field__help { margin: var(--space-1) 0 0; padding-inline-start: calc(1.375rem + var(--space-3)); font-size: var(--fs-sm); }
.reassure { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--ivory); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-soft); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4); }
#contact-form .fields { margin-block-end: 0; }
.status { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--error-bg); border: 1.5px solid var(--error); color: var(--error-text); font-weight: 600; }
.status::before { content: "! "; font-weight: 800; }
.success { padding: var(--space-4); border-radius: var(--radius); background: var(--success-bg); border: 1.5px solid var(--forest); color: var(--deep-forest); font-weight: 600; }
.success::before { content: "✓ "; font-weight: 800; }
.success:focus { outline: 3px solid var(--c-focus); outline-offset: 3px; }

[hidden] { display: none !important; }

/* ---- the preview component (js/preview.js), the example calculator of the landing page. The section around it, .preview-section, is page layout (client story.css). ---- */
.preview { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--forest); box-shadow: var(--shadow-dark); }
.preview__controls > .tag { margin: 0 0 var(--space-3); }
.preview__assumptions { margin: 0 0 var(--space-4); color: var(--on-dark-soft); font-size: var(--fs-sm); }
.micro--dark { color: var(--on-dark-soft); margin-block-start: var(--space-3); }
.preview__payment { margin: 0 0 var(--space-3); font-size: var(--fs-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ivory); }
.preview .bar + .bar { margin-block-start: var(--space-2); }
.bar--thin { height: 0.5rem; }
.preview .stats { margin-block-start: var(--space-3); }
.preview .stat { background: color-mix(in srgb, var(--deep-forest) 45%, transparent); }

/* ---- scroll reveals (hidden start states only once js/motion.js is ready) ----
   The transition lives on the revealed state only, so adding .motion-ready never makes anything fade out. Images are revealed by
   opening a clip on the <img>, not on the observed element: an element that is clipped away completely is never "intersecting". */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(24px); }
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.75s var(--ease) var(--d, 0ms), transform 0.75s var(--ease) var(--d, 0ms); }
.motion-ready [data-reveal="image"] { opacity: 1; transform: none; }
.motion-ready [data-reveal="image"] img { clip-path: inset(0 0 100% 0); }
.motion-ready [data-reveal="image"].is-in img { clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease) var(--d, 0ms), transform 1.8s var(--ease) var(--d, 0ms); }
.motion-ready [data-reveal="image"] img:not([data-parallax-img]) { transform: scale(1.1); }
.motion-ready [data-reveal="image"].is-in img:not([data-parallax-img]) { transform: scale(1); }

/* ---- micro-interactions ---- */
.btn { will-change: transform; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--deep-forest) 28%, transparent); }
.on-dark .btn--primary:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--turquoise) 30%, transparent); }
.btn--primary:active, .btn:active { transform: translateY(1px) scale(0.99); box-shadow: none; }
.btn__arrow { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(-5px); }
.btn[disabled]::before { content: ""; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.choice:has(input:checked)::after { animation: pop 0.3s var(--ease); }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.25); } }
.success::before { display: inline-block; animation: pop 0.45s var(--ease); }
.slider input[type="range"]::-webkit-slider-thumb { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--turquoise) 28%, transparent); }
.slider input[type="range"]::-moz-range-thumb { transition: transform var(--t-fast) var(--ease); }
.slider input[type="range"]:active::-moz-range-thumb { transform: scale(1.18); }
.slider input[type="range"]:focus-visible { outline-offset: 2px; }
.results__grid .payment { transition: box-shadow var(--t-step) var(--ease); }