/* ==========================================================================
   Features, How it works and Contact pages.
   Features / How it works reuse the landing sections (home.css); Contact uses pages.css.
   ========================================================================== */

/* Features / How it works: the landing header overlays the page on desktop, so leave room for it. */
.sub-top { height: 24px; }
@media (min-width: 1024px) { .sub-top { height: calc(93 * var(--u)); } }

/* ───────────── Contact ─────────────
   Same side edges as the header (logo / Get the App). 8px spacing scale; cards 20px radius, inputs 12px. */
.ct { padding: 32px var(--gutter) 64px; }
.ct__wrap { max-width: none; display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) {
  .ct { padding: 48px max(32px, calc(222 * var(--u))) 96px max(32px, calc(224 * var(--u))); }
  .ct__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
}

/* Left column */
.ct__info { display: flex; flex-direction: column; }
.ct__info .pg-eyebrow { line-height: 16px; }
.ct__info .pg-title { margin-top: 16px; }
.ct__lede { margin-top: 16px; max-width: 480px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
@media (min-width: 1024px) { .ct__lede { font-size: 16px; } }

.ct__info { container-type: inline-size; }
.ct__cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
/* 2×2 once the column has room for it (tablet, wide desktop); one column when it is narrow. */
@container (min-width: 520px) {
  .ct__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ct-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
}
.ct-card__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--primary-rgb), 0.12); color: var(--lime);
}
.ct-card__icon svg { width: 20px; height: 20px; }
.ct-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-card__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.ct-card__body a, .ct-card__value { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.ct-card__body a:hover { color: var(--lime); }
.ct-card__note { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }

/* Form card */
.ct__panel { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 1024px) { .ct__panel { padding: 40px; } }
/* One grid for the whole form; the two rows dissolve into it (Full name | Email, Phone | Topic). */
.ct-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.ct-form > * { grid-column: 1 / -1; }
.ct-form__row { display: contents; }
.ct-form__row > .ct-field { grid-column: auto; }
@media (min-width: 640px) { .ct-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }
.ct-form__title { margin-bottom: 4px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.ct-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-field label { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%; height: 48px; padding: 0 16px; border-radius: 12px;
  background: var(--bg-default); color: var(--text); border: 1px solid var(--border);
  font: inherit; font-size: 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ct-field textarea { display: block; height: auto; min-height: 160px; padding: 12px 16px; resize: vertical; line-height: 1.55; }
.ct-field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #B3B3B3 50%), linear-gradient(135deg, #B3B3B3 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
.ct-field select option { background: var(--bg-elevated); color: var(--text); }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--text-disabled); }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18); }
.ct-field.has-error input, .ct-field.has-error select, .ct-field.has-error textarea { border-color: var(--error); }
.ct-field__error { font-size: 13px; color: var(--error); }
/* Fixed, non-editable "+91" inside the phone input. */
.ct-field__affix { position: relative; display: block; }
.ct-field__prefix { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 15px; color: var(--text-secondary); pointer-events: none; }
.ct-field__affix input { padding-left: 52px; }
.ct-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: rgba(var(--error-rgb), 0.1); border: 1px solid rgba(var(--error-rgb), 0.4); color: var(--error-soft); }
.ct-form__alert a { color: inherit; }
.ct-form__submit {
  justify-self: start; margin-top: 4px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lime); color: var(--on-lime); font: inherit; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px; transition: background-color 0.2s ease;
}
.ct-form__submit:hover { background: var(--lime-hover); }
.ct-form__submit:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 639.98px) { .ct-form__submit { justify-self: stretch; justify-content: center; } }

/* Thank-you state */
.ct__done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 0; }
.ct__done-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); }
.ct__done-icon svg { width: 26px; height: 26px; }
.ct__done h2 { font-size: 22px; font-weight: 600; }
.ct__done p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.ct__done a { color: var(--lime); }
.ct__again { margin-top: 6px; font-weight: 600; }