:root{
  --navy:#0f2a4a; --navy-dark:#0a1f38; --navy-2:#16406b;
  --gold:#c9a227; --gold-dark:#a9861a; --gold-soft:#e6cf7a;
  /* Text that sits ON the accent. Overridden per school by App\Core\Theme. */
  --on-accent:#0a1f38; --on-accent-dark:#ffffff;
  --bg:#f4f7fb; --surface:#ffffff; --text:#1c2733; --muted:#5b6b7c; --border:#e3e9f0;
}
*{box-sizing:border-box}
body{font-family:'Public Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);margin:0}
h1,h2,h3,h4,.navbar-brand{font-family:'Sora',sans-serif;letter-spacing:-.01em}
main{min-height:60vh}
a{color:var(--navy-2)}

/* Buttons */
.mjp-btn-primary{background:var(--gold);border:none;color:var(--on-accent);font-weight:600;
  display:inline-flex;align-items:center;gap:.45rem;border-radius:.6rem;padding:.6rem 1.1rem}
.mjp-btn-primary:hover{background:var(--gold-dark);color:var(--on-accent-dark)}
.mjp-btn-outline{border:1px solid rgba(255,255,255,.55);color:#fff;background:transparent;
  display:inline-flex;align-items:center;gap:.4rem;border-radius:.6rem;font-weight:600}
.mjp-btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}

/* Navbar */
.mjp-navbar{background:var(--navy);box-shadow:0 2px 12px rgba(10,31,56,.18)}
.mjp-navbar .nav-link{color:rgba(255,255,255,.85);font-weight:500}
.mjp-navbar .nav-link:hover{color:#fff}
.mjp-navbar .navbar-toggler{border-color:rgba(255,255,255,.3)}
.mjp-navbar .navbar-toggler-icon{filter:invert(1) grayscale(1) brightness(1.6)}
/* Collapsed navbar (below the expand breakpoint): the links become a stack
   inside the navy bar, so they need their own spacing and a divider. */
.mjp-navbar .navbar-collapse.show,
.mjp-navbar .navbar-collapse.collapsing{padding:.5rem 0 .75rem}
.mjp-navbar .navbar-collapse.show .nav-link,
.mjp-navbar .navbar-collapse.collapsing .nav-link{padding:.5rem .25rem}
.mjp-navbar .navbar-collapse.show .nav-item:last-child,
.mjp-navbar .navbar-collapse.collapsing .nav-item:last-child{margin-top:.6rem;padding-top:.6rem;
  border-top:1px solid rgba(255,255,255,.18)}
.mjp-brand-text{color:#fff;font-weight:700;font-size:1.15rem}
.mjp-mark{display:block;width:34px;height:34px;border-radius:9px}
/* A school's uploaded logo keeps the header height but its own aspect ratio. */
.mjp-mark.mjp-mark-logo{width:auto;max-width:190px;border-radius:0;object-fit:contain}
/* The footer lives in /assets/css/shell.css — one footer for all three layouts. */
.mjp-login-logo .mjp-mark{width:60px;height:60px;border-radius:14px}
.mjp-login-logo .mjp-mark.mjp-mark-logo{width:auto;max-width:100%;border-radius:0}
.mjp-brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--gold);color:var(--on-accent);font-size:1rem}

/* Hero */
.mjp-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:4rem 0}
.mjp-eyebrow{display:inline-block;color:var(--gold-soft);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.78rem;margin-bottom:.6rem}
.mjp-hero-title{font-size:2.5rem;font-weight:700;line-height:1.1;margin-bottom:1rem}
.mjp-hero-lead{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:36rem;margin-bottom:1.6rem}
.mjp-deadline{color:var(--gold-soft);font-size:.95rem}

/* Cards & sections */
.mjp-section{padding:3.5rem 0}
.mjp-card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;
  padding:1.75rem;box-shadow:0 6px 24px rgba(15,42,74,.06)}
.mjp-card-title{font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--navy)}
.mjp-req-card{background:#fff}
.mjp-req-list{list-style:none;padding:0;margin:0}
.mjp-req-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px dashed var(--border);color:var(--text)}
.mjp-req-list li:last-child{border-bottom:none}
.mjp-req-list i{color:var(--gold-dark);font-size:1.05rem}

.mjp-step{text-align:center;padding:1rem}
.mjp-step-num{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;
  display:grid;place-items:center;margin:0 auto .8rem;font-family:'Sora',sans-serif}
.mjp-step h3{font-size:1.05rem;font-weight:600}
.mjp-step p{color:var(--muted);font-size:.95rem}

/* Forms */
.mjp-page-intro{margin-bottom:1.5rem}
.mjp-h1{font-size:2rem;font-weight:700;color:var(--navy)}
.mjp-form-section{padding:1.25rem 0;border-top:1px solid var(--border)}
.mjp-form-section:first-of-type{border-top:none;padding-top:.25rem}
.mjp-form-legend{font-size:1rem;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.mjp-form-legend i{color:var(--gold-dark)}
.mjp-rank-pill{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:#fff;font-weight:600;font-size:.85rem}
.mjp-form .form-label{font-weight:500;font-size:.9rem}
.mjp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Thanks */
.mjp-thanks-icon{font-size:3.2rem;color:#1f8a54;margin-bottom:.5rem}
.mjp-thanks .mjp-card-title{justify-content:center}

/* Sign-in / magic-link card (judge portal login) */
.mjp-login-bg{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%)}
.mjp-login-card{background:#fff;border-radius:1rem;padding:2.25rem;width:100%;max-width:420px;
  box-shadow:0 20px 50px rgba(10,31,56,.35)}
.mjp-login-logo{width:60px;height:60px;border-radius:14px;background:transparent;color:var(--navy-dark);
  display:grid;place-items:center;font-size:1.7rem;margin:0 auto 1rem}
.mjp-login-title{text-align:center;font-size:1.3rem;font-weight:700;color:var(--navy);margin:0}
.mjp-login-sub{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.mjp-login-back{color:var(--navy-2);text-decoration:none}

@media (max-width:768px){.mjp-hero-title{font-size:2rem}.mjp-hero{padding:2.5rem 0}}

/* Bootstrap's `g-5` sets --bs-gutter-x:3rem on the ROW only, so the row's -24px
   side margins outrun the container's 12px padding and the page scrolls sideways
   on a phone — 12px of nothing, but it makes a site feel broken. (The school home
   page had this before the marketing page existed.) Matching the gutter on any
   container that actually holds such a row nets it back to zero. */
.container:has(> .row.g-5){--bs-gutter-x:3rem}

/* ── Apex marketing page (app/Views/platform/marketing.php) ──────────────────
   Built on the same tokens as the school sites, so the page a coach is sold on
   looks like the product they get. */
.mjp-section-alt{background:#eaf0f8}
.mjp-hero-note{color:var(--gold-soft);font-size:.92rem}

.mjp-feature + .mjp-feature{margin-top:3.5rem}
.mjp-feature-title{font-family:'Sora',sans-serif;font-size:1.35rem;font-weight:600;color:var(--navy);margin-bottom:.6rem}

/* The screenshots are tall full-page captures shared with the Guide. Cropping
   them to a band here beats maintaining a second set at a marketing aspect:
   one capture run keeps both honest. */
.mjp-shot{margin:0;border-radius:.8rem;overflow:hidden;border:1px solid var(--border);
  box-shadow:0 14px 40px rgba(15,42,74,.14);line-height:0;background:#fff}
.mjp-shot img{display:block;width:100%;height:320px;object-fit:cover;object-position:top center}
.mjp-shot-tall img{height:420px}
@media (max-width:575px){
  .mjp-shot img{height:210px}
  .mjp-shot-tall img{height:260px}
}

/* Sign-up and other single-column apex pages inside the full-width layout. */
.mjp-narrow{max-width:660px}

.mjp-price{font-family:'Sora',sans-serif;font-size:3rem;font-weight:700;color:var(--navy);margin:.2rem 0 0}
.mjp-price-unit{color:var(--muted);font-weight:500;margin-bottom:1.2rem}
.mjp-signature{color:var(--navy);font-weight:600;margin-top:1.2rem}

.mjp-cta-band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.mjp-cta-band .mjp-hero-lead{color:rgba(255,255,255,.85)}