/* Your first reading (preview, Nov 3 2026): one card, three named steps,
   modelled on the app's first run (named dots with state, no percent). */
.st { position: relative; z-index: 2; }
.st-wrap { min-height: 100svh; padding: calc(88px + 4vh) var(--gutter) 120px; display: grid; align-items: start; justify-items: center; }
.st-card { width: 100%; max-width: 760px; gap: 26px; background: rgba(10,16,13,0.8); }
.st-step { display: grid; gap: 16px; }
.st-step[hidden] { display: none; }
.st-step h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; }
.st-step h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.st-step h2:focus, .st-step h1:focus { outline: none; }
.st-step h3 { margin: 0; font: 500 18px/1.3 var(--serif); color: var(--ivory); }
.st-host { font-weight: 600; color: var(--ivory); text-transform: none; letter-spacing: 0; }

/* Named dots: where you are and what's done. */
.st-dots { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-dots li { position: relative; display: grid; gap: 8px; font: 500 12px/1.3 var(--sans); color: rgba(201,210,205,0.62); }
.st-dots i { display: block; height: 3px; border-radius: 3px; background: rgba(246,243,234,0.14); transition: background 400ms ease; }
.st-dots li.done i { background: rgba(111,211,166,0.6); }
.st-dots li[aria-current] { color: var(--ivory); }
.st-dots li[aria-current] i { background: var(--mint); }

/* 1 your site */
.st-form { display: grid; gap: 8px; margin-top: 4px; }
.st-form label { font: 600 13px/1 var(--sans); color: var(--muted); }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.st-row input { min-width: 0; height: 56px; padding: 0 18px; border-radius: 16px; border: 1px solid rgba(246,243,234,0.22); background: rgba(246,243,234,0.06); color: var(--ivory); font: 400 17px/1 var(--sans); outline: 0; transition: border-color 200ms ease; }
.st-row input:focus { border-color: var(--mint); }
.st-row input::placeholder { color: rgba(201,210,205,0.6); }
.st-row .btn { border: 0; cursor: pointer; font-family: var(--sans); }
.st-err { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--amber); }
.st-promise, .st-plan { margin: 0; }
.st-plan { color: var(--gold); }

/* 2 reading: a feed that resolves line by line */
.st-feed { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.st-feed li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: rgba(201,210,205,0.4); transition: color 300ms ease; }
.st-feed li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(246,243,234,0.2); box-sizing: border-box; }
.st-feed li.on { color: var(--ivory); }
.st-feed li.on::before { border-color: var(--mint); border-right-color: transparent; animation: st-spin 900ms linear infinite; }
.st-feed li.done { color: var(--muted); }
.st-feed li.done::before { border: 0; background: var(--mint); box-shadow: 0 0 0 4px rgba(111,211,166,0.16); }
.st-feed li.done::after { content: ""; position: absolute; left: 6px; top: 7px; width: 6px; height: 3px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* 3 what Feder found */
.st-headline { font-size: clamp(24px, 2.8vw, 32px) !important; }
.st-groups { display: grid; gap: 12px; }
.st-group { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: rgba(246,243,234,0.05); border: 1px solid rgba(246,243,234,0.12); }
.st-group .small { margin: 0; }
.st-tools { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.st-tools li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-top: 8px; border-top: 1px solid rgba(246,243,234,0.08); }
.st-tools li > b { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.st-tools b { font-weight: 600; font-size: 15px; color: var(--ivory); }
.st-state { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--mint); }
.st-tools code { flex: 1 0 100%; overflow-wrap: anywhere; font: 500 12px/1.4 var(--mono); color: rgba(201,210,205,0.7); }
.st-none { margin: 0; color: var(--muted); }
.st-checks-wrap, .st-watch { display: grid; gap: 10px; margin-top: 6px; }
.st-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-checks li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.st-checks li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 9px; border-radius: 50%; }
.st-checks li.pass::before { background: var(--mint); }
.st-checks li.gap::before { background: var(--amber); }
.st-watch-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-watch-list li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(111,211,166,0.45); background: rgba(111,211,166,0.08); }
.st-watch-list li.soon { border-color: rgba(246,243,234,0.14); background: rgba(246,243,234,0.04); }
.st-watch-list b { font-size: 15px; color: var(--ivory); }
.st-watch-list span { font-size: 13px; color: var(--mint); }
.st-watch-list .soon span { color: var(--muted); }
.st-limits { margin: 4px 0 0; line-height: 1.55; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.st-actions .btn { border: 0; cursor: pointer; font-family: var(--sans); }
.st-again { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--mint); font: 600 15px/1 var(--sans); cursor: pointer; }
.st-again:hover { text-decoration: underline; }

/* the account, at the foot of the results */
.st-keep { display: grid; gap: 10px; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(246,243,234,0.12); }
.st-keep p { margin: 0; }
.st-again-in { min-height: 0; padding: 0; font-size: inherit; }
.st-code { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--mint); }
.st-code[hidden] { display: none; }
.st-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-plan-opt { display: grid; gap: 6px; justify-items: start; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(246,243,234,0.16); background: rgba(246,243,234,0.05); color: var(--ivory); text-align: left; font-family: var(--sans); cursor: pointer; transition: border-color 200ms ease, background 200ms ease; }
.st-plan-opt b { font: 500 22px/1.1 var(--serif); }
.st-cad { font-size: 14px; color: var(--mint); font-weight: 600; }
.st-amt { font-size: 14px; color: var(--muted); }
.st-plan-opt[aria-checked="true"] { border-color: var(--mint); background: rgba(111,211,166,0.1); box-shadow: inset 0 0 0 1px var(--mint); }
.st-plan-opt:focus-visible, .st-again:focus-visible, .st-row input:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.st-door[hidden] { display: none; }
.st-doors { align-items: center; }
.st-door-alt { display: inline-flex; align-items: center; text-decoration: none; }
.st-door-note { margin: 0; color: var(--gold); }
.st-keep .small a { color: var(--mint); }

@media (max-width: 720px) {
  .st-wrap { padding: calc(76px + 2vh) 12px 120px; }
  .st-card { padding: 24px 20px; border-radius: 22px; gap: 22px; }
  .st-dots span { font-size: 11px; }
  .st-row { grid-template-columns: minmax(0, 1fr); }
  .st-row .btn { width: 100%; }
  .st-plans { grid-template-columns: minmax(0, 1fr); }
  .st-actions .btn { width: 100%; text-align: center; }
  .st-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .st-feed li.on::before { animation: none; } }

/* Portrait tablets (Nathanael, Nov 5): the card used to start over the
   greenhouse, so only the dark top of the dome peeked out above it. It now
   starts under the lit glass, and the dome reads whole above the card. */
@media (min-width: 721px) and (max-aspect-ratio: 4/5) {
  .st-wrap { padding-top: max(calc(88px + 4vh), 34svh); }
}