/* Section: contact (the page footer) */
/* ---------- contact (the white circle of the comparison opens into it). Layout of the reference, page styles:
   big heading + lead + two promises on the left, the form in a card on the right ---------- */
.ct{--bg:var(--paper);--ink-2:var(--ink-soft);color:var(--ink);display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:calc(120 * var(--u));align-items:center;min-height:100vh;padding:calc(120 * var(--u) + 60px) calc(104 * var(--u)) calc(120 * var(--u) + 24px)}
.ct-kick{font:var(--eb-font);letter-spacing:-.01em}
.ct h2{margin-top:calc(20 * var(--u) + 8px);font-family:var(--xh);font-weight:400;font-size:max(64px, calc(150 * var(--u)));line-height:.95;letter-spacing:-.05em}
.ct-lead{margin-top:calc(48 * var(--u) + 16px);max-width:17em;font-family:var(--xh);font-size:var(--fs-lead);line-height:1.2;letter-spacing:-.015em}
.ct-lead span,.ct-card h3 span{color:rgba(32,29,29,.4)}
.ct-perks{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(40 * var(--u) + 12px);margin-top:calc(48 * var(--u) + 20px);padding-top:calc(40 * var(--u) + 16px);border-top:1px solid rgba(32,29,29,.14);max-width:640px}
.ct-perks li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:10px;align-items:center}
.ct-perks svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-perks b{font-family:var(--xh);font-weight:400;font-size:var(--fs-body-l);letter-spacing:-.015em}
.ct-perks li>span{grid-column:1 / -1;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2)}
.ct-card{display:grid;row-gap:calc(16 * var(--u) + 8px);padding:calc(40 * var(--u) + 16px);border-radius:16px;background:var(--card-light)}
.ct-card h3{margin-bottom:calc(8 * var(--u) + 4px);font-family:var(--xh);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.03em}
.ct-f{display:grid;row-gap:8px}
.ct-f>span{font-size:calc(var(--fs-body) * .85);line-height:1.2}
.ct-f input,.ct-f textarea{width:100%;padding:calc(12 * var(--u) + 8px) calc(14 * var(--u) + 10px);border:1px solid transparent;border-radius:10px;background:var(--paper);font:inherit;font-size:var(--fs-body);line-height:1.3;color:var(--ink);outline:0;resize:vertical;transition:border-color .3s, background .3s}
.ct-f input::placeholder,.ct-f textarea::placeholder{color:rgba(32,29,29,.38)}
.ct-f input:focus,.ct-f textarea:focus{border-color:var(--ink);background:#fff}
.ct-f.err input,.ct-f.err textarea{border-color:var(--red)}
.ct-btn{justify-content:space-between;width:100%;color:var(--paper);margin-top:calc(8 * var(--u) + 4px);border:0;cursor:pointer;font:inherit;font-size:var(--fs-body)}
.ct-msg{font-size:calc(var(--fs-body) * .85);color:var(--ink-2)}
.ct-msg:empty{display:none}
@media (max-width:820px){
  .ct{grid-template-columns:1fr;row-gap:40px;padding:72px 16px 88px}   /* room under the card at the end of the page */
  .ct-perks{grid-template-columns:1fr;row-gap:24px}
  .ct-card{padding:24px 18px}
}
/* Inside the comparison scene (desktop) the block is exactly one viewport tall, so the card must fit between the nav
   and the bottom edge. Even out the padding, and on laptop heights tighten the card so it never touches the bottom. */
.cmp-blk .ct{padding-top:calc(90 * var(--u) + 40px);padding-bottom:max(56px, calc(80 * var(--u)))}
@media (min-width:821px) and (max-height:860px){
  .ct h2{font-size:max(56px, calc(120 * var(--u)))}
  .ct-lead{margin-top:24px}
  .ct-perks{margin-top:24px;padding-top:20px}
  .ct-card{row-gap:12px;padding:28px 32px}
  .ct-card h3{margin-bottom:2px;font-size:max(24px, calc(40 * var(--u)))}
  .ct-f{row-gap:5px}
  .ct-f input,.ct-f textarea{padding:10px 14px}
  .ct-f textarea{height:calc(2 * 1.3em + 20px);min-height:0}
  .ct-btn{margin-top:4px}
}

/* honeypot field for bots: out of view, out of the tab order */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}