/* ── 2. Full-width sheet ──────────────────────────────── */
.s2 { height: 620px; background: var(--gray-30); color: var(--gray-810); }
.ap-glass { position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 20; background: color-mix(in srgb, var(--gray-20) 93%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--gray-900) 6%, transparent); }
.ap-bar { position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: 22; display: flex; align-items: center; justify-content: center; gap: clamp(4px, 2.2cqw, 30px); padding: 0 16px; }
.ap-bar button { border: 0; background: none; padding: 0 6px; height: 44px; font-size: 12px; letter-spacing: -0.01em; color: color-mix(in srgb, var(--gray-900) 80%, transparent); cursor: default; }
.ap-bar button:is(:hover, [data-hover]), .ap-bar button[aria-expanded="true"] { color: var(--gray-900); }
.ap-bar svg { width: 15px; height: 15px; fill: none; stroke: color-mix(in srgb, var(--gray-900) 80%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ap-bar .gl { padding: 0 6px; }
.ap-sheet { position: absolute; left: 0; right: 0; top: 44px; height: 0; overflow: hidden; z-index: 22; }
.ap-set { position: absolute; left: 0; right: 0; top: 0; padding: 38px 24px 60px; }
.ap-cols { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
.ap-h { margin: 0 0 12px; font-size: 12px; color: var(--gray-500); }
.ap-big { margin: 0 0 8px; font-size: 24px; line-height: 1.17; font-weight: 550; letter-spacing: 0em; }
.ap-sm { margin: 0 0 9px; font-size: 12px; font-weight: 550; color: var(--gray-700); }
.ap-i { opacity: 0; transform: translateY(-6px); transition: opacity .1s ease, transform .1s ease; }
.ap-set.on .ap-i { opacity: 1; transform: none; transition: opacity .32s ease calc(var(--d) * 28ms + 70ms), transform .5s cubic-bezier(.2,.9,.25,1) calc(var(--d) * 28ms + 70ms); }
.ap-veil { position: absolute; inset: 0; z-index: 10; background: color-mix(in srgb, var(--gray-70) 40%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ap-veil.on { opacity: 1; transition: opacity .4s ease .05s; }
.ap-page { position: absolute; inset: 0; padding-top: 44px; text-align: center; }
.ap-hero { padding: 54px 20px 0; }
.ap-hero h3 { margin: 0; font-size: clamp(32px, 5.2cqw, 56px); line-height: 1.05; font-weight: 550; letter-spacing: -0.02em; }
.ap-hero p { margin: 8px 0 0; font-size: clamp(17px, 2.2cqw, 24px); color: var(--gray-810); }
.ap-hero .ln { margin-top: 14px; display: flex; gap: 22px; justify-content: center; font-size: 17px; color: var(--blue-500); }
.laptop { width: min(460px, 76cqw); margin: 34px auto 0; }
.laptop .scr { aspect-ratio: 16 / 10; border-radius: 12px 12px 4px 4px; background: var(--gray-810); padding: 8px; }
.laptop .scr div { width: 100%; height: 100%; border-radius: 8px; background: conic-gradient(from 220deg at 60% 45%, var(--orange-250), var(--yellow-150), var(--aqua-200), var(--blue-350), var(--violet-350), var(--orange-250)); }
.laptop .base { height: 12px; margin: 0 -26px; border-radius: 0 0 12px 12px; background: linear-gradient(var(--gray-150), var(--gray-250)); }
@container (max-width: 700px) { .ap-bar .hide-sm { display: none; } .ap-cols { grid-template-columns: 1fr; } .ap-cols > div + div { display: none; } }