/* InboxSig product styles. Shared kit primitives are overridden here. */
html:root {
  --accent: #5b4bce;
  --accent-solid: #6050d8;
  --muted: #656575;
  --radius: 12px;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}
::selection { background: #ddd7ff; color: #28204d; }
body { overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; }
h3 { font-size: 1.125rem; line-height: 1.35; }
p { line-height: 1.6; }
.container { max-width: 1160px; }
.narrow { max-width: 780px; }
.nav { max-width: 1180px; }
.btn { min-height: 44px; height: auto; padding: 10px 16px; line-height: 1.3; }
.btn-sm { min-height: 44px; }
.btn-primary, .btn-accent { background: var(--accent-solid); color: #fff; }
.btn-primary:hover, .btn-accent:hover { background: #5140c0; }
.btn:disabled { opacity: .6; cursor: wait; }
.nav-links a { min-height: 44px; display: flex; align-items: center; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.eyebrow {
  display: inline-block; border: 0; background: none; padding: 0; margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: 650; letter-spacing: .12em; color: var(--accent); text-transform: uppercase;
}

/* Keep the working product in the hero, with an explicit entry point. */
.home-intro {
  padding: var(--space-12) 20px var(--space-8); display: flex; align-items: end; justify-content: space-between; gap: var(--space-8);
}
.home-intro h1 { font-size: clamp(2.125rem, 4vw, 3.25rem); max-width: 660px; line-height: 1.06; margin: 4px 0 16px; }
.home-intro p { max-width: 60ch; color: var(--fg-2); margin: 0; font-size: var(--text-base); }
.hero-action { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.hero-action .btn { min-height: 48px; }
.hero-action > span { color: var(--muted); font-size: var(--text-sm); }
.free-note { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-size: var(--text-xs); color: var(--muted); padding-bottom: 12px; }
.dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #258560; }
.builder { scroll-margin-top: 80px; border: 1px solid var(--border-2); border-radius: 16px; box-shadow: 0 8px 40px #25204409; overflow: hidden; background: var(--card); }
.builder-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); }
.builder-top strong { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.builder-top > span { color: var(--muted); }
.workspace { display: grid; grid-template-columns: 47% 53%; min-width: 0; }
.editor { padding: var(--space-6); border-right: 1px solid var(--border); max-height: 620px; overflow: auto; scrollbar-width: thin; }
.section-label { font-size: var(--text-sm); font-weight: 650; margin: 0 0 16px; display: flex; justify-content: space-between; gap: 8px; }
.section-label span { font-weight: 400; color: var(--muted); font-size: var(--text-xs); }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.field label { font-size: var(--text-sm); font-weight: 550; color: var(--fg-2); margin: 0; }
input, select, textarea, .field input, .field select {
  width: 100%; min-width: 0; border: 1px solid var(--border-2); background: var(--bg); color: var(--fg);
  border-radius: 8px; min-height: 44px; height: auto; padding: 10px 12px; font-size: var(--text-sm); line-height: 1.4;
}
textarea { resize: vertical; min-height: 88px; }
input[type=color] { padding: 4px; height: 44px; }
input[type=file] { font-size: var(--text-xs); }
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
.field.full { grid-column: 1 / -1; }
.editor details { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-2); }
.editor summary { font-size: var(--text-sm); cursor: pointer; min-height: 44px; padding: 10px 0; }
.editor details .field-grid { padding: 12px 0; }
.preview-zone { display: flex; flex-direction: column; background: var(--bg-soft); padding: var(--space-6); min-width: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-4); }
.segmented { display: inline-flex; border: 1px solid var(--border-2); border-radius: 9px; background: var(--card); padding: 3px; gap: 2px; }
.segmented button { border: 0; min-width: 58px; min-height: 44px; padding: 0 10px; font-size: var(--text-xs); border-radius: 6px; background: none; color: var(--fg-2); cursor: pointer; }
.segmented button[aria-pressed=true] { background: var(--bg-soft); color: var(--fg); box-shadow: 0 1px 3px #0001; }
/* The email is a light artifact even when the surrounding application is dark. */
.mail-frame { color-scheme: light; border: 1px solid #dedee6; border-radius: 10px; box-shadow: 0 4px 18px #00000006; background: #fff; color: #454552; overflow: hidden; min-height: 300px; }
.mail-top { padding: 12px 16px; border-bottom: 1px solid #e8e8ed; font-size: var(--text-xs); display: flex; gap: 5px; align-items: center; color: #656575; }
.window-dot { width: 6px; height: 6px; border: 1px solid #b9b9c5; border-radius: 50%; }
.mail-top span:last-child { margin: auto; }
.mail-meta { padding: 16px 20px 8px; font-size: var(--text-xs); color: #656575; }
.mail-meta strong { font-weight: 500; color: #454552; }
.mail-content { padding: 8px 20px 24px; overflow-wrap: anywhere; }
.mail-content > p { font-size: var(--text-sm); color: #555; line-height: 1.6; margin-bottom: 20px; overflow-wrap: anywhere; }
#preview { overflow-wrap: anywhere; }
#preview table { max-width: 100% !important; }
#preview img { max-width: 100%; }
.mail-frame.preview-dark { color-scheme: dark; background: #18191d; color: #bfc0cb; border-color: #393a46; }
.preview-dark .mail-content > p, .preview-dark .mail-meta strong { color: #e3e3eb; }
.preview-dark .mail-top { border-color: #393a46; }
.preview-dark .mail-top, .preview-dark .mail-meta { color: #bfc0cb; }
.preview-dark #preview table, .preview-dark #preview td { background-color: transparent !important; color: #d0d0dc !important; }
.preview-dark #preview span { color: #bfc0cb !important; }
.preview-dark #preview strong, .preview-dark #preview a { color: #bcb3ff !important; }
.preview-dark #preview a[style*="background-color"] { background-color: #6553dc !important; color: #fff !important; }
.preview-dark #preview a[style*="background-color"] strong { color: inherit !important; }
.preview-foot { display: flex; gap: 8px; align-items: center; margin: 16px 0; color: var(--muted); font-size: var(--text-xs); }
.builder-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.builder-actions .btn { font-size: var(--text-sm); }
.builder-actions .btn:first-child { flex: 1 0 100%; min-height: 48px; }
.builder-actions .btn-secondary { flex: 1; }
.workspace-note, .preview-caveat { font-size: var(--text-xs); line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.builder-bottom { padding: 12px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); line-height: 1.6; color: var(--muted); gap: 16px; }
.builder-bottom > span { max-width: 65ch; }
.builder-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.builder-bottom .btn { flex-shrink: 0; }
.mobile-tabs, .mobile-continue { display: none; }
.template-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.template-choice { min-height: 76px; white-space: normal; text-align: left; padding: 12px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--card); color: var(--fg); font-size: var(--text-sm); cursor: pointer; }
.template-choice.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.template-choice small { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.trust-line { display: flex; justify-content: center; gap: var(--space-6); padding: 24px 0; color: var(--muted); font-size: var(--text-xs); flex-wrap: wrap; }
.operator-note { padding: 16px 20px; display: flex; justify-content: space-between; gap: 24px; align-items: center; border: 1px solid var(--border); border-radius: 12px; font-size: var(--text-sm); }
.operator-note p { margin: 0; color: var(--muted); max-width: 62ch; }
.operator-note strong { color: var(--fg-2); font-weight: 550; }
.operator-note > div { display: flex; gap: 16px; flex-shrink: 0; }
.operator-note a { display: inline-flex; align-items: center; min-height: 44px; }

/* Marketing and discovery surfaces share the same rhythm as the editor. */
.section { padding: var(--space-16) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-align: left; max-width: none; margin: 0 0 24px; }
.section-head p { color: var(--muted); max-width: 44ch; font-size: var(--text-base); margin-bottom: 0; }
.section-head > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.step-number { font-size: var(--text-xs); color: var(--accent); border: 1px solid var(--border-2); border-radius: 7px; padding: 4px 8px; display: inline-block; margin-bottom: 24px; }
.card { border-radius: var(--radius); }
.card p { font-size: var(--text-base); color: var(--fg-2); }
.sample { color-scheme: light; background: #fff; color: #656575; padding: 24px; border: 1px solid #e5e5eb; border-radius: 9px; overflow: hidden; min-height: 160px; overflow-wrap: anywhere; }
.sample table { max-width: 100% !important; }
.sample img { max-width: 100%; }
.gallery-card { text-decoration: none; display: block; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--card); min-width: 0; }
.gallery-meta { padding: 16px 4px 4px; display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.gallery-meta p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.gallery-meta h3 { font-size: var(--text-base); margin-bottom: 4px; }
.pill { font-size: var(--text-xs); }
.directory a:hover, .gallery-card:hover { border-color: var(--accent); }
.soft-section { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.notice { padding: 16px 20px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; font-size: var(--text-sm); color: var(--fg-2); margin: 24px 0; }
.cta-band { padding: 40px; border: 1px solid var(--border); background: radial-gradient(ellipse at 90% 50%, #8072ef15, transparent), var(--bg-soft); border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cta-band p { font-size: var(--text-base); color: var(--muted); margin: 0; }
.directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.directory a { padding: 16px; min-height: 48px; border: 1px solid var(--border); border-radius: 9px; text-decoration: none; font-size: var(--text-sm); background: var(--card); }
.page-intro { padding: 48px 0 32px; }
.page-intro p { color: var(--fg-2); max-width: 60ch; margin-bottom: 0; }
.page-intro h1 { font-size: clamp(2.125rem, 4vw, 3rem); line-height: 1.1; }
.prose { overflow-wrap: anywhere; }
.prose h2 { margin-top: 1.8em; }
.prose li { margin-bottom: .7em; }
.section .grid > section { padding: 0; }
.faq details { padding: 8px 0; }
.faq summary { min-height: 44px; align-items: center; padding: 8px 0; font-size: var(--text-sm); }
.faq details > div { padding-bottom: 12px; }
.pricing { align-items: stretch; gap: 20px; }
.price-card { padding: 24px; display: flex; flex-direction: column; }
.price-card .pill { position: static; align-self: start; margin-bottom: 16px; }
.price-card:not(.highlight) { padding-top: 66px; }
.price-card .small { font-size: var(--text-sm); }
.price-card .small a { display: inline-flex; align-items: center; min-height: 44px; }
.price-card .price + p { min-height: 44px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.price-card .checks { font-size: var(--text-sm); }
.billing-note { margin-top: 24px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--fg-2); }
.billing-note summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: 550; }
.billing-note p { max-width: 85ch; }
.comparison { margin-top: 24px; }
.comparison caption { text-align: left; font-size: var(--text-sm); color: var(--muted); padding-bottom: 12px; }
.comparison table { table-layout: fixed; font-size: var(--text-sm); }
.comparison th, .comparison td { overflow-wrap: anywhere; }
.comparison tbody th { font-weight: 550; color: var(--fg-2); }
.comparison thead th:nth-child(2), .comparison td:nth-child(2) { background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.comparison-note { font-size: var(--text-xs); color: var(--muted); max-width: 90ch; margin: 16px 0 4px; }
.comparison-sources { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: var(--text-xs); color: var(--fg-2); }
.comparison-sources a { min-height: 44px; display: inline-flex; align-items: center; }

/* Install, account and feedback states. */
.install { padding: 24px; margin-top: 24px; border: 1px solid var(--border); border-radius: 12px; }
.install .tabs { flex-wrap: wrap; }
.install .tabs button[aria-pressed=true] { border-color: var(--accent); color: var(--fg); }
.install p { font-size: var(--text-sm); margin-top: 16px; }
.install a { font-size: var(--text-sm); display: inline-flex; align-items: center; min-height: 44px; }
.status { font-size: var(--text-sm); color: var(--fg-2); min-height: 24px; overflow-wrap: anywhere; margin: 16px 0 0; }
.status:empty { min-height: 0; margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); opacity: 1; z-index: 100; width: max-content; max-width: calc(100vw - 32px); background: var(--fg); color: var(--bg); padding: 12px 20px; border-radius: 10px; box-shadow: var(--shadow-lg); }
dialog { background: var(--card); color: var(--fg); border: 1px solid var(--border-2); border-radius: 16px; max-width: 480px; width: calc(100% - 32px); padding: 24px; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: #10101a77; backdrop-filter: blur(4px); }
dialog h2 { font-size: 24px; }
dialog p { font-size: var(--text-sm); color: var(--fg-2); }
dialog input { margin-bottom: 16px; }
dialog .btn { white-space: normal; margin: 4px 0; }
.app-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 64px; }
.app-sidebar { border-right: 1px solid var(--border); padding-right: 24px; }
.app-sidebar a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 7px; text-decoration: none; font-size: var(--text-sm); margin-bottom: 4px; }
.app-sidebar a:first-of-type { background: var(--bg-soft); }
.app-sidebar p { font-size: var(--text-xs); letter-spacing: .08em; color: var(--muted); margin: 24px 12px 12px; }
.app-main { min-width: 0; }
.app-main > section { padding: 0; scroll-margin-top: 80px; }
.app-main > .settings-card { padding: 24px; }
.app-main > .settings-card .actions { margin-top: 16px; }
.app-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
.app-heading h1 { font-size: 32px; }
.app-heading p { font-size: var(--text-sm); color: var(--muted); }
.usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 32px; }
.usage-box { padding: 16px; border: 1px solid var(--border); border-radius: 12px; font-size: var(--text-sm); color: var(--muted); }
.usage-box strong { font-size: 24px; display: block; color: var(--fg); margin-bottom: 8px; }
.usage-box progress { width: 100%; height: 5px; accent-color: var(--accent); }
.signature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.signature-card { padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.signature-card .sample { min-height: 160px; }
.signature-card .actions, .settings-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.signature-card h3 { font-size: var(--text-base); margin: 16px 0 4px; }
.settings-card { padding: 24px; border: 1px solid var(--border); border-radius: 12px; margin-top: 24px; }
.auth-wrap { max-width: 480px; margin: 48px auto; padding: 0 20px; }
.auth-wrap .card { padding: 32px; }
.auth-wrap h1 { font-size: 30px; line-height: 1.15; }
.auth-wrap label { font-size: var(--text-sm); }
.auth-wrap input { font-size: var(--text-base); min-height: 48px; }
.auth-wrap button { margin-top: 16px; width: 100%; min-height: 48px; }
.auth-help { font-size: var(--text-sm); color: var(--muted); margin: 12px 0 0; }
.auth-privacy { margin: 20px 0 8px; color: var(--muted); font-size: var(--text-xs); }
.auth-privacy a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-back { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.empty { padding: 32px 24px; }
.stats-table { width: 100%; font-size: var(--text-sm); }
.stats-table td, .stats-table th { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.site-footer { margin-top: 64px; }
.site-footer a { min-height: 44px; }
.footer-grid a { display: flex; align-items: center; }
.footer-grid .footer-brand a { display: inline-flex; }
.footer-grid a[href^="https://wouldairecommend.com"] { color: var(--fg); font-weight: 600; }
.footer-base a { display: inline-flex; align-items: center; min-width: 44px; }

@media (min-width: 1001px) {
  .home-intro { padding-top: 32px; padding-bottom: 24px; }
  .home-intro > div:first-child { flex: 1; }
  .home-intro h1 { max-width: none; font-size: 48px; white-space: nowrap; }
  .home-intro .free-note { display: none; }
}
@media (min-width: 821px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  .price-card > h3 + p { min-height: 48px; }
}
@media (prefers-color-scheme: dark) {
  html:root { --muted: #afafbf; --accent: #b4aaff; --accent-solid: #6553dc; --border-2: #484854; }
  .btn-primary:hover, .btn-accent:hover { background: #5744c8; }
  .dot { background: #5bc599; }
  .mail-frame { box-shadow: 0 5px 25px #0002; }
}
@media (max-width: 1000px) {
  .home-intro { display: block; }
  .free-note { margin-top: 16px; padding-bottom: 0; }
  .operator-note { display: block; }
  .operator-note > div { margin-top: 8px; }
}
@media (max-width: 820px) {
  .menu-open .site-header { background: var(--bg); }
  .nav { display: grid; grid-template-columns: 1fr 44px; gap: 0 16px; }
  .nav > .brand { grid-column: 1; grid-row: 1; }
  .nav-toggle { grid-column: 2; grid-row: 1; margin: 0; }
  .menu-open .nav { display: grid; }
  .menu-open .nav-links { grid-column: 1 / -1; grid-row: 2; gap: 0; padding-bottom: 0; }
  .menu-open .nav-cta { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 4px; }
  .menu-open .nav-links a { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .nav-cta .btn { white-space: normal; }
  .price-card:not(.highlight) { padding-top: 24px; }
}
@media (max-width: 760px) {
  .home-intro { padding-top: 28px; padding-bottom: 24px; }
  .home-intro h1 { font-size: 34px; max-width: 18ch; margin-top: 4px; margin-bottom: 12px; }
  .home-intro p { font-size: var(--text-base); }
  .hero-action { display: block; margin-top: 20px; }
  .hero-action .btn { width: 100%; }
  .hero-action > span { display: block; margin-top: 8px; text-align: center; font-size: var(--text-xs); }
  .free-note { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .editor { border-right: 0; max-height: none; padding: 16px; }
  .preview-zone { padding: 16px; }
  .mobile-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 8px; gap: 4px; }
  .mobile-tabs button { flex: 1; min-width: 44px; min-height: 44px; background: none; color: var(--muted); border: 0; border-radius: 6px; font-size: var(--text-sm); cursor: pointer; }
  .mobile-tabs button[aria-selected=true] { background: var(--bg-soft); color: var(--fg); box-shadow: inset 0 -2px var(--accent); }
  .mobile-continue { display: flex; width: 100%; margin-top: 24px; }
  .builder[data-panel=details] .design-fields,
  .builder[data-panel=design] .details-fields,
  .builder:not([data-panel=preview]) .preview-zone,
  .builder[data-panel=preview] .editor { display: none; }
  .builder-top { padding: 12px 16px; align-items: start; }
  .builder-top > span { max-width: 14ch; text-align: right; }
  .builder-bottom { padding: 12px 16px; align-items: start; flex-direction: column; gap: 0; }
  .field-grid { gap: 16px 12px; }
  .field label { font-size: 13px; }
  .field input, .field select, input, select, textarea { font-size: 16px; min-height: 48px; padding: 10px; }
  .field:has(#f-email), .field:has(#f-phone), .field:has(#f-website), .field:has(#f-calendar) { grid-column: 1 / -1; }
  .section-label { display: block; }
  .section-label span { display: block; margin-top: 4px; }
  .template-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-line { gap: 8px 16px; }
  .section { padding: 48px 0; }
  .section-head { display: block; }
  .section-head > a { margin-top: 12px; }
  .cta-band { padding: 24px; display: block; }
  .cta-band .btn { margin-top: 24px; }
  .directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-intro { padding-top: 32px; }
  .app-layout { display: block; padding-top: 24px; }
  .app-sidebar { display: flex; flex-wrap: wrap; gap: 4px 16px; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 16px; margin-bottom: 24px; }
  .app-sidebar > .eyebrow, .app-sidebar p { display: none; }
  .app-sidebar a { padding: 8px; margin: 0; }
  .signature-list { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: 1fr; }
  .usage-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
  .usage-box strong { font-size: 22px; margin: 0; }
  .usage-box progress { flex: 0 0 100%; }
  .app-heading h1 { font-size: 28px; }
  .sample { padding: 16px; }
  .auth-wrap { margin: 32px auto; }
  .auth-wrap .card { padding: 24px; }
  .auth-wrap h1 { font-size: 28px; }
  .price-card .small a { font-size: var(--text-sm); }
  /* Explicit provider labels preserve every comparison value without a scroll trap. */
  .comparison { overflow: visible; border-radius: 0; }
  .comparison table, .comparison tbody { display: block; width: 100%; }
  .comparison table { border: 0; background: none; overflow: visible; }
  .comparison caption { display: block; }
  .comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparison tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: var(--card); }
  .comparison tbody th { display: block; padding: 12px 16px; background: var(--bg-soft); font-size: var(--text-base); }
  .comparison tbody td { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 12px 16px; font-size: var(--text-sm); }
  .comparison td::before { content: attr(data-provider); font-weight: 600; }
  .comparison tbody td:last-child { border-bottom: 0; }
  .comparison-sources { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}