/* ==========================================================================
   how-to-sign (S701) — on top of the guide kit (pages/_guide.css).
   Seven steps, each with its words and the real screen. The phone screens show by default under 900px and the
   computer screens above; scripts/pages/how-to-sign.js adds the switch (body[data-hts]). Plain even borders,
   no edge stripes; the step numbers are the order the signer meets the screens.
   ========================================================================== */

html body .hts-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
html body .hts-facts li {
  padding: 6px 14px; border-radius: 999px; background: #e8f1fb; color: var(--deep);
  font: 600 14px/1.3 var(--font-sans);
}
html body .hts-device { display: inline-flex; margin-top: 22px; padding: 4px; gap: 4px; border-radius: 999px; background: #fff; box-shadow: var(--gd-card); width: max-content; max-width: 100%; }
html body .hts-device[hidden] { display: none; }
html body .hts-device button {
  border: 0; background: transparent; color: var(--slate); padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--font-sans);
}
html body .hts-device button[aria-pressed="true"] { background: var(--blue); color: #fff; }
html body .hts-device button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

html body .hts-body { padding-top: 40px; padding-bottom: 24px; }
html body .hts-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
html body .hts-step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: 32px; border-radius: 22px; background: #fff; border: 1px solid #dde6f0;
}
html body .hts-text { display: grid; gap: 12px; min-width: 0; color: var(--slate); }
html body .hts-text h2 { margin: 0; color: var(--ink); font: 800 clamp(22px, 2.6vw, 30px)/1.2 var(--font-display, Montserrat, sans-serif); letter-spacing: -.01em; text-wrap: balance; }
html body .hts-text p, html body .hts-text ul { margin: 0; font-size: 16.5px; line-height: 1.6; }
html body .hts-text ul { padding-left: 22px; display: grid; gap: 6px; list-style: disc; }
html body .hts-text li { padding-left: 2px; }
html body .hts-text li::marker { color: var(--blue); }
html body .hts-text strong { color: var(--ink); }
html body .hts-num {
  display: flex; align-items: center; gap: 10px; color: var(--blue);
  font: 700 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
}
html body .hts-num span {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 16px; letter-spacing: 0;
}
html body .hts-step--maybe .hts-num span { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
html body .hts-btn {
  display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 600 14px/1.2 var(--font-sans); white-space: nowrap;
}
html body .hts-btn--ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #cfd9e5; }
html body .hts-btn--ember { background: var(--orange); }

html body .hts-shot { margin: 0; display: grid; justify-items: center; min-width: 0; }
html body .hts-shot img { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid #dde6f0; }
html body .hts-shot .hts-phone { width: 300px; border-radius: 26px; box-shadow: 0 18px 40px -24px rgba(16, 45, 73, .4); }
html body .hts-shot .hts-desk { width: 100%; max-width: 1040px; border-radius: 12px; box-shadow: 0 18px 40px -26px rgba(16, 45, 73, .4); }
html body .hts-shot figcaption { margin-top: 10px; color: var(--mute); font-size: 13.5px; text-align: center; }

/* Which screens show: by width without the switch; the switch decides once the script runs. */
html body .hts-desk { display: none; }
@media (min-width: 900px) {
  html body:not([data-hts]) .hts-step:not(.hts-step--both) .hts-phone { display: none; }
  html body:not([data-hts]) .hts-desk { display: block; }
  html body:not([data-hts]) .hts-step:not(.hts-step--both) { grid-template-columns: minmax(0, 1fr); }
}
html body[data-hts="desktop"] .hts-step:not(.hts-step--both) .hts-phone { display: none; }
html body[data-hts="desktop"] .hts-desk { display: block; }
html body[data-hts="desktop"] .hts-step:not(.hts-step--both) { grid-template-columns: minmax(0, 1fr); }

html body .hts-faq { max-width: 860px; margin: 48px auto 0; }

@media (max-width: 760px) {
  html body .hts-step { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
  html body .hts-shot .hts-phone { width: min(300px, 100%); }
  html body .hts-text p, html body .hts-text ul { font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body .hts-device button { transition: background 160ms ease, color 160ms ease; }
}
html body .hts-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
html body .hts-faq > h2 { margin-bottom: 20px; }

/* Things to watch out for: two columns of plain cards, the heading of each a short instruction */
html body .hts-watch { margin-top: 48px; display: grid; gap: 14px; }
html body .hts-watch h2 { margin: 0; text-align: center; color: var(--ink); font: 800 clamp(24px, 3vw, 32px)/1.2 var(--font-display, Montserrat, sans-serif); letter-spacing: -.01em; }
html body .hts-watch-lead { margin: 0 auto 6px; max-width: 60ch; text-align: center; color: var(--slate); font-size: 16.5px; }
html body .hts-watch-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body .hts-watch-list li { display: grid; gap: 6px; align-content: start; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid #dde6f0; }
html body .hts-watch-list b { color: var(--ink); font: 700 17px/1.3 var(--font-sans); }
html body .hts-watch-list span { color: var(--slate); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 760px) { html body .hts-watch-list { grid-template-columns: minmax(0, 1fr); } }