/* FAQ, closing call to action and footer. */
@property --cta-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- FAQ ---------- */
.faq2{padding-block:100px}
.faq2-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.5fr;gap:70px;align-items:start}
.faq2-side{position:sticky;top:110px}
.faq2-side h2{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-2px;margin:6px 0 18px}
.faq2-lead{color:#a59db8;font-size:15px;line-height:1.65;margin:0 0 28px;max-width:360px}
.faq2-help{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:22px;border-radius:18px;border:1px solid #bd9bff2e;background:linear-gradient(150deg,#8b5cf61f,#ec489910),#14102a;position:relative;overflow:hidden}
.faq2-help:before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-70px;background:radial-gradient(circle,#a78bfa44,transparent 70%);animation:faq-pulse 5s ease-in-out infinite}
.faq2-help-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#8b5cf62e;color:#d8c8ff;font-size:18px}
.faq2-help strong{display:block;font-size:15px;color:#fff;margin-bottom:3px}.faq2-help p{margin:0;font-size:13px;color:#a59db8;line-height:1.5}
@keyframes faq-pulse{50%{transform:scale(1.25);opacity:.6}}
.faq2-list{display:flex;flex-direction:column;gap:12px;counter-reset:q}
.faq2-item{position:relative;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(160deg,#ffffff0a,#ffffff03),#100c20;transition:border-color .25s,background .25s,box-shadow .25s,opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.faq2-item:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--fx,50%) var(--fy,0%),#8b5cf624,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.faq2-item:hover:before,.faq2-item[open]:before{opacity:1}
.faq2-item:hover{border-color:#a78bfa40}
.faq2-item[open]{border-color:#a78bfa66;box-shadow:0 18px 50px #7c3aed1f;background:linear-gradient(160deg,#8b5cf614,#ffffff03),#120d26}
.faq2-item summary{display:flex;align-items:center;gap:18px;padding:22px 24px;cursor:pointer;list-style:none;position:relative}
.faq2-item summary::-webkit-details-marker{display:none}
.faq2-item summary:focus-visible{outline:2px solid #c4b5fd;outline-offset:-2px;border-radius:18px}
.faq2-num{font:600 12px ui-monospace,Menlo,monospace;color:#7d6ba8;letter-spacing:.06em;transition:color .25s}
.faq2-item[open] .faq2-num,.faq2-item:hover .faq2-num{color:#c4b5fd}
.faq2-q{flex:1;font-size:17px;font-weight:700;color:#efeaf9;letter-spacing:-.2px}
.faq2-plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff08;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,border-color .25s}
.faq2-plus:before,.faq2-plus:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:#d8c8ff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .35s}
.faq2-plus:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq2-item[open] .faq2-plus{transform:rotate(180deg);background:linear-gradient(135deg,#7c3aed,#c026d3);border-color:transparent}
.faq2-item[open] .faq2-plus:after{transform:translate(-50%,-50%) rotate(0deg)}
.faq2-item[open] .faq2-plus:before,.faq2-item[open] .faq2-plus:after{background:#fff}
.faq2-a{overflow:hidden}
.faq2-a>div{padding:0 24px 24px 66px}
.faq2-a p{margin:0;color:#b9afd0;font-size:15.5px;line-height:1.75;max-width:640px}

/* ---------- Closing call to action ---------- */
.cta2-wrap{padding-block:60px 90px}
.cta2{position:relative;padding:1.5px;border-radius:32px;background:conic-gradient(from var(--cta-a),#8b5cf6,#ec4899,#6366f1,#22d3ee55,#8b5cf6);animation:cta-rotate 9s linear infinite;box-shadow:0 40px 120px #7c3aed26}
@keyframes cta-rotate{to{--cta-a:360deg}}
.cta2-card{position:relative;border-radius:31px;overflow:hidden;padding:96px 28px 88px;text-align:center;background:radial-gradient(ellipse 70% 90% at 50% 0%,#3a2477,transparent 70%),radial-gradient(ellipse 60% 70% at 100% 100%,#5b1f5a66,transparent 70%),#0e0a1d;isolation:isolate}
.cta2-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta2-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:h-aurora 14s ease-in-out infinite alternate}
.cta2-bg i:nth-child(1){width:380px;height:380px;left:-60px;top:-80px;background:#7c3aed77}
.cta2-bg i:nth-child(2){width:340px;height:340px;right:-40px;bottom:-90px;background:#ec489955;animation-delay:-5s}
.cta2-bg i:nth-child(3){width:260px;height:260px;left:42%;top:30%;background:#6366f144;animation-delay:-9s}
.cta2-star{position:absolute;color:#d8c8ff;opacity:.5;animation:cta-twinkle 4s ease-in-out infinite;text-shadow:0 0 18px #a78bfa}
.cta2-star.s1{left:12%;top:18%;font-size:18px}.cta2-star.s2{right:14%;top:14%;font-size:26px;animation-delay:-1s}
.cta2-star.s3{left:24%;bottom:20%;font-size:12px;animation-delay:-2s}.cta2-star.s4{right:26%;bottom:16%;font-size:16px;animation-delay:-.5s}
.cta2-star.s5{left:6%;top:52%;font-size:10px;animation-delay:-3s}.cta2-star.s6{right:7%;top:46%;font-size:12px;animation-delay:-1.5s}
@keyframes cta-twinkle{0%,100%{opacity:.15;transform:scale(.8) rotate(0)}50%{opacity:.8;transform:scale(1.15) rotate(20deg)}}
.cta2-inner{position:relative;max-width:700px;margin:0 auto}
.cta2-inner .eyebrow{justify-content:center}
.cta2 h2{font-size:clamp(38px,5.4vw,70px);line-height:1.04;letter-spacing:-3px;margin:8px 0 20px;background:linear-gradient(110deg,#fff 0%,#e9deff 40%,#f6b7e0 70%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:h-shine 8s linear infinite}
.cta2-desc{color:#c3b9db;font-size:18px;margin:0 0 34px}
.cta2-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta2-actions .button{padding:16px 28px;font-size:15px}
.cta2-actions .button-primary{position:relative;overflow:hidden;animation:h-glow 3.6s ease-in-out infinite}
.cta2-actions .button-primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:h-sweep 4.2s ease-in-out infinite}
.cta2-actions .button-outline{background:#ffffff0a;border-color:#ffffff33;backdrop-filter:blur(6px)}
.cta2-points{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:34px 0 22px;padding:0;color:#b9afd0;font-size:13.5px}
.cta2-points li{display:flex;align-items:center;gap:8px}.cta2-points li:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#4ade8022;color:#86efac;font-size:11px;font-weight:800}
.cta-credit{display:block;color:#8e82ab;font-size:12px}
.cta2-phone{position:absolute;width:150px;height:300px;border-radius:26px;border:4px solid #3a3256;background:linear-gradient(170deg,#2a1d58,#150f2d);padding:16px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 30px 60px #0009;z-index:0}
.cta2-phone b{font-size:15px;color:#fff;margin-top:6px}
.cta2-phone span{display:block;height:7px;border-radius:5px;background:#ffffff26}
.cta2-phone .cp-n{position:absolute;top:7px;left:50%;width:44px;height:8px;border-radius:9px;background:#000;transform:translateX(-50%)}
.cta2-phone .cp-art{height:70px;margin-top:12px;border-radius:12px;background:radial-gradient(circle at 30% 30%,#8b5cf6,transparent 70%),linear-gradient(135deg,#ffffff24,#ffffff08)}
.cta2-phone .cp-btn{margin-top:auto;height:26px;border-radius:9px;background:linear-gradient(120deg,#8b5cf6,#c084fc)}
.cp-left{left:5%;bottom:-120px;rotate:-12deg;animation:cp-float 7s ease-in-out infinite}
.cp-right{right:5%;bottom:-130px;rotate:11deg;animation:cp-float 8s ease-in-out -3s infinite}
.cp-right{background:linear-gradient(170deg,#3d1634,#170a14)}.cp-right .cp-art{background:radial-gradient(circle at 30% 30%,#ec4899,transparent 70%),linear-gradient(135deg,#ffffff24,#ffffff08)}.cp-right .cp-btn{background:linear-gradient(120deg,#ec4899,#f9a8d4)}
@keyframes cp-float{50%{translate:0 -14px}}

/* ---------- Footer ---------- */
.ft{position:relative;padding:70px 24px 34px;margin-top:10px}
.ft:before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,#a78bfa77,#ec489977,transparent);background-size:200% 100%;animation:ft-line 6s linear infinite}
@keyframes ft-line{to{background-position:200% 0}}
.ft-glow{position:absolute;inset:auto 0 0 0;height:240px;background:radial-gradient(ellipse 50% 100% at 50% 100%,#7c3aed1c,transparent 70%);pointer-events:none;z-index:-1}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.ft-brand .brand{font-size:24px}
.ft-tag{margin:18px 0 6px;color:#e4dcf5;font-weight:600;font-size:15px}
.ft-blurb{margin:0 0 22px;color:#9b90b6;font-size:14px;line-height:1.65;max-width:340px}
.ft-col{display:flex;flex-direction:column;gap:12px}
.ft-col h3{margin:0 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d6ba8;font-weight:800}
.ft-col a{position:relative;width:max-content;color:#b9afd0;font-size:14.5px;transition:color .2s}
.ft-col a:after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:linear-gradient(90deg,#a78bfa,#ec4899);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.ft-col a:hover{color:#fff}.ft-col a:hover:after{transform:scaleX(1)}
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid #ffffff12;color:#8e82ab;font-size:13px}
.ft-bottom p{margin:0}.ft-by strong{color:#f0abfc;margin-left:4px}
.ft-up{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff08;color:#d8c8ff;font-size:16px;cursor:pointer;transition:transform .25s,background .25s,border-color .25s}
.ft-up:hover{transform:translateY(-4px);background:#8b5cf633;border-color:#a78bfa88}
.ft-up:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}

@media(max-width:1050px){.faq2-grid{grid-template-columns:1fr;gap:34px}.faq2-side{position:static}.faq2-lead{max-width:none}.cta2-phone{display:none}.ft-top{grid-template-columns:1fr 1fr;gap:38px}.ft-brand{grid-column:1/-1}}
@media(max-width:600px){
  .faq2{padding-block:64px}.faq2-item summary{padding:18px 16px;gap:12px}.faq2-q{font-size:15.5px}.faq2-a>div{padding:0 16px 20px 16px}.faq2-num{display:none}
  .cta2-card{padding:70px 18px 64px}.cta2-actions .button{width:100%;justify-content:center}.cta2-wrap{padding-block:30px 60px}
  .ft{padding-top:54px}.ft-top{grid-template-columns:1fr 1fr}.ft-bottom{flex-direction:column;align-items:flex-start;margin-top:40px}.ft-up{align-self:flex-end;margin-top:-46px}
}
@media(prefers-reduced-motion:reduce){
  .cta2,.cta2-bg i,.cta2-star,.cta2 h2,.cta2-actions .button-primary,.cta2-actions .button-primary:after,.cp-left,.cp-right,.ft:before,.faq2-help:before{animation:none!important}
  .cta2-star{opacity:.5}.faq2-plus,.faq2-plus:before,.faq2-plus:after{transition:none}
}

/* ---------- Pricing band: plain statements, no price claims until prices are published ---------- */
.value2 { padding-top: 96px; padding-bottom: 32px; }
.value2-head { max-width: 720px; margin-bottom: 40px; }
.value2-head h2 { margin: 10px 0 14px; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; }
.value2-lead { margin: 0; color: #a8a2b8; font-size: 1.05rem; line-height: 1.6; max-width: 60ch; }
.price-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin-bottom: 16px; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.price-card-pro { border-color: rgba(167,139,250,.55); background: linear-gradient(160deg, rgba(139,92,246,.16), rgba(236,72,153,.07)); box-shadow: 0 0 0 1px rgba(167,139,250,.15), 0 24px 60px -24px rgba(139,92,246,.45); }
.price-badge { position: absolute; top: -13px; right: 24px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #8b5cf6, #ec4899); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.price-card h3 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; color: #fafafa; }
.price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.price-amount strong { font-size: 2.8rem; line-height: 1; letter-spacing: -.03em; color: #fff; }
.price-amount span { color: #a8a2b8; font-size: .95rem; }
.price-desc { margin: 0 0 20px; color: #c9c4d8; font-size: .97rem; line-height: 1.55; }
.price-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.price-list li { display: flex; align-items: flex-start; gap: 10px; color: #e4e0ef; font-size: .95rem; line-height: 1.45; }
.price-list svg { flex: none; margin-top: 3px; color: #a78bfa; }
.price-note { margin: -8px 0 22px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); color: #c9c4d8; font-size: .88rem; line-height: 1.5; }
.price-card .button { justify-content: center; text-align: center; }
@media (max-width: 860px) { .price-plans { grid-template-columns: 1fr; } .price-badge { right: 20px; } }
.value2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.value2-card { padding: 26px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.value2-num { display: block; margin-bottom: 18px; color: #a78bfa; font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.value2-card h3 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; color: #fafafa; }
.value2-card p { margin: 0; color: #a8a2b8; font-size: .95rem; line-height: 1.6; }
.value2-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 860px) { .value2-grid { grid-template-columns: 1fr; } .value2 { padding-top: 72px; } }

/* Free plan leads; Premium is the quieter, optional upgrade */
.price-plans { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.price-card-free { border-color: rgba(167,139,250,.55); background: linear-gradient(160deg, rgba(139,92,246,.18), rgba(236,72,153,.07)); box-shadow: 0 0 0 1px rgba(167,139,250,.15), 0 24px 60px -24px rgba(139,92,246,.45); }
.price-card-pro { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); box-shadow: none; }
.price-card-pro .price-amount strong { font-size: 1.9rem; }
.price-card-pro .price-badge { background: rgba(167,139,250,.18); color: #d8ccff; border: 1px solid rgba(167,139,250,.4); }
.nav-start { white-space: nowrap; }
@media (max-width: 860px) { .price-plans { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .nav-start { display: none; } }

/* Pricing uses the full container width; nav no longer wraps or overflows */
.price-plans { max-width: none; gap: 20px; }
.price-list { align-content: start; }
.price-card { padding: 34px; }
.navigation { gap: 16px; }
.nav-links { flex: 1 1 auto; min-width: 0; justify-content: center; gap: clamp(14px, 1.7vw, 30px); white-space: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-actions { flex: none; }
@media (max-width: 1400px) { .nav-links a[href="/compare/superwall/"] { display: none; } }
@media (max-width: 1240px) { .nav-links a[href="/playground"] { display: none; } }
html[data-signed-in] .nav-actions .button-outline, html[data-signed-in] .price-card-pro .button { display: none; }
@media (max-width: 520px) { html[data-signed-in] .nav-start { display: none; } html[data-signed-in] .nav-actions .button-outline { display: inline-flex; } }

@media (max-width: 1060px) { .nav-links { display: none; } }