/* Brace For It V2 · /home-screen: put Brace For It on your phone's home screen (owner, Oct 31, 2026).
   A tool-type page: title, the 3-step intro, then the tool: an iPhone | Android picker and three steps, each with the
   picture of the menu it names. Uses v2.css + render.css (intro strip, picker, crumb, sources, next step). */
.hs { padding-top: var(--s4); display: grid; gap: var(--s5); }
.hs [hidden] { display: none !important; }
.hs-head { display: grid; gap: 6px; }
.hs-head h1 { margin: 0; }
.hs-head .hs-why { margin: 0; color: var(--ink-2); max-width: 60ch; }
.hs #tool { padding: var(--s4); display: grid; gap: var(--s4); }
.hs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: hs; }
.hs-steps > li { display: grid; gap: var(--s3); align-content: start; }
.hs-t { position: relative; padding-left: 40px; margin: 0; font: 700 var(--t-md)/1.4 var(--f-display); color: var(--ink); }
.hs-t::before { counter-increment: hs; content: counter(hs); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 14px var(--f-display); color: var(--ink); border: 1.5px solid var(--edge); }
.hs-t small { display: block; margin-top: 4px; font: 400 var(--t-sm)/1.45 var(--f-text); color: var(--ink-2); }
.hs-shot { margin: 0 0 0 40px; max-width: 240px; }
.hs-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.hs-also { margin: 0; font-size: var(--t-sm); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.hs-done { display: flex; gap: var(--s3); align-items: center; margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); }
.hs-done img { width: 48px; height: 48px; flex: none; border-radius: 11px; }
.hs-done p { margin: 0; font: 700 var(--t-md)/1.4 var(--f-display); }
@media (min-width: 900px) {
  .hs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .hs-shot { margin-left: 0; }
}
/* the beta bar is one short line here, as on the tool pages, so the steps clear the fold on a phone */
@media (max-width: 640px) {
  body[data-page="home-screen"] .beta-bar .beta-txt { display: none; }
  body[data-page="home-screen"] .beta-bar .wrap { padding-block: 0; }
  body[data-page="home-screen"] .beta-bar a { font-size: 13px; }
}
@media print { .hs .pick, .hs .nextstep { display: none !important; } .hs .hs-pane[hidden] { display: block !important; } }
.hs h2.h3 { font-size: var(--t-h3); margin: 0; }
.hs .sources { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; }