/* The single contact page: a centred "get in touch" title over an underline-style form. */
.cpage {
  background: #060606;
  color: #f0ebe0;
}

.cpage-inner {
  max-width: 1100px;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.cpage-title {
  position: relative;
  width: fit-content;
  margin: 0 auto 0.75rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.cpage-sub {
  margin: 1.5rem auto 3rem;
  max-width: 52ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.65;
  color: #a1a1aa;
}

.cform-consent {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: #a1a1aa;
}

.ctouch-sub a,
.cform-consent a,
.legal a {
  color: #f4f4f5;
  text-decoration: underline;
}

/* ── Legal pages (privacy) ── */
.legal {
  max-width: 760px;
}

.legal h2 {
  margin: 2.25rem 0 0.75rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 1px;
  color: #f0ebe0;
}

.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.7;
  color: #d4d4d8;
}

.legal ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.2rem;
  list-style: disc;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 0.75rem;
}

.legal code {
  font-size: 0.9em;
  color: #f4f4f5;
}

/* Cookie table: scrolls sideways on its own at phone width, so the page never does. */
.legal-table {
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.legal-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #d4d4d8;
}

.legal-table th,
.legal-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-table thead th {
  color: #f0ebe0;
  font-weight: 700;
}

.legal-table th[scope="rowgroup"] {
  background: rgba(255, 255, 255, 0.04);
  color: #f0ebe0;
  font-weight: 600;
}

.legal-btn {
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(240, 235, 224, 0.35);
  border-radius: 999px;
  background: transparent;
  color: #f0ebe0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.legal-btn:hover,
.legal-btn:focus-visible {
  border-color: #ff2200;
}

/* ── Contact page: info column + form card ── */
.cpage {
  background:
    radial-gradient(circle at 85% 10%, rgba(208, 26, 0, .14), transparent 40%),
    #060606;
}

.ctouch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.ctouch-crumb {
  margin-bottom: 1.25rem;
  font-family: 'Space Mono', monospace;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #85858e;
}

.ctouch-crumb a { color: #a1a1aa; display: inline-block; padding: .6rem 0; } /* taller tap target */
.ctouch-crumb a:hover { color: #fff; }
.ctouch-crumb [aria-current] { color: #ff2200; }

.ctouch-title {
  max-width: 8ch;
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: 1px;
  color: #f0ebe0;
}

.ctouch-sub {
  margin: 1.25rem 0 2rem;
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #a1a1aa;
}

.ctouch-cards {
  display: grid;
  gap: .75rem;
  max-width: 26rem;
}

.ctouch-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: #f4f4f5;
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .2s, background .2s;
}

.ctouch-card small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: #85858e;
}

.ctouch-icon { flex-shrink: 0; color: #ff2200; }

.ctouch-arrow {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  transition: background .2s;
}

.ctouch-card:hover { border-color: rgba(255, 34, 0, .4); background: rgba(255, 34, 0, .06); }
.ctouch-card:hover .ctouch-arrow { background: #d01a00; }

.ctouch-follow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2rem;
  font-size: .85rem;
  font-weight: 700;
  color: #f4f4f5;
}

.ctouch-follow span { max-width: 4rem; line-height: 1.2; margin-right: .5rem; }

.ctouch-follow a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #a1a1aa;
  transition: color .2s, border-color .2s;
}

.ctouch-follow a:hover { color: #fff; border-color: #ff2200; }

.ctouch-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(18, 18, 20, .95), rgba(9, 9, 10, .95));
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 6px rgba(255, 255, 255, .02);
}

.ctouch-panel-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

/* ── Form: filled fields ── */
.cform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
}

.cform-wide { grid-column: 1 / -1; }

.cform-field label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: #d4d4d8;
}

.cform-field input,
.cform-field select,
.cform-field textarea {
  display: block;
  width: 100%;
  padding: .7rem .85rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem; /* 16px: iOS Safari zooms the page into any smaller field on focus */
  color: #fff;
  transition: border-color .15s, background .15s;
}

.cform-field textarea { resize: vertical; min-height: 7rem; }

.cform-field select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}

.cform-field select option { background: #0c0c0e; color: #f4f4f5; }

.cform-field input:focus,
.cform-field select:focus,
.cform-field textarea:focus {
  outline: none;
  border-color: #ff2200;
  background: rgba(255, 255, 255, .07);
}

.cform-field .cform-invalid { border-color: #f87171; }

.cform-error { margin-top: .35rem; font-size: .78rem; color: #fca5a5; }

.cform-footer { display: grid; gap: .75rem; margin-top: 1.25rem; }
.cform-footer .cform-status:empty { display: none; }
.cform-status { font-size: .9rem; color: #d4d4d8; }

.cform-submit {
  order: -1;
  width: 100%;
  padding: .95rem 2rem;
  background: #d01a00;
  border: 0;
  border-radius: 10px;
  font-family: 'Space Mono', monospace;
  font-size: .8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}

.cform-submit:hover { background: #ff2200; }
.cform-submit:disabled { opacity: .6; cursor: wait; }

@media (max-width: 900px) {
  .ctouch { grid-template-columns: 1fr; }
  .ctouch-title { max-width: none; }
}

@media (max-width: 700px) {
  .cform-grid { grid-template-columns: 1fr; }
}

/* ── Apply page: explore chips and the onboarding network shown after submitting ── */
.enroll-explore { border: 0; padding: 0; margin: 0; min-width: 0; }
.enroll-explore legend { padding: 0; margin-bottom: .6rem; }
.enroll-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.enroll-chip { position: relative; cursor: pointer; }
.enroll-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.enroll-chip span { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem .9rem; border: 1px solid rgba(255, 255, 255, .18); color: #d4d4d8; font-size: .85rem; transition: border-color .2s, background .2s, color .2s; }
.enroll-chip span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .2s; }
.enroll-chip input:checked + span { border-color: #ff2200; background: rgba(255, 34, 0, .12); color: #fff; }
.enroll-chip input:checked + span::before { background: #ff2200; border-color: #ff2200; }
.enroll-chip input:focus-visible + span { outline: 2px solid #ff2200; outline-offset: 3px; }
.enroll-net { display: block; width: 100%; max-width: 320px; margin: .5rem 0 1rem; overflow: visible; }
.enroll-net line { stroke: rgba(240, 235, 224, .45); stroke-width: 1; stroke-dasharray: 160; stroke-dashoffset: 160; animation: enroll-draw .8s ease-out forwards; animation-delay: 1s; }
.enroll-net .enroll-others circle { fill: #f0ebe0; transform-box: fill-box; transform-origin: center; animation: enroll-pop .45s ease-out both; animation-delay: .6s; }
.enroll-net .enroll-others circle:nth-child(2) { animation-delay: .7s; }
.enroll-net .enroll-others circle:nth-child(3) { animation-delay: .8s; }
.enroll-net .enroll-others circle:nth-child(4) { animation-delay: .9s; }
.enroll-net .enroll-others circle:nth-child(5) { animation-delay: 1s; }
.enroll-you { fill: #ff2200; transform-box: fill-box; transform-origin: center; animation: enroll-pop .5s ease-out both; filter: drop-shadow(0 0 8px rgba(255, 34, 0, .8)); }
.enroll-joined { margin: 0 0 .6rem; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 1px; color: #fff; animation: enroll-pop .5s 1.6s both; }
/* Request a quote by email (institutions): sits under the steps, the form stays the main path. */
.quote-mail { margin: 1.5rem 0; padding: 1.1rem 1.2rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.quote-mail-title { margin: 0 0 .35rem; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 1px; color: #fff; }
.quote-mail .ctouch-sub { margin: 0 0 1rem; text-align: left; }
.quote-mail-btn { display: block; width: fit-content; text-align: center; text-decoration: none; }

/* Pay step after applying: the course fee and the Razorpay Payment Page button. */
.enroll-pay { margin-top: 1.25rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.enroll-pay-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 .9rem; color: #a1a1aa; font-size: .85rem; text-transform: uppercase; letter-spacing: 2px; }
.enroll-pay-fee b { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; font-weight: 400; letter-spacing: 1px; color: #fff; }
.enroll-pay-btn { display: block; text-align: center; text-decoration: none; }
@keyframes enroll-pop { from { opacity: 0; transform: scale(0); } }
@keyframes enroll-draw { to { stroke-dashoffset: 0; } }