/* ============================================================
   DigitalSandbox — contact & support page. Form card + FAQ
   disclosure rows (the design library's FAQ "keeper" pattern),
   parent-brand monochrome accent.
   Requires css/design-system.css.
   ============================================================ */

.dsc-head { max-width: 1104px; margin: 0 auto; padding: 56px 48px 0; }
.dsc-head h1 { font-size: clamp(32px, 4.4vw, 44px); letter-spacing: var(--ls-tight); margin: 10px 0 0; }
.dsc-head .dsc-lead {
  margin: 12px 0 0; font-size: 16.5px; line-height: 1.6;
  color: var(--text-muted); max-width: 52ch; text-wrap: pretty;
}
.dsc-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--accent-text);
}

.dsc-grid {
  max-width: 1104px; margin: 0 auto; padding: 44px 48px 88px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start;
}

/* form card */
.dsc-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: var(--shadow-sm); padding: 36px;
}
.dsc-card h2 { font-size: 24px; margin: 0 0 6px; }
.dsc-card__sub { color: var(--text-muted); font-size: 14.5px; margin: 0 0 24px; }

.dsc-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.dsc-field label { font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--sand-900); }
.dsc-field input,
.dsc-field select,
.dsc-field textarea {
  font-family: var(--font-sans); font-size: 15px; color: var(--text-body);
  background: var(--white); border: 1px solid var(--border-default);
  border-radius: var(--radius-field); padding: 11px 14px; width: 100%;
}
.dsc-field textarea { resize: vertical; min-height: 140px; }
.dsc-field input:focus-visible,
.dsc-field select:focus-visible,
.dsc-field textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: var(--ring-focus);
}
.dsc-card .ds-btn { margin-top: 6px; }

/* FAQ column */
.dsc-faq h2 { font-size: 26px; margin: 10px 0 14px; }
.dsc-faq details { border-top: 1px solid var(--border-subtle); padding: 14px 0; }
.dsc-faq details:last-of-type { border-bottom: 1px solid var(--border-subtle); }
.dsc-faq summary {
  cursor: pointer; font-size: 14.5px; font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.dsc-faq summary::marker { color: var(--text-subtle); }
.dsc-faq details p {
  margin: 10px 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--text-muted);
}

@media (max-width: 880px) {
  .dsc-head { padding: 44px 32px 0; }
  .dsc-grid { grid-template-columns: 1fr; gap: 40px; padding: 36px 32px 64px; }
}
@media (max-width: 560px) {
  .dsc-head { padding: 36px 20px 0; }
  .dsc-grid { padding: 28px 20px 56px; }
  .dsc-card { padding: 24px 20px; border-radius: 18px; }
}