/*
Theme Name: School Wallet
Theme URI: https://schoolwalletapp.com
Author: School Wallet
Author URI: https://schoolwalletapp.com
Description: Custom theme for School Wallet — the smart card platform for schools. Built from the School Wallet brand mockup.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schoolwallet
*/

:root{
  --paper:#F7F6F9;
  --paper-2:#FFFFFF;
  --ink:#1B3E70;
  --ink-70:#57648A;
  --gold:#72DCFE;
  --gold-dark:#0E7FA8;
  --teal:#72DCFE;
  --teal-dark:#1B3E70;
  --navy-deep:#0B1F3A;
  --navy-mid:#132C52;
  --line:#E3E2ED;
  --line-strong:#D1D0E1;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-dark);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background:var(--teal-dark);
  display:inline-block;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(114,220,254,0.35);
  background:rgba(114,220,254,0.08);
  color:var(--gold);
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px rgba(114,220,254,0.7);}
.pill-light{border-color:rgba(27,62,112,0.18); background:rgba(27,62,112,0.05); color:var(--ink);}
.pill-light .dot{background:var(--ink);}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;}

/* ---------- HOMEPAGE SLIDER ---------- */
.hw-slider{
  position:relative; width:100%; height:460px; overflow:hidden;
  background:var(--navy-deep);
}
.hw-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .6s ease;
  display:flex; align-items:flex-end;
}
.hw-slide.is-active{opacity:1; z-index:1;}
.hw-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,42,76,0.15) 0%, rgba(16,42,76,0.75) 100%);
}
.hw-slide-content{
  position:relative; z-index:2;
  padding:0 32px 56px; max-width:1160px; margin:0 auto; width:100%;
  color:#fff;
}
.hw-slide-content h2{color:#fff; font-size:34px; max-width:620px; margin-bottom:10px;}
.hw-slide-content p{color:#D9E6F4; font-size:15.5px; max-width:520px; margin-bottom:18px;}
.hw-slider-dots{
  position:absolute; bottom:24px; right:32px; z-index:3;
  display:flex; gap:8px;
}
.hw-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.4); border:none; cursor:pointer; padding:0;
}
.hw-dot.is-active{background:#fff;}
.hw-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  background:rgba(16,42,76,0.45); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hw-arrow:hover{background:rgba(16,42,76,0.75); border-color:rgba(255,255,255,0.6);}
.hw-arrow-prev{left:20px;}
.hw-arrow-next{right:20px;}
@media (max-width:600px){ .hw-arrow{display:none;} }
@media (max-width:880px){
  .hw-slider{height:360px;}
  .hw-slide-content h2{font-size:26px;}
}

/* ---------- MOBILE APP BANNER ---------- */
.app-banner{
  display:none; align-items:center; justify-content:space-between; gap:12px;
  background:var(--navy-deep); color:#fff;
  padding:10px 16px;
}
.app-banner-inner{display:flex; align-items:center; gap:10px; min-width:0;}
.app-banner-icon{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg, rgba(114,220,254,0.25), rgba(255,255,255,0.06));
  display:flex; align-items:center; justify-content:center;
}
.app-banner-icon .mark{width:20px; height:14px;}
.app-banner-text{
  font-size:13px; font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-banner-sub{display:block; font-size:11px; font-weight:400; color:#9FB4D6;}
.app-banner-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.app-banner-btn{padding:8px 14px; font-size:12.5px;}
.app-banner-close{
  background:none; border:none; color:#B9C6DD; font-size:20px; line-height:1;
  cursor:pointer; padding:4px;
}
@media (min-width:881px){ .app-banner{display:none !important;} }

/* ---------- PHOTO GRID (coded-template mode) ---------- */
.photo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.photo-card{border-radius:18px; overflow:hidden; box-shadow:0 20px 40px -24px rgba(19,33,58,0.35);}
.photo-card img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .35s ease;}
.photo-card:hover img{transform:scale(1.035);}
@media (max-width:880px){ .photo-grid{grid-template-columns:1fr; gap:18px;} }

/* ---------- PHOTO GRID (Home-page native block mode) ---------- */
.sw-photos-heading{font-size:32px; color:var(--ink); max-width:700px; margin:90px auto 14px !important; padding-left:32px; padding-right:32px; text-align:center;}
.sw-photos-subtext{color:var(--ink-70); font-size:15.5px; max-width:560px; margin:0 auto 40px !important; padding-left:32px; padding-right:32px; text-align:center;}
.sw-photo-grid{max-width:1160px; margin:0 auto !important; padding:0 32px 90px; gap:24px !important;}
.sw-photo-grid .wp-block-column{flex:1 1 33% !important;}
.sw-photo-card{margin:0; border-radius:18px; overflow:hidden; box-shadow:0 20px 40px -24px rgba(19,33,58,0.35);}
.sw-photo-card img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:18px; transition:transform .35s ease;}
.sw-photo-card:hover img{transform:scale(1.035);}
@media (max-width:880px){ .sw-photo-grid{flex-direction:column !important;} }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,246,249,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:1160px; margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif; font-weight:600; font-size:19px;
  color:var(--ink);
}
.logo .mark{
  width:28px; height:20px; border-radius:5px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.logo .mark::after{
  content:""; position:absolute; left:4px; top:5px;
  width:8px; height:6px; border-radius:2px;
  background:rgba(255,255,255,0.55);
}
.logo-uploaded{gap:0;}
.logo-uploaded img{max-height:40px; width:auto;}
.footer-brand .logo-uploaded img{max-height:34px;}
.navlinks{display:flex; gap:34px; font-size:14.5px; font-weight:500; color:var(--ink-70);}
.navlinks li{display:inline;}
.navlinks a:hover{color:var(--ink);}
.navcta{display:flex; align-items:center; gap:20px;}
.nav-collapse{
  display:flex; align-items:center; justify-content:space-between;
  flex:1; margin-left:48px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:600;
  border:1px solid var(--ink);
  transition:all .18s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{background:var(--ink); color:var(--paper-2); border-color:var(--ink);}
.btn-primary:hover{background:var(--teal-dark); border-color:var(--teal-dark);}
.btn-glow{background:linear-gradient(135deg, var(--gold) 0%, #4FC7EE 100%); color:var(--navy-deep); border-color:transparent; box-shadow:0 8px 24px -8px rgba(114,220,254,0.6);}
.btn-glow:hover{box-shadow:0 10px 30px -6px rgba(114,220,254,0.85);}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent;}
.btn-ghost:hover{border-color:var(--ink);}
.link-quiet{font-size:14.5px; font-weight:600; color:var(--ink-70);}

/* ---------- HERO ---------- */
.hero{padding:88px 0 60px;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:56px; align-items:center;
}
.hero h1{
  font-size:56px; line-height:1.04; color:var(--ink);
  margin-bottom:22px;
}
.hero h1 em{
  font-style:italic; color:var(--teal-dark);
}
.hero p.lead{
  font-size:18px; color:var(--ink-70); max-width:460px; margin-bottom:32px;
}
.hero-ctas{display:flex; align-items:center; gap:22px; margin-bottom:40px;}
.trust-line{
  display:flex; align-items:center; gap:14px;
  font-size:13.5px; color:var(--ink-70);
}
.stars{color:var(--gold-dark); font-size:14px; letter-spacing:1px;}

/* card art */
.card-stage{
  position:relative; height:440px;
  display:flex; align-items:center; justify-content:center;
}
.smart-card{
  width:340px; height:214px;
  border-radius:18px;
  background:linear-gradient(155deg, #23508F 0%, #1B3E70 55%, #0F2648 100%);
  position:relative;
  transform:rotate(-9deg) translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(19,33,58,0.45), 0 10px 25px -10px rgba(19,33,58,0.35);
  padding:22px 24px;
  color:#fff;
  overflow:hidden;
}
.smart-card::before{
  content:"";
  position:absolute; top:-40%; right:-30%;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(114,220,254,0.30) 0%, rgba(114,220,254,0) 70%);
}
.card-top{display:flex; align-items:center; justify-content:space-between;}
.chip{
  width:38px; height:28px; border-radius:6px;
  background:linear-gradient(135deg, #E3F6FD, #72DCFE);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  position:relative;
}
.chip::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(19,33,58,0.35); border-radius:3px;
}
.nfc{
  width:22px; height:22px; opacity:0.85;
}
.card-mid{margin-top:30px;}
.card-name{font-family:'Fraunces', serif; font-size:20px; font-weight:500; letter-spacing:0.01em;}
.card-role{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; color:#B9C2D6; margin-top:4px; text-transform:uppercase;}
.card-bottom{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:26px;
}
.card-id{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; color:#D9DEE9;}
.card-balance{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--gold);
}
.ripple{
  position:absolute;
  width:80px; height:80px; border-radius:50%;
  border:1px solid rgba(114,220,254,0.7);
  top:56%; left:78%;
  transform:translate(-50%,-50%) scale(0.3);
  opacity:0;
  animation: ripple 3.2s ease-out infinite;
}
.ripple.r2{animation-delay:0.5s;}
.ripple.r3{animation-delay:1s;}
@keyframes ripple{
  0%{transform:translate(-50%,-50%) scale(0.3); opacity:0.55;}
  80%{opacity:0;}
  100%{transform:translate(-50%,-50%) scale(2.1); opacity:0;}
}
.float-tag{
  position:absolute;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  box-shadow:0 14px 28px -14px rgba(19,33,58,0.25);
  font-size:13px;
}
.tag-topup{top:14px; left:-6px;}
.tag-topup .amt{font-family:'IBM Plex Mono', monospace; font-weight:500; color:var(--teal-dark); font-size:15px;}
.tag-gate{bottom:26px; right:-14px; display:flex; align-items:center; gap:10px;}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px rgba(114,220,254,0.45);}

.card-photo{
  width:340px; border-radius:18px;
  transform:rotate(-9deg) translateY(-6px);
  box-shadow: 0 30px 60px -20px rgba(19,33,58,0.45), 0 10px 25px -10px rgba(19,33,58,0.35);
}
@media (max-width:880px){ .card-photo{width:280px;} }

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:40px;}
  .card-stage{height:320px;}
  .smart-card{width:280px; height:176px;}
}

/* ---------- MOBILE MENU ---------- */
.menu-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; border:none; background:transparent; cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.is-open span:nth-child(2){opacity:0;}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 880px){
  .menu-toggle{display:flex;}
  .nav-collapse{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    margin-left:0; flex:none;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    padding:8px 32px 24px;
    box-shadow:0 16px 24px -16px rgba(19,33,58,0.2);
  }
  .nav-collapse.is-open{display:block;}
  .nav-collapse .navlinks{
    display:flex; flex-direction:column; gap:2px; margin-top:8px;
  }
  .nav-collapse .navlinks a{
    display:block; padding:12px 0; border-bottom:1px solid var(--line);
  }
  .nav-collapse .navcta{
    flex-direction:column; align-items:stretch; gap:10px; margin-top:16px;
  }
  .nav-collapse .navcta .btn, .nav-collapse .navcta .link-quiet{
    width:100%; justify-content:center; text-align:center;
  }
}

/* ---------- TRUST STRIP ---------- */
.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:30px 0;
}
.trust-strip .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.trust-label{font-size:13px; color:var(--ink-70); font-weight:600; white-space:nowrap;}
.trust-logos{
  display:flex; gap:38px; flex-wrap:wrap; align-items:center;
  font-family:'Fraunces', serif; font-size:16px; color:var(--ink-70); opacity:0.75;
}

/* ---------- FEATURES ---------- */
.section{padding:100px 0;}
.section-head{max-width:560px; margin-bottom:56px;}
.section-head h2{font-size:36px; margin-top:14px; color:var(--ink);}
.section-head p{color:var(--ink-70); font-size:16.5px; margin-top:14px;}

.feature-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.feature-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px;
  padding:30px 24px; min-height:220px;
  display:flex; flex-direction:column; gap:16px;
  position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  border-color:rgba(114,220,254,0.5);
  box-shadow:0 20px 40px -20px rgba(27,62,112,0.25), 0 0 0 1px rgba(114,220,254,0.15);
}
.feature-card .idx{
  position:absolute; top:22px; right:22px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--line-strong);
}
.feature-icon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(114,220,254,0.22), rgba(27,62,112,0.10)); color:var(--ink);
  position:relative;
}
.feature-icon::after{content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(114,220,254,0.35);}
.feature-card h3{font-size:17px; font-weight:600; font-family:'Manrope', sans-serif; color:var(--ink);}
.feature-card p{font-size:14.5px; color:var(--ink-70);}

@media (max-width: 880px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- HOW IT WORKS (connecting-line steps) ---------- */
.how{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.how-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:20px;
}
.how-grid::before{
  content:""; position:absolute; top:23px; left:calc(100%/6); right:calc(100%/6);
  height:1px; background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
  z-index:0;
}
.how-step{position:relative; padding:0 20px;}
.how-step:first-child{padding-left:0;}
.how-step:last-child{padding-right:0;}
.how-num{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:500; color:#fff;
  background:linear-gradient(135deg, var(--ink), var(--navy-mid));
  box-shadow:0 0 0 6px var(--paper-2), 0 8px 18px -8px rgba(27,62,112,0.5);
  margin-bottom:20px; position:relative; z-index:1;
}
.how-step h3{font-size:19px; margin-bottom:10px; color:var(--ink);}
.how-step p{font-size:14.5px; color:var(--ink-70);}
@media (max-width:880px){
  .how-grid{grid-template-columns:1fr; gap:36px;}
  .how-grid::before{display:none;}
  .how-step{padding:0 !important;}
}

/* ---------- STATS ---------- */
.stats-band{
  background:var(--ink); color:var(--paper);
  padding:76px 0;
}
.stats-band .eyebrow{color:var(--gold);}
.stats-band .eyebrow::before{background:var(--gold);}
.stats-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:38px;
}
.stat-num{
  font-family:'Fraunces', serif; font-size:52px; font-weight:500; color:#fff;
}
.stat-label{font-size:14px; color:#AEB6C9; margin-top:8px;}
@media (max-width:880px){.stats-grid{grid-template-columns:1fr; gap:32px;}}

/* ---------- TRUST / SECURITY BAND ---------- */
.trust-band{
  position:relative; overflow:hidden;
  background:var(--navy-deep); color:#fff; padding:88px 0;
}
.trust-band::before{
  content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(114,220,254,0.16) 0%, rgba(114,220,254,0) 70%);
}
.trust-head{position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto 20px;}
.trust-band .eyebrow{color:var(--gold); justify-content:center;}
.trust-band .eyebrow::before{background:var(--gold);}
.trust-head h2{color:#fff; font-size:34px; margin-top:14px;}
.trust-head p{color:#AFC2DE; font-size:15.5px; margin-top:14px;}
.trust-status{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 auto 56px; width:fit-content;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  padding:8px 16px; border-radius:999px;
  border:1px solid rgba(114,220,254,0.3); background:rgba(114,220,254,0.06); color:#D7ECF9;
}
.trust-status .live-dot{
  width:7px; height:7px; border-radius:50%; background:#5FE39C; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(95,227,156,0.25);
  animation:trust-pulse 2s ease-in-out infinite;
}
@keyframes trust-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(95,227,156,0.25);}
  50%{box-shadow:0 0 0 6px rgba(95,227,156,0.12);}
}
.trust-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.trust-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px; padding:28px 22px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.trust-card:hover{border-color:rgba(114,220,254,0.4); background:rgba(255,255,255,0.06); transform:translateY(-3px);}
.trust-card .trust-icon{
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(114,220,254,0.22), rgba(255,255,255,0.04));
  color:var(--gold); margin-bottom:16px;
}
.trust-card .trust-num{font-family:'Fraunces', serif; font-size:28px; color:#fff; margin-bottom:4px;}
.trust-card h3{font-size:15.5px; font-weight:700; font-family:'Manrope', sans-serif; color:#fff; margin-bottom:8px;}
.trust-card p{font-size:13.5px; color:#AFC2DE; line-height:1.55;}
@media (max-width:880px){
  .trust-grid{grid-template-columns:1fr 1fr; gap:14px;}
}
@media (max-width:560px){
  .trust-grid{grid-template-columns:1fr;}
}

/* ---------- TESTIMONIAL ---------- */
.testimonial{padding:100px 0; text-align:center;}
.testimonial blockquote{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:30px; line-height:1.35; color:var(--ink);
  max-width:760px; margin:0 auto 28px;
}
.testimonial .quoter{font-size:14.5px; color:var(--ink-70); font-weight:600;}
.testimonial .quoter span{font-weight:400; color:var(--ink-70);}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:var(--navy-deep); color:#fff;
  border-radius:24px; margin:0 32px 100px; padding:70px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  max-width:1096px; margin-left:auto; margin-right:auto;
}
.cta-band h2{color:#fff; font-size:34px; max-width:440px;}
.cta-band p{color:#BFE1F5; margin-top:12px; font-size:15px; max-width:400px;}
.cta-actions{display:flex; gap:14px; flex-shrink:0;}
.btn-light{background:#fff; color:var(--teal-dark); border-color:#fff;}
.btn-light:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);}
.btn-outline-light{border-color:rgba(255,255,255,0.4); color:#fff;}
.btn-outline-light:hover{border-color:#fff;}
@media (max-width:880px){
  .cta-band{flex-direction:column; align-items:flex-start; padding:44px 30px; margin:0 20px 70px;}
}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--line); padding:60px 0 40px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand p{font-size:14px; color:var(--ink-70); margin-top:14px; max-width:260px;}
.footer-social{display:flex; align-items:center; gap:10px; margin-top:18px;}
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background:rgba(114,220,254,0.12); color:var(--ink);
  margin-bottom:0; transition:background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover{background:var(--ink); color:#fff; transform:translateY(-2px);}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-70); margin-bottom:16px; font-weight:600;}
.footer-col a{display:block; font-size:14.5px; color:var(--ink); margin-bottom:11px;}
.footer-col a:hover{color:var(--teal-dark);}
.footer-partners{
  margin-top:48px; padding-top:36px; border-top:1px solid var(--line);
  text-align:center;
}
.footer-partners h4{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-70); margin-bottom:22px; font-weight:600;}
.footer-partners-row{
  display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:14px;
}
.partner-chip{
  display:flex; align-items:center; justify-content:center;
  width:136px; height:64px; padding:10px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--paper-2);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.partner-chip:hover{
  border-color:rgba(114,220,254,0.55);
  box-shadow:0 10px 22px -14px rgba(19,33,58,0.3);
  transform:translateY(-2px);
}
.partner-chip img{
  max-width:96px; max-height:30px; width:auto; height:auto; display:block;
  filter:grayscale(1); opacity:0.6;
  transition:filter .2s ease, opacity .2s ease;
}
.partner-chip:hover img{filter:grayscale(0); opacity:1;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:56px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-70); flex-wrap:wrap; gap:12px;
}
.footer-disclaimer{max-width:900px; margin:18px auto 0; text-align:center; font-size:12px; line-height:1.6; color:var(--ink-70); opacity:0.8;}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}}

/* ---------- BLOG / INNER PAGE FALLBACK ---------- */
.content-area{padding:0 0 90px;}
.content-area article{margin-bottom:0;}
.content-area h1.page-title{font-size:38px; margin-bottom:24px; color:var(--ink);}
.content-area .entry-title{font-size:26px; margin-bottom:10px;}
.content-area .entry-title a{color:var(--ink);}
.content-area .entry-meta{font-size:13px; color:var(--ink-70); margin-bottom:14px; font-family:'IBM Plex Mono', monospace;}
/* Only constrain actual prose elements to reading width — full-bleed
   blocks (wp:html sections like page-hero, feature-grid, faq-list)
   are direct children too but are div/section tags, so they're
   untouched here and instead manage their own width via .wrap or
   their own max-width, letting hero/banner backgrounds reach full
   browser width. */
.content-area .entry-content > h2,
.content-area .entry-content > h3,
.content-area .entry-content > h4,
.content-area .entry-content > p,
.content-area .entry-content > ul,
.content-area .entry-content > ol,
.content-area .entry-content > blockquote{
  max-width:760px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; box-sizing:border-box;
}
.content-area .entry-content h2{font-size:28px; margin-top:44px; margin-bottom:16px; color:var(--ink);}
.content-area .entry-content h3{font-size:21px; margin-top:34px; margin-bottom:12px; color:var(--ink);}
.content-area .entry-content h4{font-size:17px; margin-top:26px; margin-bottom:8px; color:var(--ink); font-family:'Manrope',sans-serif; font-weight:700;}
.content-area .entry-content > h2:first-child,
.content-area .entry-content > h3:first-child{margin-top:64px;}
.content-area .entry-content p{font-size:16px; color:var(--ink-70); margin-bottom:16px;}
.content-area .entry-content ul, .content-area .entry-content ol{margin-bottom:20px; color:var(--ink-70); font-size:16px;}
.content-area .entry-content li{margin-bottom:8px;}
.content-area .entry-content a{color:var(--gold-dark); text-decoration:underline; text-underline-offset:2px;}
.content-area .entry-content strong{color:var(--ink);}
.content-area .entry-content li{margin-bottom:10px; padding-left:22px; position:relative; list-style:none;}
.content-area .entry-content li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg, var(--gold), var(--gold-dark)); transform:rotate(45deg);}

/* ---------- INNER PAGE HERO BANNER ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
  background-color:var(--navy-deep);
  color:#fff; padding:96px 0 84px; text-align:center; margin-bottom:20px;
}
.page-hero::before{
  content:""; position:absolute; top:-140px; right:-100px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(114,220,254,0.35) 0%, rgba(114,220,254,0) 70%);
  filter:blur(10px); z-index:0;
}
.page-hero::after{
  content:""; position:absolute; bottom:-160px; left:-80px;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(79,199,238,0.22) 0%, rgba(79,199,238,0) 70%);
  filter:blur(10px); z-index:0;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero .pill{margin-bottom:20px;}
.page-hero .eyebrow{color:var(--gold); justify-content:center;}
.page-hero .eyebrow::before{background:var(--gold);}
.page-hero h1{color:#fff; font-size:46px; line-height:1.08; margin-top:14px; max-width:720px; margin-left:auto; margin-right:auto;}
.page-hero h1 .accent{
  background:linear-gradient(120deg, var(--gold) 0%, #E9F8FF 60%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero p{color:#AFC2DE; font-size:16.5px; max-width:560px; margin:16px auto 0;}
@media (max-width:880px){ .page-hero h1{font-size:32px;} }

/* ---------- FAQ ACCORDION ---------- */
.faq-list{max-width:760px; margin:0 auto 8px; padding:0 32px; display:flex; flex-direction:column; gap:12px;}
.faq-list details{
  border:1px solid var(--line); border-radius:14px; padding:20px 24px;
  background:var(--paper-2); transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-list details[open]{border-color:rgba(114,220,254,0.6); box-shadow:0 12px 30px -18px rgba(27,62,112,0.3);}
.faq-list summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Fraunces', serif; font-size:17.5px; color:var(--ink);
  font-weight:500;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+"; font-family:'Manrope',sans-serif; font-size:18px; color:var(--gold-dark);
  flex-shrink:0; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:rgba(114,220,254,0.14); transition:transform .2s ease;
}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list .faq-answer{color:var(--ink-70); font-size:15.5px; margin-top:14px; max-width:640px;}
.faq-group-title{max-width:760px; margin:52px auto 14px; padding:0 32px;}
.faq-group-title:first-of-type{margin-top:0;}

/* ---------- CAREER ROLE CARD ---------- */
.role-card{
  max-width:760px; margin:0 auto 24px; padding:28px 32px;
  border:1px solid var(--line); border-radius:16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.role-card h3{font-size:18px; color:var(--ink); margin-bottom:4px;}
.role-card p{font-size:14px; color:var(--ink-70);}

/* ---------- STAT PULL (Why School Wallet) ---------- */
.stat-pull-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  max-width:760px; margin:0 auto 48px;
}
.stat-pull{
  background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  border-radius:16px; padding:30px 20px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.stat-pull::after{content:""; position:absolute; top:-40%; right:-30%; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(114,220,254,0.35), transparent 70%);}
.stat-pull .num{font-family:'Fraunces', serif; font-size:34px; color:var(--gold); position:relative; z-index:1;}
.stat-pull .label{font-size:12.5px; color:#B9C9E4; margin-top:8px; position:relative; z-index:1;}
@media (max-width:880px){ .stat-pull-row{grid-template-columns:1fr;} }

/* ---------- CONTACT PAGE ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:900px; margin:0 auto 60px;}
.contact-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:28px 22px; text-align:center;
  transition:transform .2s ease, border-color .2s ease;
}
.contact-card:hover{transform:translateY(-3px); border-color:rgba(114,220,254,0.5);}
.contact-card .ic{
  width:42px; height:42px; margin:0 auto 16px; border-radius:12px;
  background:linear-gradient(135deg, rgba(114,220,254,0.25), rgba(27,62,112,0.10));
  display:flex; align-items:center; justify-content:center; color:var(--ink); position:relative;
}
.contact-card .ic::after{content:""; position:absolute; inset:0; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(114,220,254,0.35);}
.contact-card h3{font-size:15px; margin-bottom:6px; font-family:'Manrope',sans-serif; font-weight:700;}
.contact-card p{font-size:14px; color:var(--ink-70); margin:0;}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr;} }

.contact-form{
  max-width:580px; margin:0 auto; border-radius:20px; padding:2px;
  background:linear-gradient(135deg, rgba(114,220,254,0.5), rgba(27,62,112,0.15));
}
.contact-form-inner{background:var(--paper-2); border-radius:18px; padding:34px;}
.contact-form label{display:block; font-size:12.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-70); margin-bottom:7px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 15px; border:1px solid var(--line-strong); border-radius:10px;
  font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--ink); margin-bottom:18px; background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:hover, .contact-form input:focus, .contact-form textarea:hover, .contact-form textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(114,220,254,0.15); outline:none;
}
.contact-form textarea{resize:vertical; min-height:110px;}
.contact-form .btn{width:100%; justify-content:center;}
.contact-note{max-width:560px; margin:18px auto 0; font-size:13px; color:var(--ink-70); text-align:center;}

/* ---------- BLOG GRID ---------- */
.blog-grid{
  max-width:1160px; margin:0 auto; padding:0 32px 90px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.blog-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--paper-2); display:flex; flex-direction:column;
}
.blog-card .thumb{
  width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--line);
}
.blog-card .thumb-fallback{
  width:100%; aspect-ratio:16/10;
  background:linear-gradient(135deg, #23508F 0%, #1B3E70 60%, #0F2648 100%);
}
.blog-card-body{padding:22px 22px 26px; flex:1; display:flex; flex-direction:column;}
.blog-card .cat{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:10px;}
.blog-card h3{font-size:18px; margin-bottom:8px;}
.blog-card h3 a{color:var(--ink);}
.blog-card p{font-size:14px; color:var(--ink-70); flex:1;}
.blog-card .meta{font-size:12.5px; color:var(--ink-70); margin-top:14px; font-family:'IBM Plex Mono', monospace;}
@media (max-width:880px){ .blog-grid{grid-template-columns:1fr;} }
.blog-empty{max-width:600px; margin:0 auto 90px; padding:0 32px; text-align:center; color:var(--ink-70);}