/* Guides */
.guide-hero { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 56px 0 64px; }
.guide-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; }
.guide-lead { font-size: 1.15rem; color: rgba(255,255,255,.8); margin: 0; }
.crumbs { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.crumbs a:hover { color: #fff; }

.guide-body { padding-top: 48px; padding-bottom: 80px; font-size: 1.08rem; }
.guide-body h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.2; margin-top: 1.8em; }
.guide-body > h2:first-child { margin-top: 0; }
.guide-body ul { padding-left: 1.2em; margin: 0 0 1em; }
.guide-body li { margin-bottom: .4em; }
.guide-body li::marker { color: var(--pink); }
.guide-body a { color: var(--pink); font-weight: 700; }

.guide-cta { margin-top: 56px; padding: 32px; border-radius: var(--radius); background: var(--night); color: #fff; }
.guide-cta h2 { margin-top: 0; }
.guide-cta p { color: rgba(255,255,255,.8); }
.guide-cta .btn { color: var(--night); margin-top: 8px; }

.guide-more { margin-top: 56px; }
.guide-more h2 { font-size: 1.3rem; }

.guide-list { display: grid; gap: 16px; padding-top: 48px; padding-bottom: 80px; }
.guide-card { display: block; background: var(--surface); border: 2px solid var(--border); border-radius: 18px; padding: 24px 26px; text-decoration: none; transition: border-color .2s, transform .2s; }
.guide-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.guide-card h2 { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: .4em; }
.guide-card p { color: var(--muted); margin-bottom: .6em; }
.guide-card span { color: var(--pink); font-weight: 800; }

@media (max-width: 640px) {
  .guide-hero { padding: 40px 0 48px; }
  .guide-cta { padding: 24px; }
}

/* Illustrations & motion */
.guide-hero .blob-1 { width: 420px; height: 420px; top: -180px; right: -120px; }
.guide-hero .blob-2 { width: 340px; height: 340px; bottom: -200px; left: -140px; }
.guide-hero .container { position: relative; }
.js .guide-hero .crumbs, .js .guide-hero h1, .js .guide-lead { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.js .guide-hero h1 { animation-delay: .08s; }
.js .guide-lead { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero-phone { position: absolute; width: 200px; right: max(24px, calc(50% - 600px)); bottom: -90px; transform: rotate(6deg); animation: float 6s ease-in-out infinite; display: none; }
@media (min-width: 1180px) { .hero-phone { display: block; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.guide-fig { width: 230px; margin: 8px 0 24px; }
.guide-fig.right { float: right; margin-left: 36px; }
.guide-fig.left { float: left; margin-right: 36px; }
.guide-fig figcaption { margin-top: 16px; font-size: .9rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.4; }
.guide-body h2 { clear: both; }
.guide-cta, .guide-more { clear: both; }

.guide-body li { transition: transform .2s; }
.guide-body ul.reveal.in li { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.guide-body ul.reveal.in li:nth-child(2) { animation-delay: .06s; }
.guide-body ul.reveal.in li:nth-child(3) { animation-delay: .12s; }
.guide-body ul.reveal.in li:nth-child(4) { animation-delay: .18s; }
.guide-body ul.reveal.in li:nth-child(n+5) { animation-delay: .24s; }

.guide-cta { position: relative; overflow: hidden; }
.guide-cta::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--pink); filter: blur(70px); opacity: .45; top: -120px; right: -80px; animation: drift 12s ease-in-out infinite alternate; pointer-events: none; }
.guide-cta > * { position: relative; }

.guide-list .guide-card:nth-child(2) { transition-delay: .08s; }
.guide-list .guide-card:nth-child(3) { transition-delay: .16s; }
.guide-list .guide-card:nth-child(4) { transition-delay: .24s; }
.guide-card span { display: inline-block; transition: transform .2s; }
.guide-card:hover span { transform: translateX(4px); }

@media (max-width: 640px) {
  .guide-fig.right, .guide-fig.left { float: none; margin: 8px auto 28px; width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .guide-hero .crumbs, .js .guide-hero h1, .js .guide-lead, .hero-phone, .guide-cta::before, .guide-body ul.reveal.in li { animation: none; }
  .iphone { transition: none; }
}

.guide-fig .iphone { transform: rotate(3deg); }
.guide-fig.left .iphone { transform: rotate(-3deg); }
.guide-fig:hover .iphone { transform: rotate(0) scale(1.03); }
.hero-phone .iphone { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25), inset 0 0 0 4px #05020d, 0 30px 70px -20px rgba(0,0,0,.7); }

/* Guide list: phone peeking from the card, alternating side and tilt */
.guide-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 150px; gap: 24px; min-height: 210px; padding-right: 0; }
.guide-card > div:last-child { align-self: center; }
.guide-thumb { order: 2; position: relative; }
.guide-thumb .iphone { position: absolute; width: 145px; top: 26px; left: 4px; transform: rotate(7deg); }
.guide-card:nth-child(even) { grid-template-columns: 150px 1fr; padding-right: 26px; padding-left: 0; }
.guide-card:nth-child(even) .guide-thumb { order: 0; }
.guide-card:nth-child(even) .guide-thumb .iphone { left: 18px; transform: rotate(-6deg); }
.guide-card:nth-child(3) .guide-thumb .iphone { transform: rotate(4deg); top: 34px; }
.guide-card:nth-child(4) .guide-thumb .iphone { transform: rotate(-9deg); top: 20px; }
.guide-card:hover .guide-thumb .iphone { transform: rotate(0) translateY(-12px); }
@media (max-width: 640px) {
  .guide-card { grid-template-columns: 1fr 108px; gap: 12px; min-height: 230px; padding: 22px 0 22px 20px; }
  .guide-card:nth-child(even) { grid-template-columns: 108px 1fr; padding: 22px 20px 22px 0; }
  .guide-thumb .iphone { width: 108px; top: 30px; left: 4px; }
  .guide-card:nth-child(even) .guide-thumb .iphone { left: 4px; }
  .guide-card h2 { font-size: 1.08rem; }
  .guide-card p { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .iphone { transition: none; } }

/* Legal & support */
.updated { margin: 14px 0 0; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.55); }
.js .guide-hero .updated { animation: rise .8s .24s cubic-bezier(.2,.8,.2,1) both; }
.contact-card { position: relative; overflow: hidden; margin-bottom: 40px; padding: 28px 30px; border-radius: var(--radius); background: var(--night); color: #fff; }
.contact-card::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--violet); filter: blur(70px); opacity: .5; top: -110px; right: -60px; animation: drift 12s ease-in-out infinite alternate; pointer-events: none; }
.contact-card > * { position: relative; }
.contact-card .eyebrow { margin-bottom: .4em; }
.contact-mail { font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 4vw, 1.7rem); margin-bottom: .5em; word-break: break-word; }
.guide-body .contact-mail a { color: #fff; text-decoration: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-card p:last-child { color: rgba(255,255,255,.75); margin: 0; }
.legal .guide-body h2 { font-size: clamp(1.2rem, 2.6vw, 1.45rem); }
@media (prefers-reduced-motion: reduce) { .contact-card::before, .js .guide-hero .updated { animation: none; } }

/* Password reset */
.pw-wrap { padding-top: 40px; padding-bottom: 88px; }
.pw-card { display: grid; gap: 16px; max-width: 460px; margin: 0 auto; padding: 28px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); box-shadow: 0 30px 60px -36px rgba(20, 6, 46, .35); }
.pw-card[hidden] { display: none; }
.pw-card label { display: grid; gap: 6px; font-weight: 800; font-size: .95rem; }
.pw-card input { font: inherit; font-weight: 500; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--text); }
.pw-card input:focus { outline: none; border-color: var(--pink); }
.pw-card .btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.pw-card .btn:disabled { opacity: .6; cursor: default; }
.pw-msg { margin: 0; min-height: 1.2em; color: #C2185B; font-weight: 600; font-size: .92rem; }
.pw-state-title { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin: 0; }
#pw-state p:last-child { margin: 0; color: var(--muted); }