/* Contact page layout.

   Rewritten onto the design tokens. Every colour in this file used to be a
   hard-coded teal (#0b202a panels, #20404b rules, #43e6c2 links, #a9c0c0 body)
   from an older brand, which is why the page read as a different product than
   the rest of the site: three palettes were live at once here - this teal, the
   violet in glide-redesign.css, and the blue token ramp - and the violet layer
   won on !important. glide-redesign.css is gone; this file now uses the same
   tokens as every other marketing page, so the page cannot drift again. */

/* `main.contact-page`, not `.contact-page`: brand-system.css declares
   `.doc-page, .page { padding-bottom: clamp(80px, 10vw, 128px) }` and loads
   after this file, so a bare `.contact-page { padding-bottom }` lost the tie on
   source order and did nothing - the page kept a 128px trailing void under a
   short column. The element+class selector wins without !important. */
main.contact-page { max-width: 1240px; padding-bottom: 72px; }
.contact-page .page-hero { max-width: 820px; padding: 22px 0 48px; }
.contact-page .page-hero h1 { margin-bottom: 16px; }
.contact-page .page-hero > p:last-child { font-size: 17px; line-height: 1.6; }

.glide-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  /* stretch, not start: the routes column sizes itself off the support card's
     height, which is what keeps the two columns ending on the same line. */
  align-items: stretch;
  gap: 16px;
  margin-top: 48px;
}
.glide-contact__discord,
.glide-contact__routes,
.glide-contact__prepare {
  border: 1px solid var(--border);
  background: var(--surface-2);
  /* Square panels, like .info-page-layout on /about. The 12px
     radius this card used to pick up from the override layer was the only
     rounded panel on any marketing page. */
  border-radius: 0;
}
.glide-contact__discord {
  min-height: 302px;
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: linear-gradient(135deg, var(--field-tint), var(--surface-2) 68%);
}
/* One rule for both panel heads again. They were split on 2026-08-27 because the
   Discord head had been moved into a serif display tier and this one had not; with
   the serif retired on 2026-08-28 the two are the same voice, the same weight and
   the same line-height, and the only thing that ever differed - the prepare head's
   size - is restated in its own rule further down (25px, with its own margin).
   Tracking is not stated here: brand-system.css pins `letter-spacing: 0
   !important` on every `h2` and hands both of these -.03em back, also with
   `!important`, so a number written here would be inert. */
.glide-contact__discord h2,
.glide-contact__prepare h2 {
  max-width: 470px;
  margin: 12px 0;
  color: var(--fg);
  font: 600 clamp(28px, 3vw, 42px)/1.08 var(--font-display);
}
.glide-contact p { margin: 0; color: var(--body); font-size: 16px; line-height: 1.65; }
.glide-contact__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.glide-contact__discord .primary-action { min-height: 44px; padding: 0 20px; }
.glide-contact__discord .secondary-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.glide-contact__discord .secondary-action:hover { border-color: var(--border-3, var(--accent)); color: var(--fg); }

.glide-contact__routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Equal rows so the pair on top and the wide card below split whatever
     height the support card sets. Previously each route declared its own
     min-height (150px / 128px), so the column came up ~80px short of the
     support card and every card carried a block of dead space between its
     heading and its link. */
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--border);
}
.glide-contact__route {
  min-height: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* center, not space-between. The card's height comes from the support card
     next to it, not from its own content, so pinning the label to the top and
     the action to the bottom opened a ~90px hole in the middle of every card.
     Centring turns that slack into symmetric breathing room instead. */
  justify-content: center;
  gap: 14px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.glide-contact__route:hover { background: var(--surface); }
.glide-contact__route:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.glide-contact__route--wide {
  grid-column: 1 / -1;
  /* A full-width card in a column layout left its content stranded in the
     left third with an empty right half. Row layout puts the label at one
     end and the action at the other, which is how a 620px card reads. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.glide-contact__route h3 {
  margin: 9px 0 0;
  color: var(--fg);
  font: 600 19px/1.2 var(--font-display, Geist, sans-serif);
  letter-spacing: -.025em;
}
.glide-contact__route span:last-child { flex: 0 0 auto; color: var(--accent); font-weight: 600; font-size: 13px; line-height: 1.3; }
.glide-contact__prepare {
  grid-column: 1 / -1;
  padding: 28px 30px;
  display: grid;
  grid-template-columns: minmax(240px, .5fr) minmax(0, 1fr);
  /* start, not center: centring a two-line heading against a three-item list
     left the heading floating with no relationship to either edge. */
  align-items: start;
  gap: 36px;
}
.glide-contact__prepare h2 { margin: 8px 0 0; font-size: 25px; }
.glide-contact__prepare ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  max-width: 72ch;
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
.glide-contact__prepare li { overflow-wrap: anywhere; }
.glide-contact .eyebrow { margin: 0; }

@media (max-width: 900px) {
  /* One column before the routes grid gets narrower than its 360px floor,
     rather than after - the old 780px breakpoint let the right column squeeze
     two 24px-padded cards into ~170px each. */
  .glide-contact { grid-template-columns: 1fr; margin-top: 32px; gap: 12px; }
  .glide-contact__discord { min-height: 0; }
  .glide-contact__routes { grid-auto-rows: auto; }
  .glide-contact__route { min-height: 128px; }
  .glide-contact__prepare { grid-column: auto; grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  main.contact-page { padding-bottom: 44px; }
  .glide-contact__routes { grid-template-columns: 1fr; }
  .glide-contact__route--wide { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 14px; }
  .glide-contact__discord, .glide-contact__route, .glide-contact__prepare { padding: 24px; }
  .glide-contact__discord h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .glide-contact__route { transition: none; } }