/* Support (support.html), on top of home.css: the home page's type scale and section rhythm (S102). A calm help
   page: Answers beside Write to Us, then Manuals and Quotations. Light only. */

.support main { overflow-x: clip; }
.sp-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); }
.sp-hero h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin: 0; text-wrap: balance; max-width: 16ch; }
.sp-hero .hm-lead { max-width: 44ch; }
.sp-hero .hm-note a { color: var(--ink-2); }

/* Answers and Write to Us */
.sp-main .support-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); }
.sp-main .support-grid > * { min-width: 0; }
.sp-main .faq-search { margin: 28px 0 16px; }
.sp-main #faq-topics { margin-bottom: 20px; }
.sp-main .chip { cursor: pointer; min-height: 38px; height: auto; }
.sp-main .chip:hover { border-color: var(--navy); color: var(--navy); }
.sp-main button.chip[aria-pressed="true"]:hover { color: var(--btn-ink); }
.sp-none { margin-top: 18px; }
.sp-write { position: sticky; top: calc(var(--header-h) + 20px); background: var(--paper); box-shadow: none; scroll-margin-top: calc(var(--header-h) + 20px); }
.support main .sp-write h2 { font-size: 24px; letter-spacing: -.02em; margin: 0; }
.sp-write-sub { margin: 6px 0 18px; color: var(--ink-2); font-size: var(--t-small); }
.sp-order { text-transform: uppercase; font-family: 'Plex Mono', ui-monospace, Consolas, monospace; }
.support main .banner h3 { font-size: 17px; }
#c-h { scroll-margin-top: calc(var(--header-h) + 44px); }
@media (max-width: 960px) {
  .sp-main .support-grid { grid-template-columns: 1fr; }
  .sp-write { position: static; }
}

/* Manuals: an index of rows, the whole row the link, hairlines between (S166 taste 12: no box around each). */
.sp-docs { display: grid; margin-top: 28px; border-top: 1px solid var(--line-2); }
.sp-doc {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 6px clamp(20px, 3vw, 40px); align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color .2s ease;
}
.sp-doc:hover { background: var(--surface); }
.sp-doc:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp-doc b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.sp-doc span { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.sp-doc i { font-style: normal; font-weight: 600; color: var(--navy); border-bottom: 1.5px solid currentColor; white-space: nowrap; justify-self: end; }
.sp-doc:hover i { color: var(--navy-600); }
.sp-school { margin: 28px 0 0; color: var(--ink-2); }
.sp-school a { font-weight: 600; color: var(--navy); }
@media (max-width: 760px) { .sp-doc { grid-template-columns: 1fr; } .sp-doc i { justify-self: start; margin-top: 6px; } }

/* Quotations: one column. */
.sp-quote > * { max-width: 60ch; }
.sp-quote-text { margin: 18px 0 22px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.55; max-width: 60ch; }
.sp-quote .btn-ghost { background: var(--surface); }
.sp-count { margin: 0 0 12px; }

/* The set-up page first, a little stronger (S160 W18). */
.sp-docs .sp-doc:first-child b { color: var(--navy); }
.sp-main .faq-codes { margin: -6px 0 18px; color: var(--ink-2); font-size: 16px; }