/* ---- HERO (light) ---- */
.ct-hero { position:relative; overflow:hidden; padding:150px 0 var(--space-2xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, #fff 78%); }
.ct-hero-copy { max-width:48rem; }
.ct-hero-copy h1 { line-height:var(--line-tight);
  letter-spacing:-.02em; color:var(--color-secondary); }
.ct-hero-copy h1 .hl { color:var(--color-primary); }

/* ---- Two-column layout ---- */
.ct-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-xl); align-items:start; }

/* ---- Left: form column ---- */
.ct-formcol { background:var(--brand-25); border:none; border-radius:var(--radius-lg);
  padding:var(--space-l) var(--space-l) var(--space-xl); box-shadow:var(--shadow-md); }
.ct-formtitle { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--color-secondary); letter-spacing:-.01em; margin:0; }
.ct-formsub { font-size:var(--text-md); line-height:var(--line-normal); color:var(--color-ink-soft); margin:var(--space-2xs) 0 var(--space-m); }

/* State 1 -- the two choice buttons */
.ct-choices { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s); }
.ct-choice { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3xs); text-align:left;
  background:#fff; border:1.5px solid var(--color-border); border-radius:var(--radius-component-lg);
  padding:var(--space-m); cursor:pointer; min-height:44px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.ct-choice:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-accent); }
.ct-choice:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; }
.ct-choice-ic { width:48px; height:48px; border-radius:var(--radius-lg); background:var(--grad-chip); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-2xs); }
.ct-choice-ic svg { width:24px; height:24px; }
.ct-choice-label { font-size:var(--text-lg); font-weight:var(--weight-bold); color:var(--color-secondary); }
.ct-choice-sub { font-size:var(--text-sm); color:var(--color-ink-soft); line-height:var(--line-normal); }

/* The forms */
.ct-form { display:flex; flex-direction:column; }
.ct-form[hidden] { display:none; }
.ct-back { align-self:flex-start; display:inline-flex; align-items:center; gap:var(--space-2xs);
  background:none; border:0; cursor:pointer; padding:var(--space-2xs) 0; margin:0 0 var(--space-xs);
  font-weight:var(--weight-bold); font-size:var(--text-sm); color:var(--color-primary); }
.ct-back:hover { color:var(--brand-600); }
.ct-back:focus-visible { outline:3px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-component-md); }
.ct-back-ic { width:18px; height:18px; transform:scaleX(-1); }

.ct-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-s); }
.ct-field { display:flex; flex-direction:column; margin-bottom:var(--space-s); }
.ct-field label { font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--color-secondary); margin-bottom:var(--space-2xs); }
.ct-field label .ct-optional { font-weight:var(--weight-normal); color:var(--color-ink-soft); }
.ct-field input, .ct-field select, .ct-field textarea {
  font:inherit; font-size:var(--text-md); color:var(--color-ink); background:#fff;
  border:1.5px solid var(--color-border); border-radius:var(--radius-component-md);
  padding:var(--space-xs); width:100%; transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.ct-field textarea { resize:vertical; min-height:108px; line-height:var(--line-normal); }
.ct-field input::placeholder, .ct-field textarea::placeholder { color:var(--color-ink-muted); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus {
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(67,143,185,.18); }
/* native select chevron, blue-family, no extra hue */
.ct-field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23438FB9' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }

.ct-submit { margin-top:var(--space-2xs); align-self:flex-start; }

/* Feedback (success / error) -- role="alert", toggled by JS */
.ct-feedback { border-radius:var(--radius-component-md); padding:var(--space-xs) var(--space-s); margin-bottom:var(--space-s);
  font-size:var(--text-sm); line-height:var(--line-normal); font-weight:var(--weight-semibold); }
.ct-feedback.is-ok { background:oklch(from var(--color-success) 95% 0.02 h); color:var(--color-success); border:1px solid oklch(from var(--color-success) 85% 0.04 h); }
.ct-feedback.is-err { background:var(--brand-50); color:var(--color-secondary); border:1px solid var(--color-accent); }

/* ---- Right: details column ---- */
.ct-details { background:var(--brand-50); border:none; border-radius:var(--radius-lg);
  padding:var(--space-l); }
.ct-contacts { list-style:none; margin:var(--space-m) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-s); }
.ct-contacts li { display:flex; align-items:center; gap:var(--space-s); }
.ct-cic { width:42px; height:42px; flex:none; border-radius:var(--radius-lg); background:var(--brand-25); border:none;
  color:var(--color-primary); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-xs); }
.ct-cic svg { width:21px; height:21px; }
.ct-clabel { display:block; font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-ink-soft); margin-bottom:var(--space-3xs); }
.ct-contacts a { color:var(--color-secondary); font-weight:var(--weight-bold); font-size:var(--text-md); text-decoration:none;
  border-bottom:1px solid transparent; }
.ct-contacts a:hover { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.ct-reassure { margin:var(--space-m) 0 0; padding-top:var(--space-m); border-top:1px solid var(--color-border);
  font-size:var(--text-sm); line-height:var(--line-relaxed); color:var(--color-ink-soft); }

.ct-quote { margin-top:var(--space-m); padding:var(--space-l) var(--space-l) var(--space-m); }
.ct-quote blockquote { font-size:var(--text-md); }

/* ---- Demo / sign-up band (dark) ---- */
.ct-cta { position:relative; overflow:hidden; background:var(--grad-hero); color:#fff;
  padding:var(--space-3xl) 0; text-align:center; }
.ct-cta .wrap { position:relative; z-index:1; max-width:760px; }
.ct-cta h2 { color:#fff; letter-spacing:-.01em; margin:var(--space-2xs) 0 0; }
.ct-cta-sub { margin:var(--space-s) auto 0; color:rgba(255,255,255,.84); font-size:var(--text-md); line-height:var(--line-relaxed); max-width:42em; }
.ct-cta-btns { display:flex; flex-wrap:wrap; gap:var(--space-xs); justify-content:center; margin-top:var(--space-l); }

/* ---- Responsive ---- */
@media (max-width:920px) {
  .ct-grid { grid-template-columns:1fr; gap:var(--space-l); }
  .ct-hero { padding-top:124px; }
}
@media (max-width:560px) {
  .ct-formcol { padding:var(--space-m) var(--space-m) var(--space-l); }
  .ct-choices, .ct-row { grid-template-columns:1fr; }
  .ct-details { padding:var(--space-m); }
}

.ct-form-footer { margin-top: 1rem; font-size: var(--text-xs); color: var(--color-ink-soft); line-height: var(--line-normal); }
.ct-form-footer a { color: var(--color-secondary); }