/* BowlScout home, six-category "Start here" band (BS-A8-HOME-BUILD-20261031; look of the Owner-approved prototype proto-home).
   Uses only the site tokens (--line, --paper, --sh, --sage, --teal, --ink, --mut, --btn, --btnt, --bg, --line2).
   Intentionally not used: new animation, parallax, hover-only reveals, prices, ratings.
   Motion: none added (the question panel just appears). Loaded on the front page only; critical-home.css is untouched. */

.hm-start .head{margin-bottom:22px}
.bs-home .hm-start{padding-top:40px}
.hm-anchor{display:block;height:0} /* the site's html{scroll-padding-top} (critical.css) already clears the sticky header */

/* six equal tiles: 3 / 2 / 1 columns */
.hm-start .cx-tile-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hm-start .cx-tile{border:1px solid var(--line);border-radius:16px;background:var(--paper);min-width:0;box-shadow:var(--sh);overflow:hidden}
.hm-start .cx-tile--live a{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;min-height:44px;color:inherit;text-decoration:none}
.hm-start .cx-tile--live a:hover{background:var(--sage)}
.hm-start .cx-tile--live a:hover .cx-tile__go{text-decoration:underline}
.hm-start .cx-tile--live img{display:block;width:100%;height:auto;min-height:0;aspect-ratio:16/8.5;object-fit:cover}
.hm-start .cx-tile__body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.hm-start .cx-tile__k{font:700 21px/1.2 Georgia,serif;color:var(--ink)}
.hm-start .cx-tile__n{font:700 14px/1.2 ui-sans-serif,system-ui,sans-serif;color:var(--teal)}
.hm-start .cx-tile__q{font-size:14.5px;line-height:1.45;color:var(--mut)}
.hm-start .cx-tile__go{margin-top:auto;padding-top:6px;font-weight:700;color:var(--teal)}
.hm-start .cx-tile--live a:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:16px}
.hm-start .cx-tile--live.is-open{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
@media (max-width:1040px){.hm-start .cx-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .hm-start .cx-tile-grid{grid-template-columns:1fr;gap:10px}
  .hm-start .cx-tile--live a{grid-template-columns:38% 1fr;grid-template-rows:auto}
  .hm-start .cx-tile--live img{height:100%;aspect-ratio:auto;min-height:104px}
  .hm-start .cx-tile__body{padding:12px 14px;gap:4px}
  .hm-start .cx-tile__k{font-size:18px}
  .hm-start .cx-tile__q{font-size:13.5px;display:block}
  .hm-start .cx-tile__go{padding-top:2px;font-size:14.5px}
}

.hm-start .cx-asof{font-size:14.5px;color:var(--mut)}
.hm-start .cx-asof b{color:var(--ink)}
.hm-asof{margin:16px 0 4px;max-width:78ch}
.hm-tools{margin-top:14px}
.hm-start .hm-sub{margin:34px 0 0;font:700 15px/1.3 ui-sans-serif,system-ui,sans-serif;color:var(--mut);letter-spacing:.02em}
.hm-start .needs{margin-top:10px}

/* feeder question step: a full-width grid item inserted after the clicked tile's row */
.hm-step-li{grid-column:1/-1;list-style:none;min-width:0}
.hm-step-li[hidden]{display:none}
.hm-step{border:1px solid var(--teal);border-radius:16px;background:var(--paper);box-shadow:var(--sh);padding:20px 22px 18px}
.hm-step__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hm-step__k{margin:0;font:700 12.5px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.hm-step__x{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink);font:600 14px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.hm-step__x:hover{background:var(--sage)}
.hm-step h3{margin:6px 0 12px;font-size:clamp(21px,2.2vw,26px);line-height:1.2;color:var(--ink)}
.hm-step h3:focus{outline:none}
.hm-seg{display:inline-flex;gap:8px;margin:0 0 14px}
.hm-seg button{min-height:44px;min-width:96px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);background:var(--paper);color:var(--ink);font:600 15px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.hm-seg button:hover{background:var(--sage)}
.hm-seg button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btnt)}
.hm-q{margin:0 0 10px;font-weight:700;color:var(--ink)}
.hm-opts{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hm-opts a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:60px;height:100%;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);text-decoration:none}
.hm-opts a:hover{border-color:var(--teal);background:var(--sage)}
.hm-opts strong{font-size:16px;line-height:1.25}
.hm-opts small{font-size:13.5px;line-height:1.35;color:var(--mut)}
.hm-opts .is-lead a{border-color:var(--teal)}
.hm-hub{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0}
.hm-hub a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--teal)}
.hm-step a:focus-visible,.hm-step button:focus-visible,.hm-start .needs a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:1040px){.hm-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hm-step{padding:16px 14px}.hm-opts{grid-template-columns:1fr}.hm-seg{display:flex}.hm-seg button{flex:1}}