.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; } }

/* ── F2. Giant wordmark ──────────────────────────────── */
.f2 { height: 640px; background: var(--gray-900); }
.f2-page { background: var(--gray-20); color: var(--gray-870); }
.f2-foot { position: relative; background: var(--gray-900); color: var(--gray-40); padding: 48px clamp(20px, 4cqw, 48px) 0; overflow: hidden; }
.f2-top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 20px; font-size: 13px; }
.f2-top p { margin: 0 0 10px; font-size: 12px; color: color-mix(in srgb, var(--gray-40) 45%, transparent); }
.f2-top span { display: block; padding: 3px 0; color: color-mix(in srgb, var(--gray-40) 85%, transparent); }
.f2-top h5 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 550; letter-spacing: -0.02em; max-width: 16ch; }
.f2-mark { position: relative; display: flex; justify-content: center; margin-top: 40px; line-height: .78; font-weight: 550; letter-spacing: -0.022em; white-space: nowrap; overflow: hidden; padding-top: .12em; user-select: none; }
.f2-mark span { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
@container (max-width: 700px) { .f2-top { grid-template-columns: 1fr 1fr; } .f2-top > div:first-child { grid-column: 1 / -1; } }