/* /start-here/: beginner questions in the selling-page look. Loaded after home.css and topic-pitch.css; reuses their hm- / tp- parts. */

/* Question number in eyebrows and the index */
.sh-num { font-family: var(--hm-serif); font-weight: 600; color: var(--hm-gold-ink); letter-spacing: .06em; }
.hm-eyebrow .sh-num { margin-right: .625rem; }
.sh-byline { color: var(--hm-muted); font-size: .875rem; margin-top: 1.25rem; }

/* Hero: the short answer sits beside the title */
.sh-hero-inner { align-items: start; }
.sh-quick { padding: 2rem 2rem 2.25rem; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-top: .25rem solid var(--hm-jade); box-shadow: var(--hm-shadow); }
.sh-quick h2 { font-size: 1.375rem; }
.sh-quick ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .875rem; }
.sh-quick li { position: relative; padding-left: 1.5rem; color: var(--hm-muted); line-height: 1.7; }
.sh-quick li::before { content: ""; position: absolute; left: .125rem; top: .65em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--hm-jade); }
.sh-quick li strong { font-family: inherit; font-weight: 700; color: var(--hm-text); }

/* Index of the eight questions, in place of a side table of contents */
.sh-index-label { margin-top: 4rem; color: var(--hm-muted); font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
.sh-index { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.sh-index a { height: 100%; display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: baseline; padding: 1rem 1.125rem; border-radius: var(--hm-radius-sm); background: var(--hm-surface); border: .0625rem solid var(--hm-line); color: var(--hm-text); }
.sh-index a:hover { border-color: rgb(74 122 115 / .45); box-shadow: var(--hm-shadow-hover); }
.sh-index strong { font-weight: 600; font-size: 1rem; line-height: 1.55; }

/* Body copy: links and reference marks */
.sh-prose a:not(.sh-ref), .sh-note a:not(.sh-ref) { color: var(--hm-jade-ink); text-decoration: underline; text-underline-offset: .1875rem; }
.sh-ref { color: var(--hm-jade-ink); font-size: .8125em; white-space: nowrap; }
.sh-ref:hover { color: var(--hm-text); }
.sh-answer { font-family: var(--hm-serif); font-weight: 600; font-size: 1.5rem; color: var(--hm-jade-ink); margin-top: 1rem; }
.sh-note { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--hm-radius-sm); background: var(--hm-jade-tint); color: var(--hm-text); line-height: 1.75; }
.sh-note strong { font-family: inherit; font-weight: 700; color: var(--hm-jade-ink); }

/* Q2: table beside the decision */
.sh-which { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; align-items: start; }
.sh-which .hm-section-head { margin-bottom: 0; }
.sh-which .sh-note { margin-top: 1.75rem; }
.sh-which .tp-compare thead th { white-space: normal; }
.sh-pick { margin-top: 3rem; }

/* Q3: three stages */
.sh-timeline { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* Q5: knee tips */
.sh-tips { padding: 1.75rem; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); box-shadow: var(--hm-shadow); }
.sh-tips h3 { font-size: 1.25rem; }
.sh-tips ol { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; counter-reset: tip; }
.sh-tips li { counter-increment: tip; display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding-top: .75rem; border-top: .0625rem solid var(--hm-line); line-height: 1.7; }
.sh-tips li::before { content: counter(tip, decimal-leading-zero); font-family: var(--hm-serif); font-weight: 600; color: var(--hm-gold-ink); }
.sh-body-side { display: grid; gap: 1.5rem; }
.sh-body-side .tp-prose p:first-child { color: var(--hm-muted); }
.sh-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--hm-radius-card); }
.page-home .sh-figure { margin-top: 2rem; }
.sh-pick .tp-next-card { background: var(--hm-surface); }

/* Q6: what is common vs. when to stop */
.sh-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sh-signal { padding: 1.75rem; border-radius: var(--hm-radius-card); background: var(--hm-surface); border: .0625rem solid var(--hm-line); border-top: .25rem solid var(--hm-jade); box-shadow: var(--hm-shadow); }
.sh-signal-stop { border-top-color: var(--hm-cinnabar); }
.sh-signal h3 { font-size: 1.375rem; }
.sh-signal-stop h3 { color: var(--hm-cinnabar); }
.sh-signal p { color: var(--hm-muted); margin-top: .625rem; line-height: 1.75; }
.sh-signal p strong { font-family: inherit; font-weight: 700; color: var(--hm-text); }
.sh-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; margin-top: 2rem; color: var(--hm-muted); line-height: 1.75; }

/* Q7 + Q8: two short answers side by side */
.sh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.sh-pair .hm-section-head { margin-bottom: 1.5rem; }

/* References keep their ids for the 〔n〕 marks */
.sh-refs { list-style: none; padding: 0; margin: 0; counter-reset: ref; border-top: .0625rem solid var(--hm-line-strong); }
.sh-refs li { counter-increment: ref; display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem .5rem; padding: 1.125rem 0; border-bottom: .0625rem solid var(--hm-line); }
.sh-refs li::before { content: "〔" counter(ref) "〕"; grid-row: span 2; color: var(--hm-gold-ink); font-weight: 700; font-size: .875rem; padding-top: .125rem; }
.sh-refs a { color: var(--hm-jade-ink); font-weight: 700; line-height: 1.6; }
.sh-refs a:hover { color: var(--hm-text); }
.sh-refs p { color: var(--hm-muted); font-size: .875rem; line-height: 1.7; }
.sh-refs li:target { background: var(--hm-jade-tint); }
.sh-sources-head p:not(.hm-eyebrow) { color: var(--hm-muted); font-size: .9375rem; margin-top: .75rem; }
.sh-sources-head a { color: var(--hm-jade-ink); text-decoration: underline; text-underline-offset: .1875rem; }

/* Closing band: two first lessons */
.sh-cta-links { margin-top: 1rem; }

@media (max-width: 60em) {
  .sh-index { grid-template-columns: 1fr 1fr; }
  .sh-which, .sh-pair { grid-template-columns: 1fr; gap: 2rem; }
  .sh-pair { gap: 4rem; }
  .sh-timeline { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 40em) {
  .sh-quick { padding: 1.5rem 1.25rem 1.75rem; }
  .sh-index-label { margin-top: 2.5rem; }
  .sh-index { grid-template-columns: 1fr; gap: .5rem; }
  .sh-index a { padding: .875rem 1rem; }
  .sh-answer { font-size: 1.3125rem; }
  .sh-timeline { grid-template-columns: 1fr; }
  .sh-signals, .sh-after { grid-template-columns: 1fr; }
  .sh-signal, .sh-tips { padding: 1.375rem 1.25rem; }
  .sh-pair { gap: 3rem; }
  .sh-refs li { grid-template-columns: 2rem 1fr; }
}