/* ZUMI / contact + merch offer forms. Mobile-first, token-based, no parallel design system. */
.form-page { overflow-x: clip; }
.form-hero { padding-block: clamp(4rem, 10vw, 7rem) clamp(3.2rem, 8vw, 5.5rem); border-bottom: var(--border-thin); }
.form-hero__inner { max-width: 1100px; }
.form-hero h1 { max-width: 11ch; margin-top: .8rem; font-size: clamp(3.1rem, 10vw, 6.6rem); line-height: .91; letter-spacing: -.06em; text-wrap: balance; }
.form-hero__lead { max-width: 760px; margin-top: 1.45rem; color: var(--color-text-secondary); font-size: var(--font-size-lg); }
.form-hero__micro { margin-top: 1.45rem; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .05em; }
.form-hero__micro span { border-left: 2px solid var(--color-brand); padding-left: .65rem; }
.brief-disclaimer { max-width: 800px; margin-top: 1.45rem; border-left: 3px solid var(--color-brand); padding: .85rem 0 .85rem 1rem; color: var(--color-text-secondary); }
.brief-disclaimer strong { color: var(--color-text); }

.contact-section, .brief-section { padding-block: var(--space-8) var(--space-10); }
.contact-section__head { max-width: 760px; }
.contact-section__head h2 { max-width: 12ch; margin-top: .65rem; font-size: clamp(2.3rem, 7.6vw, 5rem); line-height: .92; letter-spacing: -.055em; }
.contact-mode-grid { display: grid; gap: .9rem; margin-top: 2.3rem; }
.contact-mode { min-height: 170px; display: grid; align-content: space-between; gap: .65rem; border: var(--border-thin); border-radius: var(--radius-sm); padding: 1.2rem; background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast); }
.contact-mode:hover, .contact-mode:focus-visible { border-color: var(--color-text); transform: translateY(-2px); }
.contact-mode[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-surface-elevated); box-shadow: inset 0 -4px 0 var(--color-brand); }
.contact-mode__index { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-brand); font-weight: var(--font-weight-bold); }
.contact-mode strong { align-self: end; font-family: var(--font-display); font-size: clamp(1.45rem, 5vw, 2rem); line-height: .98; letter-spacing: -.035em; }
.contact-mode > span:last-child { color: var(--color-text-muted); }
.contact-form-stage { margin-top: 2rem; overflow-anchor: none; }
.contact-form-panel { border-top: 4px solid var(--color-text); padding-top: 1.5rem; }
.contact-form-panel__intro { max-width: 720px; margin-bottom: 2rem; }
.contact-form-panel__intro h2 { margin-top: .55rem; font-size: clamp(2.2rem, 7vw, 4.5rem); line-height: .94; letter-spacing: -.05em; }
.contact-form-panel__intro > p:last-child { margin-top: 1rem; color: var(--color-text-secondary); }

.zumi-form { position: relative; max-width: 900px; overflow-anchor: none; }
.form-grid { display: grid; gap: var(--space-5); }
.form-grid--two { grid-template-columns: 1fr; }
.form-field, .form-fieldset { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); }
.form-fieldset { min-width: 0; border: 0; padding: 0; }
.form-label, .form-legend { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: 1rem; }
.form-legend { margin-bottom: .6rem; }
.form-optional { margin-left: .45rem; font-family: var(--font-mono); font-size: .63rem; color: var(--color-text-muted); letter-spacing: .05em; }
.form-control { width: 100%; min-height: 52px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-elevated); color: var(--color-text); padding: .82rem .9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); }
.form-control:hover { border-color: var(--color-text-muted); }
.form-control:focus { border-color: var(--color-focus); outline: 3px solid color-mix(in srgb, var(--color-focus) 24%, transparent); outline-offset: 2px; }
.form-control.is-invalid { border-color: var(--color-error); }
.form-control--textarea { min-height: 180px; resize: vertical; }
.form-help { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.form-error { min-height: 1.15em; color: var(--color-error); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.form-fieldset.is-invalid { border-left: 2px solid var(--color-error); padding-left: .8rem; }
.form-status { min-height: 1.3em; margin-top: 1rem; color: var(--color-error); font-weight: var(--font-weight-medium); }
.form-submit-row { display: grid; gap: 1rem; align-items: start; margin-top: 1rem; }
.form-privacy { max-width: 620px; color: var(--color-text-muted); font-size: .78rem; line-height: 1.5; }
.form-privacy a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.form-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form-success { border: 2px solid var(--color-success); padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--color-surface); }
.form-success h2, .form-success h3 { max-width: 13ch; margin-top: .65rem; font-size: clamp(2.1rem, 6vw, 4rem); line-height: .94; letter-spacing: -.05em; }
.form-success > p:not(.editorial-label):not(.brief-disclaimer) { max-width: 720px; margin-top: 1rem; }
.form-success:focus { outline: none; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.choice-stack { display: grid; gap: .65rem; }
.choice-chip { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice-chip input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.choice-chip span { min-height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .68rem .72rem; background: var(--color-surface-elevated); color: var(--color-text); font-family: var(--font-mono); font-size: .72rem; font-weight: var(--font-weight-bold); line-height: 1.25; letter-spacing: .025em; text-align: center; transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); }
.choice-chip--wide span { justify-content: flex-start; min-height: 58px; padding-inline: 1rem; text-align: left; }
.choice-chip span small { margin-left: auto; padding-left: .8rem; color: var(--color-text-muted); font-size: .58rem; }
.choice-chip:hover span { border-color: var(--color-text-muted); transform: translateY(-1px); }
.choice-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-focus) 28%, transparent); outline-offset: 2px; }
.choice-chip input:checked + span { border-color: var(--color-text); background: var(--color-text); color: var(--color-page); box-shadow: inset 0 -3px 0 var(--color-brand); }
.choice-chip input:checked + span small { color: currentColor; opacity: .78; }
.form-check { display: flex; align-items: flex-start; gap: .65rem; margin-top: .35rem; font-family: var(--font-mono); font-size: .72rem; font-weight: var(--font-weight-bold); cursor: pointer; }
.form-check input { margin-top: .1rem; accent-color: var(--color-brand); }

.brief-layout { display: grid; gap: 2rem; }
.brief-progress { position: relative; border-bottom: var(--border-thin); padding-bottom: 1.2rem; }
.brief-progress__track { height: 3px; margin-top: .85rem; background: var(--color-border); overflow: hidden; }
.brief-progress__track span { display: block; height: 100%; background: var(--color-brand); transition: width var(--transition-base); }
.brief-progress__steps { display: none; }
.brief-form { max-width: 940px; }
.brief-step { min-height: 440px; }
.brief-step__head { margin-bottom: 2rem; }
.brief-step__head h2 { max-width: 15ch; margin-top: .6rem; font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
.brief-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: var(--border-thin); padding-top: 1.2rem; }
.brief-nav__back, .add-link-button { min-height: 48px; border: 0; padding: .6rem 0; color: var(--color-text); font-family: var(--font-mono); font-size: .76rem; font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.add-link-button { justify-self: start; color: var(--color-brand); }
.additional-links { display: grid; }
.brief-final { min-height: 0; }
.brief-final__status { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.brief-final__status span, .brief-success__status span { border: 1px solid var(--color-border); padding: .5rem .6rem; font-family: var(--font-mono); font-size: .67rem; font-weight: var(--font-weight-bold); }
.brief-final__copy { max-width: 720px; margin-bottom: 1.5rem; color: var(--color-text-secondary); font-size: var(--font-size-lg); }
.brief-disclaimer--final { margin-block: 1.3rem .75rem; }
.brief-success { max-width: 900px; }
.brief-success__status { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }

.no-js .contact-form-panel[hidden], .no-js .brief-step[hidden], .no-js .brief-final[hidden] { display: block !important; }
.no-js .contact-form-panel { margin-top: 2rem; }
.no-js .brief-progress, .no-js .brief-nav { display: none; }
.no-js .brief-step { min-height: 0; border-bottom: var(--border-thin); padding-block: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .brief-progress__track span, .choice-chip span, .contact-mode { transition: none; }
}