/* van.html - Van finance (WEB-066 step 2, register S269). House variables only; same rules as site-v2.css. */

.vf-measure{max-width:66ch}
.vf-tip{margin-top:var(--mcf-s4);max-width:52ch}
.hero .btn-apply,.vf-form-actions .btn-apply,.page-close .btn-apply{flex-direction:column;align-items:flex-start;gap:2px;height:auto;min-height:48px;padding-block:var(--mcf-s3);text-align:left;line-height:1.25}
.btn-apply b{font-weight:600}
.btn-apply span{font-size:var(--mcf-size-small);font-weight:500;opacity:.9}

/* Donnie and his van, moving (assets/illustrations/donnie.css; pages/van.js plays the round) */
.vf-scene{width:100%;max-width:560px;margin-inline:auto;cursor:pointer}
.vf-scene svg{display:block;width:100%;height:auto}

/* The three ways, side by side; on a phone the table scrolls inside its own box */
.vf-table-wrap{overflow-x:auto;border:1px solid var(--mcf-line);border-radius:var(--mcf-r-card);background:var(--mcf-card)}
.vf-table{width:100%;min-width:560px;font-size:var(--mcf-size-table);line-height:1.45}
.vf-table th,.vf-table td{padding:var(--mcf-s4);text-align:left;vertical-align:top;border-bottom:1px solid var(--mcf-line-soft)}
.vf-table thead th{font-weight:600;color:var(--mcf-ink);background:var(--mcf-page)}
.vf-table tbody th{font-weight:600;color:var(--mcf-grey-strong);width:22%}
.vf-table tbody tr:last-child th,.vf-table tbody tr:last-child td{border-bottom:0}

/* The two examples */
.vf-example{background:var(--mcf-page);border-radius:var(--mcf-r-card);padding:var(--mcf-s6)}
.band-grey .vf-example{background:var(--mcf-card)}
.vf-example h3{font-size:var(--mcf-size-heading);font-weight:600;margin-bottom:var(--mcf-s3)}
.vf-example p,.vf-example li{line-height:1.55}
.vf-example p + p,.vf-example ol + p,.vf-example ul + p,.vf-example p + ol,.vf-example p + ul{margin-top:var(--mcf-s3)}
.vf-example ol,.vf-example ul{padding-left:1.25em;display:flex;flex-direction:column;gap:var(--mcf-s2)}

/* The checklist and calculator */
.vf-form{max-width:760px;background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s7)}
.vf-form fieldset + fieldset{border-top:1px solid var(--mcf-line-soft);padding-top:var(--mcf-s6)}
.vf-form .check{align-items:flex-start;min-height:44px;padding-block:var(--mcf-s2);line-height:1.45}
.vf-form .check input{margin-top:2px;flex-shrink:0}
.vf-note{font-size:var(--mcf-size-small);color:var(--mcf-grey);line-height:1.5}
.vf-calc h3{font-size:var(--mcf-size-section);font-weight:600;letter-spacing:-.01em}
.vf-seg label{min-height:44px}
.vf-out:empty{display:none}
.vf-out{background:var(--mcf-page);border-radius:var(--mcf-r-inner);padding:var(--mcf-s5)}
.vf-out dl{display:grid;grid-template-columns:1fr auto;gap:var(--mcf-s2) var(--mcf-s5);font-variant-numeric:tabular-nums}
.vf-out dt{color:var(--mcf-grey-strong)}
.vf-out dd{margin:0;font-weight:600;text-align:right}
.vf-out p{margin-top:var(--mcf-s3);font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.vf-print-head{display:none}
@media (max-width:640px){.vf-form{padding:var(--mcf-s5)}.vf-example{padding:var(--mcf-s5)}.hero .btn-apply,.vf-form-actions .btn-apply,.page-close .btn-apply{width:100%}}

/* Printed (or saved as a PDF): only the checklist, under Donnie, his van and how to reach us */
@media print{
  body.site > *:not(main),main > *:not(#ready),#ready > .wrap > *:not(form),.vf-form-actions,.vf-calc .actions,.mock{display:none !important}
  #ready{padding:0;background:none}
  .vf-form{padding:0;max-width:none}
  .vf-print-head{display:flex;align-items:center;gap:var(--mcf-s5);margin-bottom:var(--mcf-s5);padding-bottom:var(--mcf-s4);border-bottom:1px solid var(--mcf-line)}
  .vf-print-head img{width:260px;height:auto}
  .vf-print-head div{display:flex;flex-direction:column;gap:2px;font-size:var(--mcf-size-small)}
  .vf-print-head b{font-size:var(--mcf-size-section)}
  .vf-form fieldset{break-inside:avoid}
}