/* © 2026 Qder.ai. All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   Contact.

   One form for two very different people, so the first control on the form
   decides which questions the rest of it asks. Above it, the short ways round
   the form.

   The night panel opens the page, with the three short ways as glass on the
   night; the form is one white card on the paper ground, with the two lists
   beside it as hairline tables, not boxes. Everything here is scoped to main,
   so nothing reaches another page's cards.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The topic list is long and the answer changes the form, so it gets a
   comfortable measure rather than the field default. */
#topic { max-width: 34rem; }

/* ------------------------------------------------------------ the first screen
   The crumbs as on every other page's panel (form.css makes them a flex row for the plain page head). */
.m-page .crumbs { display: block; font-weight: 400; }
/* Wider than a title needs, so the three ways sit in one row under it. */
.m-page .m-page-inner { max-width: 1120px; }

.routes { width: 100%; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: start; }
.route {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 28px 26px; border-radius: 26px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.route:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transform: translateY(-2px); }
.route:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.route .ico {
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.route .ico svg { width: 21px; height: 21px; }
.route b { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.route > b + span { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.route .go { margin-top: auto; padding-top: 14px; font-size: 15px; line-height: 22px; font-weight: 600; color: #A9C0FF; }
.route:hover .go { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .route { transition: none; } .route:hover { transform: none; } }

/* ------------------------------------------------------------------ the form
   The section is the paper ground (the night panel's frame is paper too, so the two run together); the form is the
   one white card on it, and the two lists beside it are hairline tables. */
.m #write .shell { padding-top: var(--m-sec); }
.m #write .cols {
  max-width: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; align-items: start;
}

.m main .card {
  background: #fff; border: 1px solid var(--m-line); border-radius: 32px; padding: 52px 56px;
  box-shadow: 0 1px 2px rgba(10, 16, 36, .04), 0 44px 80px -60px rgba(10, 16, 36, .4);
}
.m main .card > h2 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: var(--m-ink); }
.m main .card > .why { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--m-body); }
.m main .card > .why + * { margin-top: 30px; }

/* Who is writing: three choices, drawn larger than a field because they decide the rest. */
.m .who { gap: 12px; margin-bottom: 28px; }
.m .who button {
  padding: 18px 20px; border-radius: 18px; border-color: var(--m-line); background: #fff;
}
.m .who button:hover { border-color: var(--cobalt-line); }
.m .who button[aria-pressed="true"] {
  border-color: var(--cobalt); background: #F6F8FF;
  box-shadow: inset 0 0 0 1px var(--cobalt), 0 14px 28px -20px rgba(11, 63, 217, .7);
}
.m .who b { font-size: 15.5px; color: var(--m-ink); }
.m .who span { margin-top: 4px; font-size: 13.5px; line-height: 19px; }

/* Fields: 12px corners, a hairline that a field can still be found by, and a cobalt ring round the one in use. */
.m main .field, .m main .two { margin-bottom: 22px; }
.m main .field:last-child, .m main .two:last-child { margin-bottom: 0; }
.m main .two { gap: 16px; }
.m main .two .field { margin-bottom: 0; }
.m main .field > label { margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--m-ink); }
.m main .two .field > label { margin-bottom: auto; }
.m main .two .field > label + * { margin-top: 8px; }
.m main .field .hint { margin-top: 3px; font-size: 13.5px; }
.m main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea) {
  border-color: #D5DBE6; border-radius: 12px; padding: 13px 15px; font-size: 15.5px; line-height: 22px; color: var(--m-ink);
}
/* One selector list for every state, so they rank alike and the later wins: hover, then focus, then a wrong answer. */
.m main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea):hover { border-color: #9DB6F7; }
.m main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea):focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(11, 63, 217, .16); }
.m main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea)[aria-invalid="true"] { border-color: var(--crit); }
.m main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 79, .16); }
.m main select { background-position: calc(var(--sel-x, 18px) - 5px) 22px, var(--sel-x, 18px) 22px; }
.m main textarea { min-height: 168px; }
.m main .err { margin-top: 8px; font-size: 13.5px; }
.m main .note { margin-bottom: 22px; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; line-height: 22px; }

/* Send: the pill at the hero's size. */
.m main .send { margin-top: 30px; gap: 16px; }
.m main .send .btn { height: 54px; padding: 0 34px; font-size: 16px; }
.m main .consent { margin-top: 20px; font-size: 13.5px; line-height: 21px; color: var(--muted); }

/* The answer, in the form's place. */
.m main .card.done { padding: 72px 40px; gap: 12px; }
.m main .card.done .tick { width: 60px; height: 60px; margin-bottom: 6px; font-size: 26px; }
.m main .card.done h2 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.m main .card.done p { max-width: 34em; margin-inline: auto; font-size: 16px; line-height: 1.65; color: var(--m-body); }

/* --------------------------------------------------------------- the lists
   Beside the form, on the ground itself: a title and a hairline table each, lined up with the form's own title. */
.m .cols > .aside { position: sticky; top: calc(var(--nav-h) + 32px); gap: 0; padding-top: 53px; }
.m .aside .card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.m .aside .card + .card { margin-top: 56px; }
.m .aside .card > h2 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; }
.m .aside .card > .why { margin-top: 8px; font-size: 15px; }
.m .aside .card > .why + .rows { margin-top: 22px; }
.m .aside .card > h2 + .rows { margin-top: 22px; }
.m .aside .rows { border-top: 1px solid #DDE1EA; }
.m .aside .rows li { padding: 15px 0; border-top: 0; border-bottom: 1px solid #DDE1EA; font-size: 15px; line-height: 22px; }
.m .aside .rows li:first-child { padding-top: 15px; }
.m .aside .rows li:last-child { padding-bottom: 15px; }
.m .aside .rows b { color: var(--m-ink); }
.m .aside .rows span { color: var(--m-body); }

/* -------------------------------------------------------------- narrower */
@media (max-width: 1180px) {
  .m #write .cols { gap: 48px; }
  .m main .card { padding: 44px 40px; }
  .m .cols > .aside { padding-top: 45px; }
}
/* One column of three ways: the mark beside the words, so each is a row rather than a tall empty tile. */
@media (max-width: 980px) {
  .routes { grid-template-columns: 1fr; max-width: 620px; margin: 44px auto 0; gap: 12px; }
  .route { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; padding: 24px 26px 22px; }
  .route .ico { grid-row: 1 / span 3; margin: 0; }
  .route .go { padding-top: 6px; }
  .m #write .cols { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .m .cols > .aside { position: static; padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .m .aside .card + .card { margin-top: 0; }
}
@media (max-width: 680px) {
  .routes { margin-top: 36px; }
  .route { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 20px 20px 18px; border-radius: 22px; }
  .route .ico { width: 40px; height: 40px; border-radius: 12px; }
  .route .ico svg { width: 19px; height: 19px; }
  .route b { font-size: 17.5px; }
  .route > b + span { font-size: 14.5px; }
  .route .go { font-size: 14.5px; }
  /* The last section on the page, so marketing.css gives it the close card's narrow sides; the form keeps the page's. */
  .m main > section#write:last-child .shell { padding-inline: 12px; }
  .m #write .section-head { padding-inline: 8px; }
  .m main .card { padding: 30px 20px 28px; border-radius: 26px; }
  .m main .card > h2 { font-size: 24px; }
  .m .who { margin-bottom: 24px; }
  .m main .send .btn { width: 100%; }
  .m main .card.done { padding: 52px 22px; }
  .m .cols > .aside { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-inline: 8px; }
  .m .aside .rows li { font-size: 14.5px; }
}
/* The narrowest phones: the value under its label, so an address is never broken in the middle to fit beside it. */
@media (max-width: 360px) {
  .m .aside .rows li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .m .aside .rows span { max-width: none; text-align: start; }
}