/* Insurance landing page (/insurance): offer details, eligibility, and the
   application form. Form styles here were moved out of index.css when the form
   left the homepage dialog. */

.insurance-page {
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--shell);
  margin-inline: auto;
  padding-block: clamp(36px, 5vw, 72px) var(--sp-section);
}

/* ── Hero ─────────────────────────────────────────────────── */
.ins-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
@media (min-width: 860px) { .ins-hero { grid-template-columns: 1.5fr 1fr; gap: 48px; } }

.ins-hero__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
}
.ins-hero__title em { color: var(--red); font-style: normal; }
/* Dark theme leans on white rather than a big block of red. */
body.theme-dark .ins-hero__title em { color: var(--ink); }
.ins-hero__sub { margin: 12px 0 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.ins-hero__lead { margin: 16px 0 0; max-width: 56ch; color: var(--ink-body); font-size: 1.04rem; line-height: 1.65; }
.ins-hero__lead strong { color: var(--ink); }
.ins-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.ins-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(28px, 4vw, 40px) 24px;
  text-align: center;
  color: #fff;
  background: #1f9d55;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(31, 157, 85, .45);
}
.ins-amount__value { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; line-height: 1.1; }
.ins-amount__label { font-size: .9rem; color: rgba(255, 255, 255, .82); }

/* ── Eligibility ──────────────────────────────────────────── */
.ins-eligibility { margin-top: var(--sp-section); }
.ins-eligibility__head { margin-bottom: 24px; }
.ins-eligibility__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.1;
  color: var(--red);
}
body.theme-dark .ins-eligibility__title { color: var(--ink); }
.ins-eligibility__card {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.ins-eligibility__item {
  display: flex;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: flex-start;
}
.ins-eligibility__item + .ins-eligibility__item {
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--rule);
}
.ins-eligibility__num {
  display: grid; place-items: center;
  flex: none;
  width: 42px; height: 42px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
}
.ins-eligibility__req { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.55rem); line-height: 1.3; }
.ins-eligibility__req strong { color: var(--red); }
.ins-eligibility__note { margin: 10px 0 0; color: var(--ink-muted); line-height: 1.6; }

/* ── Apply (form) ─────────────────────────────────────────── */
.ins-apply {
  margin-top: var(--sp-section);
  scroll-margin-top: 90px;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.ins-apply__head { max-width: 60ch; }
.ins-apply__head h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; }
.ins-apply__head p { margin: 12px 0 0; color: var(--ink-muted); line-height: 1.6; }

.insurance-form { margin-top: clamp(24px, 4vw, 36px); }
.insurance-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.insurance-fieldset { margin: 0 0 24px; padding: 0; border: 0; }
.insurance-fieldset:last-of-type { margin-bottom: 0; }
.insurance-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.insurance-field { display: flex; flex-direction: column; }
.insurance-field--wide { grid-column: 1 / -1; }
.insurance-field > label {
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.req { color: var(--red); font-weight: 700; }

/* Boxed inputs — scoped to the form so the site's underline inputs are untouched. */
.insurance-form input:not([type="file"]),
.insurance-form textarea {
  padding: 12px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.insurance-form input:not([type="file"]):focus,
.insurance-form textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-wash);
  outline: none;
}

/* Upload area — a clear, tappable dropzone; the native input is hidden. */
.insurance-form input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.insurance-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.insurance-dropzone:hover,
.insurance-form input[type="file"]:focus-visible + .insurance-dropzone { border-color: var(--red); }
.insurance-field.is-selected .insurance-dropzone {
  border-style: solid;
  border-color: #247a3c;
  background: color-mix(in srgb, #247a3c 8%, transparent);
}
.insurance-dropzone-icon {
  display: grid; place-items: center;
  flex: none;
  width: 40px; height: 40px;
  color: var(--red);
  background: var(--red-wash);
  border-radius: 50%;
}
.insurance-dropzone-icon svg { width: 20px; height: 20px; }
.insurance-dropzone-text { font-size: .92rem; color: var(--ink-body); line-height: 1.4; }
.insurance-dropzone-text strong { color: var(--ink); }
.insurance-dropzone-text small { display: block; margin-top: 2px; font-size: .78rem; color: var(--ink-muted); }

.insurance-file-help,
.insurance-form-status,
.insurance-submit-status,
.insurance-privacy-note { margin: 10px 0 0; color: var(--ink-muted); font-size: .82rem; line-height: 1.55; }
.insurance-form-status { min-height: 1.25em; margin-top: 4px; }
.insurance-form-status.is-error { color: var(--red); }
.insurance-form-status.is-valid { color: #247a3c; font-weight: 600; }
.insurance-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
/* Detail on the left (one line on web), submit on the right. */
.insurance-privacy-note { flex: 1; max-width: none; margin: 0; }
.insurance-form-actions .btn { flex: none; }
.insurance-form-actions .btn--primary:hover { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.insurance-form-actions .btn:disabled { cursor: wait; opacity: .68; transform: none; }
/* Locked-in success state after a successful submission. */
.insurance-form-actions .btn.is-submitted,
.insurance-form-actions .btn.is-submitted:disabled {
  background: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
  opacity: 1;
  cursor: default;
}
.insurance-form-actions .btn.is-submitted svg { flex: none; }
.insurance-submit-status { min-height: 1.4em; color: #247a3c; font-weight: 600; }
.insurance-submit-status.is-error { color: var(--red); }

/* ── Help ─────────────────────────────────────────────────── */
.ins-help { margin-top: var(--sp-section); }
.ins-help__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 40px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.ins-help__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; }
.ins-help__text { margin: 8px 0 0; color: var(--ink-muted); }
.ins-help__nums { display: flex; flex-wrap: wrap; gap: 12px; }
.ins-help__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: #161616;
  border-radius: 100px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.ins-help__num svg { width: 20px; height: 20px; flex: none; color: #25d366; transition: color .3s var(--ease); }
.ins-help__num:hover,
.ins-help__num:focus-visible {
  transform: translateY(-2px);
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .4);
  outline: none;
}
.ins-help__num:hover svg,
.ins-help__num:focus-visible svg { color: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .insurance-form-actions { align-items: stretch; flex-direction: column-reverse; gap: 16px; }
  .insurance-form-actions .btn { width: 100%; }
  .ins-help__banner { flex-direction: column; align-items: stretch; }
  .ins-help__nums { width: 100%; }
  .ins-help__num { flex: 1; justify-content: center; }
}

@media (max-width: 640px) {
  .ins-hero__actions .btn { width: 100%; }
  .insurance-form-grid { grid-template-columns: 1fr; gap: 20px; }
  .insurance-field--wide { grid-column: auto; }

  /* Mobile-only: dial the whole page's type down a notch. */
  .ins-hero__title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .ins-hero__sub { font-size: .9rem; }
  .ins-hero__lead { font-size: .94rem; }
  .ins-amount__value { font-size: 1.7rem; }
  .ins-amount__label { font-size: .8rem; }
  .ins-eligibility__title { font-size: 1.45rem; }
  .ins-eligibility__req { font-size: 1.02rem; }
  .ins-eligibility__note { font-size: .88rem; }
  .ins-apply__head h2 { font-size: 1.35rem; }
  .ins-apply__head p { font-size: .88rem; }
  .insurance-field > label { font-size: .9rem; }
  .insurance-dropzone-text { font-size: .86rem; }
  .ins-help__title { font-size: 1.25rem; }
  .ins-help__text { font-size: .9rem; }
  .ins-help__num { font-size: .95rem; }
}