/* Packages gate: prices unlock by e-mail magic link */
.gate { position: relative; min-height: 640px; }
.gate__content { transition: filter 1.2s var(--ease), opacity 1s var(--ease), transform 1.2s var(--ease); }
.gate:not(.is-open) .gate__content { filter: blur(14px) saturate(.6); opacity: .55; transform: scale(.985); pointer-events: none; user-select: none; }
.gate__veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: radial-gradient(70% 70% at 50% 45%, rgba(227, 231, 237, .2), rgba(241, 243, 246, .75)); clip-path: circle(150% at 50% 45%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) .45s, opacity .6s .9s; }
.gate.is-open .gate__veil { clip-path: circle(0% at 50% 45%); opacity: 0; pointer-events: none; }
.gate__card { position: relative; width: min(560px, 100%); padding: clamp(28px, min(3vw, 43.2px), 44px); background: var(--graphite); color: var(--steel); box-shadow: 0 60px 120px -40px rgba(14, 15, 17, .6); overflow: hidden; }
.gate__card::after { content: ""; position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; border-top: 3px solid var(--signal); border-right: 3px solid var(--signal); }
.gate.is-sent:not(.is-unlocking) .gate__lock { display: none; }
.gate__lock { width: 54px; height: 60px; margin-bottom: 22px; fill: none; stroke: var(--steel); stroke-width: 3; }
.gate__lock rect { fill: var(--signal); stroke: var(--signal); }
.gate__lock circle, .gate__lock path:last-child { stroke: var(--graphite); }
.gate__shackle { transform-origin: 46px 32px; transition: transform .7s cubic-bezier(.5, -.5, .3, 1.6); }
.gate.is-unlocking .gate__shackle { transform: translateY(-8px) rotate(28deg); }
.gate.is-unlocking .gate__lock { animation: gateShake .5s var(--ease); }
@keyframes gateShake { 30% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
.gate__h { font-weight: 500; font-size: clamp(2rem, min(3.6vw, 51.84px), 3.2rem); line-height: 1; letter-spacing: -.05em; margin: 16px 0 14px; }
.gate__p { color: var(--mist); max-width: 42ch; }
.gate__p b { color: var(--steel); font-weight: 500; }
.gate__form { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.gate__form input { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px; font: inherit; font-size: 1rem; color: var(--steel); background: var(--graphite-3); border: 1px solid var(--line-d); outline: 0; transition: border-color .2s; }
.gate__form input:focus { border-color: var(--signal); }
.gate__form .btn { height: 52px; }
.gate__err { margin-top: 10px; font-size: .84rem; color: var(--signal); }
.gate__step--2 { display: none; }
.gate.is-sent .gate__step--1 { display: none; }
.gate.is-sent .gate__step--2 { display: block; animation: gateStep .7s var(--ease) both; }
@keyframes gateStep { from { opacity: 0; transform: translateY(24px); } }
.gate__env { position: relative; width: 56px; height: 40px; margin-bottom: 8px; border: 2px solid var(--steel); }
.gate__env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; border-bottom: 2px solid var(--steel); clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--graphite); transform-origin: top; animation: gateFlap 1.2s var(--ease) .2s both; }
.gate__env i { position: absolute; right: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); animation: callPulse 1.8s infinite; }
@keyframes gateFlap { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
.gate__mail { position: relative; margin-top: 22px; padding: 18px; background: var(--steel); color: var(--graphite); display: grid; gap: 12px; animation: gateDrop .8s var(--ease) .5s both; }
@keyframes gateDrop { from { opacity: 0; transform: translateY(-16px) rotate(-1.5deg); } }
.gate__mail-top { display: flex; justify-content: space-between; font-size: .8rem; color: var(--slate); }
.gate__mail-top b { color: var(--graphite); font-weight: 600; }
.gate__mail p { font-size: .92rem; color: var(--slate); }
.gate__mail p b { color: var(--graphite); font-weight: 500; font-size: 1.05rem; }
.gate__mail .btn { justify-self: start; }
.gate__demo { position: absolute; right: 12px; top: -10px; }
.gate__back { margin-top: 16px; font: inherit; font-size: .84rem; color: var(--mist); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate__back:hover { color: var(--steel); }
.gate.is-open .gate__content .cfg { animation: gateIn 1.2s var(--ease) .5s both; }
@keyframes gateIn { from { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .gate__content, .gate__veil, .gate__step, .gate__shackle { transition: none; } .gate__mail, .gate__env::before { animation: none; } }