/* Centered product layout, system typography, and distinct feature accents. */
:root {
  color-scheme: light dark;
  --ink: #1d1d1f; --muted: #646469; --accent: #b01954;
  --paper: #fff; --surface: #f5f5f7; --row: #ebebef; --border: #dedee3;
  --button: #b01954; --button-text: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--paper); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; text-align: center; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.header { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 24px 8px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 21px; font-weight: 600; letter-spacing: -.6px; }
.brand img { object-fit: contain; }
nav { display: flex; justify-content: center; gap: 32px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--muted); }
nav a:hover, .text-link:hover { text-decoration: underline; }
.hero { padding: 80px 24px 88px; }
.hero-copy { max-width: 960px; margin-inline: auto; }
.eyebrow { margin: 0 0 20px; font-size: 17px; font-weight: 600; }
h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.06; letter-spacing: -.055em; font-weight: 650; margin: 0 auto 24px; text-wrap: balance; }
h1 span { color: var(--accent); }
.intro { max-width: 620px; margin: 0 auto 32px; color: var(--muted); font-size: 24px; line-height: 1.4; letter-spacing: -.025em; text-wrap: balance; }
.download-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; scroll-margin-top: 24px; }
.download-button { min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px; color: var(--button-text); background: var(--button); font-size: 17px; }
.download-button:hover { filter: brightness(1.1); }
.text-link { color: var(--accent); font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.text-link span { font-size: 25px; }
#availability-message { flex-basis: 100%; max-width: 540px; margin: 8px auto 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.features-section { padding: 64px 24px; background: var(--surface); scroll-margin-top: 24px; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -.04em; margin: 0 auto 40px; font-weight: 650; text-wrap: balance; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: auto; }
.feature { display: flex; flex-direction: column; align-items: center; padding: 40px 32px; background: var(--paper); border-radius: 28px; }
.feature-manual { --feature-accent: #1760bd; }
.feature-chat { --feature-accent: #7942b8; }
.feature-review { --feature-accent: #237847; }
.feature-sync { --feature-accent: #a65316; }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--feature-accent); margin: 0 0 16px; }
.feature-icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature .feature-label { color: var(--feature-accent); font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.feature h3 { color: var(--feature-accent); max-width: 330px; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; margin: 0 0 16px; text-wrap: balance; }
.feature p { max-width: 330px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.section-note { max-width: 640px; margin: 28px auto 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.how-it-works { padding: 80px 24px; scroll-margin-top: 24px; }
.how-it-works h2 { margin-bottom: 20px; }
.section-intro { margin: 0 auto 32px; color: var(--muted); font-size: 21px; line-height: 1.4; text-wrap: balance; }
.gpt-example { max-width: 520px; margin: 0 auto; padding: 24px; border-radius: 28px; background: var(--surface); }
.gpt-composer-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 16px; }
.gpt-label { grid-column: 2; font-size: 13px; font-weight: 600; color: var(--muted); }
.typing-toggle { grid-column: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); }
.user-message { background: var(--paper); border-radius: 20px; padding: 24px 16px; }
.gpt-message { display: block; font-size: 19px; line-height: 1.5; min-height: 3em; margin: 0; overflow-wrap: anywhere; }
.typing-cursor { display: inline-block; height: 1em; width: 2px; margin-left: 3px; vertical-align: -.13em; background: var(--accent); animation: cursor-blink 1s step-end infinite; }
.is-paused .typing-cursor { visibility: hidden; animation: none; }
.gpt-composer:not([data-stage="typing"]) .typing-cursor { visibility: hidden; }
.sync-event { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 16px; opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; }
.sync-heart { display: grid; place-items: center; }
.sync-event strong { font-size: 15px; font-weight: 500; }
[data-stage="syncing"] .sync-event { opacity: 1; transform: none; visibility: visible; }
.demo-caption { display: block; margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
footer { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px; background: var(--surface); color: var(--muted); font-size: 12px; }
footer p { margin: 0; font-size: 17px; color: var(--ink); }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px; background: var(--paper); z-index: 5; }
.skip-link:focus { top: 10px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-color-scheme: dark) {
  .feature-manual { --feature-accent: #79b7ff; }
  .feature-chat { --feature-accent: #c49aff; }
  .feature-review { --feature-accent: #72d49a; }
  .feature-sync { --feature-accent: #ffb275; }
  :root { --ink: #f5f5f7; --muted: #aaaab1; --accent: #ff92b5; --paper: #000; --surface: #161617; --row: #242426; --border: #333336; --button: #ff92b5; --button-text: #29101b; }
}
@media (max-width: 600px) {
  .hero { padding: 56px 20px 64px; }
  .intro { font-size: 21px; }
  .download-area { flex-direction: column; gap: 8px; }
  #availability-message { flex-basis: auto; }
  .features-section, .how-it-works { padding: 48px 20px; }
  .features { grid-template-columns: 1fr; gap: 16px; }
  .feature { padding: 32px 24px; }
  .feature h3 { font-size: 26px; }
  .gpt-example { padding: 16px; }
  .section-intro { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-cursor { animation: none; }.sync-event { transition: none; }
}

/* Legal documents share the brand while keeping long-form text easy to read. */
.legal-content { max-width: 728px; margin: 0 auto; padding: 64px 24px; text-align: left; font-size: 1.0625rem; line-height: 1.65; overflow-wrap: anywhere; }
.legal-content h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 16px; }
.legal-intro { margin: 0 0 16px; color: var(--muted); }
.legal-date { color: var(--muted); font-size: .9375rem; margin: 0 0 48px; }
.legal-content section + section { margin-top: 40px; }
.legal-content h2 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: auto; }
.legal-content p { margin-top: 0; margin-bottom: 16px; }
.legal-content ul { padding-left: 24px; }
.legal-content li { margin-bottom: 16px; }
.legal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-page nav, footer nav { flex-wrap: wrap; gap: 8px 24px; }
.legal-page nav a, footer nav a { font-size: .9375rem; min-width: 44px; justify-content: center; }
nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-color-scheme: dark) { .legal-page { --paper: #111113; --surface: #1c1c1e; background: var(--paper); } }
@media (max-width: 600px) { .legal-content { padding: 40px 24px; } }
@media print { .legal-page .header, .legal-page footer, .skip-link { display: none; } .legal-content { max-width: none; padding: 0; } .legal-page { color: #000; background: #fff; } .legal-content h2 { break-after: avoid; } }