@layer components{.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;width:min(1240px,100% - 96px);padding-block:72px 88px;display:grid;overflow-x:clip}.hero-eyebrow{color:var(--text-soft);font-size:var(--text-sm);margin-bottom:22px}.hero h1{letter-spacing:-.055em;text-wrap:initial;font-size:clamp(2.75rem,5vw,4.5rem);line-height:1.04}.hero-period{color:var(--amber)}.hero-lede{font-size:var(--text-lg);max-width:480px;margin-top:26px;line-height:1.75}.home-actions{flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px;display:flex}.home-actions .text-link{font-size:var(--text-xs);margin:0}.hero-facts{font-size:var(--text-xs);color:var(--text-soft);flex-wrap:wrap;gap:8px 20px;margin:26px 0 28px;padding:0;list-style:none;display:flex}.hero-facts li{align-items:center;gap:7px;display:inline-flex}.hero-facts svg{color:var(--green)}.device{border:1px solid var(--border-strong);background:#050608;border-radius:46px;margin:0;padding:9px;box-shadow:0 30px 80px -30px #0000008c,inset 0 0 0 1px #ffffff08}.device img{border-radius:38px;width:100%;height:auto;display:block}.device-small{border-radius:32px;padding:6px}.device-small img{border-radius:27px}.hero-visual{justify-self:center;width:min(340px,100%);position:relative}.hero-visual:before{content:"";background:radial-gradient(closest-side, var(--accent-glow), transparent);z-index:-1;position:absolute;inset:12% -30% 8%}.hero-notification{background:color-mix(in srgb, var(--surface-raised) 92%, transparent);border:1px solid var(--border-strong);backdrop-filter:blur(12px);border-radius:16px;align-items:center;gap:12px;width:280px;padding:12px 14px;display:flex;position:absolute;top:13%;left:-34%;box-shadow:0 18px 40px -18px #0009}.hero-notification img{border-radius:9px;flex-shrink:0}.hero-notification strong{font-size:var(--text-xs);color:var(--text);justify-content:space-between;display:flex}.hero-notification strong span{color:var(--text-meta);font-weight:400}.hero-notification p{font-size:var(--text-xs);color:var(--text-soft);margin-top:2px;line-height:1.45}.works-with{border-block:1px solid var(--line);grid-template-columns:1fr 3fr;gap:40px;padding-block:36px;display:grid}.works-with h2{font-size:var(--text-xl);letter-spacing:-.025em;line-height:1.4}.works-with-groups{grid-template-columns:repeat(3,1fr);gap:32px;display:grid}.works-with-groups h3{font-size:var(--text-sm);color:var(--text);margin-bottom:8px}.works-with-groups p{font-size:var(--text-xs);line-height:1.7}.works-with-groups a{color:var(--text);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}.mono-name{font-family:var(--mono);color:var(--text)}.section-heading{grid-template-columns:1fr 1fr;align-items:end;gap:80px;display:grid}.section-heading h2{font-size:var(--text-heading)}.section-heading p{font-size:var(--text-lg);max-width:500px}.section-label{color:var(--amber);font-size:var(--text-xs);margin-bottom:16px}.moments{padding-block:112px 0}.moment-grid{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px;display:grid}.moment-grid .device{width:min(260px,100%);margin-bottom:30px}.moment-grid h3{font-size:var(--text-xl);letter-spacing:-.025em;margin-bottom:10px;line-height:1.35}.moment-grid p{font-size:var(--text-sm);max-width:330px}.mac-app{grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px;padding-block:120px 0;display:grid}.mac-app h2{font-size:var(--text-heading);line-height:1.1}.mac-app-copy>p:not(.section-label,.mac-app-note){font-size:var(--text-lg);max-width:480px;margin-top:20px}.mac-app-points{font-size:var(--text-sm);gap:12px;margin:26px 0 0;padding:0;list-style:none;display:grid}.mac-app-points li{padding-left:22px;position:relative}.mac-app-points li:before{content:"";background:var(--amber);border-radius:50%;width:7px;height:7px;position:absolute;top:.62em;left:2px}.mac-app-points strong{color:var(--text)}.mac-app-copy .mac-app-note{font-size:var(--text-xs);color:var(--text-meta);margin-top:18px}.mac-app-visual{padding-bottom:18%;position:relative}.mac-window{border:1px solid var(--border-strong);border-radius:12px;height:auto;display:block;box-shadow:0 30px 80px -30px #0009}.mac-window-main{width:86%}.mac-window-pair{width:58%;position:absolute;bottom:0;right:0}.steps{padding-block:120px 0}.step-list{grid-template-columns:repeat(3,1fr);gap:40px;margin:52px 0 0;padding:0;list-style:none;display:grid}.step-list span{border:1px solid var(--accent-line);background:var(--accent-wash);width:32px;height:32px;color:var(--amber);font-family:var(--mono);font-size:var(--text-sm);border-radius:50%;place-items:center;margin-bottom:20px;display:grid}.step-list h3,.trust-grid h3{font-size:var(--text-xl);letter-spacing:-.025em;margin-bottom:10px;line-height:1.35}.step-list p,.trust-grid p{font-size:var(--text-sm)}.trust{padding-block:120px 100px}.trust-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;display:grid}.trust-grid article{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:28px}.trust-grid article>svg{color:var(--amber);margin-bottom:18px}.trust-grid .text-link{font-size:var(--text-xs);margin-top:18px}.home-finish{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:30px;padding-block:64px;display:flex}.home-finish h2{font-size:var(--text-4xl)}.home-finish p{font-size:var(--text-sm);margin-top:8px}}@layer responsive{@media (width<=1100px){.hero-notification{left:-18%}}@media (width<=900px){.hero{grid-template-columns:1fr;gap:48px;width:min(1240px,100% - 48px);padding-block:48px 64px}.hero-visual{width:min(300px,80%)}.hero-notification{width:250px;left:-22%}.works-with,.section-heading,.mac-app{grid-template-columns:1fr;gap:24px}.works-with-groups{grid-template-columns:1fr;gap:22px}.moments,.mac-app,.steps{padding-block:72px 0}.trust{padding-block:72px}.section-heading p,.mac-app-copy>p:not(.section-label,.mac-app-note){font-size:var(--text-base)}.moment-grid{grid-template-columns:1fr;gap:56px;margin-top:40px}.mac-app-visual{margin-top:24px}.step-list,.trust-grid{grid-template-columns:1fr;gap:28px;margin-top:36px}.home-finish{flex-direction:column;align-items:start}.home-finish h2{font-size:var(--text-3xl)}}@media (width<=500px){.hero h1{font-size:2.6rem}.hero-lede{font-size:var(--text-base)}.hero-notification{width:230px;top:6%;left:-8%}}}
