/* JS West design system — tokens from Tim's new-site design elements (2026-07-13).
   No JavaScript: conditional sections are pure CSS :has(). */

:root {
  --navy: #0B2A47;
  --blue: #1273BE;
  --blue-dark: #0E5E9C;
  --red: #C2362B;
  --ink: #14222E;
  --gray: #566571;
  --tint: #E7F1F9;
  --line: #E4EAEF;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--tint);
  line-height: 1.55;
}

h1, h2 { font-family: 'Spectral', Georgia, serif; font-weight: 600; }

/* ── Utility bar + nav ─────────────────────────────────────────────── */
.utility-bar {
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  padding: 8px 24px;
}
.utility-phone { font-weight: 700; }

.site-nav { background: var(--white); border-bottom: 1px solid var(--line); }
.nav-inner {
  max-width: 960px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; }
.logo-img { height: 44px; width: auto; display: block; }
.nav-tag { color: var(--gray); font-size: 14px; font-weight: 600; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, #123A5F 70%, #16456E 100%);
  color: var(--white);
  padding: 56px 24px 48px;
}
.hero-inner { max-width: 960px; margin: 0 auto; }
.hero h1 { font-size: 40px; margin: 10px 0 12px; }
.hero-sub { max-width: 560px; color: #C9DAEA; margin: 0; }
.rule-red  { height: 3px; background: var(--red); }
.rule-blue { height: 3px; background: var(--blue); }

/* Eyebrow labels */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue); margin: 0 0 6px;
}
.eyebrow-light { color: #7FB3DC; }
.eyebrow-red { color: var(--red); }

/* ── Page + cards ──────────────────────────────────────────────────── */
.page { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }

.step-indicator {
  color: var(--gray); font-size: 13px; letter-spacing: 0.5px;
  margin: 0 0 16px; text-align: center;
}
.step-current { color: var(--navy); font-weight: 700; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 8px;
  background: var(--blue); color: var(--white); border-radius: 50%;
  font-size: 11px; letter-spacing: 0; vertical-align: -4px;
}
.section-hint { color: var(--gray); font-size: 14px; margin: -10px 0 18px; }

/* Available to screen readers, invisible on screen. Used for a <legend> whose
   question is already shown as a visible heading — the group still needs a label
   announced, but printing it twice reads as a stutter. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(11, 42, 71, 0.08);
  padding: 28px 32px;
  margin-bottom: 24px;
  /* square corners on purpose — no SaaS rounding */
}
.card h2 { font-size: 24px; margin: 0 0 20px; color: var(--navy); }
.subhead { font-weight: 700; color: var(--navy); margin: 24px 0 8px; }

/* ── Fields ────────────────────────────────────────────────────────── */
.field { margin-bottom: 16px; border: 0; padding: 0; }
.field label, .field legend { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.opt { color: var(--gray); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 0;
  font: inherit; color: var(--ink); background: var(--white);
}
input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; }
.field-row .field-sm { flex: 0 0 110px; }

fieldset.field { margin: 0 0 18px; }
.radio { display: block; font-weight: 400; font-size: 15px; padding: 6px 0; cursor: pointer; }
.radio input { margin-right: 10px; accent-color: var(--blue); }

/* Radio options that carry their own explanation (the tank/meter fallback on
   Step 2). Flex so the help text aligns under the TITLE instead of wrapping back
   under the radio button — plain .radio is display:block with an inline input and
   can't do that. The description sits inside the <label>, so the whole block is a
   click target, which matters most on a phone.

   ⚠ The `.field label` qualifier is LOAD-BEARING, not decoration. These labels sit
   inside `<fieldset class="field">`, and line ~98 has
   `.field label { display: block }` — specificity (0,1,1). A bare
   `.radio-detail { display: flex }` is (0,1,0) and LOSES to it no matter where it
   appears in the file, so the flex layout silently never applies and the help text
   wraps back under the radio button. Caught 2026-08-11 by reading getComputedStyle
   in a real browser: the markup, the copy and every text assertion look correct
   either way. Note this is also why `.radio { font-weight: 400 }` above is
   out-specified by `.field label { font-weight: 600 }` — pre-existing, untouched. */
.field label.radio-detail {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  font-weight: 400; margin-bottom: 0;
}
/* Zero the inherited `.radio input { margin-right: 10px }` — with flex `gap`
   doing the spacing, leaving it would double the indent. */
.field label.radio-detail input { margin: 5px 0 0; flex: none; }
.radio-title { display: block; font-weight: 600; }
.radio-help { display: block; color: var(--gray); font-size: 14px; margin-top: 2px; }
/* Trailing hint under a radio group. Not .section-hint: that one's negative top
   margin is tuned to sit under a heading and would pull this up into the options. */
.radio-footnote { color: var(--gray); font-size: 14px; margin: 12px 0 0; }
.checkbox-line { margin: 18px 0; font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 16px;
  padding: 13px 28px; border-radius: 0; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--blue); color: var(--white); border: 1px solid var(--blue); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--blue); border: 1px solid var(--blue); }
.btn-ghost:hover { background: var(--tint); }

.submit-row { text-align: center; margin-top: 8px; }
.submit-note { color: var(--gray); font-size: 13px; max-width: 480px; margin: 12px auto 0; }

/* ── Status cards ──────────────────────────────────────────────────── */
.error-card { border-left: 4px solid var(--red); }
.error-line { color: var(--red); margin: 4px 0; }
.match-card { border-left: 4px solid var(--blue); background: var(--tint); }
.match-line { margin: 0; color: var(--navy); font-weight: 600; }

.meta-box { background: var(--tint); border: 1px solid var(--line); padding: 14px 18px; margin: 18px 0; }
.meta-box p { margin: 4px 0; }
.meta-k {
  display: inline-block; min-width: 160px; color: var(--gray);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.pilot-note { color: var(--gray); font-size: 13px; }

/* Step 2 read-only recap of Step 1 (copy review N-15). */
.summary p { margin: 0 0 10px; }
.summary-k {
  display: block; color: var(--gray);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.summary-edit { margin: 18px 0 0; font-size: 14px; }
.summary-edit a { color: var(--blue); }
pre.payload {
  background: var(--navy); color: #C9DAEA; padding: 16px;
  overflow-x: auto; font-size: 12px; max-height: 480px;
}

/* ── Conditional visibility — pure CSS, no JS ──────────────────────── */
/* Questions that hinge on residential-vs-commercial stay hidden until the
   customer picks one (copy review N-11, 2026-07-30). Previously .res-only was
   visible on first load and only hid once Commercial was chosen, so a
   commercial customer watched three questions appear and then vanish. */
.res-only { display: none; }
#signup:has(#ctype-residential:checked) .res-only { display: block; }
/* Commercial-only blocks show only when Commercial is selected. */
.com-only { display: none; }
#signup:has(#ctype-commercial:checked) .com-only { display: block; }
/* Co-applicant fields show only when "Yes" is selected (and residential). */
.coappl-only { display: none; }
#signup:has(#coappl-yes:checked):has(#ctype-residential:checked) .coappl-only { display: block; }
/* #10551 flip: mailing address block shows when "same as service" is unchecked. */
#mail-block { display: none; }
#signup:has(#mail_same_as_svc:not(:checked)) #mail-block { display: block; }

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: #C9DAEA; padding: 40px 24px; text-align: center; }
.footer-inner { max-width: 720px; margin: 0 auto; }
.footer-fine { font-size: 13px; color: #8FA9C2; }
.medallion {
  width: 96px; height: 96px; margin: 0 auto 16px;
  border: 2px solid var(--red); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
/* Two lines as of 2026-08-05 — the 26px ".medallion-year" line ("117") was dropped,
   and its rule with it. Sized up 8px -> 9px so the remaining pair still carries the
   circle, with the tracking eased 2px -> 1.2px to pay for it: "FAMILY OWNED" is the
   wider line and at 8px/2px it already came within ~2px of the circle's inner chord.
   Net result is larger type AND more edge clearance than before. The extra gap is
   what fills the vertical space the year line used to occupy. */
.medallion-top, .medallion-bottom { font-size: 9px; letter-spacing: 1.2px; font-weight: 700; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .hero h1 { font-size: 30px; }
  .card { padding: 20px 18px; }
  .field-row { flex-direction: column; gap: 0; }
  .field-row .field-sm { flex: 1; }
  .utility-bar { font-size: 11px; }
}