.sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sc::-webkit-scrollbar { display: none; }
.mock-h { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 clamp(20px, 4cqw, 48px); font-size: 13px; font-weight: 500; }
.mock-h b { font-size: 17px; font-weight: 550; letter-spacing: -0.022em; margin-right: auto; }
.mock-hero { padding: 60px clamp(20px, 4cqw, 48px) 40px; }
.mock-hero h3 { margin: 0; font-size: clamp(40px, 7cqw, 86px); line-height: .94; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.mock-hero p { margin: 18px 0 0; max-width: 42ch; font-size: 17px; opacity: .7; }
.mock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 clamp(20px, 4cqw, 48px) 60px; }
.mock-grid i { display: block; height: 220px; border-radius: 12px; }
@container (max-width: 700px) { .mock-grid { grid-template-columns: 1fr 1fr; } .mock-grid i:nth-child(3) { display: none; } .mock-h span { display: none; } }

/* ── F8. Big CTA and the way home ────────────────────── */
.f8 { height: 640px; background: var(--gray-870); }
.f8-page { background: var(--gray-50); color: var(--gray-870); }
.f8-foot { background: var(--gray-870); color: var(--gray-70); padding: 70px clamp(20px, 4cqw, 48px) 30px; min-height: 560px; display: flex; flex-direction: column; }
.f8-k { font-size: 13px; color: color-mix(in srgb, var(--gray-70) 50%, transparent); }
.f8-cta { display: block; margin-top: 18px; font-size: clamp(40px, 8.4cqw, 112px); line-height: .98; letter-spacing: -0.022em; font-weight: 550; cursor: default; text-decoration: none; color: inherit; }
.f8-cta .w { display: inline-block; white-space: nowrap; }
.f8-cta .l { display: inline-block; position: relative; overflow: hidden; vertical-align: top; height: 1.22em; margin-bottom: -.2em; clip-path: inset(0); }
.f8-cta .l > span { display: block; transition: transform .6s cubic-bezier(.7,0,.2,1); transition-delay: calc(var(--d) * 18ms); }
.f8-cta .l > span + span { position: absolute; left: 0; top: 1.3em; color: var(--orange-300); }
.f8-cta.on .l > span { transform: translateY(-1.3em); }
.f8-row { margin-top: auto; display: flex; align-items: flex-end; gap: 30px; padding-top: 40px; font-size: 13px; }
.f8-row p { margin: 0 0 4px; color: color-mix(in srgb, var(--gray-70) 45%, transparent); font-size: 12px; }
.f8-time { font-variant-numeric: tabular-nums; }
.f8-top { margin-left: auto; position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0; background: none; color: var(--gray-70); cursor: default; display: grid; place-items: center; }
.f8-top svg.r { position: absolute; inset: 0; width: 76px; height: 76px; transform: rotate(-90deg); }
.f8-top svg.a { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.f8-top:is(:hover, [data-hover]) svg.a { transform: translateY(-3px); }
.f8-top small { position: absolute; top: 100%; margin-top: 8px; font-size: 12px; color: color-mix(in srgb, var(--gray-70) 55%, transparent); white-space: nowrap; }
@container (max-width: 700px) { .f8-row { flex-wrap: wrap; } }