/* Restora — support page. Layered on landing.css (same tokens, same shell).
   Self-contained: no external fonts or CDNs, no inline <script> — the FAQ uses
   native <details>/<summary>, which the CSP-restricted page can do without JS. */

.support { padding: 40px 22px 72px; max-width: 820px; }

/* ── Hero ───────────────────────────────────────────────── */
.s-hero { margin-bottom: 44px; }
.s-hero h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.12; margin: 10px 0 12px; letter-spacing: -.5px; }
.s-hero .lede { font-size: 17px; color: var(--muted); margin: 0 0 26px; max-width: 60ch; }
.s-hero .lede strong { color: var(--text); }

/* ── Contact cards ──────────────────────────────────────── */
.contact-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }

.ccard {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease;
}
.ccard:hover { transform: translateY(-2px); border-color: var(--brand); }
.ccard.primary { border-color: var(--brand); background: var(--brand-soft); }
.ccard-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.ccard-v { font-size: 15px; font-weight: 700; color: var(--brand); word-break: break-word; }
.ccard-note { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

.tip {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--brand);
  background: var(--card-bg);
  border-radius: 0 12px 12px 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.tip strong { color: var(--text); }

/* ── Sections + FAQ ─────────────────────────────────────── */
.s-block { margin-bottom: 40px; }
.s-block > h2 {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.s-block p { font-size: 15px; line-height: 1.65; }
.s-block > p { color: var(--muted); max-width: 68ch; }
.s-block > p strong { color: var(--text); }

details {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
}
details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }

summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  font-size: 15px;
  font-weight: 650;
  position: relative;
  /* Keyboard users need to see focus; the default outline sits oddly on a
     full-width row, so inset it. */
  outline-offset: -3px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .18s ease;
}
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
summary:hover { color: var(--brand); }

details > *:not(summary) { margin: 0 18px; }
details > *:not(summary):first-of-type { margin-top: -2px; }
details > *:not(summary):last-child { margin-bottom: 16px; }
details p { color: var(--muted); max-width: 66ch; }
details p strong { color: var(--text); }
details ul { color: var(--muted); font-size: 15px; line-height: 1.65; padding-left: 20px; }
details li { margin-bottom: 5px; }
details li strong { color: var(--text); }

/* ── Footer bits ────────────────────────────────────────── */
.policy-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.policy-links a { font-weight: 650; font-size: 15px; }

.contact-foot address {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ccard, summary::after { transition: none; }
}