/* CONTACT page (/contact) — step 11.11. Source: design/contact-preview.html <style> (unchanged except below).
   Only var(--fv-*) tokens; every class starts with "ct-"; fv- components only scoped under ct-.
   Laravel changes: honeypot uses .fv-hp from main.css (preview .ct-hp removed);
   .ct-form .fv-status (server error line) spans both columns. */

/* 1 hero */
.ct-hero{padding-block:88px 72px}
.ct-hero .fv-h1{margin-block:24px 24px;max-width:14ch}
[dir=rtl] .ct-hero .fv-h1{max-width:20ch}
.ct-hero .fv-lead{max-width:56ch}

/* 2 form + what happens next */
.ct-main{padding-block:72px var(--fv-section)}
.ct-main__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:80px;align-items:start}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;padding:40px;scroll-margin-top:calc(var(--fv-header-h) + 24px)}
.ct-form .fv-field--full,.ct-form .fv-btn,.ct-form__note,.ct-form__title,.ct-form .fv-status{grid-column:1/-1}
.ct-form__title{margin-bottom:4px}
.ct-form__note{font-size:12.5px;color:var(--fv-muted)}
.ct-form__note a{color:var(--fv-green);font-weight:600}
.ct-done{padding:48px 40px}
.ct-form[hidden]{display:none}
.ct-done[hidden]{display:none}
.ct-done{scroll-margin-top:calc(var(--fv-header-h) + 24px)}
.ct-done__tick{width:48px;height:48px;border-radius:50%;background:var(--fv-green);color:var(--fv-white);display:grid;place-items:center;margin-bottom:28px}
.ct-done .fv-h3{margin-bottom:14px}
.ct-done p + p{margin-top:10px}
.ct-done .fv-link{margin-top:28px}

.ct-next__title{margin-block:18px 36px}
.ct-next .fv-steps{grid-template-columns:minmax(0,1fr);gap:34px}
.ct-next .fv-steps::before{inset-inline:21px auto;top:22px;bottom:60px;width:1.5px;height:auto}
.ct-next .fv-steps::after{display:none}
.ct-next .fv-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;padding-inline-end:0}
.ct-next .fv-step__node{grid-row:1/3;margin-bottom:0}
.ct-next .fv-step .fv-h4{align-self:center;font-size:20px}
[dir=rtl] .ct-next .fv-step .fv-h4{font-size:17px}
.ct-next .fv-step p{grid-column:2;margin-top:4px}

/* 3 fit */
.ct-fit__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ct-fit .fv-h2{margin-top:22px;max-width:12ch}
[dir=rtl] .ct-fit .fv-h2{max-width:18ch}
.ct-fit__label{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-muted);padding-bottom:14px}
[dir=rtl] .ct-fit__label{letter-spacing:0;font-size:13px}
.ct-fit .fv-check li{align-items:flex-start}
.ct-fit .fv-check svg{margin-top:5px}
.ct-no li svg{color:var(--fv-muted)}

/* 4 other channels */
.ct-ch__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.ct-ch .fv-h2{margin-block:22px 20px;max-width:12ch}
[dir=rtl] .ct-ch .fv-h2{max-width:18ch}
.ct-ch .fv-row{grid-template-columns:150px minmax(0,1fr) 20px;padding-inline:4px}
.ct-ch .fv-row__title{font-size:22px}
[dir=rtl] .ct-ch .fv-row__title{font-family:var(--fv-font-fa);font-weight:700;font-size:18px}
.ct-ch .fv-row__tag{font-size:15px;color:var(--fv-ink);margin-bottom:2px;overflow-wrap:anywhere}
.ct-ch .fv-row__tag bdi{unicode-bidi:isolate}

/* 5 suppliers */
.ct-sup__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:80px;align-items:end}
.ct-sup .fv-h2{margin-block:22px 20px;max-width:16ch}
[dir=rtl] .ct-sup .fv-h2{max-width:22ch}
.ct-sup__text{color:var(--fv-on-ink-muted);max-width:52ch}
.ct-sup__actions{display:grid;gap:18px;justify-items:start}
.ct-sup__link{color:var(--fv-green-soft);font-weight:600;font-size:15px;border-bottom:1px solid transparent}
.ct-sup__link:hover{border-color:var(--fv-green-soft)}

@media (max-width:1080px){
  .ct-main__grid,.ct-ch__grid,.ct-sup__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .ct-fit__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
  .ct-fit__head{grid-column:1/-1}
}
@media (max-width:600px){
  .ct-hero{padding-block:56px 48px}
  .ct-main{padding-top:40px}
  .ct-form{grid-template-columns:minmax(0,1fr);padding:22px}
  .ct-done{padding:32px 22px}
  .ct-fit__grid{grid-template-columns:minmax(0,1fr)}
  .ct-ch .fv-row{grid-template-columns:minmax(0,1fr)}
  .ct-sup__actions .fv-btn{width:100%}
}