/* ============================================================
   TEMPLATE: Page Styles
   Scope: thank-you.html and 404.html only
   Architecture: Separate file — loaded via <link rel="stylesheet" href="page-styles.css" />

   PALETTE: Replace hex values in :root with niche palette.
   Keep --success green as-is for the thank-you checkmark.
   ============================================================ */

:root{
  /* PALETTE: Jesup Gravel — deep steel blue / white / teal */
  --primary:#1e3e58;
  --primary-light:#2a556f;
  --primary-mid:#234a65;
  --primary-dark:#122c3e;

  --accent:#2980b9;
  --accent-light:#3498db;
  --accent-gradient:linear-gradient(135deg,var(--accent),var(--accent-light));
  --accent-rgb:41,128,185;

  --header-navy:#0f2438;
  --header-navy-rgb:15,36,56;
  --depth-dark:#0c1e2e;
  --white:#ffffff;

  /* Neutral — keep as-is */
  --gray:#5d6d7e;
  --gray-dark:#2c3e50;
  --text-muted:#7f8c9a;

  /* Success — keep as-is for thank-you checkmark */
  --success:#27ae60;
  --success-light:#2ecc71;

  /* Spacing & radius */
  --radius-md:6px;
  --radius-lg:10px;
  --radius-xl:14px;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--primary-dark);min-height:100vh;display:flex;flex-direction:column;color:var(--gray-dark)}
h1,h2,h3{font-family:'Outfit',sans-serif;font-weight:700}
a{color:inherit;text-decoration:none}

/* ── Minimal header (no nav) ────────────────────────────── */
.site-header{height:68px;display:flex;align-items:center;background:rgba(var(--header-navy-rgb),.95);border-bottom:1px solid rgba(var(--accent-rgb),.15);padding:0 var(--space-lg)}
.site-logo img{height:44px;width:auto}

/* ── Main area ───────────────────────────────────────────── */
main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-lg);background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);position:relative;overflow:hidden}
main::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(var(--accent-rgb),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}

/* ── Back button ─────────────────────────────────────────── */
.back-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-gradient);color:var(--white);font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;padding:.75rem 1.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 14px rgba(var(--accent-rgb),.35);transition:transform .2s ease,box-shadow .2s ease}
.back-btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(var(--accent-rgb),.50)}

/* ── Minimal footer ──────────────────────────────────────── */
footer{background:var(--primary-dark);padding:var(--space-md) var(--space-lg);text-align:center;border-top:1px solid rgba(255,255,255,.06)}
footer p{color:rgba(255,255,255,.35);font-size:.8rem}

/* ── Thank-you card ──────────────────────────────────────── */
.thank-card{position:relative;z-index:1;background:var(--white);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:520px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 80px rgba(0,0,0,.2)}
.check-circle{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--success),var(--success-light));display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-md);animation:pop-in .5s cubic-bezier(.175,.885,.32,1.275)}
@keyframes pop-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.check-circle svg{width:36px;height:36px;color:var(--white)}
.thank-card h1{font-size:1.8rem;color:var(--primary);margin-bottom:var(--space-sm)}
.thank-card h1 span{color:var(--accent)}
.thank-card p{color:var(--gray);font-size:1rem;line-height:1.7;margin-bottom:var(--space-md)}
.thank-card .note{font-size:.875rem;color:var(--text-muted)}
@media(prefers-reduced-motion:reduce){.check-circle{animation:none}}
@media(max-width:480px){.thank-card{padding:var(--space-lg) var(--space-md)}.thank-card h1{font-size:1.5rem}}

/* ── 404 card ────────────────────────────────────────────── */
.card{position:relative;z-index:1;background:var(--white);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:520px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 80px rgba(0,0,0,.2)}
.error-code{font-family:'Outfit',sans-serif;font-weight:700;font-size:5rem;line-height:1;color:var(--accent);margin-bottom:.25rem}
.card h1{font-size:1.6rem;color:var(--primary);margin-bottom:var(--space-sm)}
.card p{color:var(--gray);font-size:1rem;line-height:1.7;margin-bottom:var(--space-md)}
@media(max-width:480px){.card{padding:var(--space-lg) var(--space-md)}.error-code{font-size:4rem}.card h1{font-size:1.4rem}}