/* v2 polish (Oct 25). Brand colours/logo unchanged. Loaded last. */
:root { --text-secondary:#6e6e73; /* was #86868b (3.6:1); now ~4.9:1 on white, AA */ --radius:18px; --section-y:5.5rem; }
body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:17px; line-height:1.6; }
h2 { letter-spacing:-.02em; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid var(--primary-light); outline-offset:2px; border-radius:6px; }

/* Nav */
header { background:rgba(255,255,255,.88); }
.brand span, .brand { font-weight:700; letter-spacing:-.01em; }
.nav-links a { color:#515154; font-weight:500; }
.nav-links a:hover { color:var(--primary); }

/* Hero */
.hero { min-height:auto; padding:8.5rem 2rem 5rem; gap:5rem; }
.hero-content { max-width:540px; }
.hero h1 { font-size:clamp(2.3rem, 4.6vw, 3.4rem); letter-spacing:-.03em; line-height:1.06; }
.hero-status { font-weight:600; letter-spacing:.02em; }
.hero-subtitle { font-size:1.2rem; line-height:1.55; color:#515154; }
.hero-note { font-size:.92rem; margin-bottom:1.75rem; }
.phone-mockup { box-shadow:0 30px 80px rgba(62,37,109,.28), 0 0 0 1px rgba(0,0,0,.04); }
.shelf-art { display:flex; flex-direction:column; justify-content:center; gap:0; padding:0 10px;
  background:linear-gradient(180deg,#2a1f1a 0%,#3a2a20 100%); }
.shelf-row { display:flex; align-items:flex-end; gap:3px; height:150px; padding:0 4px; }
.shelf-row i { position:relative; flex:1; height:var(--h); background:var(--c); border-radius:2px 2px 0 0;
  box-shadow:inset -3px 0 0 rgba(0,0,0,.18), inset 2px 0 0 rgba(255,255,255,.08); }
.shelf-board { height:10px; background:#5b3d28; border-radius:2px; margin-bottom:26px; box-shadow:0 4px 8px rgba(0,0,0,.35); }
.sphere { position:absolute; left:50%; top:42%; width:14px; height:14px; margin-left:-7px; border-radius:50%; }
.sphere::after { content:""; position:absolute; inset:-7px; border-radius:50%; background:inherit; opacity:.35; animation:junoPulse 1.8s ease-in-out infinite; }
.sphere-green { background:radial-gradient(circle at 35% 35%,#b9f5c8,#34C759 55%,#1f8a3b); }
.sphere-purple { background:radial-gradient(circle at 35% 35%,#ecd3f8,#AF52DE 55%,#7a2fa3); }
@keyframes junoPulse { 0%,100% { transform:scale(.7); opacity:.15 } 50% { transform:scale(1.1); opacity:.4 } }
@media (prefers-reduced-motion:reduce){ .sphere::after{ animation:none } }

/* Section rhythm */
.demo, .features, .how-it-works, .screens-slot, .beta-section, .cta-section, .support-section { padding-top:var(--section-y); padding-bottom:var(--section-y); }
.demo { background:var(--surface); }
.features { background:#fff; }
.demo h2, .features h2, .how-it-works h2, .screens-slot h2, .beta-section h2, .cta-section h2, .support-section h2, .legal-section h2 { letter-spacing:-.025em; }
.section-lead, .section-foot { text-align:center; color:var(--text-secondary); max-width:640px; margin:-.5rem auto 2.5rem; }
.section-foot { margin:2.5rem auto 0; font-size:.95rem; }

/* Cards */
.feature-card { background:var(--surface); border:1px solid rgba(0,0,0,.05); border-radius:var(--radius); padding:2rem 1.75rem;
  transition:transform .2s, box-shadow .2s; }
.feature-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(62,37,109,.10); }
.feature-card h3 { font-size:1.15rem; letter-spacing:-.01em; margin-bottom:.5rem; }
.feature-card p, .step p { color:var(--text-secondary); line-height:1.6; }
.feature-icon { display:flex; align-items:center; gap:.35rem; }
.feature-icon .dot { width:18px; height:18px; margin:0; }
.how-it-works { background:var(--surface); }
.step-number { box-shadow:0 6px 16px rgba(62,37,109,.25); }
.faq-item { border-radius:14px; }

/* Screenshot placeholder slot */
.screens-slot { text-align:center; padding-left:2rem; padding-right:2rem; }
.screens-slot h2 { font-size:2.5rem; margin-bottom:2rem; }
.screens-row { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; max-width:1000px; margin:0 auto; }
.screen-ph { margin:0; width:220px; aspect-ratio:9/19.5; border:2px dashed #c7bfd8; border-radius:32px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#faf8fd,#faf8fd 12px,#f3effa 12px,#f3effa 24px); color:#5d4a86; font-weight:600; }
.screen-ph small { font-weight:400; color:var(--text-secondary); }
.draft-only-note { margin-top:1.25rem; font-size:.85rem; color:#8a6d00; }

/* Buttons: one primary style, one inverse on the purple band */
.cta-button { background:var(--primary); color:#fff; border-radius:12px; min-height:48px; padding:.85rem 1.6rem; font-weight:600; }
.cta-button:hover { background:var(--primary-dark); box-shadow:0 10px 26px rgba(62,37,109,.28); }
.cta-section .cta-button { background:#fff; color:var(--primary); }
.cta-section .cta-button:hover { background:#f3effa; }
.cta-section p { max-width:720px; margin-left:auto; margin-right:auto; }
.legal-tab { border-radius:12px; min-height:48px; }

/* Footer */
footer .footer-section p, footer .footer-section a { color:rgba(255,255,255,.78); }
footer .footer-section a:hover { color:#fff; }
.non-affiliation { opacity:1; color:rgba(255,255,255,.72); }
.support-page .non-affiliation { color:var(--text-secondary); }

/* Support page */
.support-page h1 { letter-spacing:-.03em; }
.support-toc a { font-weight:500; }

/* Mobile */
@media (max-width:768px) {
  body { font-size:16px; }
  :root { --section-y:3.75rem; }
  nav { flex-wrap:wrap; row-gap:.4rem; padding:.7rem 1rem; }
  .nav-links { display:flex; gap:1.1rem; width:100%; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding-bottom:.2rem; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a { font-size:.88rem; }
  .hero { padding:8rem 1.25rem 3rem; gap:2.5rem; }
  .hero-image { order:1; }
  .phone-mockup { width:200px; height:410px; }
  .shelf-row { height:110px; }
  .hero-subtitle { font-size:1.08rem; }
  .hero-ctas { flex-direction:column; align-items:stretch; max-width:320px; margin:0 auto; }
  .hero-ctas .cta-button, .hero-ctas .appstore-badge { justify-content:center; }
  .feature-card { padding:1.5rem 1.25rem; }
  .screens-row { gap:1rem; }
  .screen-ph { width:150px; border-radius:24px; font-size:.85rem; }
  .screens-slot h2 { font-size:2rem; }
  .legal-page { padding-top:8.5rem; }
}
/* full-bleed backgrounds for max-width sections */
.demo, .how-it-works { box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); }
.screens-row .screen { margin:0; width:260px; text-align:center; }
.screens-row .screen figcaption { margin-top:.9rem; display:flex; flex-direction:column; gap:.2rem; }
.screens-row .screen figcaption strong { font-size:1rem; color:var(--text-dark,#1f1633); }
.screens-row .screen figcaption span { font-size:.875rem; color:#6b6480; }
.screens-row { max-width:960px; gap:2.5rem 2rem; }
.screens-row .screen img { width:100%; height:auto; border-radius:28px; box-shadow:0 18px 40px rgba(62,37,109,.18); }
@media (max-width:768px){ .screens-row { gap:1.5rem 1rem; } .screens-row .screen { width:calc(50% - .5rem); max-width:180px; } .screens-row .screen img { border-radius:18px; } .screens-row .screen figcaption strong{font-size:.875rem} .screens-row .screen figcaption span{font-size:.75rem} }
/* v6: 4 screenshots in one row on desktop/tablet; 5 feature cards with a centered last row */
@media (min-width:769px){ .screens-row { max-width:1000px; flex-wrap:nowrap; } .screens-row .screen { width:calc((100% - 6rem)/4); max-width:230px; } }
@media (min-width:1000px){ .feature-grid { display:flex; flex-wrap:wrap; justify-content:center; } .feature-grid .feature-card { flex:0 1 calc((100% - 4rem)/3); } }

[hidden]{display:none!important}