@charset "UTF-8";
/* Contact, privacy and terms: built by tools/build-features.py with the feature pages' header, ground and footer.
   Contact is direction B of stash/contact-directions.html, the legal pages direction C of stash/legal-directions.html.
   Both sit on the neutral cloth (--tint-neutral), the tint for every page that isn't a feature. */

.sub { margin: 4px 0 0; color: var(--tone); }

/* ---------- Contact: what to do on the left, the form on cloth on the right ---------- */
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; padding-top: 88px; align-items: start; }
.c-say { position: sticky; top: 120px; }
.c-say .lede { margin: 20px 0 40px; font: var(--type-lede); color: var(--tone); max-width: 460px; }
.c-wa { display: flex; align-items: center; gap: 16px; max-width: 460px; padding: 16px 20px 16px 16px; border-radius: var(--r); border: 1px solid var(--hair); background: #fff; text-decoration: none; }
.c-wa .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-wa b { font: var(--type-h4); letter-spacing: -.01em; }
.c-wa .t span { font: var(--type-small); color: var(--tone); }
.c-wa .go { color: var(--tone); transition: transform var(--dur) var(--ease); }
.c-wa:hover .go { transform: translateX(3px); }   /* as the more-cards: only the arrow moves */
.c-mail { margin: 20px 0 0; color: var(--tone); }
.c-mail a, .cf-fail a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.c-band { padding: 40px; }
.c-card { padding: 28px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); }
.c-card > .h4 { margin-top: 20px; }
@media (max-width: 960px) {
  .c-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 64px; }
  .c-say { position: static; }
  .c-band { padding: 16px; }
  .c-card { padding: 24px 20px; }
}

/* The message form: the live form's fields, rules and messages, sent to the same /api/contact */
.cf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.cf[hidden] { display: none; }
.cf .fl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf .fl.w, .cf-fail, .cf .btn { grid-column: 1 / -1; }
.cf label { font: 500 13px/18px var(--body); }
.cf label span { font-weight: 400; color: var(--tone); }
.cf input, .cf textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-c); border: 1px solid var(--field-line); background: #fff; box-shadow: var(--field-shadow);
  font: var(--type-body); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }   /* the app's input from Figma, at web size */
.cf textarea { height: 136px; padding: 12px 14px; resize: vertical; display: block; }
.cf ::placeholder { color: rgba(4, 6, 51, .42); }
.cf input:focus, .cf textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(165, 223, 226, .8); }
.cf [aria-invalid="true"] { border-color: var(--error); }
.cf .err { font: var(--type-small); color: var(--error); }
.cf .err:empty { display: none; }
.cf-fail { margin: 0; padding: 12px 14px; border-radius: var(--r-c); background: var(--error-soft); color: var(--error); font: var(--type-small); }
.cf-fail[hidden] { display: none; }
.cf .btn { height: 48px; margin-top: 8px; }
.cf .btn:disabled { opacity: .6; cursor: default; }
.cf-done { display: flex; flex-direction: column; align-items: flex-start; margin-top: 24px; padding: 28px; border-radius: var(--r-2); background: var(--soft); }
.cf-done[hidden] { display: none; }
.cf-done .h4 { margin-top: 16px; }
.cf-done .btn { margin-top: 20px; }
@media (max-width: 520px) { .cf { grid-template-columns: minmax(0, 1fr); } .cf .fl { grid-column: 1 / -1; } }

/* ---------- Legal: the short version first, then the full text, one section to a row you open ---------- */
.l-hero .date { margin: 20px 0 0; font: var(--type-lede); color: var(--tone); }
.lswitch { display: inline-flex; gap: 2px; margin-top: 32px; padding: 4px; border-radius: var(--r-pill); background: rgba(4, 6, 51, .06); }
.lswitch a { padding: 8px 16px; border-radius: var(--r-pill); font: var(--type-control); color: var(--tone); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease); }
.lswitch a:hover { color: var(--ink); }
.lswitch a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }
.l-band { margin-top: 40px; padding: 40px; }   /* the short version on the neutral cloth, white cards as on the contact page */
.l-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.l-card { padding: 24px; display: flex; flex-direction: column; gap: 20px; background: #fff; }
.l-card p { margin: 0; font: var(--type-body); text-wrap: pretty; }
.l-full .head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.l-full .faq { scroll-margin-top: 100px; }
.l-full .faq summary > span:first-child { display: flex; }
.l-full .faq summary .n { min-width: 32px; color: var(--tone); font-variant-numeric: tabular-nums; }
.l-full .faq-body { padding: 0 48px 12px 32px; }   /* in line with the section titles, past their numbers */
/* The document text */
.doc p, .doc li { font: var(--type-read); color: rgba(4, 6, 51, .84); text-wrap: pretty; }
.doc p { margin: 0 0 16px; padding: 0; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 10px; padding-left: 4px; }
.doc li::marker { color: var(--tone); }
.doc li b { font-weight: 600; color: var(--ink); }
.doc a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 1020px) { .l-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .l-band { padding: 16px; } }
@media (max-width: 560px) {
  .l-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .l-card { flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px; }
  .l-full .faq-body { padding: 0 0 12px; }
}