.gar-pw-fade { height: 150px; margin-top: -150px; position: relative; z-index: 5; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 60%, #ffffff 100%); pointer-events: none; } .gar-pw-redacted { max-width: 720px; margin: 0 auto 35px auto; padding: 0 10px; } .gar-pw-redline { height: 13px; border-radius: 3px; background: #d2dbe2; margin-bottom: 11px; filter: blur(2.5px); opacity: 0.85; } .gar-pw-redline:nth-child(1) { width: 96%; } .gar-pw-redline:nth-child(2) { width: 88%; } .gar-pw-redline:nth-child(3) { width: 93%; background: #1571ba; opacity: 0.22; } .gar-pw-redline:nth-child(4) { width: 71%; } .gar-pw-card { position: relative; z-index: 6; max-width: 720px; margin: 0 auto 70px auto; background: linear-gradient(160deg, #232a31 0%, #191d21 55%, #16191d 100%); border: 1px solid rgba(42, 125, 224, 0.35); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(25, 29, 33, 0.45), 0 0 0 1px rgba(255,255,255,0.04) inset; font-family: 'Open Sans', Helvetica, Arial, sans-serif; text-align: center; } .gar-pw-strip { display: flex; align-items: center; justify-content: center; gap: 12px; background: #1571ba; background: linear-gradient(90deg, #1571ba 0%, #2a7de0 50%, #1571ba 100%); color: #ffffff; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; padding: 10px 16px; } .gar-pw-strip span { opacity: 0.65; font-weight: 400; } .gar-pw-inner { padding: 48px 50px 44px 50px; } .gar-pw-lock { width: 58px; height: 58px; margin: 0 auto 22px auto; border-radius: 50%; background: rgba(42, 125, 224, 0.12); border: 1px solid rgba(42, 125, 224, 0.45); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(42, 125, 224, 0.25); font-size: 24px; line-height: 1; } .gar-pw-eyebrow { font-family: 'Oswald', sans-serif; color: #2a7de0; font-size: 13px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; margin: 0 0 14px 0; } .gar-pw-card h3 { font-family: 'Oswald', sans-serif; letter-spacing: -0.01em; color: #ffffff; font-size: 32px; font-weight: 700; text-transform: uppercase; line-height: 1.25; margin: 0 0 14px 0; } .gar-pw-sub { color: #b9c3cc; font-size: 16px; line-height: 1.7; max-width: 520px; margin: 0 auto 30px auto; } .gar-pw-benefits { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 34px 0; padding: 0; list-style: none; } .gar-pw-benefits li { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px; padding: 14px 18px; font-size: 13.5px; color: #e8edf1; line-height: 1.5; flex: 1; min-width: 170px; max-width: 200px; } .gar-pw-benefits li b { display: block; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; margin-bottom: 5px; } .gar-pw-benefits li em { font-style: normal; color: #8a96a1; font-size: 12.5px; } .gar-pw-btn { display: inline-block; background: linear-gradient(180deg, #2a7de0 0%, #1571ba 100%) !important; color: #ffffff !important; font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; padding: 18px 54px; border-radius: 6px; box-shadow: 0 10px 30px rgba(21, 113, 186, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .gar-pw-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(42, 125, 224, 0.55); } .gar-pw-price { color: #8a96a1; font-size: 14px; margin: 18px 0 0 0; } .gar-pw-price b { color: #e8edf1; } .gar-pw-login { margin: 28px 0 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; color: #8a96a1; } .gar-pw-login a { color: #2a7de0 !important; font-weight: 700; text-decoration: none; } .gar-pw-login a:hover { text-decoration: underline; } .gar-pw-proof { font-family: 'Oswald', sans-serif; margin-top: 16px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #63717f; } @media (max-width: 640px) { .gar-pw-inner { padding: 38px 22px 36px 22px; } .gar-pw-card h3 { font-size: 25px; } .gar-pw-strip { letter-spacing: 2px; font-size: 11px; } .gar-pw-benefits li { max-width: 100%; } .gar-pw-btn { padding: 16px 36px; font-size: 15px; } }