/* The 34% Check (/34-check): Isaac's layout (inputs left, the number right, the offer underneath),
   drawn in the site's fonts and colours, as the Health Check page is. Classes are prefixed c34- so
   they never meet the site's own (.btn and friends). */
.c34 {
  --c34-bg: #f7f8fa;
  --c34-surface: #ffffff;
  --c34-ink: #0C0C0C;
  --c34-muted: #555555;
  --c34-line: #e0e0e0;
  --c34-green: #516947;
  --c34-green-deep: #1e281a;
  --c34-green-soft: #CFEAD7;
  --c34-risk: #A32D2D;
  --c34-risk-soft: #FCEBEB;
  --c34-display: 'AgeoM', 'Ageo', sans-serif;
  --c34-strong: 'Ageo', sans-serif;
  --c34-body: 'Bellota-Text', sans-serif;
  background: var(--c34-bg);
  color: var(--c34-ink);
  font-family: var(--c34-body);
  font-size: 16px;
  line-height: 1.6;
}
.c34 *, .c34 *::before, .c34 *::after { box-sizing: border-box; }
.c34 [hidden] { display: none !important; }
.c34-wrap { max-width: 1040px; margin: 0 auto; padding: 20px 16px 64px; }

.c34-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--c34-line); }
.c34-eyebrow { font-family: var(--c34-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c34-green); }

.c34-hero { padding: 32px 0 24px; max-width: 720px; }
.c34-hero h1 { font-family: var(--c34-strong); font-size: clamp(28px, 4.6vw, 42px); line-height: 1.15; margin: 8px 0 14px; color: var(--c34-ink); text-wrap: balance; }
.c34-hero p { margin: 0; color: var(--c34-muted); max-width: 62ch; }
.c34-hero strong { color: var(--c34-ink); font-family: var(--c34-display); font-weight: normal; }

.c34-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border: 1px solid #e8e8e8; border-radius: 14px; overflow: hidden; background: var(--c34-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
@media (max-width: 760px) { .c34-panel { grid-template-columns: 1fr; } }
.c34-inputs { padding: 24px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--c34-line); min-width: 0; }
@media (max-width: 760px) { .c34-inputs { border-right: 0; border-bottom: 1px solid var(--c34-line); } }
.c34-label { display: block; font-family: var(--c34-display); font-size: 14px; margin-bottom: 6px; }
.c34-hint { font-size: 13px; color: var(--c34-muted); margin-top: 6px; }
.c34-money { display: flex; align-items: center; border: 1px solid var(--c34-line); border-radius: 10px; background: var(--c34-bg); overflow: hidden; }
.c34-money span { padding: 0 12px; font-family: var(--c34-display); font-size: 22px; color: var(--c34-muted); }
.c34-money input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--c34-ink); font-family: var(--c34-display); font-size: 24px; padding: 10px 12px 10px 0; font-variant-numeric: tabular-nums; outline: none; }
.c34-money:focus-within { border-color: var(--c34-green); box-shadow: 0 0 0 3px var(--c34-green-soft); }
.c34-seg { display: flex; border: 1px solid var(--c34-line); border-radius: 2rem; overflow: hidden; width: max-content; }
.c34-seg button { border: 0; background: transparent; color: var(--c34-muted); padding: 8px 16px; font-family: var(--c34-display); font-size: 14px; cursor: pointer; }
.c34-seg button[aria-pressed="true"] { background: var(--c34-green); color: #fff; }
.c34-seg button:focus-visible { outline: 2px solid var(--c34-green); outline-offset: -2px; }
.c34-slider-row { display: flex; align-items: center; gap: 14px; }
.c34 input[type=range] { flex: 1; min-width: 0; accent-color: var(--c34-green); }
.c34-pct { font-family: var(--c34-display); font-size: 28px; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }

.c34-results { padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.c34-total-label { font-family: var(--c34-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c34-muted); }
.c34-total { font-family: var(--c34-strong); font-size: clamp(34px, 6vw, 52px); line-height: 1.05; color: var(--c34-risk); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.c34-total small { display: block; font-family: var(--c34-body); font-size: 14px; color: var(--c34-muted); margin-top: 8px; }
.c34-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.c34-table td { padding: 9px 0; border-top: 1px solid var(--c34-line); vertical-align: top; }
.c34-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--c34-display); font-size: 18px; white-space: nowrap; }
.c34-sub { display: block; font-size: 13px; color: var(--c34-muted); }
.c34-table tr.c34-sum td { border-top: 2px solid var(--c34-ink); font-family: var(--c34-display); }
.c34-table tr.c34-sum td:last-child { color: var(--c34-risk); }
.c34-annual { background: var(--c34-risk-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.c34-annual b { font-family: var(--c34-display); font-weight: normal; font-size: 17px; }

.c34-offer { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .c34-offer { grid-template-columns: 1fr; } }
.c34-offer h2 { font-family: var(--c34-strong); font-size: 26px; margin: 0 0 10px; line-height: 1.2; text-wrap: balance; }
.c34-offer p { margin: 0 0 12px; color: var(--c34-muted); }
.c34-cta { background: linear-gradient(135deg, #516947 0%, #181818 100%); color: #fff; border-radius: 14px; padding: 22px 24px; }
.c34-cta h3 { margin: 0 0 6px; font-family: var(--c34-strong); font-size: 22px; color: #fff; }
.c34-cta p { color: rgba(255, 255, 255, .85); margin: 0 0 14px; font-size: 15px; }
.c34-contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c34-addr { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; padding: 9px 12px; font-size: 15px; user-select: all; word-break: break-all; }
.c34-btn { border: 1px solid #fff; border-radius: 2rem; padding: 10px 18px; font-family: var(--c34-display); font-size: 14px; cursor: pointer; background: #fff; color: var(--c34-green-deep); text-decoration: none; display: inline-block; }
.c34-btn.c34-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.c34-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.c34-toast { font-size: 13px; color: rgba(255, 255, 255, .85); min-height: 1.2em; margin-top: 8px; }

.c34-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 760px) { .c34-steps { grid-template-columns: 1fr; } }
.c34-step { border-top: 3px solid var(--c34-green); padding-top: 12px; }
.c34-step b { display: block; font-family: var(--c34-display); font-weight: normal; font-size: 15px; margin-bottom: 4px; }
.c34-step p { margin: 0; font-size: 14px; color: var(--c34-muted); }
.c34-why { margin-top: 36px; max-width: 72ch; }
.c34-why h2 { font-family: var(--c34-strong); font-size: 22px; margin: 0 0 10px; }
.c34-why p { margin: 0 0 10px; font-size: 15px; }
.c34-fine { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--c34-line); font-size: 12.5px; color: var(--c34-muted); display: flex; flex-direction: column; gap: 6px; }
.c34-fine a { color: var(--c34-green); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .c34-total { transition: color .2s; } }