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

/* ── F6. Newsletter with real states ─────────────────── */
.f6 { height: 520px; background: var(--gray-40); color: var(--gray-810); }
.f6-foot { position: absolute; inset: 0; padding: 70px clamp(20px, 4cqw, 48px) 0; }
.f6-foot h4 { margin: 0; font-size: clamp(32px, 5.4cqw, 56px); line-height: 1; letter-spacing: -0.022em; font-weight: 550; max-width: 14ch; }
.f6-foot > p { margin: 14px 0 0; font-size: 15px; color: var(--gray-550); max-width: 44ch; }
.f6-box { position: relative; margin-top: 30px; width: min(520px, 100%); }
.f6-form { position: relative; display: flex; align-items: center; height: 60px; border-radius: 9999px; background: var(--gray-0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gray-810) 14%, transparent); transition: box-shadow .25s ease; overflow: hidden; }
.f6-form.focus { box-shadow: 0 0 0 2px var(--gray-810), 0 0 0 7px color-mix(in srgb, var(--gray-810) 8%, transparent); }
.f6-form.bad { box-shadow: 0 0 0 2px var(--red-450), 0 0 0 7px color-mix(in srgb, var(--red-450) 10%, transparent); }
.f6-lab { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--gray-350); pointer-events: none; transition: transform .3s cubic-bezier(.2,.9,.25,1), font-size .3s, color .2s; }
.f6-form.focus .f6-lab, .f6-form.filled .f6-lab { transform: translateY(-19px); font-size: 11px; color: var(--gray-550); }
.f6-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; padding: 16px 12px 0 26px; font: 15px var(--font); color: var(--gray-810); }
.f6-ok { width: 20px; height: 20px; margin-right: 10px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s cubic-bezier(.2,1.4,.4,1); }
.f6-ok.on { opacity: 1; transform: none; }
.f6-btn { position: relative; height: 48px; margin-right: 6px; border: 0; border-radius: 9999px; background: var(--gray-810); color: var(--gray-0); font: 550 15px var(--font); cursor: default; overflow: hidden; flex: none; }
.f6-btn span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s, transform .3s cubic-bezier(.2,.9,.25,1); }
.f6-btn .s2, .f6-btn .s3 { opacity: 0; transform: scale(.6); }
.f6-btn.load .s1, .f6-btn.done .s1 { opacity: 0; transform: translateY(-8px); }
.f6-btn.load .s2 { opacity: 1; transform: none; }
.f6-btn.done .s3 { opacity: 1; transform: none; }
.f6-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gray-0) 30%, transparent); border-top-color: var(--gray-0); animation: f6s .7s linear infinite; }
@keyframes f6s { to { transform: rotate(360deg); } }
.f6-err { height: 0; overflow: hidden; margin: 0; padding-left: 26px; font-size: 13px; color: var(--red-450); transition: height .25s ease; }
.f6-err.on { height: 28px; padding-top: 8px; }
.f6-msg { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1); }
.f6-msg.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.f6-msg b { display: block; font-size: 20px; font-weight: 550; }
.f6-msg p { margin: 6px 0 0; color: var(--gray-550); font-size: 15px; }
.f6-msg button { margin-top: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--gray-810); text-decoration: underline; text-underline-offset: 3px; cursor: default; }
.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.f6-links { position: absolute; left: clamp(20px, 4cqw, 48px); right: clamp(20px, 4cqw, 48px); bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--gray-550); padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--gray-810) 12%, transparent); }