/* =========================================================================
   Home page, design #4 "Form as hero" (picked by Priya + Ryan, 2026-10-01).
   The filled-in Form 96-1 is the first picture you see, so "we fill in the state
   forms for you" is shown before it is said. Calm, large type, no glows.
   Loaded after styles.css on index.html only; everything is scoped to .hv4 so the
   check page and the guides are not affected. Mockup source:
   ~/design-studio/benefighter/home-redesign/r1/v04.html
   ========================================================================= */

.hv4 {
  --slogan: #A8522F;          /* deep clay: passes 4.5:1 on cream as text */
  --pine-line: #BFD6C7;
  --ink-blue: #1d3a8a;        /* the "pen" colour on the example form */
  color: var(--ink);
}
.hv4 p { margin: 0; }
.hv4 h1, .hv4 h2, .hv4 h3 { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--pine-deep); letter-spacing: 0; }
.hv4 .ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv4-col { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 16px; }
.hv4-wide { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }

/* ---------- hero ---------- */
.hv4-hero { padding-top: 16px; }
.hv4-hero-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "h1" "form" "cta"; }
.hv4-hero h1 { grid-area: h1; font-size: 30px; line-height: 35px; letter-spacing: -.3px; }
.hv4 .free { position: relative; white-space: nowrap; display: inline-block; }
.hv4 .free svg { position: absolute; left: -14%; top: -12%; width: 128%; height: 130%; overflow: visible; pointer-events: none; }
.hv4 .free path { fill: none; stroke: var(--honey); stroke-width: 3; stroke-linecap: round; }

/* the paper form */
.hv4 .form-hero { grid-area: form; margin: 16px 0 0; }
.hv4 .paper { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(35,32,27,.06), 0 14px 28px -14px rgba(20,56,41,.28); padding: 12px; transform: rotate(-.8deg); }
.hv4 .f-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 0 2px 8px; border-bottom: 2px solid var(--pine); }
.hv4 .f-head span { font-size: 15px; line-height: 20px; color: var(--ink-soft); font-weight: 600; }
.hv4 .f-head b { font-family: var(--serif); font-size: 19px; line-height: 22px; color: var(--pine-deep); }
.hv4 .f-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hv4 .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 9px 7px; min-height: 54px; display: grid; align-content: start; gap: 2px; min-width: 0; }
.hv4 .cell.wide { grid-column: span 2; }
.hv4 .cell.tick { grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.hv4 .lab { font-size: 15px; line-height: 19px; color: var(--ink-soft); }
.hv4 .val { font-family: "Courier New", ui-monospace, monospace; font-weight: 700; font-size: 19px; line-height: 23px; color: var(--ink-blue); letter-spacing: -.2px; overflow-wrap: anywhere; }
.hv4 .xbox { width: 22px; height: 22px; border: 2px solid var(--ink-blue); border-radius: 3px; display: grid; place-items: center; color: var(--ink-blue); margin-top: 1px; }
.hv4 .xbox .ic { width: 16px; height: 16px; stroke-width: 3.4; }
.hv4 .stamp { position: absolute; right: 18px; bottom: 18px; transform: rotate(-6deg); border: 3px solid var(--pine); color: var(--pine);
  background: rgba(255,255,255,.94); border-radius: 8px; padding: 4px 10px; font-weight: 800; font-size: 18px; line-height: 22px; }
.hv4 .f-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 16px; line-height: 22px; color: var(--ink-soft); }
.hv4 .f-note .ic { width: 18px; height: 18px; color: var(--pine); }

.hv4-hero-cta { grid-area: cta; }
.hv4 .btn-go { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 10px 18px;
  border-radius: 999px; background: var(--honey); color: var(--pine-deep); font-size: 19px; line-height: 24px; font-weight: 800; text-decoration: none; text-align: center; }
.hv4 .btn-go:hover { background: var(--honey-deep); color: #fff; }
.hv4 .btn-go .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.hv4 .cta-note { margin-top: 8px; text-align: center; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--ink-soft); }

/* ---------- sections ---------- */
.hv4-sec { padding-top: 44px; }
.hv4 .band { background: var(--pine-tint); border-top: 1px solid var(--pine-line); border-bottom: 1px solid var(--pine-line); padding-bottom: 44px; margin-top: 44px; }
.hv4 h2 { font-size: 26px; line-height: 32px; }
.hv4 .eyebrow { display: block; font-size: 14px; line-height: 19px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9F4D2E; margin: 0 0 8px; }
.hv4 .body { font-size: 19px; line-height: 28px; margin-top: 12px; }
.hv4 .soft { color: var(--ink-soft); }
.hv4 .lede { max-width: none; font-family: var(--serif); font-size: 21px; line-height: 30px; color: var(--pine-deep); }
.hv4 .place { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 18px; line-height: 25px; font-weight: 600; color: var(--ink-soft); }
.hv4 .place .ic { width: 20px; height: 20px; color: var(--pine); }

.hv4 .btn-2 { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 22px; border-radius: 999px;
  border: 2px solid var(--pine); background: var(--white); color: var(--pine-deep); font-size: 18px; line-height: 24px; font-weight: 700; text-decoration: none; }
.hv4 .btn-2:hover { background: var(--pine-tint); color: var(--pine-deep); }

/* grouped white list (forms, programs, faq) */
.hv4 .group { margin-top: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hv4 .group > * + * { border-top: 1px solid var(--line); }
.hv4 .frow { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; font-size: 19px; line-height: 25px; font-weight: 600; }
.hv4 .frow .ic { color: var(--pine); }
ul.group, ul.freelist { list-style: none; padding: 0; }
ul.group { margin-bottom: 0; }

/* how it works: the two halves of the heading */
.hv4 .inout span { display: block; }
.hv4 .inout span + span { color: var(--pine); }
.hv4 #hdemo { margin: 20px 0 0; }

/* what "free" means */
.hv4 .free-h { font-family: var(--serif); font-size: 22px; line-height: 28px; font-weight: 700; color: var(--pine-deep); }
.hv4 .freelist { margin: 14px 0 0; display: grid; gap: 12px; }
.hv4 .freelist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 19px; line-height: 27px; }
.hv4 .freelist .ic { color: var(--pine); margin-top: 2px; }

/* story */
.hv4 .u { background-image: linear-gradient(var(--honey), var(--honey)); background-size: 100% 4px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; font-weight: 700; }

/* the money */
.hv4 .hv4-stats { margin-top: 20px; display: grid; gap: 24px; }
.hv4 .hv4-stat { border-left: 4px solid var(--honey); padding-left: 14px; }
.hv4 .num { font-family: var(--sans); font-weight: 800; font-size: 38px; line-height: 42px; letter-spacing: -.5px; color: var(--pine-deep); font-variant-numeric: tabular-nums; }
.hv4 .lbl { margin-top: 4px; font-size: 19px; line-height: 26px; font-weight: 700; }
.hv4 .sub { margin-top: 4px; font-size: 18px; line-height: 26px; color: var(--ink-soft); }

/* nurse navigator (as the live site had it: photo, badge, three lines of copy) */
.hv4 .np-photo { width: 100%; height: 220px; border-radius: 16px; background: var(--pine-tint); border: 1px solid var(--pine-line); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.hv4 .np-photo img { height: 210px; width: auto; max-width: none; display: block; }
.hv4 .badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--pine-line); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--pine-deep); }
.hv4 .badge .ic { width: 18px; height: 18px; color: var(--pine); stroke-width: 2.6; }
.hv4 .hv4-np-copy { margin-top: 20px; }

/* programs */
.hv4 .prow { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; margin: 0; }
.hv4 .pin { width: 40px; height: 40px; border-radius: 50%; background: var(--pine); color: var(--paper); display: grid; place-items: center; }
.hv4 .pin .ic { width: 20px; height: 20px; }
.hv4 .p-name { display: block; font-size: 19px; line-height: 26px; font-weight: 700; color: var(--pine-deep); }
.hv4 .p-worth { display: block; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--slogan); }
.hv4 .p-desc { display: block; margin-top: 4px; font-size: 18px; line-height: 26px; color: var(--ink-soft); }

/* faq */
.hv4 summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 12px 14px;
  font-size: 19px; line-height: 26px; font-weight: 700; color: var(--pine-deep); cursor: pointer; }
.hv4 summary::-webkit-details-marker { display: none; }
.hv4 summary .ic { color: var(--pine); transition: transform .2s ease-out; }
.hv4 details[open] summary .ic { transform: rotate(45deg); }
.hv4 details .ans { padding: 0 14px 18px; display: grid; gap: 10px; font-size: 18px; line-height: 27px; }
.hv4 details .ans a { color: var(--pine-soft); }

/* closing: the bottom of a form */
.hv4 .close-sheet { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--pine); border-radius: 6px; padding: 20px 16px 22px; box-shadow: var(--shadow-soft); }
.hv4 .close-sheet .btn-go { margin-top: 18px; }
.hv4-last { padding-bottom: 48px; }

/* the phone sticky button is gone (the header button stays on screen), so drop the room styles.css keeps for it */
@media (max-width: 720px) { body.home-v4 { padding-bottom: 0; } }

/* footer mark beside the name */
.footer-brand .brand-name { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand .brand-name svg { width: 32px; height: 32px; flex: none; }

/* ---------- bigger screens ---------- */
@media (min-width: 700px) {
  .hv4-col, .hv4-wide { padding-inline: 22px; }
  .hv4-hero h1 { font-size: 40px; line-height: 46px; }
  .hv4 h2 { font-size: 32px; line-height: 38px; }
  .hv4 .btn-go { display: inline-flex; width: auto; padding-inline: 34px; }
  .hv4 .cta-note { text-align: left; }
  .hv4 .close-sheet { padding: 28px 28px 30px; }
  .hv4 .hv4-stats { grid-template-columns: repeat(3, 1fr); }
  .hv4 .hv4-np { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: center; }
  .hv4 .np-photo { height: 280px; }
  .hv4 .np-photo img { height: 268px; }
  .hv4 .hv4-np-copy { margin-top: 0; }
}
@media (min-width: 960px) {
  .hv4-hero { padding-top: 44px; }
  .hv4-hero-grid { grid-template-columns: 1.05fr .95fr; grid-template-areas: "h1 form" "cta form"; column-gap: 48px; align-items: start; }
  .hv4-hero h1 { font-size: 50px; line-height: 57px; align-self: end; }
  .hv4 .form-hero { margin: 0; }
  .hv4 .paper { padding: 16px; }
  .hv4 .hv4-hero-cta .btn-go { margin-top: 28px; }
  .hv4 .programs-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .hv4 .programs-grid > * + * { border-top: 0; }
  .hv4 .programs-grid > * { border-top: 1px solid var(--line); }
  .hv4 .programs-grid > :nth-child(-n+2) { border-top: 0; }
  .hv4 .programs-grid > :nth-child(odd) { border-right: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .hv4 summary .ic { transition: none; }
}