@charset "UTF-8";
/* HostsPilot — Contact landing page */

.contact-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
  overflow: hidden;
}
.contact-bg { position: absolute; inset: 0; pointer-events: none; }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  /* start, not center: the two columns are different heights, and centring them
     leaves the headline floating halfway down the page next to a tall form */
  align-items: start;
  position: relative;
  z-index: 1;
}

/* The form and the data notice are one unit - the notice explains the form.
   It used to sit outside .container, which made it a flex sibling of the whole
   grid and parked it in the empty space to the right of the card. */
.contact-col { display: flex; flex-direction: column; }

.contact-note {
  margin: 16px 4px 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: #6b7280;
  text-align: left;
}
.contact-note a { color: inherit; text-decoration: underline; }
.contact-note strong { color: #4b5563; font-weight: 600; }

/* Left column */
.contact-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 28px;
  transition: var(--transition);
}
.contact-back:hover { color: var(--blue); }

.contact-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 18px 0 20px;
}
.contact-sub {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 480px;
}

.contact-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.contact-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
}
.cb-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: rgba(16,185,129,0.12);
  color: var(--green);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.contact-email {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: var(--transition);
}
.contact-email:hover { color: var(--indigo); }

/* Right column — form card */
.contact-card {
  background: var(--bg-card);
  border: 1px solid rgba(30,134,201,0.2);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(30,134,201,0.08);
  position: relative;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,134,201,0.5), rgba(70,185,124,0.5), transparent);
}

.contact-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.contact-card-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.contact-card-sub { font-size: 13px; color: var(--text-muted); }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-page { padding: 100px 0 48px; }
}
@media (max-width: 600px) {
  .contact-card { padding: 28px 22px; }
}


/* ============================================================================
   MOBILE: the form has to be the first thing on screen
   ----------------------------------------------------------------------------
   Measured 27 Aug on a 375px viewport: the submit button sat at 1,266px and the
   form itself began at 1,009px, behind a 710px column of title, benefits list
   and a "what happens next" block. Nine phone visitors reached this page that
   day and none of them submitted.

   The benefits list and the "what happens next" block are hidden on phones,
   not rewritten: they are a desktop reader's material, and on a 51-second
   median visit they only stand between the visitor and the one field that
   matters. Both are untouched on desktop.
   ========================================================================== */
@media (max-width: 768px) {
  .contact-inner { row-gap: 16px; }

  /* order only works between siblings, and .contact-title lives INSIDE
     .contact-left - so the column keeps its place and is stripped instead.
     Title and one line of context stay; everything heavier goes. */
  .contact-left .section-tag,
  .contact-left .contact-back { display: none; }

  .contact-title { font-size: 25px; line-height: 1.2; margin: 0 0 8px; }
  .contact-sub   { font-size: 15px; line-height: 1.5; margin: 0; }

  .contact-benefits,
  .contact-next,
  .contact-email { display: none; }

  .contact-page { padding-top: 84px; }
}