/* Quality pass 01: restrained typography, real evidence, keyboard-first interaction. */
:root { --subtle: #a0a69b; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.nav a:focus-visible,.button:focus-visible,.mobile-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.nav a { font: 13px var(--sans); letter-spacing: .06em; }
.button { min-height: 46px; font: 13px/1.5 var(--sans); letter-spacing: .02em; padding: 12px 20px; text-align: center; }
.quality-home .hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: auto; gap: clamp(28px,4vw,64px); padding-block: 30px 0; }
.quality-home .v10-section:first-child { padding-block: clamp(48px,6vw,90px) 72px; }
.quality-home .hero h1 { font-size: clamp(48px,6.3vw,88px); line-height: 1.07; letter-spacing: -.065em; margin-block: 22px 26px; }
.quality-home .hero h1 em { white-space: nowrap; }
.quality-home .hero-lede { font-size: clamp(16px,1.35vw,20px); line-height: 1.8; max-width: 28em; }
.quality-home .hero-actions { gap: 12px; margin-top: 30px; }
.quality-home .hero-secondary { margin-block: 14px 0; }
.quality-home .hero-secondary .button { padding: 0; min-height: 44px; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.quality-home .hero-readouts { margin-top: 36px; }
.quality-home .hero-readouts strong { font: 600 18px var(--sans); }
.quality-home .hero-readouts span { font: 11px/1.7 var(--sans); letter-spacing: 0; }
.result-stage { margin: 0; min-width: 0; border: 1px solid var(--line); background: #191d18; box-shadow: 0 30px 70px #0003; }
.result-stage-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); }
.result-stage-head .eyebrow { margin:0; }
.result-size { color:var(--muted); font:11px var(--mono); white-space:nowrap; }
.result-image-wrap { aspect-ratio:4/3; display:grid; place-items:center; background:#eceae1; overflow:hidden; }
.result-image-wrap img { width:100%; height:100%; object-fit:contain; animation:result-enter .45s var(--ease) both; }
.result-stage-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px; }
.result-stage-foot figcaption { font:12px/1.6 var(--sans); color:var(--muted); }
.result-switch { display:flex; gap:4px; border:1px solid var(--line); padding:4px; flex-shrink:0; }
.result-switch button { min-height:40px; border:0; padding:8px 14px; color:var(--muted); background:transparent; cursor:pointer; font-size:13px; }
.result-switch button[aria-pressed="true"] { background:var(--accent); color:#12150b; }
.result-boundary { padding:0 22px 18px; margin:0; font-size:11px; line-height:1.7; color:var(--muted); }
.subpage h1 { font-size:clamp(38px,5.2vw,72px); line-height:1.16; letter-spacing:-.045em; max-width:16em; text-wrap:balance; }
.skip-link { position:fixed; top:8px; left:8px; z-index:50; padding:12px 18px; background:var(--accent); color:#12150b; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
@keyframes result-enter { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .quality-home .hero { grid-template-columns:1fr; gap:36px; } .quality-home .hero h1 { font-size:clamp(46px,8vw,76px); } .quality-home .hero-lede { max-width:36em; } .quality-home .hero-readouts { max-width:480px; } }
@media(max-width:640px) { .quality-home .v10-section:first-child { padding:38px 0 48px; } .quality-home .hero { padding:0; gap:28px; } .quality-home .hero h1 { font-size:clamp(44px,12vw,66px); } .quality-home .hero-actions { display:grid; } .quality-home .hero-secondary .button { font-size:11px; } .result-stage-head,.result-stage-foot { padding:14px; } .result-stage-head .eyebrow { font-size:9px; } .result-stage-foot { flex-wrap:wrap; } .result-switch { width:100%; } .result-switch button { flex:1; min-height:44px; } .result-boundary { padding:0 14px 14px; } .quality-home .hero-readouts strong { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .result-image-wrap img { animation:none; } }

/* Round 02 — field-to-form. The artifact, not an ornamental dashboard, is the focal point. */
:root { --subtle:#a0a69b; --max:1328px; }
html { scroll-padding-top:100px; }
body { line-height:1.7; }
.header-inner { gap:24px; min-height:76px; }
.brand { font-weight:700; letter-spacing:.045em; }
.nav a { letter-spacing:.02em; }
.button { gap:8px; }
.button:hover { transform:translateY(-2px); }
.mobile-toggle { min-height:44px; min-width:60px; font-size:12px; }
.v10-section { padding-block:clamp(64px,7vw,104px); }
.section-head { gap:40px; margin-bottom:40px; }
.section-head h2 { line-height:1.14; letter-spacing:-.04em; font-weight:650; }
.subpage-lede { line-height:1.85; font-size:17px; }
.meta { color:var(--subtle); font-size:11px; line-height:1.6; }
.eyebrow { letter-spacing:.08em; line-height:1.6; }
.quality-home .hero { gap:clamp(30px,4vw,60px); padding-top:0; }
.quality-home .hero h1 { letter-spacing:-.06em; font-weight:700; }
.quality-home .hero-readouts { margin-top:28px; }
.quality-home .hero-readouts span { color:var(--muted); }
.quality-home .v10-section:first-child { padding-block:64px 72px; }
.result-stage { box-shadow:0 24px 60px #0002; position:relative; }
.result-stage-head { padding:16px 20px; }
.result-image-wrap { background:#eceae1; }
.result-stage-foot { padding:16px 20px; }
.result-boundary { color:var(--muted); }
.quality-home .wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
.quality-home .output-card:nth-child(n) { grid-column:auto; margin:0; min-width:0; }
.quality-home .output-visual,
.quality-home .output-card:first-child .output-visual { aspect-ratio:16/9; min-height:0; background:#0b0d0b; }
.quality-home .output-visual img { width:100%; height:100%; object-fit:contain; }
.quality-home .output-copy { padding-top:16px; align-items:start; gap:18px; }
.quality-home .output-copy h3 { margin:7px 0; font-size:21px; letter-spacing:-.02em; }
.quality-home .output-copy p { color:var(--muted); font-size:14px; }
.quality-home .output-copy>a { flex-shrink:0; padding:12px 0; text-decoration:underline; text-underline-offset:5px; }
.quality-home .trace-strip { margin-top:32px; }
.quality-home .trace-strip b { font-size:24px; color:var(--accent); }
.quality-home .trace-strip span { font-family:var(--sans); font-size:14px; }
.quality-home .trace-strip small { font-family:var(--sans); font-size:11px; line-height:1.8; color:var(--muted); }
.skill-button { padding:22px; }
.skill-button h3 { font-size:22px; }
.skill-button p { color:var(--muted); font-size:14px; }
.skill-button-top { font-size:10px; color:var(--muted); }
.skill-button.is-active { border-color:var(--accent); background:#252d1a; }
.skill-preview { min-width:0; }
.skill-preview h3 { font-size:26px; }
.skill-preview p { line-height:1.8; }
.price-card { display:flex; flex-direction:column; padding:30px; }
.price-card h3 { font-size:25px; line-height:1.4; }
.price-card p { font-size:15px; line-height:1.85; }
.price-card .button { align-self:flex-start; margin-top:auto; }
.final-cta h2 { line-height:1.15; letter-spacing:-.04em; }
.final-cta p { max-width:38em; }
.site-footer { gap:24px; font-size:12px; line-height:1.8; }
.site-footer a { font-family:var(--sans); font-size:12px; }
.site-footer nav { gap:20px; }
.site-footer a:focus-visible,.archive-item:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }

/* Purchase flow: one proof action, one choice action, details on demand. */
.quality-layout .subpage { padding-block:64px 0; }
.layout-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; }
.quality-layout .layout-hero-copy { min-width:0; }
.quality-layout .subpage h1 { font-size:clamp(36px,3.8vw,56px); line-height:1.2; letter-spacing:-.045em; font-weight:700; text-wrap:pretty; margin:20px 0; }
.quality-layout .subpage-lede { font-size:16px; margin:0; }
.quality-layout .layout-founder-note { font-size:13px; line-height:1.9; margin:20px 0; padding-left:14px; border-left:1px solid var(--accent); }
.quality-layout .layout-hero-ctas { gap:10px; margin:28px 0 18px; }
.quality-layout .layout-hero-ctas .button { font-size:12px; padding:13px 16px; }
.layout-hero-art { margin:0; border:1px solid var(--line); background:var(--surface); min-width:0; }
.art-label { display:flex; justify-content:space-between; gap:12px; padding:17px 20px; color:var(--accent); font:11px/1.7 var(--mono); }
.art-label span:last-child { color:var(--muted); }
.layout-hero-art>a { display:block; background:#ece9df; overflow:hidden; }
.layout-hero-art img { display:block; width:100%; height:auto; transition:transform .55s var(--ease); }
.layout-hero-art>a:hover img { transform:scale(1.025); }
.layout-hero-art figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); padding:16px 20px; }
.layout-quick-order { border-top:1px solid var(--line); padding-top:14px; font-size:12px; color:var(--muted); }
.layout-quick-order summary,.layout-prep summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; line-height:1.7; min-height:44px; align-items:center; }
.layout-quick-order summary::-webkit-details-marker,.layout-prep summary::-webkit-details-marker { display:none; }
.layout-quick-order summary span,.layout-prep summary span { font-size:20px; color:var(--accent); }
.layout-quick-order[open] summary span,.layout-prep[open] summary span { transform:rotate(45deg); }
.layout-order-links { display:grid; gap:10px; padding:16px 0; }
.layout-order-links .button { justify-content:flex-start; text-align:left; font-size:12px; }
.layout-prep { margin-top:40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0; font-size:14px; }
.layout-prep[open] { padding-bottom:20px; }
.layout-hero-reading-links { max-width:960px; color:var(--muted); line-height:2; }
.layout-hero-reading-links a { text-underline-offset:4px; }
.quality-layout .record-grid { margin:28px 0 0; }
.quality-layout .record-grid div { min-height:80px; background:transparent; }
.quality-layout .record-grid { background:transparent; border-top:1px solid var(--line); }
.quality-layout .record-grid span { color:var(--muted); }
.quality-layout .record-grid b { font-family:var(--sans); font-size:15px; }
.quality-layout .layout-demo-frame { padding:16px; }
.quality-layout .layout-demo-frame figcaption { font-size:14px; line-height:1.8; color:var(--muted); }
.quality-layout .layout-demo-frame strong { color:var(--ink); }
.quality-layout .layout-demo-notes { font-size:14px; line-height:1.9; }
.quality-layout #real-demo .layout-demo-video { width:min(100%,360px); max-height:640px; margin-top:36px; }
.quality-layout .record-panel { padding:30px; }
.quality-layout .record-panel h2 { font-size:28px; line-height:1.35; }
.quality-layout .record-panel h3 { font-size:24px; line-height:1.4; }
.quality-layout .record-panel p { font-size:15px; line-height:1.85; }
summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }

/* Layered entrances only; no scroll hijacking, pointer follower or perpetual WebGL loop. */
@media(prefers-reduced-motion:no-preference) {
  .quality-home .hero>.hero-copy,.quality-layout .layout-hero-copy { animation:field-enter .65s var(--ease) both; }
  .quality-home .result-stage,.quality-layout .layout-hero-art { animation:field-enter .85s .12s var(--ease) both; }
  .quality-home .hero-readouts { animation:field-enter .65s .24s var(--ease) both; }
}
@keyframes field-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) {
  .header-inner { gap:16px; }
  .brand { font-size:13px; }
  .nav { gap:16px; }
  .header-inner>.button { font-size:12px; padding:11px 14px; }
  .quality-home .hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .quality-home .hero h1 { font-size:clamp(44px,6vw,64px); }
  .quality-home .hero-lede { font-size:16px; }
  .quality-home .hero-actions .button { font-size:12px; }
  .result-stage-foot { flex-wrap:wrap; }
}
@media(max-width:860px) {
  .nav { display:none; position:absolute; top:76px; left:var(--gutter); right:var(--gutter); margin:0; padding:8px 20px; border:1px solid var(--line); background:#171a17; flex-direction:column; align-items:stretch; gap:0; }
  .nav.is-open { display:flex; }
  .nav a { padding:14px 0; min-height:48px; border-bottom:1px solid var(--line); }
  .nav a:last-child { border-bottom:0; }
  .mobile-toggle { display:block; margin-left:auto; }
  .header-inner>.button { display:none; }
  .quality-home .hero,.layout-hero-grid { grid-template-columns:1fr; }
  .quality-home .hero h1 { font-size:clamp(48px,8vw,68px); }
  .quality-home .hero-lede { max-width:36em; }
  .quality-home .hero-actions { display:flex; }
  .quality-home .result-stage { max-width:680px; width:100%; }
  .quality-home .v10-section:first-child { padding-top:40px; }
  .layout-hero-art { max-width:680px; }
  .quality-layout .subpage h1 { max-width:15em; font-size:clamp(36px,6vw,48px); }
  .layout-prep { margin-top:28px; }
  .quality-layout .subpage { padding-top:40px; }
}
@media(max-width:640px) {
  .header-inner { min-height:64px; }
  .nav { top:64px; }
  .brand { font-size:13px; }
  .brand-mark { width:24px; height:24px; }
  .section-head { margin-bottom:28px; }
  .section-head h2 { font-size:clamp(32px,8vw,46px); line-height:1.2; }
  .quality-home .hero h1 { font-size:clamp(44px,12vw,62px); }
  .quality-home .hero-actions { display:grid; }
  .quality-home .hero-readouts { margin-top:24px; }
  .quality-home .hero-readouts span { font-size:10px; }
  .quality-home .wall { display:grid; grid-template-columns:1fr; gap:32px; }
  .quality-home .output-copy { display:block; }
  .quality-home .output-copy>a { display:inline-flex; min-height:44px; }
  .quality-home .trace-strip { gap:1px; }
  .quality-home .trace-strip>div { padding:18px 12px; }
  .quality-home .trace-strip small { display:block; }
  .result-stage-head,.result-stage-foot { padding:14px; }
  .result-stage-head .eyebrow { font-size:10px; }
  .result-boundary { padding-inline:14px; }
  .quality-layout .layout-hero-ctas { margin-top:24px; }
  .quality-layout .layout-hero-ctas .button { min-height:48px; font-size:13px; }
  .quality-layout .layout-hero-grid { gap:28px; }
  .layout-hero-art figcaption,.art-label { padding:14px; }
  .art-label { font-size:10px; }
  .quality-layout .record-panel { padding:22px; }
  .quality-layout .record-panel h3 { font-size:22px; }
  .price-card { padding:26px; }
  .site-footer { padding-block:36px; }
}