/* One window-aware layout scale; text pages retain a readable line length. */
:root {
  --layout-gutter: clamp(24px, 1.8vw, 48px);
  --layout-reading: clamp(760px, 40vw, 1040px);
  --layout-plans: clamp(1120px, 64vw, 1560px);
  --layout-panel: clamp(480px, 24vw, 600px);
  --layout-title: clamp(34px, calc(24px + .75vw), 44px);
  --layout-body: clamp(17px, calc(14px + .16vw), 18px);
}
body.information-document { min-height: 100dvh; display: flex; flex-direction: column; }
.information-document > header, .information-document > footer { flex-shrink: 0; }
.information-document > .info-page { flex: 1 0 auto; min-height: 0; width: 100%; }
@media (min-width: 900px) {
  header { padding-inline: var(--layout-gutter); }
  .info-page:not(.pricing-page) {
    max-width: var(--layout-reading);
    padding: clamp(48px, 6dvh, 88px) var(--layout-gutter) 64px;
  }
  .info-page:not(.pricing-page) h1 { font-size: var(--layout-title); line-height: 1.3; }
  .info-page:not(.pricing-page) :is(p, li) { font-size: var(--layout-body); }
  .info-page:not(.pricing-page) h2 { font-size: clamp(22px, 1vw, 26px); }
  .information-document > .site-footer { width: 100%; max-width: var(--layout-reading); padding-inline: var(--layout-gutter); }
  .pricing-document > .info-page.pricing-page { max-width: var(--layout-plans); padding-inline: var(--layout-gutter); }
  .pricing-page h1 { font-size: var(--layout-title); }
  .pricing-document > .site-footer { max-width: var(--layout-plans); padding-inline: var(--layout-gutter); }
  .pricing-card { padding: clamp(24px, 1.5vw, 36px); }
  .pricing-page .pricing-price { font-size: clamp(34px, 1.6vw, 42px); }
  .pricing-grid { gap: clamp(16px, 1vw, 24px); }
  .account-page, .account-page:has(#member-panel:not([hidden])) { max-width: var(--layout-panel); padding-inline: 32px; }
  #login-panel { max-width: 100%; }
  .account-page h1, #login-panel h1, #member-panel h1 { font-size: var(--layout-title); }
  .account-page .account-intro, #login-panel .account-intro { font-size: 16px; }
  .account-page #member-email, #member-panel .account-plan p { font-size: 17px; }
  .account-page #member-panel .account-plan strong { font-size: 24px; }
  .start > .upload-card:not(.home-hero):not(.processing-simple) { width: min(900px, 90vw); }
  .start > .upload-card:not(.home-hero):not(.processing-simple) h1 { font-size: var(--layout-title); }
  .start > .upload-card:not(.home-hero):not(.processing-simple) p { font-size: var(--layout-body); }
  .processing-simple .processing-group { width: min(760px, calc(100% - 64px)); }
  .processing-simple #processing-title { font-size: var(--layout-title); }
  .processing-simple .progress-hint { max-width: 580px; font-size: var(--layout-body); }
  .processing-simple #cancel { right: var(--layout-gutter); }
  .how-it-works, #app > .site-footer { max-width: var(--layout-reading); }
}
@media (min-width: 900px) and (max-height: 650px) {
  .account-page, .account-page:has(#member-panel:not([hidden])) { padding-block: 24px 40px; }
  .account-page h1, #login-panel h1, #member-panel h1 { font-size: 32px; }
  .info-page:not(.pricing-page) { padding-top: 40px; }
}

/* The recovery utility uses the same controls and available-height layout. */
.restore-document { min-height: 100dvh; display: flex; flex-direction: column; }
.restore-document header { height: 66px; flex-shrink: 0; }
.restore-page { width: min(100%, 520px); margin: auto; padding: 40px 24px; min-height: 0; }
.restore-page > section, .restore-page > form { width: 100%; margin: 0; }
.restore-page > section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.restore-page h1 { font-size: 26px; line-height: 1.4; margin: 0 0 16px; }
.restore-page p, .restore-page label { font-size: 16px; max-width: none; }
.restore-page p { color: var(--muted); }
.restore-page input { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.restore-page button { min-height: 44px; height: auto; padding: 12px 16px; }
.restore-page .primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (min-width: 900px) { .restore-page { width: var(--layout-panel); padding-block: 48px; } .restore-page h1 { font-size: 30px; } }

/* Only the site's own preparation / recovery UI, outside Paddle's iframe. */
.checkout-document { font-family: var(--font-sans, system-ui, sans-serif); min-height: 100dvh; }
.checkout-document main { box-sizing: border-box; width: min(100%, 520px); padding: 24px; }
.checkout-document main p { font-size: 16px; color: #c6ced8; }
.checkout-document main button { min-height: 44px; }

/* Keep plan actions visible on laptops; the longer usage notes can scroll. */
@media (min-width: 900px) and (max-height: 850px) {
  .pricing-document > .info-page.pricing-page { padding-block: 32px 28px; }
  .pricing-page h1 { font-size: 32px; margin-bottom: 10px; }
  .pricing-page .back-link { margin-bottom: 16px; }
  .pricing-page .pricing-intro { font-size: 16px; margin-bottom: 20px; }
  .pricing-card { padding: 20px; }
  .pricing-page .card-heading { margin-bottom: 12px; }
  .pricing-page .pricing-price { font-size: 32px; }
  .pricing-page .pricing-period { margin-bottom: 12px; }
  .pricing-page .pricing-allowance { padding: 12px 0; gap: 6px; margin-bottom: 4px; }
  .pricing-page .pricing-allowance span { font-size: 14px; }
  .pricing-page .pricing-features { gap: 6px; margin-bottom: 16px; }
  .pricing-page .pricing-features li { font-size: 15px; line-height: 1.5; }
  .pricing-page .pricing-start { min-height: 48px; }
  .account-page, .account-page:has(#member-panel:not([hidden])) { padding-block: 32px 48px; }
}