/* Hallmark · macrostructure: Letter + sticky chapters · tone: intimate, composed · anchor hue: 165
 * Nav: N9 edge aligned · Footer: Ft6 letter close · pre-emit critique: P4 H4 E4 S5 R4 V4 */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.7; -webkit-font-smoothing: antialiased; }
body[data-screen="welcome"] { background: var(--color-sea); }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: var(--color-transparent); }
button { cursor: pointer; }
button { background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; font-style: normal; min-width: 0; overflow-wrap: anywhere; }
h1, h2, h3, .paper-salutation { font-family: var(--font-display); }
button, .button, summary, .text-button { white-space: nowrap; }
input, select, textarea { width: 100%; min-width: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
::selection { color: var(--color-paper); background: var(--color-ink); }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
.site-header { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 0 var(--page-gutter); max-width: 1600px; margin: auto; }
.wordmark { font-family: var(--font-wordmark); font-size: 35px; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.wordmark small { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .04em; vertical-align: middle; margin-left: 5px; }
.header-actions { display: flex; gap: var(--space-lg); align-items: center; }
.view-toggle { min-height: 44px; color: var(--color-muted); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 4px; }
.header-start { display: inline-flex; gap: var(--space-lg); align-items: center; min-height: 44px; border-bottom: 1px solid var(--color-ink); font-size: var(--text-sm); }
.case-label { color: var(--color-muted); font-size: var(--text-xs); }
.hero { position: relative; display: grid; align-items: center; padding: var(--space-md) var(--page-gutter) 0; max-width: 1600px; margin: auto; }
.hero-copy { padding-top: var(--space-lg); position: relative; z-index: 2; }
.intro-label { font-size: var(--text-xs); display: flex; gap: var(--space-2xs); align-items: center; margin-bottom: var(--space-lg); }
.intro-label > span { height: 6px; width: 6px; border-radius: 50%; background: var(--color-accent); }
.hero h1 { font-size: clamp(2.15rem, 4.35vw, 4.5rem); letter-spacing: -.035em; line-height: 1.5; font-weight: 500; }
.hero-description { margin-top: var(--space-lg); font-size: var(--text-sm); line-height: 2; color: var(--color-muted); max-width: 36em; }
.hero-actions { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-top: var(--space-lg); }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xl); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-button); font-size: var(--text-sm); border: 1px solid var(--color-transparent); line-height: 1.5; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.button-primary { background: var(--color-ink); color: var(--color-paper); }
.button-outline { border-color: var(--color-rule); background: var(--color-transparent); }
.button:active, .answer-choice:active { transform: translateY(1px); }
.free-note { font-size: 11px; color: var(--color-muted); }
.scroll-cue { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: 11px; min-height: 44px; margin-top: var(--space-lg); }
.scroll-line { display: inline-block; width: 1px; height: 28px; background: var(--color-rule); position: relative; }
.scroll-line::after { content: ""; display: block; position: absolute; bottom: 0; width: 5px; height: 5px; border: solid var(--color-muted); border-width: 0 1px 1px 0; transform: translateX(-2px) rotate(45deg); }
.hero-keepsake { min-width: 0; position: relative; padding-top: var(--space-md); }
.envelope-scene { --open: 0; width: 100%; max-width: 450px; aspect-ratio: 1 / 1.12; margin: auto; position: relative; transform: rotate(calc(-6deg + var(--open) * 6deg)); }
.envelope-back { position: absolute; width: 94%; height: 56%; left: 3%; top: 35%; background: var(--color-envelope); border-radius: 4px; box-shadow: 0 22px 42px var(--color-shadow); }
.letter-sheet { position: absolute; top: 6%; left: 9%; width: 82%; height: 74%; padding: 8%; background: var(--color-paper); box-shadow: 0 1px 5px var(--color-shadow); overflow: clip; transform: translateY(calc(var(--open) * -18%)); }
.letter-date { color: var(--color-muted); font-size: 9px; }
.letter-greeting { font-family: var(--font-display); font-size: clamp(13px, 1.5vw, 18px); margin-top: 12%; }
.letter-message { font-family: var(--font-display); font-size: clamp(16px, 1.75vw, 23px); line-height: 1.9; margin-top: 8%; }
.letter-rule { width: 100%; height: 1px; background: var(--color-rule-soft); margin-top: 11%; }
.letter-signature { font-family: var(--font-wordmark); font-size: 25px; margin-top: 8%; }
.letter-bottom { display: block; font-size: 9px; color: var(--color-muted); margin-top: 4%; }
.envelope-front { position: absolute; top: 35%; left: 3%; width: 94%; height: 56%; background: var(--color-envelope-front); clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 4px 4px; }
.envelope-fold { position: absolute; top: 35%; left: 3%; width: 94%; height: 56%; background: var(--color-envelope-fold); clip-path: polygon(0 0, 53% 57%, 0 100%); }
.envelope-seal { position: absolute; left: 45%; top: 62%; width: 13%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--color-paper); font-family: var(--font-wordmark); font-size: 25px; background: var(--color-seal); box-shadow: inset 0 0 0 3px var(--color-seal), inset 0 0 0 4px var(--color-seal-light), 0 3px 5px var(--color-shadow); transform: rotate(6deg); }
.envelope-recipient { position: absolute; top: 81%; left: 12%; font-family: var(--font-display); font-size: 10px; color: var(--color-muted); }
.hero-keepsake figcaption { display: flex; justify-content: center; gap: var(--space-xl); color: var(--color-muted); font-size: 10px; padding: var(--space-sm) 0 var(--space-xl); }
.hero-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); font-size: 10px; color: var(--color-muted); }
.journey { background: var(--color-paper); padding: var(--space-2xl) var(--page-gutter); }
.journey-title { text-align: center; }
.section-caption { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-sm); }
.journey-title h2, .beyond h2, .begin-section h2 { font-size: clamp(1.85rem, 3vw, 3rem); line-height: 1.7; letter-spacing: -.025em; }
.journey-title > p:last-child { margin-top: var(--space-md); color: var(--color-muted); line-height: 1.9; }
.journey-layout { max-width: 1120px; margin: var(--space-2xl) auto 0; display: grid; gap: var(--space-lg); }
.arrangement-preview { align-self: start; }
.arrangement-paper { max-width: 410px; background: var(--color-white); box-shadow: 0 12px 40px var(--color-shadow-soft), 0 1px 3px var(--color-shadow); padding: var(--space-lg); margin: auto; position: relative; }
.paper-heading { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 10px; color: var(--color-muted); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule-soft); }
.paper-heading > span:first-child { color: var(--color-ink); }
.paper-salutation { font-size: 25px; line-height: 1.7; padding: var(--space-md) 0; }
.paper-section { border-top: 1px solid var(--color-rule-soft); padding: var(--space-md) 0; transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out); }
.paper-label { font-size: 10px; color: var(--color-muted); }
.paper-family { display: flex; align-items: center; margin-top: var(--space-sm); }
.paper-family > b { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-rule); border-radius: 50%; font-family: var(--font-display); font-size: 16px; font-weight: 400; }
.paper-family > span { height: 1px; width: 35px; background: var(--color-rule); }
.paper-family > div { display: flex; flex-direction: column; border-left: 1px solid var(--color-rule); padding-left: var(--space-sm); gap: 3px; font-size: 11px; }
.paper-asset-line { display: flex; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-xs); font-size: 12px; }
.paper-intent p { margin-top: var(--space-xs); font-family: var(--font-display); font-size: 14px; }
.paper-page { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 8px; color: var(--color-muted); padding-top: var(--space-md); }
.arrangement-preview figcaption { text-align: center; font-size: 10px; color: var(--color-muted); padding-top: var(--space-sm); }
.chapter { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule-soft); }
.chapter-number { font-family: var(--font-wordmark); font-size: 32px; color: var(--color-accent); }
.chapter h3 { margin: var(--space-sm) 0 var(--space-md); font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.7; }
.chapter p { color: var(--color-muted); line-height: 2; font-size: var(--text-sm); max-width: 27em; }
.chapter-note { display: block; font-size: 11px; color: var(--color-accent); margin-top: var(--space-lg); }
.beyond { background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-xl); }
.beyond .section-caption { color: var(--color-inverse-muted); }
.beyond-intro > p:last-child { color: var(--color-inverse-muted); line-height: 2; font-size: var(--text-sm); margin-top: var(--space-md); max-width: 30em; }
.completion-path { list-style: none; margin: 0; padding: 0; counter-reset: next; }
.completion-path li { position: relative; padding: var(--space-md) 0 var(--space-md) 45px; border-bottom: 1px solid var(--color-inverse-rule); counter-increment: next; }
.completion-path li:first-child { padding-top: 0; }
.completion-path li::before { content: counter(next, decimal-leading-zero); position: absolute; left: 0; color: var(--color-inverse-muted); font-family: var(--font-wordmark); font-size: 25px; line-height: 1.3; }
.completion-path li > span { font-family: var(--font-display); font-size: var(--text-lg); }
.completion-path p { color: var(--color-inverse-muted); font-size: 12px; margin-top: var(--space-xs); line-height: 1.9; max-width: 30em; }
.begin-section { padding: var(--space-2xl) var(--page-gutter); background: var(--color-sea-light); display: grid; gap: var(--space-xl); }
.begin-copy > p:not(.section-caption) { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); line-height: 2; }
.begin-signoff { font-family: var(--font-wordmark); font-size: 30px; color: var(--color-accent); margin-top: var(--space-lg); }
.begin-form { width: 100%; max-width: 410px; }
.resume-message { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-lg); }
.begin-form .button { width: 100%; justify-content: space-between; }
.field-label, .person-field label { display: block; font-size: 12px; font-weight: 500; margin-bottom: var(--space-2xs); }
input:not([type="checkbox"]), textarea, select { display: block; background: var(--color-white); border: 1px solid var(--color-rule); border-radius: var(--radius-input); min-height: 52px; padding: 12px 14px; font-size: 16px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: .8; font-size: 14px; }
textarea { min-height: 190px; resize: vertical; line-height: 1.9; margin-top: var(--space-xs); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field-help { font-size: 11px; color: var(--color-muted); margin-top: var(--space-2xs); }
.check-row { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-md); font-size: 12px; cursor: pointer; min-height: 44px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-ink); flex-shrink: 0; margin: 3px 0 0; }
.form-error { color: var(--color-error); font-size: 12px; line-height: 1.7; min-height: 1.7em; margin: var(--space-xs) 0; overflow-wrap: anywhere; }
.form-footnote { text-align: center; font-size: 10px; color: var(--color-muted); margin-top: var(--space-sm); }
.questions { background: var(--color-paper); padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-xl); }
.questions h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.questions details { border-bottom: 1px solid var(--color-rule-soft); }
.questions summary { list-style: none; cursor: pointer; padding: var(--space-md) var(--space-lg) var(--space-md) 0; position: relative; font-size: 13px; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: 0; font-size: 20px; font-weight: 400; top: 16px; }
.questions details[open] summary::after { content: "−"; }
.questions details p { color: var(--color-muted); font-size: 12px; line-height: 1.9; padding-bottom: var(--space-md); max-width: 45em; }
.site-footer { background: var(--color-paper); border-top: 1px solid var(--color-rule-soft); padding: var(--space-xl) var(--page-gutter); }
.site-footer > p { font-family: var(--font-display); font-size: 20px; }
.site-footer > div { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); align-items: center; font-size: 10px; color: var(--color-muted); margin-top: var(--space-md); }
.site-footer .footer-brand { color: var(--color-ink); }
.site-footer > div > span:last-child { margin-left: auto; }
.intake-progress { padding: 0 var(--page-gutter) var(--space-md); display: flex; gap: var(--space-md); align-items: center; max-width: 1600px; margin: auto; border-bottom: 1px solid var(--color-rule-soft); }
.intake-progress ol { display: flex; align-items: center; padding: 0; margin: 0; list-style: none; gap: var(--space-md); }
.intake-progress li { display: flex; gap: 7px; align-items: center; color: var(--color-muted); font-size: 11px; white-space: nowrap; }
.step-index { height: 22px; width: 22px; display: inline-grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 50%; font-size: 10px; }
.intake-progress [aria-current="step"] { color: var(--color-ink); }
.intake-progress [aria-current="step"] .step-index { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.is-complete .step-index { color: var(--color-success); background: var(--color-sea); border-color: var(--color-sea); }
.progress-note { margin-left: auto; color: var(--color-muted); font-size: 11px; display: none; }
.intake-layout { max-width: 1300px; padding: var(--space-xl) var(--page-gutter) var(--space-2xl); margin: auto; display: grid; gap: var(--space-xl); min-height: calc(100svh - 350px); }
.intake-main { min-width: 0; }
.intake-single { max-width: 860px; }
.intake-main .section-caption { margin-bottom: var(--space-2xs); }
.form-title { font-size: clamp(1.75rem, 2.8vw, 2.55rem); line-height: 1.65; letter-spacing: -.025em; }
.form-description { color: var(--color-muted); font-size: 13px; line-height: 1.95; margin-top: var(--space-sm); margin-bottom: var(--space-lg); }
.arrangement-summary { align-self: start; padding: var(--space-lg); background: var(--color-sea-light); border-radius: var(--radius-card); }
.summary-heading { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 11px; color: var(--color-muted); }
.arrangement-summary > h2 { font-size: 25px; margin-top: var(--space-md); overflow-wrap: anywhere; }
.arrangement-summary h2 small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 10px; color: var(--color-muted); margin-top: 3px; }
.summary-section { padding-top: var(--space-md); margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.summary-section h3 { font-family: var(--font-body); font-size: 11px; display: flex; justify-content: space-between; }
.summary-section h3 span { font-size: 10px; color: var(--color-muted); }
.summary-section ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.summary-section li { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 12px; }
.summary-section li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.summary-section li > span:last-child { color: var(--color-muted); font-size: 10px; flex-shrink: 0; max-width: 50%; }
.summary-empty, .summary-note { color: var(--color-muted); font-size: 10px; margin-top: var(--space-xs); }
.summary-intent { font-size: 12px; color: var(--color-muted); margin-top: var(--space-xs); overflow-wrap: anywhere; white-space: pre-wrap; }
.summary-note { padding-top: var(--space-lg); }
.readiness-top { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: 11px; }
.question-progress { height: 2px; background: var(--color-rule-soft); margin-top: var(--space-sm); }
.question-progress > span { display: block; height: 100%; background: var(--color-ink); transform-origin: left; transition: transform var(--dur-medium) var(--ease-out); }
.question-area { padding-top: var(--space-xl); }
.question-area .form-title { max-width: 19em; }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }
.answer-choice { display: grid; text-align: left; grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-white); transition: transform var(--dur-short) var(--ease-out); }
.answer-choice > span:first-child { font-size: 25px; font-family: var(--font-display); grid-column: 1; }
.answer-choice > span:nth-child(2) { grid-column: 1; font-size: 11px; color: var(--color-muted); margin-top: var(--space-xs); }
.answer-mark { grid-column: 2; grid-row: 1; display: block; height: 17px; width: 17px; border: 1px solid var(--color-rule); border-radius: 50%; margin-top: 9px; }
.answer-choice[aria-pressed="true"] { background: var(--color-sea-light); border-color: var(--color-ink); }
.answer-choice[aria-pressed="true"] .answer-mark { box-shadow: inset 0 0 0 4px var(--color-white); background: var(--color-ink); }
.question-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-size: 10px; min-height: 44px; }
.text-button { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.readiness-note { font-size: 11px; color: var(--color-muted); border-top: 1px solid var(--color-rule-soft); padding-top: var(--space-md); margin-top: var(--space-lg); }
.people-roster { list-style: none; margin: var(--space-lg) 0; padding: 0; }
.person-row { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule-soft); }
.person-initial { height: 44px; width: 44px; background: var(--color-sea); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-display); font-size: 18px; margin-top: 25px; }
.person-field { flex: 1; min-width: 0; }
.required-label { font-size: 10px; font-weight: 400; color: var(--color-muted); margin-left: var(--space-2xs); }
.remove-button { font-size: 21px; min-height: 44px; min-width: 32px; flex-shrink: 0; color: var(--color-muted); margin-top: 28px; }
.age-options { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.age-options button { min-height: 44px; padding: 5px 12px; font-size: 11px; border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.age-options [aria-pressed="true"] { color: var(--color-paper); background: var(--color-ink); border-color: var(--color-ink); }
.role-options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.role-option { min-height: 44px; padding: 8px 12px; font-size: 11px; border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.role-option > span { padding-right: 4px; color: var(--color-muted); }
.form-actions { border-top: 1px solid var(--color-rule-soft); padding-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: center; }
.form-actions > span { font-size: 10px; color: var(--color-muted); }
.asset-roster { padding: 0; list-style: none; margin: var(--space-lg) 0; }
.asset-roster li { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule-soft); }
.asset-roster li > div { min-width: 0; flex: 1; }
.asset-roster b { display: block; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.asset-roster li > div > span { display: block; color: var(--color-muted); font-size: 10px; }
.asset-roster .remove-button { margin: 0; }
.asset-index { font-family: var(--font-wordmark); color: var(--color-accent); font-size: 25px; }
.asset-roster .empty-assets { border: 1px dashed var(--color-rule); border-radius: var(--radius-input); padding: var(--space-lg); color: var(--color-muted); font-size: 12px; }
.asset-inputs { display: grid; gap: var(--space-sm); }
.asset-inputs input, .asset-inputs select { margin-top: var(--space-xs); }
.asset-form .button { margin-top: var(--space-sm); }
.confirmation { padding: var(--space-md); background: var(--color-sea-light); border-radius: var(--radius-input); margin-top: var(--space-lg); }
.result-label { font-size: 12px; display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.result-label > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; }
.result-green { color: var(--color-success); }
.result-amber { color: var(--color-warning); }
.result-red { color: var(--color-error); }
.result-description { margin-top: var(--space-md); color: var(--color-muted); line-height: 2; font-size: 14px; max-width: 35em; }
.result-next { border-block: 1px solid var(--color-rule); margin: var(--space-lg) 0; padding: var(--space-md) 0; }
.result-next h2 { font-size: 17px; }
.result-next p { margin-top: var(--space-xs); font-size: 13px; }
.result-boundary { color: var(--color-muted); font-size: 11px; margin-bottom: var(--space-lg); }
.boot-message { padding: var(--space-2xl) var(--page-gutter); min-height: 70svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); }
.boot-message a { text-decoration: underline; }
[aria-busy="true"] .button-primary { opacity: .65; }
@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .view-toggle:hover, .scroll-cue:hover { color: var(--color-ink); }
  .answer-choice:hover, .role-option:hover { background: var(--color-sea-light); border-color: var(--color-ink); }
  .remove-button:hover { color: var(--color-error); }
  input:not([type="checkbox"]):hover, select:hover, textarea:hover { background: var(--color-sea-light); }
}
@media (min-width: 40rem) {
  .hero { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: var(--space-sm) var(--space-md); min-height: 680px; }
  .hero-copy { padding: var(--space-md) 0 var(--space-xl); }
  .hero-keepsake { padding-top: 0; }
  .envelope-scene { min-width: 0; }
  .hero-keepsake figcaption { padding-bottom: var(--space-md); gap: var(--space-md); }
  .hero-bottom { align-self: end; }
  .scroll-cue { margin-top: var(--space-xl); }
  .hero-description { font-size: 12px; }
  .beyond, .begin-section, .questions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
  .begin-form { align-self: center; justify-self: end; }
  .begin-section, .beyond, .questions { padding-block: var(--space-3xl); }
  .asset-inputs { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .progress-note { display: inline; }
}
@media (min-width: 60rem) {
  .hero { min-height: min(760px, calc(100svh - 100px)); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--space-xl); }
  .hero-copy { padding-bottom: var(--space-xl); }
  .hero-description { font-size: 14px; }
  .hero-keepsake { margin-top: -10px; }
  .hero-keepsake figcaption { gap: var(--space-2xl); }
  .journey { padding-block: var(--space-3xl); }
  .journey-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .83fr); gap: var(--space-3xl); margin-top: var(--space-2xl); }
  .arrangement-preview { position: sticky; top: max(48px, calc((100svh - 580px) / 2)); padding-top: var(--space-lg); }
  .arrangement-paper { padding: var(--space-lg) var(--space-xl); }
  .chapter { min-height: 440px; display: flex; flex-direction: column; justify-content: center; }
  .chapter:last-child { border-bottom: 0; }
  .arrangement-paper[data-stage="0"] .paper-assets, .arrangement-paper[data-stage="0"] .paper-intent, .arrangement-paper[data-stage="1"] .paper-intent { opacity: .22; transform: translateY(8px); }
  .chapter h3 { transition: opacity var(--dur-medium) var(--ease-out); }
  .chapter:not(.is-active) h3 { opacity: .7; }
  .beyond, .begin-section, .questions { gap: var(--space-3xl); }
  .intake-layout { grid-template-columns: minmax(0, 1fr) 310px; column-gap: var(--space-2xl); padding-top: var(--space-2xl); }
  .intake-single { grid-template-columns: minmax(0, 1fr); }
  .arrangement-summary { position: sticky; top: var(--space-lg); }
}
@media (min-width: 90rem) {
  .hero { min-height: min(840px, calc(100svh - 100px)); }
  .hero h1 { font-size: 68px; }
  .envelope-scene { max-width: 480px; }
}
@media (max-width: 39.99rem) {
  .site-header { height: 80px; }
  .wordmark { font-size: 29px; }
  .header-actions { gap: var(--space-sm); }
  .header-start { font-size: 11px; gap: var(--space-xs); }
  .view-toggle { font-size: 10px; }
  .hero h1 { font-size: clamp(2.05rem, 7.75vw, 3.1rem); line-height: 1.55; }
  .hero-description { font-size: 12px; }
  .hero-actions { gap: var(--space-sm); }
  .hero-actions .button { padding-inline: var(--space-sm); gap: var(--space-lg); font-size: 12px; }
  .free-note { font-size: 10px; }
  .desktop-break { display: none; }
  .scroll-cue { margin-top: var(--space-md); }
  .hero-keepsake { padding-top: 0; }
  .envelope-scene { width: 85%; max-width: 330px; margin-top: 10px; }
  .letter-greeting { font-size: 13px; }
  .letter-message { font-size: 16px; }
  .letter-signature { font-size: 22px; }
  .hero-bottom { font-size: 9px; }
  .journey-title { text-align: left; }
  .journey-title > p:last-child { font-size: 12px; }
  .arrangement-preview { display: none; }
  .journey-layout { margin-top: var(--space-md); }
  .chapter { padding: var(--space-lg) 0; }
  .chapter-number { font-size: 28px; }
  .chapter h3 { margin-top: var(--space-2xs); font-size: 25px; }
  .chapter p { font-size: 12px; }
  .chapter-note { margin-top: var(--space-md); }
  .questions { gap: var(--space-sm); }
  .questions summary { font-size: 11px; }
  .questions h2 { font-size: 23px; }
  .begin-form { max-width: none; }
  .site-footer > p { font-size: 17px; }
  .site-footer > div > span:last-child { margin-left: 0; }
  .case-label { font-size: 9px; max-width: 98px; }
  .intake-progress { padding-top: var(--space-xs); }
  .intake-progress ol { width: 100%; gap: 0; justify-content: space-between; }
  .intake-progress li { font-size: 10px; gap: 5px; }
  .intake-layout { gap: var(--space-xl); }
  .form-title { font-size: 27px; }
  .form-description { font-size: 12px; }
  .form-description br { display: none; }
  .person-initial { width: 35px; height: 35px; font-size: 16px; }
  .person-row { gap: var(--space-xs); }
  .person-field label { font-size: 11px; }
  .role-option { padding-inline: 10px; font-size: 10px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .button { width: 100%; justify-content: space-between; font-size: 12px; }
  .answer-choice { padding: var(--space-sm); }
  .answer-choice > span:nth-child(2) { font-size: 10px; }
  .answer-options { gap: var(--space-xs); }
  .question-area { padding-top: var(--space-lg); }
  .question-area .form-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .envelope-scene { transform: rotate(-4deg); }
  .letter-sheet, .paper-section, .button:hover, .button:active, .answer-choice:active { transform: none !important; }
  .paper-section, .chapter h3 { opacity: 1 !important; }
}