/* The optional guide is one question on a quiet reading page. */
.starting-point { width:min(100%,42rem); margin:0 auto; padding:clamp(40px,6vh,64px) 0 var(--space-16); }
.starting-point .eyebrow { margin-bottom:var(--space-5); color:var(--action); }
.starting-point h2 { font:400 clamp(32px,3.5vw,42px)/1.2 var(--serif); letter-spacing:-.025em; outline:none; }
.starting-note { max-width:55ch; margin:var(--space-5) 0 0; color:var(--muted); font:var(--type-label)/1.75 var(--sans); }
.starting-choices { display:grid; gap:var(--space-3); margin:var(--space-8) 0; }
.starting-choices button { min-height:64px; padding:var(--space-5) var(--space-6); border:1px solid var(--rule); border-radius:var(--radius); background:var(--surface); color:var(--ink); text-align:left; font:19px/1.55 var(--serif); transition:background .18s ease,border-color .18s ease; }
.starting-choices button:hover,.starting-choices button[aria-pressed=true] { background:var(--wash); border-color:var(--action); }
.starting-choices button:active { background:var(--paper-deep); }
.starting-choices [data-starting-action] { min-height:var(--control-height); padding:13px var(--space-5); font:500 var(--type-label)/1.5 var(--sans); text-align:center; }
.starting-choices [data-starting-action=finish] { border-color:var(--action); background:var(--action); color:var(--surface); }
.starting-choices [data-starting-action=finish]:hover { border-color:var(--action-hover); background:var(--action-hover); }
.starting-thought { margin:var(--space-8) 0; padding:4px 0 4px var(--space-6); border-left:2px solid var(--wheat); color:var(--action-hover); font:30px/1.45 var(--serif); letter-spacing:-.015em; }
.starting-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-8); margin-top:var(--space-8); padding-top:var(--space-4); border-top:1px solid var(--rule); }
.starting-privacy,.starting-coverage { max-width:62ch; color:var(--muted); font:var(--type-small)/1.75 var(--sans); }
.starting-privacy { margin-top:var(--space-6); }
.starting-coverage { margin:var(--space-4) 0 0; }
.starting-point > .starting-note + .starting-note { margin-top:var(--space-4); }
.starting-point > .button { margin:var(--space-6) 0; }
@media(max-width:600px) {
  .starting-point { padding:var(--space-8) 0 var(--space-12); }
  .starting-point h2 { font-size:32px; }
  .starting-choices { margin:var(--space-6) 0; }
  .starting-choices button { padding:18px var(--space-5); font-size:18px; }
  .starting-thought { padding-left:var(--space-5); font-size:27px; }
  .starting-navigation { gap:var(--space-2) var(--space-6); margin-top:var(--space-6); }
}
@media(max-height:700px) and (min-width:601px) { .starting-point { padding-top:var(--space-8); } }