/* App-only styles. The base is style.css, copied verbatim from the marketing site by
   tools/sync-style.mjs. Never edit style.css here: edit it on the site and re-sync, or the
   two drift and the app slowly stops looking like the brand. */

/* order form and delivered documents */
.tester label{display:block;font-size:.92rem;color:var(--quiet);margin:.9rem 0 .3rem}
.tester input[type=text],.tester input[type=email]{width:100%;padding:.75rem 1rem;border:1px solid var(--rule);
  border-radius:2px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.tester input:focus{outline:2px solid var(--signal);outline-offset:1px}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.doc h2{font-size:1.5rem;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.doc h3{margin-top:1.6rem}
.doc pre{background:var(--ink);color:var(--paper);padding:1.2rem;border-radius:3px;overflow-x:auto;font-size:.85rem;line-height:1.5}
.doc code{font-size:.9em}
.doc :not(pre)>code{background:var(--rule);padding:.1em .35em;border-radius:2px}
.tablewrap{overflow-x:auto;margin:1.2rem 0}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.94rem}
.tablewrap td,.tablewrap th{border:1px solid var(--rule);padding:.5rem .7rem;text-align:left;vertical-align:top}
.tablewrap tr:first-child td,.tablewrap th{background:var(--card);font-family:var(--display);font-weight:600}

/* Competitor rows on the Soundalike form: a name and an address belong together, and
   pairing them visually stops somebody filling in three addresses and no names. */
.rival{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.rival label{grid-column:1 / -1;margin-bottom:0}
@media (max-width:560px){.rival{grid-template-columns:1fr}}