/* Page-only presentation. The shared demo and its mobile rules stay intact. */
@media (min-width: 601px) {
  .alignment-page .vd-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .alignment-page .vd-summary .vd-card { padding: 16px; border-radius: 10px; }
  .alignment-page .vd-summary .vd-goal p { font-size: 17px; }
  .alignment-page .vd-summary .vd-message p { font-size: 15px; line-height: 1.4; }
  .alignment-page .vd-summary .vd-answers button { min-height: 34px; padding: 6px 9px; font-size: 12px; border-radius: 6px; }
  .alignment-page .vd-summary .vd-you { padding: 10px; }
}

@media (min-width: 1024px) {
  :root { --paper: #f5f1ea; --white: #fffefa; --ink: #151713; --muted: #676b62; --line: #cbc7ba; --accent: #71406f; }
  body { background: var(--paper); }
  .site-header { min-height: 64px; background: var(--paper); box-shadow: none; }
  .top-nav a, .quiet-link { font-size: 12px; }
  .alignment-page { width: min(calc(100% - 64px), 1160px); padding: 32px 0; animation: none; }
  .alignment-page::before { display: none; }
  .alignment-page .page-kicker { margin: 0 0 12px; font-size: 11px; line-height: 1.4; letter-spacing: .17em; }
  .alignment-page .vera-universal-demo { margin: 0 0 24px; padding: 20px; border-color: var(--line); border-radius: 12px; background: var(--white); color: var(--ink); }
  .alignment-page .vd-heading h2, .alignment-page .vd-finish h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
  .alignment-page .vd-heading p, .alignment-page .vd-finish p { font-size: 14px; line-height: 1.4; }
  .alignment-page .vd-groups, .alignment-page .vd-scenarios { display: inline-flex; vertical-align: middle; gap: 8px; margin: 14px 16px 0 0; }
  .alignment-page .vd-groups button, .alignment-page .vd-scenarios button, .alignment-page .vd-navigation button { min-height: 34px; padding: 6px 12px; border-color: var(--line); border-radius: 6px; font-size: 12px; }
  .alignment-page .vd-groups button { border-radius: 999px; font-size: 11px; }
  .alignment-page .vd-groups button[aria-pressed="true"], .alignment-page .vd-scenarios button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
  .alignment-page .vd-stage { margin-top: 16px; }
  .alignment-page .vd-stage:not(.vd-summary) { max-width: 680px; margin-inline: auto; }
  .alignment-page .vd-card, .alignment-page .vd-summary .vd-card { min-width: 0; padding: 16px; border-radius: 8px; }
  .alignment-page .vd-goal { padding-bottom: 10px; border-color: color-mix(in srgb, currentColor 40%, transparent); }
  .alignment-page .vd-goal p, .alignment-page .vd-summary .vd-goal p { margin-top: 5px; font-size: 17px; line-height: 1.3; }
  .alignment-page .vd-goal span, .alignment-page .vd-speaker, .alignment-page .vd-band { font-size: 10px; letter-spacing: .13em; }
  .alignment-page .vd-band { margin-top: 10px; }
  .alignment-page .vd-message { margin-top: 12px; }
  .alignment-page .vd-message p, .alignment-page .vd-summary .vd-message p { margin-top: 4px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
  .alignment-page .vd-you, .alignment-page .vd-summary .vd-you { margin-left: 0; padding: 10px; border-radius: 3px; background: rgba(255,255,255,.2); }
  .alignment-page .vd-answers { gap: 6px; margin-top: 10px; }
  .alignment-page .vd-answers button, .alignment-page .vd-summary .vd-answers button { min-height: 34px; padding: 6px 9px; border-radius: 6px; font-size: 12px; line-height: 1.35; }
  .alignment-page .vd-navigation { margin-top: 12px; }
  .alignment-page .vd-progress { font-size: 11px; }
  .alignment-page .vd-finish { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; align-items: center; margin-top: 16px; padding-top: 16px; border-color: var(--line); }
  .alignment-page .vd-finish h2 { font-size: 20px; }
  .alignment-page .vd-join { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 9px 18px; background: var(--accent); font-size: 13px; line-height: 1.4; }
  .alignment-page .plain-section { margin: 0 0 20px; padding-top: 18px; }
  .alignment-page .plain-section > h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.02em; }
  .alignment-page .color-list { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
  .alignment-page .color-card { padding: 12px; grid-template-columns: 8px minmax(0,1fr); gap: 10px; border-radius: 8px; }
  .alignment-page .color-card i { width: 8px; height: 8px; margin-top: 5px; box-shadow: none; }
  .alignment-page .color-card h3 { font-family: inherit; font-size: 13px; font-weight: 750; line-height: 1.4; }
  .alignment-page .color-card p { font-size: 12px; line-height: 1.45; }
  .alignment-page .page-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
  .alignment-page .page-cta h2 { margin: 0; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
  .alignment-page .page-cta .primary-button { min-height: 36px; padding: 7px 16px; border-radius: 999px; background: var(--accent); font-size: 13px; }
  .site-footer { padding: 16px max(32px, calc((100vw - 1160px)/2)); font-size: 11px; }
}

@media (min-width: 1200px) {
  .alignment-page .vd-summary { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
}