/* Approved layout: docs/design/landing-reference.html. Static, shared by public pages. */
:root {
  color-scheme: light;
  --color-background: #F7F1EA;
  --color-surface: #FFFFFF;
  --color-text: #2A2320;
  --color-primary: #A9573B;
  --color-primary-hover: #8A4329;
  --color-text-strong-secondary: #4A403B;
  --color-text-secondary: #6B5F58;
  --color-primary-soft: #F3DCD1;
  --color-text-body: #5E534D;
  --color-phone-shell: #211C19;
  --color-eyebrow: #9A6B4F;
  --color-violet: #5A4FBF;
  --color-identity-ana-tint: #EFE3C6;
  --color-identity-ana-ink: #6E5410;
  --color-identity-ana: #8C6A14;
  --color-identity-ana-current: #B8963E;
  --color-plan-ink: #4A3A12;
  --color-identity-pedro: #8A3F78;
  --color-pending-soft: #FBEFD9;
  --color-health: #3F7A4A;
  --color-text-muted: #7A6E67;
  --color-label: #8E827B;
  --color-identity-pedro-tint: #EBD6E5;
  --color-pending: #8A5200;
  --color-border: #F1E9E3;
  --color-accent-wash: #FBF3EC;
  --color-school-soft: #EEEAF7;
  --color-success-soft: #E3F1E4;
  --color-success: #2E6A35;
  --color-health-soft: #E5F0E3;
  --color-documents-soft: #E6F0F4;
  --color-care-soft: #F6E4DC;
  --color-on-dark-secondary: #CFC4BC;
  --color-invite-beta: #D9805F;
  --color-footer-border: #E9DED5;
  --color-swap-icon: #9A5B00;
  --color-eyebrow-accessible: #936348;
  --color-muted-accessible: #786C65;
  --color-beta-label-accessible: #984B32;
}

body{margin:0;background:var(--color-background);font-family:'Nunito Sans',system-ui,sans-serif;color:var(--color-text)}
a{color:var(--color-primary);text-decoration:none}a:hover{color:var(--color-primary-hover)}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:600}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.hero{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero-text{flex:1 1 440px;min-width:0}
.hero-art{flex:1 1 320px;display:flex;justify-content:center}
.feat{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.feat-text{flex:1 1 380px;min-width:0}
.feat-art{flex:1 1 380px;min-width:0;display:flex;justify-content:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.navlinks{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none}
.dot{width:8px;height:8px;border-radius:4px;display:inline-block;flex:none}

.public-header { padding:20px 0 }
.header-inner { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap }
.wordmark { display:flex;align-items:center;gap:10px;color:var(--color-text) }
.wordmark-text { font-size:24px }
.nav-link { color:var(--color-text-strong-secondary);font-weight:700;font-size:15px }
.invite-nav { background:var(--color-text);color:var(--color-surface);font-weight:800;font-size:15px;padding:11px 18px;border-radius:12px }
.hero-section { padding:48px 0 88px 0 }
.beta-pill { display:inline-flex;align-items:center;gap:8px;background:var(--color-surface);border-radius:999px;padding:6px 14px 6px 8px;font-size:13px;font-weight:800;color:var(--color-text-secondary) }
.beta-label { background:var(--color-primary-soft);color:var(--color-primary);border-radius:999px;padding:3px 9px;font-size:12px }
.hero-title { margin:22px 0 0 0;font-size:clamp(42px,6vw,68px);line-height:1.05;letter-spacing:-1.2px }
.hero-lead { margin:20px 0 0 0;font-size:19px;line-height:1.55;color:var(--color-text-body);max-width:500px }
.hero-actions { display:flex;gap:12px;margin-top:32px;flex-wrap:wrap }
.invite-primary { background:var(--color-primary);color:var(--color-surface);font-weight:800;font-size:16px;padding:16px 24px;border-radius:16px }
.discover-link { background:var(--color-surface);color:var(--color-text);font-weight:800;font-size:16px;padding:16px 24px;border-radius:16px }
.phone-shell { width:300px;height:610px;border-radius:44px;background:var(--color-phone-shell);padding:10px;box-sizing:border-box;box-shadow:0 30px 60px rgba(42,35,32,0.18) }
.phone-screen { width:100%;height:100%;border-radius:36px;background:var(--color-background);overflow:hidden;padding:44px 16px 0 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px }
.phone-header { display:flex;justify-content:space-between;align-items:center }
.phone-eyebrow { font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--color-eyebrow) }
.phone-title { font-size:26px;line-height:1.15 }
.phone-avatar { width:32px;height:32px;border-radius:16px;background:var(--color-violet);color:var(--color-surface);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center }
.phone-plan { background:var(--color-identity-ana-tint);border-radius:18px;padding:12px 14px }
.align-center { display:flex;align-items:center;gap:10px }
.grow { flex:1 }
.plan-eyebrow { font-size:9px;font-weight:800;letter-spacing:0.8px;color:var(--color-identity-ana-ink) }
.plan-title { font-size:18px;line-height:1.2 }
.text-center { text-align:center }
.plan-count { font-size:20px;line-height:1 }
.plan-days { font-size:8px;font-weight:800;color:var(--color-identity-ana-ink) }
.plan-strip { display:flex;gap:3px;margin-top:10px }
.plan-strip-active { flex:1;height:5px;border-radius:3px;background:var(--color-identity-ana) }
.plan-strip-current { flex:1;height:5px;border-radius:3px;background:var(--color-identity-ana-current) }
.plan-strip-future { flex:1;height:5px;border-radius:3px;background:rgba(110,84,16,0.18) }
.plan-delivery { display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--color-plan-ink) }
.plan-next { display:flex;align-items:center;gap:4px;font-weight:700 }
.identity-dot-small { width:6px;height:6px;background:var(--color-identity-pedro) }
.phone-section-title { font-size:15px }
.phone-row { background:var(--color-surface);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center }
.phone-swap-icon { width:30px;height:30px;border-radius:10px;background:var(--color-pending-soft);display:flex;align-items:center;justify-content:center }
.phone-row-title { font-size:12px;font-weight:800 }
.phone-row-meta { font-size:10px;color:var(--color-text-secondary) }
.phone-check-icon { width:22px;height:22px;border-radius:11px;background:var(--color-health);display:flex;align-items:center;justify-content:center }
.features-section { background:var(--color-surface);padding:96px 0 }
.feature-list { display:flex;flex-direction:column;gap:96px }
.feature-eyebrow { font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--color-eyebrow) }
.feature-title { margin:10px 0 0 0;font-size:clamp(30px,4vw,42px);line-height:1.12;letter-spacing:-0.5px }
.feature-description { margin:16px 0 0 0;font-size:17px;line-height:1.6;color:var(--color-text-body);max-width:460px }
.calendar-snippet { width:100%;max-width:440px;background:var(--color-background);border-radius:28px;padding:22px }
.calendar-header { display:flex;justify-content:space-between;align-items:baseline }
.calendar-title { font-size:22px }
.calendar-year { font-size:14px;font-weight:700;color:var(--color-text-muted) }
.calendar-weekdays { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:14px;font-size:11px;font-weight:800;color:var(--color-label);text-align:center }
.calendar-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:6px;font-size:15px;font-weight:700;text-align:center;row-gap:6px }
.calendar-start { background:var(--color-identity-ana-tint);border-radius:17px 0 0 17px;padding:8px 0 }
.calendar-ana { background:var(--color-identity-ana-tint);padding:8px 0 }
.calendar-split { background:linear-gradient(90deg,var(--color-identity-ana-tint) 50%,var(--color-identity-pedro-tint) 50%);padding:8px 0 }
.calendar-pedro { background:var(--color-identity-pedro-tint);padding:8px 0 }
.calendar-split-end { background:linear-gradient(90deg,var(--color-identity-pedro-tint) 50%,var(--color-identity-ana-tint) 50%);border-radius:0 17px 17px 0;padding:8px 0 }
.calendar-end { background:var(--color-identity-ana-tint);border-radius:0 17px 17px 0;padding:8px 0 }
.calendar-legend { display:flex;gap:16px;margin-top:14px;font-size:13px;font-weight:700;color:var(--color-text-secondary) }
.legend-person { display:flex;align-items:center;gap:6px }
.identity-ana { background:var(--color-identity-ana) }
.identity-pedro { background:var(--color-identity-pedro) }
.calendar-delivery { margin-top:16px;background:var(--color-surface);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px }
.delivery-time { font-size:13px;font-weight:800;width:42px }
.delivery-icon { width:32px;height:32px;border-radius:10px;background:var(--color-pending-soft);display:flex;align-items:center;justify-content:center }
.snippet-title { font-size:14px;font-weight:800 }
.snippet-meta { font-size:12px;color:var(--color-text-secondary) }
.feat-reverse { flex-direction:row-reverse }
.swap-snippet { width:100%;max-width:420px;background:var(--color-background);border-radius:28px;padding:22px }
.snippet-eyebrow { font-size:11px;font-weight:800;letter-spacing:1px;color:var(--color-eyebrow) }
.swap-title { font-size:24px;margin-top:4px;line-height:1.2 }
.swap-status { margin-top:10px }
.status-pending { font-size:12px;font-weight:800;padding:5px 10px;border-radius:9px;background:var(--color-pending-soft);color:var(--color-pending) }
.swap-comparison { background:var(--color-surface);border-radius:18px;overflow:hidden;margin-top:16px }
.comparison-before { display:flex;gap:12px;padding:12px 14px;align-items:center }
.comparison-label { width:70px;font-size:11px;font-weight:800;color:var(--color-label) }
.comparison-person { display:flex;align-items:center;gap:6px;font-size:14px;color:var(--color-text-secondary) }
.comparison-after { display:flex;gap:12px;padding:12px 14px;align-items:center;border-top:1px solid var(--color-border);background:var(--color-accent-wash) }
.proposal-label { width:70px;font-size:11px;font-weight:800;color:var(--color-primary) }
.proposal-person { display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800 }
.swap-actions { display:flex;gap:10px;margin-top:16px }
.mock-decline { flex:1;text-align:center;background:var(--color-surface);border-radius:14px;padding:13px 0;font-weight:800;font-size:15px }
.mock-accept { flex:1;text-align:center;background:var(--color-primary);color:var(--color-surface);border-radius:14px;padding:13px 0;font-weight:800;font-size:15px }
.expense-snippet { width:100%;max-width:420px;background:var(--color-background);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:12px }
.expense-balance { background:var(--color-surface);border-radius:20px;padding:18px }
.expense-total { font-size:28px;margin-top:4px }
.expense-receivable { font-size:17px;color:var(--color-health) }
.expense-person { display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border);font-size:14px;font-weight:700 }
.expense-person-name { display:flex;align-items:center;gap:8px }
.expense-avatar { width:24px;height:24px;border-radius:12px;background:var(--color-identity-pedro);color:var(--color-surface);font-size:11px;display:flex;align-items:center;justify-content:center }
.expense-row { background:var(--color-surface);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:12px }
.expense-icon { width:38px;height:38px;border-radius:12px;background:var(--color-school-soft) }
.text-right { text-align:right }
.status-approved { font-size:10px;font-weight:800;padding:2px 7px;border-radius:7px;background:var(--color-success-soft);color:var(--color-success) }
.more-section { padding:96px 0 }
.section-title { margin:0;font-size:clamp(28px,3.6vw,38px);letter-spacing:-0.4px }
.more-grid { margin-top:32px }
.more-card { background:var(--color-surface);border-radius:24px;padding:24px }
.routine-icon { background:var(--color-health-soft) }
.more-card-title { font-size:18px;font-weight:800;margin-top:16px }
.more-card-description { font-size:15px;line-height:1.55;color:var(--color-text-body);margin-top:6px }
.documents-icon { background:var(--color-documents-soft) }
.caregivers-icon { background:var(--color-care-soft) }
.principles { display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:40px;font-size:15px;font-weight:700;color:var(--color-text-strong-secondary) }
.beta-section { padding:0 0 96px 0 }
.beta-box { background:var(--color-text);border-radius:32px;padding:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between }
.beta-copy { flex:1 1 380px;min-width:0 }
.beta-title { margin:0;color:var(--color-background);font-size:clamp(28px,3.6vw,38px);letter-spacing:-0.4px }
.beta-description { margin:12px 0 0 0;color:var(--color-on-dark-secondary);font-size:17px;line-height:1.55;max-width:520px }
.invite-beta { background:var(--color-invite-beta);color:var(--color-text);font-weight:800;font-size:16px;padding:16px 26px;border-radius:16px;white-space:nowrap }
.public-footer { border-top:1px solid var(--color-footer-border);padding:28px 0 40px 0 }
.footer-inner { display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between }
.copyright { display:flex;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:14px;font-weight:700 }
.footer-links { display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;font-weight:700 }
.footer-link { color:var(--color-text-secondary) }

/* Semantics, keyboard access and the only contrast corrections to the mock. */
.public-page { min-height: 100vh; display: flex; flex-direction: column; }
.public-page > main { flex: 1; }
.public-footer { margin-top: auto; }
.wordmark { text-decoration: none; }
.brand-mark { display: block; width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.copyright .brand-mark { width: 26px; height: 26px; }
.invite-nav { line-height: normal; }
.serif-reset { font-family: inherit; line-height: normal; margin-bottom: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px 18px; border-radius: 12px; background: var(--color-surface); font-weight: 800; }
.skip-link:focus { top: 12px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
.public-page svg { flex-shrink: 0; }
.phone-shell { flex-shrink: 0; }
.phone-eyebrow, .snippet-eyebrow { color: var(--color-eyebrow-accessible); }
.calendar-weekdays, .calendar-year { color: var(--color-muted-accessible); }
.comparison-label { color: var(--color-text-muted); }
.beta-label { color: var(--color-beta-label-accessible); }
.invite-primary:hover, .mock-accept:hover { color: var(--color-surface); background: var(--color-primary-hover); }
.invite-nav:hover { color: var(--color-surface); background: var(--color-primary-hover); }
.invite-beta:hover { color: var(--color-text); background: var(--color-primary-soft); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }

/* Existing legal/support content keeps its original markup and readable measure. */
.site-main { box-sizing: border-box; width: 100%; max-width: 768px; margin: 0 auto; padding: 44px 24px 80px; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.site-main [hidden] { display: none !important; }
.site-main h1, .site-main h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.site-main h1 { font-size: 34px; line-height: 1.3; letter-spacing: -0.7px; margin: 0 0 20px; }
.site-main h2 { font-size: 24px; line-height: 1.35; letter-spacing: -0.3px; margin: 40px 0 16px; }
.site-main h3 { font-size: 18px; font-weight: 800; line-height: 1.4; margin: 24px 0 10px; }
.site-main p { margin: 0 0 18px; }
.site-main a { text-decoration: underline; text-underline-offset: 4px; }
.site-main .lede { color: var(--color-text-body); font-size: 18px; line-height: 1.7; }
.site-main .eyebrow { color: var(--color-primary); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 18px; }
.site-main .updated { color: var(--color-text-secondary); font-size: 14px; margin: -8px 0 28px; }
.site-main .card { background: var(--color-surface); border-radius: 24px; padding: 28px; }
.site-main .card + .card { margin-top: 16px; }
.site-main .card h2, .site-main .card h3 { margin-top: 0; }
.site-main .card > :last-child { margin-bottom: 0; }
.site-main .button { align-items: center; background: var(--color-primary); border: 0; border-radius: 16px; color: var(--color-surface); cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; justify-content: center; min-height: 54px; padding: 14px 24px; box-sizing: border-box; text-align: center; text-decoration: none; }
.site-main .button:hover { background: var(--color-primary-hover); }
.site-main .hint { color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; }
.site-main .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.site-main .legal { margin-top: 32px; }
.site-main .legal ul { padding-left: 22px; }
.site-main .legal li { padding-left: 4px; margin-bottom: 12px; }
.site-main .legal h2 { padding-top: 8px; }
.site-main .legal h3 { margin-top: 28px; }
.site-main .legal-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.site-main .beta-note { color: var(--color-text-secondary); background: var(--color-surface); border-radius: 20px; padding: 22px 24px; }
.site-main .beta-note strong { color: var(--color-text); }
.site-main .beta-note p { margin: 8px 0 0; }
.site-main .faq { margin: 32px 0; }
.site-main details { border-bottom: 1px solid var(--color-border); }
.site-main summary { cursor: pointer; padding: 20px 0; font-size: 16px; font-weight: 800; }
.site-main details p { color: var(--color-text-secondary); padding-right: 24px; }
.site-main .contact { margin-top: 40px; }
.site-main address { font-style: normal; }
.site-main .legacy-note { margin-top: 32px; }
.site-main .legacy-no-margin { margin: 0; }
.site-main .button.secondary { background: var(--color-surface); color: var(--color-primary); }

/* Text precedes art at the requested breakpoint, including the reversed row. */
@media (max-width: 899px) {
  .hero, .feat, .feat-reverse { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .hero-text, .hero-art, .feat-text, .feat-art { flex: 0 1 auto; }
  .hero-art, .feat-art { width: 100%; }
  .hero-text, .feat-text { width: 100%; }
}
@media (max-width: 480px) {
  .navlinks { gap: 8px 16px; width: 100%; justify-content: space-between; }
  .nav-link { font-size: 14px; }
  .invite-nav { font-size: 14px; padding: 11px 14px; }
  .hero-actions { gap: 10px; }
  .hero-actions a { padding: 16px 20px; }
  .phone-shell { transform: scale(.92); transform-origin: top center; margin-bottom: -48.8px; }
  .feat-art > div { box-sizing: border-box; }
  .site-main { padding: 32px 24px 56px; }
  .site-main .card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media (max-width: 359px) {
  .hero-title { font-size: 36px; }
}