/* trade.html only: taxi and private hire. House variables only. */

/* The moving strip: vehicles as words with a small icon, not logos */
.tr-veh{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--mcf-s4);width:300px}
.tr-veh>.ico{flex:none;color:var(--mcf-grey-strong)}
.tr-veh-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.tr-veh-text b{font-size:var(--mcf-size-heading);font-weight:600;line-height:1.3}
.tr-veh-text span{font-size:var(--mcf-size-small);color:var(--mcf-grey)}
.tr-veh:hover .tr-veh-text b{color:var(--mcf-blue)}

.tr-strip .strip-head h2{max-width:none}

/* The three facts inside the big panel */
.tr-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mcf-s5);border-top:1px solid var(--mcf-line);padding-top:var(--mcf-s5)}
.tr-facts dt{font-size:var(--mcf-size-small);color:var(--mcf-grey);margin-bottom:var(--mcf-s1)}
.tr-facts dd{font-size:var(--mcf-size-section);font-weight:600;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.hl-big h3{font-size:var(--mcf-size-title);letter-spacing:-.015em;margin-bottom:var(--mcf-s3)}
.hl-big p{max-width:52ch}

/* What lenders ask for, the case and guide cards and the close are shared with the finance page: site-v2.css (WEB-058) */

@media (max-width:640px){
  .tr-facts{grid-template-columns:1fr;gap:var(--mcf-s3)}
  .tr-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--mcf-s4)}
  .tr-facts dd{font-size:var(--mcf-size-heading);text-align:right}
  .tr-veh{width:260px}
}

/* Round two: headings sit closer to their lines (the hero drawing became the film's cover, WEB-057) */
.tr-lede{margin-top:var(--mcf-s2);max-width:52ch}
.hl-big h3{line-height:1.2}
@media (max-width:900px){
  .tr-hero{padding-bottom:var(--mcf-s8)}
}

/* Round three: the big panel spreads its parts so no empty gap opens between text and facts */
.hl-big{display:flex;flex-direction:column;justify-content:space-between;gap:var(--mcf-s6)}
.hl-big p{font-size:var(--mcf-size-lead,var(--mcf-size-heading));line-height:1.5;color:var(--mcf-grey-strong)}
.hl-big h3{margin-bottom:var(--mcf-s3)}
@media (min-width:901px){.tr-facts dd{font-size:var(--mcf-size-title);line-height:1.15}.tr-facts dt{margin-bottom:var(--mcf-s2)}.hl-big h3{margin-bottom:var(--mcf-s4)}}

/* The taxi finance calculator (pages/trade.js): the van page's calculator look (van.css), on its own here */
.vf-form{max-width:760px;background:var(--mcf-card);border-radius:var(--mcf-r-card);padding:var(--mcf-s7)}
.vf-note{font-size:var(--mcf-size-small);color:var(--mcf-grey);line-height:1.5}
.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-form .vf-form-actions .btn{width:100%}}

/* Printed (or saved as a PDF): only the calculator, under Donnie 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:72px;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}
}