/* Play4Health shared styles. The home page is the reference: tokens, nav,
   buttons, section titles and footer below are its rules, used by every page. */
:root {
  --bg:#f7f8fc;--bg2:#eef3fb;--bg3:#ffffff;
  --ink:#0e1b2e;--ink-mid:#2d4263;--ink-light:#5a7099;
  --blue:#2563eb;--blue-dark:#1d4ed8;
  --blue-pale:#dbeafe;--blue-faint:#eff6ff;
  --teal:#0d9488;--teal-pale:#ccfbf1;
  --green:#16a34a;
  --border:rgba(37,99,235,0.1);--border-dark:rgba(14,27,46,0.08);
  --sans:'DM Sans',sans-serif;--radius:16px;
  --max-w:1200px;--gutter:clamp(24px,5vw,80px);
  /* type scale: h1 and h2 as on the home page (400), h3 and card titles bold */
  --fs-h1:clamp(2.2rem,4.2vw,3.5rem);
  --fs-h2:clamp(2rem,3.6vw,3rem);
  --fs-h3:1.25rem;
  --fs-card:1rem;
  --fs-body:1rem;
  --fs-small:0.85rem;
  --fs-xs:0.78rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);overflow-x:hidden;}
.section-inner{max-width:var(--max-w);margin:0 auto;width:100%;}

nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:rgba(247,248,252,0.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:background 0.3s;}
.nav-logo{font-size:1.15rem;font-weight:500;color:var(--ink);text-decoration:none;}
.nav-logo span{color:var(--blue);}
.nav-links{display:flex;list-style:none;gap:28px;align-items:center;}
.nav-links a{font-size:0.875rem;font-weight:500;color:var(--ink-light);text-decoration:none;transition:color 0.2s;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{background:var(--blue)!important;color:white!important;padding:9px 20px;border-radius:24px;font-weight:600!important;}
.nav-cta:hover{background:var(--blue-dark)!important;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:501;background:none;border:none;}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all 0.3s;transform-origin:center;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:499;padding:96px 6% 48px;flex-direction:column;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-link{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:1.4rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border);}
.mobile-menu-link .arrow{color:var(--blue);opacity:0.5;}
.mobile-menu-cta{margin-top:32px;display:block;background:var(--blue);color:white;text-align:center;padding:18px 28px;border-radius:40px;font-size:1rem;font-weight:600;text-decoration:none;}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:0.6;}50%{opacity:1;}}

.btn-primary{background:var(--blue);color:white;padding:14px 32px;border-radius:32px;font-size:0.95rem;font-weight:600;text-decoration:none;transition:all 0.2s;box-shadow:0 4px 20px rgba(37,99,235,0.3);display:inline-block;}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);}
.btn-large{padding:16px 40px!important;font-size:1rem!important;border-radius:40px!important;}
.btn-ghost{color:var(--ink-light);font-size:0.9rem;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:8px;transition:color 0.2s;}
.btn-ghost:hover{color:var(--blue);}
.btn-ghost .arr{transition:transform 0.2s;}
.btn-ghost:hover .arr{transform:translateX(4px);}
.btn-outline{color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.2);padding:16px 40px;border-radius:40px;font-size:0.93rem;font-weight:500;text-decoration:none;display:inline-block;transition:all 0.2s;}
.btn-outline:hover{border-color:#93c5fd;color:#93c5fd;}

section{padding:100px var(--gutter);}
.section-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--blue-faint);border:1px solid rgba(37,99,235,0.15);color:var(--blue);font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:16px;}
.section-title{font-size:clamp(2rem,3.6vw,3rem);font-weight:400;line-height:1.1;letter-spacing:-0.02em;margin-bottom:20px;color:var(--ink);}
.section-title em{color:var(--blue);font-style:normal;}
.section-sub{font-size:1.05rem;color:var(--ink-light);line-height:1.75;max-width:620px;}
.note{margin-top:28px;font-size:0.78rem;color:rgba(14,27,46,0.42);line-height:1.7;max-width:820px;}

footer{background:#0a1628;border-top:1px solid rgba(255,255,255,0.06);padding:64px var(--gutter) 40px;}
.footer-grid{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px;}
.footer-logo{font-size:1.1rem;font-weight:500;color:white;text-decoration:none;display:block;margin-bottom:12px;}
.footer-logo span{color:#93c5fd;}
.footer-tagline{font-size:0.83rem;color:rgba(255,255,255,0.4);line-height:1.65;max-width:290px;margin-bottom:20px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:34px;height:34px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4);text-decoration:none;font-size:0.78rem;font-weight:700;transition:all 0.2s;}
.social-btn:hover{border-color:#93c5fd;color:#93c5fd;}
.footer-col h5{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:0.86rem;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;}
.footer-col ul li a:hover{color:#93c5fd;}
.footer-bottom{max-width:var(--max-w);margin:0 auto;border-top:1px solid rgba(255,255,255,0.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:0.78rem;color:rgba(255,255,255,0.25);}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{font-size:0.75rem;color:rgba(255,255,255,0.25);text-decoration:none;transition:color 0.2s;}
.footer-legal a:hover{color:rgba(255,255,255,0.5);}

a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}html{scroll-behavior:auto;}}

/* ===== INNER PAGES (same background, title and card type as the home page) ===== */
.page-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 65% 55% at 72% 25%,rgba(37,99,235,0.1) 0%,transparent 60%),radial-gradient(ellipse 45% 45% at 15% 75%,rgba(13,148,136,0.1) 0%,transparent 55%),var(--bg);}
.page-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(37,99,235,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,0.04) 1px,transparent 1px);background-size:56px 56px;}
.page-hero{max-width:var(--max-w);margin:0 auto;padding:140px var(--gutter) 48px;animation:fadeUp 0.7s ease 0.1s both;}
.page-hero h1{font-size:var(--fs-h1);font-weight:400;line-height:1.1;letter-spacing:-0.03em;margin-bottom:20px;color:var(--ink);max-width:860px;}
.page-hero h1 em{color:var(--blue);font-style:normal;}
.page-lead{font-size:1.05rem;color:var(--ink-light);line-height:1.75;max-width:620px;}
.page-body{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter) 96px;}

/* ===== COOKIE CHOICE (site.js; below the mobile menu, never over the nav) ===== */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:498;max-width:760px;margin:0 auto;display:flex;align-items:center;gap:20px;background:#0a1628;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:18px 22px;box-shadow:0 12px 40px rgba(14,27,46,0.3);font-family:var(--sans);font-size:16px;}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{flex:1;font-size:0.88em;line-height:1.6;color:rgba(255,255,255,0.75);}
.cookie-banner a{color:#93c5fd;font-weight:600;}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-actions .btn-outline{background:none;cursor:pointer;font-family:var(--sans);font-size:0.9em;font-weight:600;padding:11px 24px;min-width:104px;min-height:44px;}

@media(max-width:1200px){.nav-links{gap:20px;}.nav-links a{font-size:0.82rem;}}
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px;}}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-hamburger{display:flex;}
  .mobile-menu{display:flex;}
  section{padding:72px var(--gutter);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-grid>div:first-child{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .page-hero{padding:112px var(--gutter) 40px;}}
@media(max-width:480px){
  section{padding:60px var(--gutter);}
  .footer-grid{grid-template-columns:1fr;}}
@media(max-width:600px){
  .cookie-banner{left:0;right:0;bottom:0;border-radius:16px 16px 0 0;flex-direction:column;align-items:stretch;gap:14px;padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom));}
  .cookie-actions .btn-outline{flex:1;}}