/* MakerStory buyer page — light-first and photo-led, mirroring the app (DESIGN_SYSTEM.md).
   Dark appearance follows the visitor's system setting. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --group: #f2f2f7;
  --raised: #ffffff;
  --line: #e5e5ea;
  --text: #1c1c1e;
  --muted: #6c6c70;
  --accent: #8e4f2e;
  --accent-soft: rgba(142, 79, 46, 0.1);
  --green: #248a3d;
  --green-soft: rgba(36, 138, 61, 0.1);
  --red: #d70015;
  --red-soft: rgba(215, 0, 21, 0.08);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, "New York", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; --group: #1c1c1e; --raised: #2c2c2e; --line: #38383a; --text: #f2f2f7; --muted: #aeaeb2;
    --accent: #de9a73; --accent-soft: rgba(222, 154, 115, 0.14); --green: #30d158; --green-soft: rgba(48, 209, 88, 0.14);
    --red: #ff6961; --red-soft: rgba(255, 105, 97, 0.14);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--sans); }
main { max-width: 720px; margin: 0 auto; padding: 0 16px 56px; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font: 700 clamp(2rem, 7.5vw, 2.7rem)/1.1 var(--serif); letter-spacing: -0.01em; margin-top: 4px; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 650; }
p { margin: 0.35em 0 0; }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.82em; word-break: break-all; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ico svg, .badge svg, .icon svg, .why-ico svg { display: block; width: 100%; height: 100%; }

.preview-banner { position: sticky; top: 0; z-index: 2; background: var(--accent); color: #fff; padding: 10px 16px; font-size: 0.9rem; text-align: center; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; color: var(--muted); font-size: 0.9rem; }
.brand { font-weight: 700; color: var(--text); }
.notice { padding: 56px 0; }
.lede { color: var(--muted); font-size: 1.05rem; }

/* Hero */
.hero-photo { margin: 0 0 18px; }
.hero-photo img, .photo-wait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--group); }
.photo-wait { display: grid; place-items: center; padding: 20px; text-align: center; color: var(--muted); font-size: 0.95rem; }
.eyebrow { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.maker { color: var(--muted); margin-top: 8px; }
.maker strong { color: var(--text); font-weight: 600; }
.aside { font-size: 0.85rem; }

/* Verdict: the one thing a buyer should take away. */
.verdict { margin-top: 22px; padding: 18px; border-radius: var(--r); background: var(--group); }
.verdict h2 { font-size: 1.2rem; }
.verdict p { margin-top: 4px; color: var(--muted); font-size: 0.95rem; }
.verdict-head, .verdict-wait, .verdict-fail { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.verdict-ok { background: linear-gradient(var(--green-soft), var(--green-soft)), var(--group); }
.verdict-fail { background: var(--red-soft); box-shadow: inset 0 0 0 1.5px var(--red); }
.badge { width: 44px; height: 44px; border-radius: 50%; padding: 8px; color: #fff; }
.badge-ok { background: var(--green); padding: 6px; }
.badge-fail { background: var(--red); }
.badge-muted { background: var(--muted); }
.spinner { width: 36px; height: 36px; margin: 4px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.tile { background: var(--raised); border-radius: 12px; padding: 12px; min-width: 0; }
.tile strong { display: block; font-size: 1.35rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile span { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.3; color: var(--muted); }

/* Sections */
.section { padding-top: 40px; }
.section-note { color: var(--muted); font-size: 0.92rem; margin-top: 4px; }
.fine { color: var(--muted); font-size: 0.82rem; margin-top: 10px; }

/* Timeline of stages */
.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.stage { position: relative; padding: 0 0 8px 30px; }
.stage::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.stage:last-child::before { display: none; }
.stage-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.stage-dot { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 4px var(--accent); }
.stage-date { margin-left: auto; color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.shot { margin: 0 0 24px; }
.shot img, .shot .photo-wait { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--group); }
.shot figcaption { padding-top: 10px; }
.caption { font: 1.1rem/1.4 var(--serif); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--group); font-size: 0.82rem; font-weight: 550; line-height: 1.3; }
.chip .ico { width: 16px; height: 16px; flex: none; }
.chip code { font-size: 0.78rem; font-weight: 500; }
.chip-ok { background: var(--green-soft); color: var(--green); }
.chip-ok code { color: inherit; }
.chip-muted { color: var(--muted); }
.meta { font-size: 0.88rem; color: var(--muted); margin-top: 6px; }

/* Checks */
.group { list-style: none; margin: 14px 0 0; padding: 0 16px; background: var(--group); border-radius: var(--r); }
.row { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row strong { font-weight: 600; }
.row p { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); }
.icon { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; padding: 4px; color: #fff; }
.row-pass .icon { background: var(--green); }
.row-fail .icon { background: var(--red); }
.row-note .icon { box-shadow: inset 0 0 0 1.5px var(--muted); }

/* Why it's hard to fake */
.why { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.why li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.why-ico { width: 40px; height: 40px; border-radius: 12px; padding: 8px; background: var(--accent-soft); color: var(--accent); }
.why strong { font-weight: 600; }
.why p { margin: 2px 0 0; color: var(--muted); font-size: 0.93rem; }

/* Disclosures */
.disclosure { padding-top: 32px; }
.disclosure summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-weight: 600; border-top: 1px solid var(--line); padding-top: 12px; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.disclosure[open] summary::after { content: "−"; }
.disclosure-body { color: var(--muted); font-size: 0.95rem; }
.disclosure-body p { margin: 0.6em 0 0; }
.plain { margin: 6px 0 0; padding-left: 1.1em; }
.plain li { margin: 6px 0; }
.tech { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0; font-size: 0.88rem; }
.tech dt { color: var(--muted); }
.tech dd { margin: 0; color: var(--text); min-width: 0; }
.history { padding-left: 1.2em; font-size: 0.85rem; }

.footer { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }

@media (min-width: 760px) {
  main { padding: 0 20px 64px; }
  .hero-photo img, .hero .photo-wait { aspect-ratio: 4 / 3; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}