/* Preview-only additions. Reuse Quiet Utility tokens, no motion, no new fonts. */
.mockup-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; padding: .25rem max(1rem, calc((100vw - 76rem) / 2)); background: var(--surface-raised); color: var(--text-secondary); font-size: .75rem; }
.mockup-bar nav { display: flex; gap: 1rem; }
.mockup-bar a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); text-decoration: none; }
.mockup-bar a[aria-current] { color: var(--text); text-decoration: underline; }
.support-header-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); white-space: nowrap; font-size: .8125rem; text-decoration: none; }
.support-header-link[aria-current] { text-decoration: underline; }
.site-header .support-mobile-link { display: none; }
.mockup-form-note { color: var(--text-secondary); font-size: .75rem; margin: 1rem 0 -1rem; }
.support-main { max-width: 68rem; margin: auto; padding-top: 4rem; }
.support-heading { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.support-heading h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
.support-heading > p:last-child { margin: 1.25rem 0 0; color: var(--text-secondary); line-height: 1.7; font-size: 1.0625rem; }
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; max-width: 58rem; margin: auto; }
.support-card { padding: 2rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); min-width: 0; }
.support-card h2 { margin: 0 0 1.5rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.025em; }
.support-frequency { display: flex; margin: 0; padding: .25rem; border: 0; border-radius: 10px; background: var(--surface-raised); }
.support-frequency label { position: relative; flex: 1; min-width: 0; }
.support-frequency input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.support-frequency span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid transparent; border-radius: 8px; color: var(--text-secondary); font-size: .9375rem; }
.support-frequency input:checked + span { background: var(--surface); color: var(--text); border-color: var(--border); }
.support-frequency input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.frequency-note { min-height: 4.5rem; margin: 1rem 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.support-amounts { border: 0; margin: 0 0 1rem; padding: 0; }
.support-currency { width: 100%; min-height: 48px; padding: .75rem; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: .9375rem; }
.support-currency:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#summary-currency { font-size: .65em; letter-spacing: 0; }
.support-amounts legend, .amount-label { display: block; margin-bottom: .625rem; color: var(--text); font-size: .875rem; font-weight: 500; }
.support-amounts > div { display: flex; gap: .5rem; }
.support-amounts button { flex: 1; min-height: 48px; padding: .5rem; border: 1px solid var(--control-border); border-radius: 10px; background: var(--surface); color: var(--text); }
.support-amounts button[aria-pressed="true"] { border-color: var(--focus); outline: 1px solid var(--focus); background: var(--info-surface); color: var(--focus); }
.amount-field { display: flex; align-items: center; border: 1px solid var(--control-border); border-radius: 10px; padding-right: 1rem; }
.amount-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.amount-field input { min-width: 0; width: 100%; min-height: 52px; border: 0; outline: 0; padding: .75rem 1rem; background: transparent; color: var(--text); border-radius: 10px; font-size: 1.125rem; }
.amount-field > span { color: var(--text-secondary); font-size: .8125rem; }
.support-small { margin: .75rem 0 1.25rem; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.support-review { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 10px; background: var(--action); color: var(--on-action); font-size: .9375rem; font-weight: 600; padding: .75rem 1rem; }
.support-review:hover:not(:disabled) { background: var(--action-hover); }
.support-review:disabled { opacity: .55; cursor: default; }
.support-review.secondary { background: var(--surface-raised); color: var(--text); }
.support-review.secondary:hover { background: var(--border); }
.inert-note { margin-bottom: 0; text-align: center; }
.support-error { color: var(--error); font-size: .8125rem; line-height: 1.5; }
.summary-value { margin: 1.5rem 0; font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em; }
.summary-value small { display: block; font-size: .875rem; color: var(--text-secondary); font-weight: 400; letter-spacing: 0; margin-top: .5rem; }
#summary-note { color: var(--text-secondary); line-height: 1.7; font-size: .9375rem; }
.support-test { margin: 1.25rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.support-test > summary { display: list-item; cursor: pointer; padding: .875rem 0; min-height: 48px; font-size: .875rem; }
.support-test-status { border-left: 3px solid var(--control-border); padding: .25rem 0 .25rem .875rem; margin: 1rem 0; }
.support-test-status[data-tone="success"] { border-color: var(--success); }
.support-test-status[data-tone="error"] { border-color: var(--error); }
.support-test-status[data-tone="pending"] { border-color: var(--focus); }
.support-test-status h3 { margin: 0 0 .5rem; font-size: 1rem; }
.support-test-status p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--text-secondary); }
.support-test-actions { display: grid; gap: .5rem; padding-bottom: 1rem; }
.support-test-actions > p { margin: 0; font-size: .75rem; color: var(--text-secondary); }
.support-test > .support-review { margin-bottom: 1rem; }
.support-reasons { padding-top: .5rem; }
.support-reasons section { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; }
.reason-number { font-size: .75rem; color: var(--focus); padding-top: .2rem; }
.support-reasons h2 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.support-reasons p { margin: 0; color: var(--text-secondary); line-height: 1.7; font-size: .9375rem; }
.support-faq { max-width: 46rem; margin: 3.5rem auto 1.5rem; }
.support-faq h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; margin-bottom: 1.25rem; }
.support-back { display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: .9375rem; }
.support-strip { width: min(100%, 68rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 2.5rem auto; padding: 1.75rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.support-strip h2 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; }
.support-strip p { max-width: 40rem; margin: 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.support-strip-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; flex-shrink: 0; font-size: .875rem; }
.support-prompt { width: min(100%, 55rem); margin: 0 auto 2rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.support-prompt[hidden] { display: none; }
.support-prompt h2 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 600; }
.support-prompt p { margin: 0; max-width: 34rem; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.support-prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; flex-shrink: 0; }
.support-prompt-actions a, .support-prompt-actions button { display: inline-flex; align-items: center; min-height: 44px; font: inherit; font-size: .8125rem; }
.support-prompt-actions button { border: 0; padding: .5rem 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.support-prompt-actions :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
/* One filled layout-only slot below the tool, shared by initial/waiting/ready. */
.download-workspace { width: min(100%, 64rem); margin: 2rem auto 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; align-items: start; text-align: left; }
.hero .download-workspace > .save-panel { width: 100%; margin: 0; min-width: 0; }
.download-workspace > .advert-preview { width: 100%; margin: 0; min-width: 0; }
.advert-preview { width: min(100%, 45.5rem); margin: 1.5rem auto; text-align: left; }
.advert-preview[data-ad-preview-state="reserved"], .advert-preview[data-ad-preview-filled="false"] { display: none; }
.advert-preview > p { color: var(--text-secondary); font-size: .6875rem; text-align: left; margin: 0 0 .5rem; }
.advert-space { min-height: 90px; display: grid; grid-template-columns: 3rem minmax(0,1fr); align-content: center; gap: .25rem 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raised); text-align: left; }
.advert-mark { display: grid; place-items: center; grid-row: 1/3; align-self: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); color: var(--text-secondary); font-size: .75rem; font-weight: 500; }
.advert-space strong { font-size: .9375rem; font-weight: 500; }
.advert-space small { color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
@media (min-width: 1280px) {
  .hero:has(> .download-workspace) { width: min(100%, 76rem); }
}
@media (max-width: 640px) {
  .advert-preview { margin: 1.25rem auto; }
  .advert-space { min-height: 112px; grid-template-columns: 2.5rem minmax(0,1fr); padding: .875rem; gap: .25rem .75rem; }
  .advert-mark { width: 2.5rem; height: 2.5rem; }
  .advert-space strong { font-size: .875rem; }
}
@media (max-width: 1440px) {
  .site-header .site-nav { display: none; }
  .site-header .menu-toggle { display: grid; }
  .site-header .site-nav.is-open { display: grid; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 140px); overflow-y: auto; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
  .site-header .site-nav.is-open a { min-height: 48px; }
  .site-header .site-nav.is-open .support-mobile-link { display: inline-flex; }
}
@media (max-width: 760px) {
  .support-prompt { flex-direction: column; align-items: flex-start; gap: .625rem; }
  .support-prompt-actions { flex-shrink: 1; }
  .support-main { padding-top: 2.5rem; }
  .support-layout { grid-template-columns: minmax(0,1fr); gap: 1.5rem; max-width: 30rem; }
  .support-heading { margin-bottom: 1.75rem; }
  .support-heading > p:last-child { font-size: 1rem; }
  .support-card { padding: 1.25rem; }
  .support-reasons { padding: 0 .25rem; }
  .support-reasons section { padding: 1rem 0; }
  .support-faq { margin-top: 2rem; }
  .support-strip { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .support-header-link, .mockup-off { display: none; }
  .mockup-bar { font-size: .6875rem; gap: 0 .5rem; }
  .mockup-bar nav { gap: .75rem; }
}