/* Hallmark · component: update walkthrough · genre: modern-minimal · theme: existing Apple-inspired tokens
 * states: default / hover / focus / pressed / disabled / loading / error / success
 * Pre-emit critique: P5 H5 E5 S5 R5 V4 · content-led split, actual client screenshot, no invented window chrome */
.update-section { padding-block: 100px 112px; }
.update-layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; align-items: center; }
.update-copy { min-width: 0; }
.update-copy .mini-label { margin-bottom: 18px; }
.update-copy h2 { font-size: clamp(36px,4.5vw,58px); }
.update-copy > p:not(.mini-label) { color: var(--color-muted); font-size: 15px; line-height: 1.9; margin-top: 24px; max-width: 31em; }
.update-features { list-style: none; padding: 0; margin: 30px 0 22px; }
.update-features li { display: flex; align-items: baseline; gap: 14px; padding-block: 13px; border-top: var(--rule-hair) solid var(--color-rule); }
.update-features li > span { color: var(--color-link); font: 11px var(--font-mono); }
.update-features strong { display: block; font-size: 14px; font-weight: 600; }
.update-features p { margin-top: 3px; color: var(--color-muted); font-size: 11px; }
.update-copy .text-link { font-size: 13px; }
.update-demo { padding: 32px; border: var(--rule-hair) solid var(--color-rule); border-radius: 24px; background: var(--color-surface); color: var(--color-ink); min-width: 0; }
.update-demo-label { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--color-muted); }
.update-demo-label .icon { width: 16px; height: 16px; color: var(--color-link); }
.update-demo-version { display: flex; align-items: baseline; gap: 16px; margin-block: 28px 24px; font-variant-numeric: tabular-nums; }
.update-demo-version > span { color: var(--color-muted); font-size: 13px; }
.update-demo-version > strong { font-size: clamp(38px,4.5vw,54px); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }
.update-demo-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.update-demo-steps li { color: var(--color-muted); border-top: 2px solid var(--color-rule); padding-top: 10px; font-size: 10px; transition: border-color var(--dur-fast); }
.update-demo-steps li[data-state="active"] { border-color: var(--color-link); color: var(--color-link); }
.update-demo-steps li[data-state="done"] { border-color: var(--color-available); color: var(--color-available); }
.update-demo-status { min-height: 96px; margin-top: 28px; }
.update-demo-status h3 { font-size: 21px; line-height: 1.5; }
.update-demo-status p { color: var(--color-muted); margin-top: 6px; font-size: 12px; line-height: 1.8; }
.update-demo-progress { min-height: 39px; margin-top: 8px; }
.update-demo-progress[hidden] { display: block; visibility: hidden; }
.update-demo-progress > div { display: flex; align-items: center; gap: 12px; }
.update-demo-progress progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 6px; border: 0; border-radius: 8px; background: var(--color-soft); accent-color: var(--color-link); overflow: clip; }
.update-demo-progress progress::-webkit-progress-bar { background: var(--color-soft); }
.update-demo-progress progress::-webkit-progress-value { background: var(--color-link); border-radius: 8px; }
.update-demo-progress progress::-moz-progress-bar { background: var(--color-link); }
.update-demo-progress span { min-width: 32px; font: 11px var(--font-mono); text-align: right; color: var(--color-muted); }
.update-demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.update-demo-actions button { min-height: 44px; white-space: nowrap; border-radius: var(--radius-pill); font-size: 12px; }
.update-demo-actions .update-demo-action { padding: 10px 22px; background: var(--color-link); color: var(--color-on-dark); }
.update-demo-actions .update-demo-reset { padding: 10px 16px; color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); }
.update-demo-actions button:active:not(:disabled) { transform: translateY(1px); }
.update-demo-actions button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.update-demo-actions button:disabled { opacity: .5; cursor: not-allowed; }
.update-demo [aria-busy="true"] { cursor: progress; }
.update-demo[data-phase="checking"] .update-demo-label .icon,.update-demo[data-phase="verifying"] .update-demo-label .icon { animation: update-demo-spin 2s linear infinite; }
.update-demo[data-phase="current"] .update-demo-version strong,.update-demo[data-phase="current"] .update-demo-status h3 { color: var(--color-available); }
.update-demo[data-phase="error"] { border-color: var(--color-accent); }
.update-demo[data-phase="error"] .update-demo-status h3 { color: var(--color-accent); }
.update-demo-footnote { color: var(--color-muted); font-size: 10px; line-height: 1.8; margin-top: 16px; }
.update-real { margin-top: 42px; border-top: var(--rule-hair) solid var(--color-rule); }
.update-real summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; cursor: pointer; font-size: 12px; list-style: none; }
.update-real summary::-webkit-details-marker { display: none; }
.update-real summary .icon { width: 18px; height: 18px; color: var(--color-muted); transition: transform var(--dur-fast); }
.update-real[open] summary .icon { transform: rotate(45deg); }
.update-real img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule); border-radius: 12px; }
.update-real figcaption { color: var(--color-muted); font-size: 10px; line-height: 1.8; margin-top: 10px; }
@keyframes update-demo-spin { to { transform: rotate(360deg); } }
@media (hover:hover) { .update-demo-action:hover:not(:disabled) { opacity: .88; } .update-demo-reset:hover:not(:disabled) { background: var(--color-soft); } .update-real summary:hover { color: var(--color-link); } }
@media (max-width:1000px) { .update-layout { gap: 40px; } .update-demo { padding: 26px; } }
@media (max-width:760px) { .update-section { padding-block: 72px; } .update-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } .update-copy h2 { font-size: 39px; } .update-copy > p:not(.mini-label) { font-size: 14px; max-width: 40em; } .update-features { margin-top: 22px; } .update-real { margin-top: 28px; } }
@media (max-width:375px) { .update-demo { padding: 22px 18px; } .update-demo-status { min-height: 112px; } .update-demo-actions { gap: 8px; } .update-demo-actions .update-demo-action { padding-inline: 17px; } .update-demo-actions .update-demo-reset { padding-inline: 12px; } .update-demo-version { gap: 12px; } }
@media (prefers-reduced-motion:reduce) { .update-demo *, .update-real * { animation: none !important; transition: none !important; } }

.download-update-link { display: flex; width: fit-content; margin: 10px auto 0; font-size: 12px; }