/* ============================================================
   Homepage — the household pitch: one family, every login handled,
   nobody locked out. Real ZZPass screens throughout.
   ============================================================ */

.hp .wrap { max-width: 1160px; }
.hp-h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.hp-sub { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hp-kicker { display: block; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hp-link { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--accent); text-decoration: none; }
.hp-link:hover { text-decoration: underline; }
.hp-link + .hp-link { margin-left: 22px; }
.hp-phone { display: block; margin: 0 auto; max-width: 290px; filter: drop-shadow(0 30px 50px rgba(20,21,24,.16)); }
.hp-phone img { display: block; width: 100%; height: auto; }
.hp-sec { padding: 110px 0; }
.hp-alt { background: var(--bg-soft); }

/* Hero */
.hp-hero { padding: 56px 0 40px; overflow: hidden; }
.hp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hp-hero h1 { margin: 14px 0 0; font-size: clamp(44px, 6vw, 80px); line-height: 1; letter-spacing: -.048em; text-wrap: balance; }
.hp-hero h1 span { color: var(--accent); }
.hp-hero .lede { margin: 24px 0 30px; max-width: 36ch; font-size: 19.5px; line-height: 1.5; }
.hp-hero .hero-ctas { margin: 0; }
.hp-free { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-mute); }
.hp-free a { color: var(--accent); }
.hp-stage { position: relative; display: grid; place-items: center; padding: 28px 0; }
.hp-stage::before { content: ""; position: absolute; inset: 4% 6%; border-radius: 44px; background: linear-gradient(160deg, var(--accent-soft), var(--bg-warm)); }
.hp-stage .hp-phone { position: relative; max-width: 300px; }
.hp-chip { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; padding: 11px 15px 11px 11px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 34px rgba(0,0,0,.11); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.hp-chip small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-mute); }
.hp-chip i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; font-style: normal; }
.hp-chip svg { width: 18px; height: 18px; }
.hp-chip.c1 { top: 36%; left: 0; } .hp-chip.c1 i { background: var(--accent-soft); color: var(--accent); }
.hp-chip.c2 { top: 55%; right: 0; } .hp-chip.c2 i { background: #FDECEC; color: #C2412D; }
.hp-chip.c3 { top: 9%; right: 0; bottom: auto; left: auto; } .hp-chip.c3 i { background: #E5F4EA; color: #237A47; }

/* Homepage hero: the Mac behind, the iPhone in front, and a sign-in that plays
   the promise (suggestion, tap, filled, signed in) on an 8-second loop. */
.hp-hero-grid:has(> .hp-stage.duo) { grid-template-columns: 1fr 1fr; gap: 40px; }
.hp-hero-grid:has(> .hp-stage.duo) h1 { font-size: clamp(44px, 5.4vw, 74px); }
.hp-stage.duo { display: block; padding: 34px 0 70px; }
.hp-stage.duo::before { inset: 0 0 4% 8%; }
.hp-mac { position: relative; display: block; width: 88%; filter: drop-shadow(0 24px 40px rgba(20,21,24,.10)); }
.hp-mac img, .hp-stage.duo .hp-phone img { display: block; width: 100%; height: auto; }
.hp-stage.duo .hp-phone { position: absolute; right: 0; bottom: 14px; width: 36%; max-width: none; margin: 0; }
.hp-stage.duo .hp-chip.c3 { top: 4%; right: 2%; }
.hp-signin { position: absolute; z-index: 3; left: -2%; bottom: 40px; width: 236px; padding: 14px 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.14); font-size: 13px; color: var(--ink); }
.si-site { display: flex; gap: 7px; align-items: center; margin-bottom: 12px; font-weight: 600; font-size: 13.5px; }
.si-site svg { width: 15px; height: 15px; color: var(--ink-mute); }
.si-field { display: grid; gap: 1px; margin-top: 7px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 10px; min-height: 40px; }
.si-field span { font-size: 11px; color: var(--ink-mute); }
.si-field b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-dots { letter-spacing: .08em; }
.si-code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .06em; }
.si-btn { display: grid; margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; text-align: center; }
.si-btn span { grid-area: 1 / 1; }
.si-suggest { position: absolute; left: 10px; right: 10px; bottom: -26px; display: flex; gap: 9px; align-items: center; padding: 8px 8px 8px 9px; border-radius: 14px; background: #1C1C1E; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 12px; font-weight: 600; }
.si-suggest i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); }
.si-suggest i svg { width: 15px; height: 15px; }
.si-suggest span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-suggest small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.6); }
.si-suggest em { flex: none; padding: 5px 11px; border-radius: 8px; background: rgba(255,255,255,.16); font-style: normal; }

.si-suggest { animation: si-suggest 8s ease infinite; }
.si-suggest em { animation: si-tap 8s ease infinite; }
.si-fill { animation: si-fill 8s ease infinite; }
.si-code { animation-name: si-code; }
.si-btn { animation: si-btn 8s ease infinite; }
.si-go { animation: si-go 8s ease infinite; }
.si-ok { animation: si-ok 8s ease infinite; }
@keyframes si-suggest { 0%, 8% { opacity: 0; transform: translateY(12px); } 13%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(12px); } }
@keyframes si-tap { 0%, 22% { transform: none; background: rgba(255,255,255,.16); } 25% { transform: scale(.9); background: var(--accent); } 29%, 100% { transform: none; background: rgba(255,255,255,.16); } }
@keyframes si-fill { 0%, 30% { opacity: 0; } 35%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes si-code { 0%, 42% { opacity: 0; } 47%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes si-btn { 0%, 56% { background: var(--accent); } 60%, 92% { background: #237A47; } 97%, 100% { background: var(--accent); } }
@keyframes si-go { 0%, 56% { opacity: 1; } 60%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes si-ok { 0%, 56% { opacity: 0; } 60%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* Proof strip */
.hp-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 34px 0 0; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); list-style: none; font-size: 14.5px; color: var(--ink-2); }
.hp-proof b { color: var(--ink); font-weight: 600; }

/* Outcome tiles */
.hp-head { max-width: 680px; margin-bottom: 48px; }
.hp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hp-tile { display: block; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--rule); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.hp-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.hp-tile i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.hp-tile svg { width: 22px; height: 22px; }
.hp-tile h3 { margin: 18px 0 8px; font-size: 20px; letter-spacing: -.02em; }
.hp-tile p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.hp-tile .hp-more { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--accent); }

/* Text beside a phone */
.hp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hp-split.rev > :first-child { order: 2; }
.hp-ticks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.hp-ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.hp-ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }

/* The day you can't log in */
.hp-dark { background: var(--night); color: #fff; }
.hp-dark .hp-h2 { color: #fff; }
.hp-dark .hp-sub { color: var(--ink-mute-dark); }
.hp-dark .hp-kicker { color: #9DB4F5; }
.hp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
.hp-pane { display: grid; grid-template-columns: 1fr 190px; gap: 26px; align-items: center; padding: 32px; border-radius: 28px; background: var(--night-2); border: 1px solid rgba(255,255,255,.08); }
.hp-pane h3 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.025em; color: #fff; }
.hp-pane p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-mute-dark); }
.hp-pane .hp-phone { max-width: 190px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
.hp-pane .hp-link { color: #9DB4F5; }
.hp-tag { display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(157,180,245,.16); color: #C9D6FA; font-size: 12px; font-weight: 600; }

/* Moving in */
.hp-move { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 44px; border-radius: 28px; background: var(--accent); color: #fff; }
.hp-move .hp-h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); }
.hp-move p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: #DCE4FB; }
.hp-from { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hp-from li { padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 14.5px; font-weight: 500; }
.hp-move .hp-link { color: #fff; }

/* One price for the family */
.hp-plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; margin-top: 48px; }
.hp-plan { padding: 34px; border-radius: 28px; background: #fff; border: 1px solid var(--rule); }
.hp-plan.pro { background: var(--night); border-color: var(--night); color: #fff; }
.hp-plan h3 { margin: 0; font-size: 20px; }
.hp-plan.pro h3 { color: #fff; }
.hp-price { margin: 12px 0 4px; font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.hp-price small { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--ink-mute); }
.hp-plan.pro .hp-price small, .hp-plan.pro .hp-alt-price { color: var(--ink-mute-dark); }
.hp-alt-price { font-size: 14px; color: var(--ink-mute); }
.hp-heads { display: flex; margin: 22px 0 0 12px; }
.hp-heads span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -12px; border-radius: 50%; border: 3px solid var(--night); font-size: 15px; font-weight: 700; }
.hp-plan ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15.5px; }
.hp-plan li::before { content: "✓"; margin-right: 10px; font-weight: 700; color: var(--accent); }
.hp-plan.pro li::before { color: #9DB4F5; }
.hp-plan .hp-btn { display: inline-block; margin-top: 28px; padding: 12px 22px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.hp-plan.pro .hp-btn { background: #fff; color: var(--ink); }

/* FAQ */
.hp-faq .faq-list { max-width: 820px; margin: 0; }
.hp-faq .faq-item { padding: 20px 0; }
.hp-faq .faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.hp-faq .faq-item summary::-webkit-details-marker { display: none; }
.hp-faq .faq-item summary::after { content: '+'; font-family: 'JetBrains Mono', monospace; }
.hp-faq .faq-item[open] summary::after { content: '−'; color: var(--accent-deep); }
.hp-faq .faq-body { margin-top: 10px; max-width: 70ch; line-height: 1.6; }
.hp-faq .faq-body a { color: var(--accent); }

/* End */
.hp-end { padding: 120px 0; text-align: center; }
.hp-end .hp-h2 { margin: 0 auto 30px; max-width: 18ch; }
.hp-end .hero-ctas { justify-content: center; }

.hp-hero-grid > *, .hp-split > *, .hp-pane > *, .hp-move > *, .hp-plans > * { min-width: 0; }

@media (max-width: 980px) {
  .hp-hero-grid, .hp-hero-grid:has(> .hp-stage.duo), .hp-split, .hp-move, .hp-plans, .hp-pair { grid-template-columns: 1fr; }
  .hp-split { gap: 48px; }
  .hp-split.rev > :first-child { order: 0; }
  .hp-tiles { grid-template-columns: 1fr 1fr; }
  .hp-stage.duo { width: 100%; max-width: 600px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .hp-sec { padding: 80px 0; }
  .hp-hero { padding-top: 32px; }
  .hp-hero .dl-badge.mac { display: none; }
  .hp-tiles { grid-template-columns: 1fr; }
  .hp-pane { grid-template-columns: 1fr; padding: 26px; }
  .hp-pane .hp-phone { max-width: 220px; }
  .hp-move, .hp-plan { padding: 26px; }
  .hp-chip { padding: 8px 11px 8px 8px; font-size: 12.5px; }
  .hp-chip i { width: 26px; height: 26px; }
  .hp-chip small { font-size: 11.5px; }
  .hp-proof { justify-content: flex-start; gap: 8px 22px; }
  .hp-stage.duo { padding: 20px 0 56px; }
  .hp-stage.duo::before { inset: 0; }
  .hp-mac { display: none; }
  .hp-stage.duo .hp-phone { position: relative; right: auto; bottom: auto; width: 62%; margin: 0 0 0 auto; }
  .hp-signin { left: 0; bottom: 70px; width: 214px; padding: 13px 13px 15px; font-size: 12px; }
  .hp-stage.duo .hp-chip.c3 { top: 8px; right: auto; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .si-suggest, .si-suggest em, .si-fill, .si-btn, .si-go, .si-ok { animation: none; }
  .si-suggest, .si-go { opacity: 0; }
  .si-btn { background: #237A47; }
  .hp-tile { transition: none; }
  .hp-tile:hover { transform: none; }
}