/* =========================================================
   Page — Contact (م5)

   A short hero, then two columns: the form carries the page and
   the aside carries the exits. On the phone the form comes first,
   because a visitor who scrolled to this page has usually already
   decided to write.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   Hero

   Shorter than the pricing hero on purpose: there is nothing to
   sell here, and a tall band only pushes the form under the fold.
   --------------------------------------------------------- */
.ct-hero {
  position: relative;
  padding-block: var(--space-20) var(--space-10);
  overflow: hidden;
}

.ct-hero__glow {
  position: absolute;
  inset-block-start: -24rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  width: min(64rem, 130%);
  height: 38rem;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--color-primary-soft) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Inside the container, not the container itself: the headline and the
   form card share one reading edge. */
.ct-hero__inner {
  position: relative;
  max-width: 46rem;
}

.ct-hero__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.ct-hero__title span { display: block; }

.ct-hero__lead {
  margin: 0;
  max-width: 42rem;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   The two columns

   The aside is fixed at a readable measure and the form takes
   the rest, rather than a percentage split that leaves the aside
   too wide at 1400px.
   --------------------------------------------------------- */
.ct-main__inner {
  display: grid;
  gap: var(--space-10);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 940px) {
  .ct-main__inner {
    gap: var(--space-16);
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */
.ct-form-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ct-form {
  --card-pad: var(--space-8);
  gap: var(--space-6);
}
@media (max-width: 560px) {
  .ct-form { --card-pad: var(--space-5); }
}

.ct-form__title {
  margin: 0;
  font-size: var(--fs-h4);
}

/* The safety line. Warning tone, but flat: a boxed alert here would
   read as an error on a form nobody has submitted yet. */
.ct-form__warn {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-warning);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.ct-form__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-2);
}

.ct-form__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   Aside — the exits and the flow

   Not a card: a second panel beside the form would make the page
   read as two forms. A rule and a measure are enough separation.
   --------------------------------------------------------- */
.ct-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ct-aside__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.ct-aside__rule {
  margin-block: var(--space-2);
}

.ct-exit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ct-exit__head {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.ct-exit__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.ct-exit .link-arrow {
  align-self: flex-start;
}

/* ---------------------------------------------------------
   Channels

   A label and a value per row, both on one line until the value
   is long enough to need its own. Printed only for the channels
   that are actually configured, so the list has no fixed length.
   --------------------------------------------------------- */
.ct-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ct-channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.ct-channel__label {
  min-inline-size: 3.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------
   What happens next

   A numbered list where the number carries meaning: it is the
   order of events, so it is <ol> and the marker is drawn rather
   than left to the browser default, which sits outside the text
   column and disappears in RTL.
   --------------------------------------------------------- */
.ct-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  counter-reset: ct-step;
}

.ct-flow__step {
  position: relative;
  counter-increment: ct-step;
  padding-inline-start: var(--space-10);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.ct-flow__step::before {
  content: counter(ct-step);
  position: absolute;
  inset-inline-start: 0;
  top: -0.1em;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--color-line-gold);
  border-radius: var(--radius-pill);
  font-family: var(--font-figures);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-text);
}