/* The booking funnel: apply, book, booked, manage, not-yet (templates/sections/_funnel.html).
   site.css draws these pages. When the application started on a trade landing page, the
   page also carries .lp and loads landing.css, which sets that page's typeface and colors;
   the rules under .lp below fit the funnel's own pieces to it: bold sans headlines instead of
   the serif, hairlines and the pale sage wash, squarer corners. */

.q .booker{margin-top:32px}
.q .sub a,.booked-how a,.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.q .why{margin-top:8px;font-size:15px}
.booked-how{margin-top:16px;font-size:16px;color:var(--muted)}
.q-actions form{display:contents}
.flow-top>.wrap{width:100%}                     /* the logo sits on the left on every funnel page */
[hidden]{display:none!important}                /* .btn's display mustn't show a hidden button (apply's Continue) */
.q .inp[aria-invalid="true"],.q .inp[aria-invalid="true"]:focus{border-color:var(--red)}   /* the contact field an error is about */

/* in the landing page's look */
.lp.flow{--soft:#fff}                           /* white insets on the sage panels */
.lp .flow-top{background:rgba(255,255,255,.92)}
.lp .q .qn{font:600 13px/1 var(--font);letter-spacing:0;color:var(--accent)}
.lp .q h1,.lp .booked-hero h1{font-family:var(--font);font-weight:700;letter-spacing:-.025em;line-height:1.12}
.lp .q h1{font-size:clamp(28px,3.6vw,40px)}
.lp .booked-hero h1{max-width:18em;font-size:clamp(32px,4.2vw,52px)}
.lp h1 em{font-style:normal;color:var(--muted)}
.lp .eyebrow{font:600 15px/1.3 var(--font);color:var(--accent)}
.lp .q .sub,.lp .booked-how{color:var(--muted)}
.lp .opt{border-radius:12px}
.lp .opt[aria-pressed="true"]{background:var(--wash)}
.lp .opt .key{border-radius:6px;font-family:var(--font);font-weight:600}
.lp .inp{border-radius:10px}
.lp .inp:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(30,43,38,.08)}
.lp .consent input{accent-color:var(--ink)}
.lp .when{border-radius:10px;background:var(--wash)}
.lp .mini{border-radius:16px;background:var(--wash)}
.lp .bring b{font-family:var(--font);font-weight:600}
.lp .booked-hero{padding:64px 0 32px}
.lp .sect{padding:48px 0 96px}
.lp .booker{border-radius:16px;box-shadow:none;border-color:var(--line-2)}
.lp .linkish{color:var(--muted)}
.lp .linkish:hover{color:var(--ink)}

@media (max-width:560px){
  .lp .booked-hero{padding:40px 0 24px}
}

/* The section headings on /book and /booked are h2s under the page's h1 (the outline goes h1, h2),
   drawn the way they were as h3s: the booker's "Free audit" keeps .bk-title (site.css), and the
   booked page's panel headings (.mini-h) keep the panel heading's size. */
.mini h2.mini-h{font:600 1.0625rem/1.25 var(--font);letter-spacing:-.02em;margin-bottom:12px}
.lp .mini h2.mini-h{max-width:none;font-size:1.125rem;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.lp h2.bk-title{max-width:none;font-size:1.125rem;font-weight:650;line-height:1.05;letter-spacing:-.01em}