/* Lead form v4. Standalone rather than appended to form.css because form.css
   still styles the older multi-step forms on the inner pages, and the homepage
   no longer loads any of that markup — bundling it here would ship a few KB of
   selectors with nothing to match. */
/* ============================================================
   LEAD FORM v4 — inline #hcd-form
   Buttons all the way down. Everything here assumes a thumb, not
   a mouse: 48px minimum hit targets, one column on phones, and no
   keyboard until the contact step.
   ============================================================ */

.hcdf-wrap{
  max-width:620px;
  margin:0 auto;
  background:rgba(255,255,255,0.02);
  border:1px solid rgb(255 255 255 / 0.09);
  border-radius:18px;
  padding:var(--space-7) var(--space-6);
}

/* Progress: one dot per step in the path the visitor is actually walking.
   The scheduling step is spliced in only if chosen, so the bar can grow by one
   — that is honest, and better than a fixed count that lies about the length. */
/* Completion bar. Green deliberately — the site's cyan is everywhere else on
   this dialog (buttons, focus rings), so a green fill reads as "progress" rather
   than "another control". Starts at 20%, set from form-v4.js. */
.hcdf-bar{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--color-border,#2a2a3a);
  overflow:hidden;
}
.hcdf-bar__fill{
  display:block;
  height:100%;
  width:20%;
  border-radius:999px;
  background:var(--color-accent-green,#00e676);
  transition:width .3s ease;
}
.hcdf-bar__pct{
  font-size:0.75rem;
  font-weight:700;
  color:var(--color-accent-green,#00e676);
  min-width:34px;
  text-align:right;
}
.hcdf-progress{
  display:flex;
  align-items:center;
  gap:10px;
  /* Room for the dialog's close button, which sits in the top-right corner of
     the same sheet — without this the 100%-label runs underneath it. */
  margin:0 44px var(--space-6) 0;
}

/* Only the active step exists. Hiding with display:none rather than opacity
   keeps hidden inputs out of the tab order without managing tabindex by hand. */
.hcdf-step{display:none;}
.hcdf-step.is-active{display:block;animation:hcdfIn .28s ease both;}
@keyframes hcdfIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .hcdf-step.is-active{animation:none;}
}

.hcdf-q{
  font-family:'Space Grotesk',var(--font-display);
  font-size:clamp(1.25rem,3.2vw,1.65rem);
  font-weight:700;letter-spacing:-0.02em;line-height:1.2;
  margin:0 0 var(--space-2);color:#fff;text-wrap:balance;
}
.hcdf-hint{
  margin:0 0 var(--space-5);
  font-size:0.93rem;line-height:1.55;color:var(--color-text-muted);
}

.hcdf-opts{display:flex;flex-direction:column;gap:10px;}
/* The industry list is nine short labels; one per row wastes a whole screen. */
.hcdf-opts--tight{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.hcdf-choice{
  display:flex;align-items:center;
  width:100%;min-height:52px;
  padding:13px 16px;
  text-align:left;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(255 255 255 / 0.11);
  border-radius:12px;
  color:var(--color-text);
  font-size:1rem;font-weight:600;line-height:1.3;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .1s ease;
}
.hcdf-opts--tight .hcdf-choice{justify-content:center;text-align:center;font-size:0.95rem;padding:12px 8px;}
.hcdf-choice:hover{background:rgba(255,255,255,0.06);border-color:rgb(255 255 255 / 0.22);}
.hcdf-choice:active{transform:scale(0.985);}
.hcdf-choice:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.hcdf-choice.is-selected{
  background:rgba(0,191,255,0.11);
  border-color:rgba(0,191,255,0.6);
  color:#fff;
}

.hcdf-nav{
  display:flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-6);flex-wrap:wrap;
}
.hcdf-back{
  background:none;border:0;padding:10px 2px;
  color:var(--color-text-muted);font-size:0.93rem;font-weight:600;
  cursor:pointer;min-height:44px;
}
.hcdf-back:hover{color:#fff;}
.hcdf-back:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:6px;}
/* Continue pushes right so Back and Continue are never adjacent — they were
   getting mis-tapped at the bottom of a phone screen. */
.hcdf-continue{margin-left:auto;min-height:48px;}

.hcdf-textarea{
  width:100%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(255 255 255 / 0.11);
  border-radius:12px;
  padding:13px 14px;
  color:var(--color-text);
  font:inherit;font-size:1rem;line-height:1.5;
  resize:vertical;
}
.hcdf-textarea:focus{outline:none;border-color:rgba(0,191,255,0.6);}

.hcdf-field{margin-bottom:var(--space-4);}
.hcdf-label{
  display:block;margin-bottom:6px;
  font-size:0.88rem;font-weight:600;color:var(--color-text);
}
.hcdf-req{color:#ff6b6b;font-weight:700;}
.hcdf-opt{
  color:var(--color-text-muted);font-weight:500;font-size:0.82em;
  margin-left:4px;
}
.hcdf-input{
  width:100%;min-height:50px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(255 255 255 / 0.11);
  border-radius:12px;
  padding:12px 14px;
  color:var(--color-text);
  /* 16px minimum, or iOS Safari zooms the page on focus and the visitor is
     suddenly scrolled sideways mid-form. */
  font-size:16px;
}
.hcdf-input:focus{outline:none;border-color:rgba(0,191,255,0.6);}
.hcdf-input::placeholder{color:rgba(255,255,255,0.32);}

.hcdf-error{
  margin:var(--space-4) 0 0;
  font-size:0.9rem;line-height:1.5;color:#ff8080;
}

/* Consent */
.hcdf-consent{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(255 255 255 / 0.11);
  border-radius:12px;
  cursor:pointer;
  font-size:0.87rem;line-height:1.55;color:var(--color-text);
}
.hcdf-consent input{
  width:20px;height:20px;flex:0 0 20px;margin-top:1px;
  accent-color:var(--color-primary);cursor:pointer;
}
.hcdf-consent-fine{
  display:block;margin-top:7px;
  font-size:0.8rem;color:var(--color-text-muted);
}

.hcdf-actions{
  display:flex;flex-direction:column;gap:11px;
  margin-top:var(--space-5);
}
.hcdf-primary{width:100%;min-height:54px;font-size:1.05rem;}
.hcdf-alt{
  width:100%;min-height:48px;
  padding:12px 14px;
  /* Balanced so the label breaks into two even lines instead of dropping the
     last word (and the emoji with it) onto a line of its own. */
  text-wrap:balance;
  line-height:1.35;
  background:transparent;
  border:1px solid rgb(255 255 255 / 0.16);
  border-radius:12px;
  color:var(--color-text);
  font-size:0.96rem;font-weight:600;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease;
}
.hcdf-alt:hover{background:rgba(255,255,255,0.05);border-color:rgb(255 255 255 / 0.3);}
.hcdf-alt:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
/* The decline path is deliberately still a real button, just quieter. It is not
   a dead end and it should not look like a punishment. */
.hcdf-alt--quiet{border-color:transparent;color:var(--color-text-muted);font-weight:500;}
.hcdf-alt--quiet:hover{color:#fff;}

/* Calendar */
.hcdf-cal{
  border:1px solid rgb(255 255 255 / 0.1);
  border-radius:14px;padding:var(--space-4);
}
.hcdf-calhead{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-3);
}
.hcdf-callabel{font-weight:700;color:#fff;font-size:0.98rem;}
.hcdf-calnav{
  width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgb(255 255 255 / 0.1);
  color:var(--color-text);cursor:pointer;font-size:1rem;
}
.hcdf-calnav:hover{background:rgba(255,255,255,0.09);}
.hcdf-caldow,.hcdf-calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.hcdf-dowlabel{
  text-align:center;font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--color-text-muted);padding-bottom:6px;
}
.hcdf-day{
  aspect-ratio:1;min-height:38px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.03);
  border:1px solid transparent;border-radius:9px;
  color:var(--color-text);font-size:0.88rem;font-weight:600;
  cursor:pointer;
}
.hcdf-day:hover:not(.is-disabled){background:rgba(255,255,255,0.09);}
.hcdf-day.is-today{border-color:rgba(0,191,255,0.35);}
.hcdf-day.is-selected{background:var(--color-primary);color:#04121c;}
.hcdf-day.is-disabled{opacity:0.24;cursor:default;}

.hcdf-slotslabel{
  margin:var(--space-5) 0 var(--space-3);
  font-size:0.9rem;font-weight:700;color:#fff;
}
.hcdf-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.hcdf-slot{
  min-height:44px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgb(255 255 255 / 0.11);
  border-radius:10px;
  color:var(--color-text);font-size:0.9rem;font-weight:600;cursor:pointer;
}
.hcdf-slot:hover{background:rgba(255,255,255,0.08);}
.hcdf-slot.is-selected{background:var(--color-primary);color:#04121c;border-color:var(--color-primary);}

/* Confirmation */
.hcdf-done{
  max-width:620px;margin:0 auto;text-align:center;
  background:rgba(255,255,255,0.02);
  border:1px solid rgb(0 191 255 / 0.25);
  border-radius:18px;
  padding:var(--space-8) var(--space-6);
}
.hcdf-done:focus{outline:none;}
.hcdf-done__icon{
  width:60px;height:60px;margin:0 auto var(--space-4);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(0,191,255,0.12);
  color:var(--color-primary);
}
.hcdf-done__title{
  font-family:'Space Grotesk',var(--font-display);
  font-size:clamp(1.4rem,3.5vw,1.9rem);
  font-weight:700;letter-spacing:-0.02em;
  margin:0 0 var(--space-3);color:#fff;
}
.hcdf-done__text{
  margin:0 auto;max-width:46ch;
  font-size:1rem;line-height:1.6;color:var(--color-text-muted);
}
.hcdf-ring{
  margin:var(--space-5) auto 0;max-width:44ch;
  padding:14px;border-radius:12px;
  background:rgba(0,191,255,0.07);
  border:1px solid rgba(0,191,255,0.22);
}
.hcdf-countdown{
  margin:0;font-size:1.05rem;font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;
}
.hcdf-ringnote{
  margin:5px 0 0;font-size:0.88rem;color:var(--color-text-muted);
}

@media (max-width:520px){
  .hcdf-wrap{padding:var(--space-6) var(--space-4);border-radius:14px;}
  .hcdf-opts--tight{grid-template-columns:1fr 1fr;}
  .hcdf-choice{font-size:0.96rem;}
  .hcdf-done{padding:var(--space-7) var(--space-4);}
}
@media (max-width:340px){
  .hcdf-opts--tight{grid-template-columns:1fr;}
}

/* The Do-Not-Disturb line sits directly under the "Ring my phone now" button.
   Deliberately not styled as an error or a warning: it is an instruction the
   person needs one second before they tap, not a problem. Muted so it does not
   compete with the button it belongs to. */
.hcdf-dnd {
  margin: 8px 0 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   LEAD DIALOG
   The form used to sit inline at the bottom of the homepage, so every primary
   CTA answered a tap by scrolling the visitor past everything they had not read
   yet. It now opens here instead.

   Visual language is deliberately the same as the .gp-* modal the owner already
   liked: dark surface, hairline border, big radius, and on phones it rises from
   the bottom edge as a sheet rather than appearing centred — a sheet is reachable
   with a thumb, a centred card is not.
--------------------------------------------------------------------------- */
.hcdf-dialog {
  /* The UA gives a modal dialog margin:auto and a fit-content box, which left
     the sheet floating short of the bottom edge. inset:0 + margin:0 makes the
     dialog exactly the viewport, so `bottom:0` on the sheet means the bottom of
     the screen. */
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: transparent;
  overflow: visible;
}
.hcdf-dialog::backdrop {
  background: rgb(2 8 15 / 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* The panel itself. ::backdrop cannot be transitioned reliably across browsers,
   so the entrance lives on the panel. */
.hcdf-dialog .hcdf-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface, #111118);
  border: 1px solid var(--color-border, #2a2a3a);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgb(0 0 0 / 0.5);
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: hcdfSheetIn 0.28s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes hcdfSheetIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Desktop: a centred card rather than a sheet. */
@media (min-width: 640px) {
  .hcdf-dialog .hcdf-wrap {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-inline: auto;
    max-width: 560px;
    max-height: 90dvh;
    border: 1px solid var(--color-border, #2a2a3a);
    border-radius: 20px;
    padding: 26px 26px 22px;
    animation: none;
  }
}

.hcdf-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;               /* 40px: a real touch target, not a 16px glyph */
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
  color: var(--color-text, #e8e8ed);
  cursor: pointer;
}
.hcdf-dialog__close:hover { background: rgb(255 255 255 / 0.12); }
.hcdf-dialog__close:focus-visible {
  outline: 2px solid var(--color-primary, #00bfff);
  outline-offset: 2px;
}

/* Belt and braces with the dialog's own inertness: iOS will still scroll the
   document behind a modal without this. */
.hcdf-dialog-open,
.hcdf-dialog-open body { overflow: hidden; }

/* The in-page trigger that replaced the inline form. */
.contact-formcta { text-align: center; }
.contact-formcta__note {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted, #9494a8);
}

/* "Something else" type-in, revealed on selection. */
.hcdf-otherwrap{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px;}
.hcdf-otherwrap .hcdf-continue{align-self:flex-start;}

/* The qualify step packs three short questions; row layout keeps yes/no pairs
   from stacking into a full-width column each. */
.hcdf-opts--row{display:flex;gap:8px;}
.hcdf-opts--row .hcdf-choice{flex:0 1 auto;min-width:96px;}
.hcdf-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;}

/* The native option list ignores the page theme: on Windows it rendered the
   site's light text on the OS's white popup, which is the "unreadable dropdown"
   bug. color-scheme tells the browser to draw a dark popup; the option rule is
   the fallback for engines that style options directly. */
.hcdf-select{color-scheme:dark;}
.hcdf-select option{background-color:#0d1420;color:#f2f5f9;}
.hcdf-select option[value=""]{color:rgba(255,255,255,0.45);}
/* Dim the closed control while the placeholder option is the selection. */
.hcdf-select:has(option[value=""]:checked){color:rgba(255,255,255,0.55);}
