/* 首页：一屏首屏（四周散落示例通知与品牌形状），然后一屏一个功能、
   隐私承诺、常见问题和结尾。动效由 site.js 加上 .motion 后才启用；
   减少动态效果或没有脚本时，所有内容静止可见。 */

:root {
  --title: clamp(36px, min(4.2vw, 6.4vh), 58px);
}

.home .site-header { position: absolute; inset: 0 0 auto; }
.home h1, .home h2 { margin: 0; font-weight: 800; letter-spacing: -.045em; text-align: center; }
.home h1 span, .home h2 span { display: block; white-space: nowrap; }

/* Hero -------------------------------------------------------------------- */

.hero { position: relative; display: flex; min-height: max(700px, 100svh); flex-direction: column; align-items: center; justify-content: center; padding: 96px 20px 72px; overflow-x: clip; isolation: isolate; }
.hero-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; max-width: 640px; text-align: center; }
.hero h1 { font-size: clamp(44px, min(6vw, 9vh), 84px); line-height: 1.08; }
.hero h1 span:last-child { color: var(--brand-bright); }
.hero-lead { max-width: 30em; text-wrap: balance; margin: 24px 0 32px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; }
.hero-aside { margin-top: 22px; color: var(--muted); font-size: 14px; font-weight: 600; transition: color .2s; }
.hero-aside:hover { color: var(--brand); }
.wall-note { position: absolute; right: 0; bottom: 20px; left: 0; margin: 0; color: #b3aca5; font-size: 12px; text-align: center; }

.wall { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.seat { position: absolute; top: var(--y); left: var(--x); width: var(--w); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); translate: var(--sx, 0px) var(--sy, 0px); opacity: var(--so, 1); pointer-events: auto; }
.seat.shape { z-index: 0; }
.seat svg { display: block; width: 100%; height: auto; overflow: visible; }
.pop { transition: transform .4s var(--spring); }
.seat:hover .pop { transform: rotate(var(--hover-r, 6deg)) scale(1.06); }
.motion .pop { animation: pop-in 720ms var(--spring) both; animation-delay: var(--d, 0ms); }
.motion .seat { will-change: translate, opacity; }
@keyframes pop-in { from { opacity: 0; transform: scale(.35) rotate(-14deg); } to { opacity: 1; transform: none; } }

.seat-n1 { --x: 15%; --y: 26%; --r: -4deg; --w: 300px; --d: 260ms; }
.seat-n2 { --x: 85%; --y: 22%; --r: 3deg; --w: 300px; --d: 360ms; --hover-r: -5deg; }
.seat-n3 { --x: 85%; --y: 76%; --r: -3deg; --w: 300px; --d: 460ms; }
.seat-n4 { --x: 15%; --y: 76%; --r: 3deg; --w: 300px; --d: 560ms; --hover-r: -5deg; }
.seat-s1 { --x: 32%; --y: 12%; --r: -8deg; --w: 84px; --d: 0ms; --hover-r: 90deg; }
.seat-s2 { --x: 68%; --y: 90%; --r: 0deg; --w: 78px; --d: 80ms; --hover-r: 90deg; }
.seat-s3 { --x: 6%; --y: 51%; --r: -14deg; --w: 118px; --d: 140ms; }
.seat-s4 { --x: 95%; --y: 49%; --r: 10deg; --w: 70px; --d: 200ms; --hover-r: 40deg; }
.seat-s5 { --x: 31%; --y: 90%; --r: 9deg; --w: 60px; --d: 640ms; --hover-r: -20deg; }
.seat-s6 { --x: 66%; --y: 11%; --r: 12deg; --w: 46px; --d: 700ms; --hover-r: 72deg; }

/* A native iOS notification in light mode. */
.note { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px 13px 12px; border-radius: 22px; background: #f4f2eff0; box-shadow: 0 0 0 1px #0000000a, 0 14px 34px -8px #2a14102e, 0 2px 6px #2a141012; text-align: left; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.note-icon { width: 38px; height: 38px; flex: none; margin-top: 1px; border-radius: 9px; }
.note-body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.35; }
.note-head { display: flex; justify-content: space-between; gap: 8px; color: #7d7670; font-size: 12px; }
.note-head b { color: var(--ink); font-weight: 650; font-size: 13px; }
.note-body strong { font-weight: 700; }
.note-body span { overflow: hidden; color: #39342f; text-overflow: ellipsis; white-space: nowrap; }

/* Features ---------------------------------------------------------------- */

.feature { position: relative; display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; padding: clamp(56px, 9vh, 96px) 20px; overflow: clip; isolation: isolate; }
.feature h2, .promise-section h2, .closing h2 { position: relative; z-index: 2; font-size: var(--title); line-height: 1.15; }
.feature-lead { position: relative; z-index: 2; max-width: 30em; text-wrap: balance; margin: 18px auto 0; color: var(--muted); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; text-align: center; }
.feature-lead a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.feature-tag { margin: 22px 0 0; color: #b3aca5; font-size: 12px; }

.device-stage { --phone-w: clamp(232px, min(21vw, 31vh), 290px); position: relative; display: grid; place-items: center; margin-top: clamp(36px, 6vh, 60px); }
.stage-shape { position: absolute; top: 50%; left: 50%; z-index: -1; width: calc(var(--phone-w) * 2); transform: translate(-50%, -46%); }
.phone { position: relative; width: var(--phone-w); aspect-ratio: 1320 / 2868; padding: calc(var(--phone-w) * .035); border-radius: calc(var(--phone-w) * .17); background: #151311; box-shadow: 0 0 0 1px #00000014, 0 40px 80px -24px #2a141059, 0 16px 32px -12px #2a141038; }
.phone img { display: block; width: 100%; height: 100%; border-radius: calc(var(--phone-w) * .14); object-fit: cover; }

/* The lock screen is drawn, not a screenshot: the notification is the product. */
.lock::before { content: ""; position: absolute; inset: calc(var(--phone-w) * .035); border-radius: calc(var(--phone-w) * .14); background: radial-gradient(circle at 30% 18%, #f39a6b, transparent 55%), radial-gradient(circle at 80% 78%, #f4b43a, transparent 50%), linear-gradient(165deg, #e6553c, #b4231c 50%, #6d120e); }
.lock-time { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 16%; color: #fff; text-shadow: 0 1px 12px #0000001f; }
.lock-time span { font-size: calc(var(--phone-w) * .052); font-weight: 600; }
.lock-time b { font-size: calc(var(--phone-w) * .25); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; }
.lock-stack { position: absolute; right: 7%; bottom: 13%; left: 7%; display: flex; flex-direction: column; gap: 6px; }
.note-lock { padding: 9px 10px; border-radius: 18px; background: #fbf8f5e6; }
.note-lock .note-icon { width: 30px; height: 30px; border-radius: 7px; }
.note-lock .note-body { font-size: 11.5px; }
.note-lock .note-head { font-size: 10px; }
.note-lock .note-head b { font-size: 11px; }
.note-dim { opacity: .82; transform: scale(.96); }
.note-actions { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fbf8f5e6; font-size: 12px; font-weight: 600; }
.note-actions span { padding: 7px 12px; }
.note-actions span + span { border-top: 1px solid #00000014; }
.note-actions span:first-child { color: var(--brand); }

/* Promises ---------------------------------------------------------------- */

.promise-section { margin: clamp(24px, 6vh, 64px) clamp(12px, 2vw, 32px); padding: clamp(64px, 11vh, 120px) 20px; border-radius: clamp(28px, 4vw, 48px); background: var(--brand-deep); color: #fff; }
.promise-section .feature-lead { color: #f6cfc9; }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 880px; margin: clamp(36px, 6vh, 56px) auto 0; padding: 0; list-style: none; }
.promises li { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 30px; border-radius: 26px; background: #ffffff14; transition: transform .35s var(--spring), background .2s; }
.promises li:hover { background: #ffffff1f; transform: translateY(-4px) rotate(-.6deg); }
.promises svg { width: 40px; height: 40px; margin-bottom: 8px; }
.promises strong { font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.promises span { color: #f6d9d4; font-size: 15px; line-height: 1.7; }

/* FAQ --------------------------------------------------------------------- */

.faq { max-width: 800px; margin: 0 auto; padding: clamp(80px, 14vh, 140px) 20px clamp(40px, 8vh, 80px); }
.faq h2 { font-size: var(--title); text-align: left; }
.faq-list { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; display: block; padding: 24px 48px 24px 0; cursor: pointer; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 18px; height: 18px; background: linear-gradient(currentColor, currentColor) center / 18px 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 18px no-repeat; transform: translateY(-50%); transition: transform .3s var(--spring); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); color: var(--brand-bright); }
.faq summary:hover { color: var(--brand); }
.faq details p { max-width: 40em; margin: -6px 0 26px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.faq details a { color: var(--brand); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Closing ----------------------------------------------------------------- */

.closing { position: relative; display: flex; min-height: 72svh; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 80px 20px 120px; overflow: clip; isolation: isolate; }
.closing h2 { font-size: clamp(40px, min(5.4vw, 8vh), 76px); }
.closing h2 span:last-child { color: var(--brand-bright); }
.closing-shapes svg { position: absolute; z-index: -1; }
.cs-1 { top: 18%; left: 16%; width: 76px; transform: rotate(-10deg); }
.cs-2 { right: 15%; bottom: 22%; width: 88px; transform: rotate(8deg); }
.cs-3 { top: 26%; right: 22%; width: 48px; transform: rotate(14deg); }

/* Get the app, in the corner: pops in once the hero's button has left. */

.sticky-cta { position: fixed; right: 24px; bottom: 24px; z-index: 30; width: 150px; height: 50px; margin: 0; opacity: 0; pointer-events: none; transform: scale(.6); transform-origin: 100% 100%; transition: opacity .2s ease, transform .35s var(--spring); }
.show-sticky .sticky-cta { opacity: 1; pointer-events: auto; transform: none; }
.sticky-cta .cta { right: 0; width: 150px; height: 50px; transform: none; }
.sticky-cta .cta-text { font-size: 16px; }

/* Reveal on scroll -------------------------------------------------------- */

.motion .reveal > :is(h2, .feature-lead, .device-stage, .promises, .faq-list, .cta-shell) { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.motion .reveal > .feature-lead { transition-delay: .08s; }
.motion .reveal > :is(.device-stage, .promises, .faq-list, .cta-shell) { transition-delay: .16s; }
.motion .reveal.is-in > * { opacity: 1; transform: none; }
.motion .feature-notify :is(.drop-1, .drop-2, .drop-3) { opacity: 0; transform: translateY(-24px) scale(.94); transition: opacity .4s ease, transform .6s var(--spring); }
.motion .feature-notify .drop-1 { transition-delay: .7s; }
.motion .feature-notify .drop-2 { transition-delay: 1.15s; }
.motion .feature-notify .drop-3 { transition-delay: .45s; }
.motion .feature-notify.is-in .drop-1, .motion .feature-notify.is-in .drop-2 { opacity: 1; transform: none; }
.motion .feature-notify.is-in .drop-3 { opacity: .82; transform: scale(.96); }

/* Phones and small tablets ----------------------------------------------- */

@media (max-width: 860px) {
  .desktop-only { display: none; }
  .hero { justify-content: flex-start; min-height: max(720px, 100svh); padding-top: max(280px, 36svh); padding-bottom: 170px; }
  .seat-n1 { --x: 47%; --y: 15%; --w: 276px; --r: -3deg; }
  .seat-n2 { --x: 55%; --y: 25%; --w: 276px; --r: 2.5deg; }
  .seat-n4 { --x: 50%; --y: 89%; --w: 276px; --r: 2deg; }
  .hero .seat-n1 { --y: max(122px, 15svh); }
  .hero .seat-n2 { --y: max(198px, 25svh); }
  .seat-s1 { --x: 10%; --y: 34%; --w: 50px; }
  .seat-s2 { --x: 90%; --y: 80%; --w: 50px; }
  .seat-s3 { --x: 9%; --y: 81%; --w: 76px; }
  .seat-s4 { --x: 92%; --y: 37%; --w: 40px; }
  .seat-s6 { --x: 88%; --y: 9%; --w: 32px; }
  .wall-note { bottom: 12px; }
}

@media (max-width: 640px) {
  .home .site-header { padding-inline: 20px; }
  .hero h1 { font-size: clamp(38px, 11.4vw, 48px); }
  .hero-lead { margin: 18px 0 28px; }
  .feature { min-height: 0; padding-block: 72px; }
  .promises { grid-template-columns: 1fr; }
  .promises li { padding: 24px 22px 26px; }
  .closing { min-height: 0; padding-block: 96px 120px; }
  .cs-1 { top: 8%; left: 6%; width: 52px; }
  .cs-2 { right: 6%; bottom: 10%; width: 58px; }
  .cs-3 { top: 12%; right: 12%; width: 34px; }
  .sticky-cta { right: 16px; bottom: 16px; }
}

@media (max-width: 360px) {
  .home h2 { font-size: 32px; }
  .seat-n1, .seat-n2, .seat-n4 { --w: 256px; }
}