/* 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) + 60 * var(--p)) calc(104 * var(--u)) calc(120 * var(--u) + 24 * var(--p))}
.ct-kick{font:var(--eb-font);letter-spacing:-.01em}
.ct h2{margin-top:calc(20 * var(--u) + 8 * var(--p));font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-display);line-height:1.1;letter-spacing:var(--ls)}
.ct-lead{margin-top:calc(48 * var(--u) + 16 * var(--p));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) + 12 * var(--p));margin-top:calc(48 * var(--u) + 20 * var(--p));padding-top:calc(40 * var(--u) + 16 * var(--p));border-top:1px solid rgba(32,29,29,.14);max-width:calc(640 * var(--p))}
.ct-perks li{display:grid;grid-template-columns:auto 1fr;column-gap:calc(12 * var(--p));row-gap:calc(10 * var(--p));align-items:center}
.ct-perks svg{width:calc(22 * var(--p));height:calc(22 * var(--p));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ct-perks b{font-family:var(--xh);font-weight:var(--fw);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) + 8 * var(--p));padding:calc(40 * var(--u) + 16 * var(--p));border-radius:calc(16 * var(--p));background:var(--card-light)}
.ct-card h3{margin-bottom:calc(8 * var(--u) + 4 * var(--p));font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h3);line-height:1.05;letter-spacing:var(--ls)}
.ct-f{display:grid;row-gap:calc(8 * var(--p))}
.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) + 8 * var(--p)) calc(14 * var(--u) + 10 * var(--p));border:1px solid transparent;border-radius:calc(10 * var(--p));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) + 4 * var(--p));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) + 40 * var(--p));padding-bottom:max(calc(56px * var(--f)), calc(80 * var(--u)))}
/* below 1280 px parts stay fixed, so screen height decides; from 1280 up everything scales with width, so the proportion decides */
@media (min-width:821px) and (max-width:1279px) and (max-height:860px), (min-width:1280px) and (min-aspect-ratio:1920/860){
  .ct h2{font-size:var(--fs-display)}
  .ct-lead{margin-top:calc(24 * var(--p))}
  .ct-perks{margin-top:calc(24 * var(--p));padding-top:calc(20 * var(--p))}
  .ct-card{row-gap:calc(12 * var(--p));padding:calc(28 * var(--p)) calc(32 * var(--p))}
  .ct-card h3{margin-bottom:2px;font-size:max(24px, calc(40 * var(--u)))}
  .ct-f{row-gap:calc(5 * var(--p))}
  .ct-f input,.ct-f textarea{padding:calc(10 * var(--p)) calc(14 * var(--p))}
  .ct-f textarea{height:calc(2 * 1.3em + 20 * var(--p));min-height:0}
  .ct-btn{margin-top:calc(4 * var(--p))}
}

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