/* ============================================================
   page.css — thank-you, 404, privacy-policy, terms-of-service
   GrowMyStudio
   ============================================================ */

/* ── SHARED: centered page layout ── */
.page-body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 5%; }

/* ── SHARED: page header (privacy, terms) ── */
.page-header { background: var(--white); border-bottom: 1px solid var(--border); padding: 56px 5% 48px; }
.page-header-inner { max-width: 760px; margin: 0 auto; }
.page-eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: .75rem; }
.page-header h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; margin-bottom: .75rem; }
.page-header-meta { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* ── SHARED: legal prose ── */
.content-wrap { max-width: 760px; margin: 0 auto; padding: 56px 5% 100px; }
.content h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin: 2.5rem 0 .85rem; }
.content h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 .6rem; }
.content p { font-size: .975rem; color: #2A3530; line-height: 1.8; margin-bottom: 1.1rem; }
.content ul { padding-left: 1.4rem; margin-bottom: 1.25rem; }
.content li { font-size: .975rem; color: #2A3530; line-height: 1.8; margin-bottom: .4rem; }
.content strong { font-weight: 700; color: var(--text); }
.content a { color: var(--teal); border-bottom: 1px solid var(--teal-pale); }
.content a:hover { border-color: var(--teal); text-decoration: none; }
.divider { height: 1px; background: var(--border); margin: 2rem 0; }
.callout { background: var(--teal-pale); border-left: 4px solid var(--teal); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 1.5rem 0; font-size: .9rem; color: var(--teal); }

/* TOC */
.toc { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin-bottom: 2.5rem; }
.toc-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .9rem; color: var(--text); margin-bottom: 1rem; }
.toc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.toc-list li a { font-size: .875rem; color: var(--muted); border-bottom: none; transition: color .2s; }
.toc-list li a:hover { color: var(--teal); }
.toc-list li::before { content: '→ '; color: var(--teal-pale); }

/* ── THANK YOU ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: 28px; padding: 64px 56px; max-width: 600px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(30,95,95,.08); }
.check-wrap { width: 80px; height: 80px; border-radius: 50%; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; position: relative; }
.check-wrap::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--teal-pale); animation: ring 1.5s ease-out forwards; }
@keyframes ring { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.4);opacity:0} }
.check-icon { font-size: 2rem; animation: popIn .4s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes popIn { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }
.card h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: .75rem; color: var(--text); }
.card .subtitle { font-size: 1.05rem; color: var(--muted); margin-bottom: 2.5rem; line-height: 1.7; }
.next-steps { background: var(--bg2); border-radius: 16px; padding: 28px 32px; text-align: left; margin-bottom: 2rem; }
.next-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 1.25rem; }
.step-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.step-item { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--muted); }
.step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: white; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .72rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.card-divider { height: 1px; background: var(--border); margin: 1.75rem 0; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── 404 ── */
.blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; }
.blob-1 { width: 600px; height: 600px; top: -150px; right: -150px; background: radial-gradient(circle, rgba(45,122,122,.07) 0%, transparent 70%); }
.blob-2 { width: 400px; height: 400px; bottom: -100px; left: -100px; background: radial-gradient(circle, rgba(232,112,90,.06) 0%, transparent 70%); }
.content-404 { text-align: center; max-width: 520px; position: relative; z-index: 1; }
.num-wrap { position: relative; margin-bottom: 2rem; display: inline-block; }
.num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(7rem, 18vw, 11rem); font-weight: 800; color: var(--teal-pale); line-height: 1; letter-spacing: -.04em; user-select: none; }
.num-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.num-icon { font-size: 3rem; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.content-404 h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: .85rem; color: var(--text); }
.content-404 p { font-size: 1rem; color: var(--muted); margin-bottom: 2.25rem; line-height: 1.75; }
.links-label { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.links-row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.link-pill { background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 7px 16px; font-size: .82rem; font-weight: 600; color: var(--muted); transition: border-color .2s, color .2s; }
.link-pill:hover { border-color: var(--teal); color: var(--teal); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .card { padding: 40px 28px; }
  .cta-row { flex-direction: column; }
  .cta-row .btn-primary, .cta-row .btn-ghost { justify-content: center; }
  .cta-row .btn-ghost.outlined { justify-content: center; width: 100%; max-width: 280px; }
}