/* ==========================================================================
   Firebird for Graduates — landing page styles
   Additive only. Loaded AFTER style.css, alongside it — never edits it.
   Reuses site tokens (:root) and shell classes (.btn, .container, .cta-banner,
   .pillar-grid, .compare-grid, .site-header, .site-footer). Everything here is
   namespaced .grad-* so it cannot affect any other page.
   Mobile-first: base rules target 375px; min-width queries scale up.
   ========================================================================== */

/* --- Minimal landing header (logo only; no exec nav/CTA leak) ------------- */
.grad-headbar{display:flex; align-items:center; height:72px;}
.grad-headbar .logo img{height:40px; width:auto;}

/* --- Hero ---------------------------------------------------------------- */
.grad-hero{background:var(--grad-soft); text-align:center; padding:44px 0 46px; overflow:hidden;}
/* Hero layout: stacked on mobile, two-column (image + copy) on desktop — mirrors the executive homepage. */
.grad-hero-inner{display:grid; grid-template-columns:1fr; gap:30px;}
.grad-hero h1{font-size:38px; font-weight:300; line-height:1.1; letter-spacing:-.5px;
  max-width:760px; margin:0 auto 18px;}
.grad-hero h1 .grad-fb{color:var(--orange);}
.grad-hero .grad-sub{font-size:17px; color:#3d3d3d; max-width:560px; margin:0 auto 26px; line-height:1.55;}
.grad-signin-note{display:block; margin-top:14px; font-size:13.5px; color:var(--muted);}

/* --- CTA button + FTC disclosure microcopy that sits under every CTA ------ */
.grad-cta{cursor:pointer;}
.grad-cta-disc{display:block; max-width:440px; margin:12px auto 0; font-size:13px;
  color:#6a6a6a; line-height:1.5;}
.grad-cta-disc b{color:#4a4a4a; font-weight:600;}

/* Visible keyboard focus for buttons and links on this page (WCAG AA) */
.grad a:focus-visible, .grad button:focus-visible, .grad .btn:focus-visible,
.grad summary:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:8px;}

/* --- Section rhythm ------------------------------------------------------ */
.grad-sec{padding:52px 0;}
.grad-sec.tinted{background:var(--cream);}
.grad-h2{text-align:center; font-size:27px; font-weight:300; line-height:1.18;
  max-width:720px; margin:0 auto 14px;}
.grad-h2 b{color:var(--orange); font-weight:700;}
.grad-lead{text-align:center; font-size:16.5px; color:#444; max-width:680px;
  margin:0 auto 30px; line-height:1.6;}

/* --- Problem: stat cards ------------------------------------------------- */
.grad-stats{display:grid; grid-template-columns:1fr; gap:16px; max-width:900px; margin:26px auto 0;}
.grad-stat{background:#fff; border:1px solid #f0e6df; border-radius:14px; padding:24px 22px;}
.grad-stat .grad-fig{font-family:var(--font-head); font-weight:700; font-size:38px;
  color:var(--orange); line-height:1;}
.grad-stat p{margin:10px 0 0; font-size:15px; color:#444; line-height:1.5;}
.grad-stat cite{display:block; margin-top:10px; font-size:12px; color:#9a9a9a; font-style:normal;}

/* --- "What it is" feature rows ------------------------------------------- */
.grad-what{max-width:760px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:18px;}
.grad-feat{display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid #f0e6df; border-radius:14px; padding:20px 22px;}
.grad-feat .grad-ic{flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  background:var(--peach-soft); display:flex; align-items:center; justify-content:center; color:var(--orange);}
.grad-feat .grad-ic svg{width:22px; height:22px;}
.grad-feat h3{font-size:17px; font-weight:600; margin:2px 0 5px; color:var(--ink);}
.grad-feat p{margin:0; font-size:14.5px; color:#555; line-height:1.55;}

/* --- What's included: no-limit list -------------------------------------- */
.grad-incl{max-width:640px; margin:0 auto; background:#fff; border:2px solid var(--orange);
  border-radius:18px; padding:30px 26px;}
.grad-incl ul{list-style:none; margin:0; padding:0;}
.grad-incl li{margin:12px 0; padding-left:30px; position:relative; font-size:15.5px; color:#3d3d3d; line-height:1.45;}
.grad-incl li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--orange); font-weight:700;}
.grad-incl .grad-nolimit li::before{content:"—"; color:#bcbcbc;}

/* --- Pricing ------------------------------------------------------------- */
.grad-price{text-align:center;}
.grad-price-card{max-width:440px; margin:0 auto; background:#fff; border:2px solid var(--orange);
  border-radius:20px; padding:34px 28px; box-shadow:var(--shadow);}
.grad-amount{font-family:var(--font-head); font-weight:700; font-size:58px; color:var(--ink); line-height:1;}
.grad-amount span{font-size:19px; font-weight:400; color:var(--muted);}
.grad-total{color:var(--orange); font-weight:600; font-size:15.5px; margin:12px 0 4px;}
.grad-cancel{font-size:13.5px; color:var(--muted); margin-bottom:22px;}
.grad-price-card .grad-cta{width:100%;}

/* Conspicuous trial disclosure box (FTC negative-option) */
.grad-disc-box{max-width:560px; margin:26px auto 0; background:var(--cream);
  border:1px solid #ecd9cc; border-radius:14px; padding:20px 22px; text-align:left;}
.grad-disc-box h3{font-size:14px; font-weight:700; color:var(--ink); margin:0 0 8px; letter-spacing:.01em;}
.grad-disc-box p{margin:0; font-size:14px; color:#4a4a4a; line-height:1.6;}
.grad-disc-box a{color:var(--orange); text-decoration:underline; text-underline-offset:2px;}

/* --- Objection callout --------------------------------------------------- */
.grad-obj{max-width:720px; margin:0 auto; background:#fff; border-left:4px solid var(--orange);
  border-radius:0 14px 14px 0; padding:26px 26px;}
.grad-obj h2{font-size:22px; font-weight:600; color:var(--ink); margin:0 0 14px; line-height:1.25;}
.grad-obj p{font-size:15.5px; color:#444; line-height:1.65; margin:0 0 12px;}
.grad-obj p:last-child{margin-bottom:0;}

/* --- FAQ (native details/summary — no JS) -------------------------------- */
.grad-faq{max-width:760px; margin:0 auto;}
.grad-faq details{background:#fff; border:1px solid #eadfd6; border-radius:12px;
  margin:12px 0; padding:0 20px;}
.grad-faq summary{cursor:pointer; list-style:none; padding:18px 30px 18px 0; position:relative;
  font-size:16px; font-weight:600; color:var(--ink);}
.grad-faq summary::-webkit-details-marker{display:none;}
.grad-faq summary::after{content:"+"; position:absolute; right:2px; top:16px; font-size:22px;
  font-weight:400; color:var(--orange); transition:transform .2s ease;}
.grad-faq details[open] summary::after{content:"–";}
.grad-faq .grad-faq-a{padding:0 0 20px; font-size:15px; color:#4d4d4d; line-height:1.65;}
.grad-faq .grad-faq-a p{margin:0 0 10px;} .grad-faq .grad-faq-a p:last-child{margin:0;}

/* --- Larger screens ------------------------------------------------------ */
@media (min-width:720px){
  .grad-hero{padding:64px 0 60px;}
  .grad-hero-inner{grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; text-align:left;}
  .grad-hero-copy h1{margin:0 0 16px; max-width:none;}
  .grad-hero-copy .grad-sub{margin:0 0 26px; max-width:520px;}
  .grad-hero-copy .grad-cta-disc{margin:12px 0 0;}
  .grad-hero h1{font-size:52px;}
  .grad-hero .grad-sub{font-size:19px;}
  .grad-sec{padding:72px 0;}
  .grad-h2{font-size:34px;}
  .grad-stats{grid-template-columns:repeat(3,1fr);}
  .grad-stat .grad-fig{font-size:42px;}
}

/* --- Differentiation: graduate has THREE alternatives + Firebird (4 cards) -
   The shared .compare-grid is a fixed 3-col; on the graduate page we widen it
   to 4 so "Apply faster · Coaches $4K+ · Do it yourself · Firebird" sit in one
   row on desktop, 2×2 on tablet, stacked on mobile. Namespaced, additive. */
.grad-diff .compare-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
@media (max-width:1000px){ .grad-diff .compare-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .grad-diff .compare-grid{grid-template-columns:1fr;} }

/* --- Problem lead paragraph (sits above the stat cards) ------------------- */
.grad-problem-lead{text-align:center; font-size:17px; color:#3d3d3d; max-width:720px;
  margin:0 auto 8px; line-height:1.6;}

/* --- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .grad-faq summary::after{transition:none;}
  *{scroll-behavior:auto;}
}