/* Design and build page. Used by the page that scripts/build_design_and_build.py builds.
   The page reuses the service, area and guide styles; these are the few rules it adds. */

/* lists of whole sentences read better in one column */
.dnb-list.gd-list { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 680px; }

/* the six steps sit inside the main column: three across, two across on a phone */
.dnb-steps.svx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 28px; border-top: 0; margin-top: 6px; }
.dnb-steps .svx-step, .dnb-steps .svx-step + .svx-step { padding: 18px 0 0; border-left: 0; border-top: 2px solid #556B2F; }
@media (max-width: 700px) {
    .dnb-steps.svx-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 18px; }
}

/* the two tables */
.dnb-compare td { width: 36.5%; }
.dnb-compare .gd-u { font-weight: 600; color: #1A1A1A; }
.dnb-prices td.gd-num { width: 30%; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the line under a system price: where it stands on the grant, shown on every screen size */
.dnb-prices .dnb-when { display: block; margin-top: 2px; font-size: .85rem; font-weight: 400; color: #6E6E68; white-space: normal; }
@media (max-width: 700px) {
    .dnb-compare td, .dnb-prices td.gd-num { width: auto; }
    .dnb-compare td { padding-bottom: 8px; }
}

/* headings wrap in even lines; the two "who does what" boxes each keep their own height */
.ar-page h1, .ar-page h2 { text-wrap: balance; }
.ar-page .sp-fit-grid { align-items: start; }

/* the enquiry form at the foot of the page: the home page contact block without its section padding */
.dnb-enquiry { padding-top: 8px; padding-bottom: 96px; }
.dnb-enquiry .contact-layout { align-items: start; }
.dnb-enquiry .contact-text { margin-top: 0; max-width: 520px; }
.dnb-enquiry .contact-detail svg { flex: 0 0 20px; }
.dnb-enquiry .contact-detail div p a { color: #556B2F; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
    .dnb-enquiry { padding-bottom: 64px; }
}