/* ClearPrep / approved Evergreen & Stone homepage — isolated visual layer.
   Loaded after style.css, leaving existing PHP/PayPal/account functionality intact. */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#F5F3EE;
  --ink:#353638;
  --muted:#63716A;
  --line:#DFE5DC;
  --blue:#244B42;
  --navy:#244B42;
  --green:#244B42;
  --darkgreen:#1A3C32;
  --red:#D80621; /* Only for red Canadian flags inside artwork, never UI. */
  --charcoal:#353638;
  --sage:#A5B8A4;
}
html, body {background:#F5F3EE;color:#353638}
body{font-family:'Montserrat',Arial,Helvetica,sans-serif}
.site-header{background:#F5F3EE;border-bottom:0;z-index:20}
.site-nav{max-width:1540px;min-height:108px;padding:11px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:center}
.site-links,.account-nav{gap:15px 26px;font-family:'Montserrat',Arial,sans-serif;font-weight:600;font-size:14px}
.site-links a,.account-nav a,.account-nav button.link{color:#244B42}
.site-links a:hover,.account-nav a:hover,.account-nav button.link:hover{color:#4B755C}
.account-nav{justify-content:flex-end}
.account-nav button.link,.account-nav button.link:hover{appearance:none;display:inline;padding:0;margin:0;box-shadow:none;background:none!important;border:0!important;min-height:0;color:#244B42;transform:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.brand-mark.clearprep-logo{margin:0!important;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:0;line-height:1;text-decoration:none;color:#244B42!important}
.clearprep-signpost-icon{width:78px;height:auto;display:block;flex:0 0 auto;object-fit:contain}
.clearprep-logo-divider{width:2px;height:54px;background:#244B42;border-radius:2px;flex:0 0 auto}
.clearprep-logo-word{display:block;font-family:'Montserrat',Arial,Helvetica,sans-serif;font-size:clamp(32px,3.0vw,54px);font-weight:600;letter-spacing:-1.8px;line-height:.95;color:#244B42;white-space:nowrap}
.brand-mark.clearprep-logo:hover{text-decoration:none}
/* Main homepage uses full width; no constrained wrapper clipping. */
main.wrap.home-main{max-width:none!important;width:100%;padding:0!important;margin:0}
.home-hero{position:relative;background:#F5F3EE;isolation:isolate;overflow:hidden;min-height:670px!important;padding:50px 18px 60px!important;max-width:1800px;margin:0 auto}
.home-hero::before{content:none!important;display:none!important}
.home-hero::after{content:"";position:absolute;pointer-events:none;left:-5%;right:-5%;bottom:-91px;height:155px;background:#E8EEE5;opacity:.78;border-radius:50% 50% 0 0/52% 52% 0 0;z-index:0}
.hero-copy{position:relative;z-index:3;max-width:850px!important;margin:13px auto 0!important;padding:0 12px 18px!important;text-align:center;background:transparent!important;isolation:auto!important}
.hero-copy::before,.hero-copy::after{display:none!important;content:none!important}
.hero-kicker{font-family:'Montserrat',Arial,sans-serif;display:flex;align-items:center;justify-content:center;gap:28px;font-weight:700!important;font-size:13px!important;letter-spacing:2.7px!important;color:#355D45!important;line-height:1.4;white-space:nowrap;margin-bottom:32px}
.hero-kicker::before,.hero-kicker::after{content:"";display:block;width:58px;height:2px;background:#739378;flex:none}
.home-hero h1{font-family:'Libre Baskerville',Georgia,serif!important;font-size:clamp(44px,4.9vw,76px)!important;font-weight:700!important;color:#164938!important;line-height:1.12!important;letter-spacing:-3.4px!important;margin:0 auto 22px!important;text-wrap:balance}
.home-hero h1 em{color:#4D7A4B;font-weight:700;font-style:italic}
.home-hero p{font-family:'Montserrat',Arial,sans-serif;font-weight:400;color:#353638!important;font-size:clamp(17px,1.55vw,21px)!important;line-height:1.55;max-width:710px;margin:19px auto 0!important}
.hero-cta,.home-hero .button.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-width:330px;padding:17px 30px;margin-top:33px!important;border-radius:13px;background:linear-gradient(135deg,#164938,#0C5B3C)!important;border:1px solid #1C503B!important;color:#fff!important;box-shadow:0 12px 30px rgba(19,74,50,.13)!important;font-family:'Montserrat',Arial,sans-serif;font-size:18px;font-weight:800;line-height:1.3;text-decoration:none}
.hero-cta:hover,.home-hero .button.hero-cta:hover{background:#163E31!important;border-color:#163E31!important;transform:translateY(-1px)}
.hero-disclaimer{color:#68756E!important;font-size:13px!important;margin-top:14px!important}
.hero-art{position:absolute!important;display:block!important;z-index:1!important;bottom:13px!important;top:auto!important;max-width:none!important;width:clamp(340px,36vw,585px)!important;height:auto!important;object-fit:contain!important;filter:none!important;opacity:.88!important;mix-blend-mode:multiply;pointer-events:none;clip-path:none!important;mask-image:radial-gradient(ellipse 83% 85% at 50% 58%,#000 67%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 83% 85% at 50% 58%,#000 67%,transparent 100%)}
.hero-art-left{left:max(-36px,calc((100vw - 1700px)/2 - 35px))!important;right:auto!important;transform:none!important}
.hero-art-right{right:max(-25px,calc((100vw - 1700px)/2 - 25px))!important;left:auto!important;transform:none!important}
.trust-strip{position:relative;z-index:2;background:#F5F3EE;max-width:1260px;margin:0 auto!important;padding:24px 20px 32px!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;color:#244B42!important}
.trust-strip .trust-item{display:flex;justify-content:center;align-items:center;gap:14px;padding:3px 14px;border-right:1px solid #BFCBC0;white-space:nowrap;font-size:15px;font-weight:600;line-height:1.45;color:#244B42}
.trust-strip .trust-item:last-child{border-right:0}
.trust-strip .trust-icon{display:flex;align-items:center;justify-content:center;color:#244B42;flex:none}
.trust-strip svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Existing content sections and member pages retain function, receive theme consistency. */
.intro-section,.audience-section,.faq-section{background:#F5F3EE!important}
.pricing-section{background:#EDF1E9!important}
.intro-section h2,.audience-section h2,.pricing-section h2,.faq-section h2,.heading h1,.auth h1{color:#244B42!important}
.section-kicker,.eyebrow,.feature-number,.pathway-tag{color:#50785A!important}
.card{background:#fff;border-color:#DBE4DA;box-shadow:0 8px 24px rgba(36,75,66,.05)}
.card h2,.card h3,.student-card strong{color:#244B42}
.button,button:not(.link){background:#244B42;border-color:#244B42}
.button:hover,button:not(.link):hover{background:#1A3C32;border-color:#1A3C32}
.button.secondary,button.secondary{background:#fff!important;border-color:#CFDBD0;color:#244B42}
input:focus,select:focus,textarea:focus{outline-color:#A5B8A4}
.progress span{background:#6E977B}
a{color:#244B42}
footer{background:#F5F3EE;border-top-color:#DEE5DC}
@media(max-width:1260px){
 .site-nav{grid-template-columns:1fr auto;gap:10px}
 .brand-mark.clearprep-logo{grid-column:1/-1;grid-row:1;margin:0 auto!important}
 .site-links{grid-column:1;grid-row:2}
 .account-nav{grid-column:2;grid-row:2}
 .home-hero{min-height:650px!important;padding-top:38px!important}
 .hero-art{width:clamp(300px,36vw,500px)!important}
 .home-hero h1{font-size:clamp(42px,5.2vw,68px)!important}
}
@media(max-width:860px){
 .home-hero{min-height:690px!important}
 .hero-copy{max-width:650px!important}
 .hero-art{width:46vw!important;bottom:1px!important;opacity:.63!important}
 .hero-art-left{left:-60px!important}
 .hero-art-right{right:-75px!important}
 .hero-kicker{white-space:normal;font-size:11px!important;gap:13px}
 .hero-kicker::before,.hero-kicker::after{width:25px}
 .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
 .trust-strip .trust-item:nth-child(2){border-right:0}
}
@media(max-width:640px){
 .site-nav{grid-template-columns:1fr!important;padding:12px 14px!important}
 .brand-mark.clearprep-logo{grid-row:1;grid-column:1;justify-self:center}
 .clearprep-signpost-icon{width:64px} .clearprep-logo-divider{height:42px} .clearprep-logo-word{font-size:38px}
 .site-links{grid-row:2;grid-column:1;justify-content:center;font-size:12px;gap:7px 15px}
 .account-nav{grid-row:3;grid-column:1;justify-content:center;font-size:12px;gap:7px 14px}
 .account-nav button.link{font-size:12px}
 .home-hero{min-height:760px!important;padding:27px 14px 0!important}
 .hero-copy{margin:0 auto!important;padding:0 5px!important}
 .hero-kicker{font-size:10px!important;letter-spacing:1.6px!important;margin-bottom:18px}
 .hero-kicker::before,.hero-kicker::after{display:none}
 .home-hero h1{font-size:clamp(33px,8vw,49px)!important;letter-spacing:-1.7px!important;line-height:1.17!important}
 .home-hero p{font-size:15px!important;max-width:440px}
 .hero-cta,.home-hero .button.hero-cta{min-width:0;width:100%;max-width:330px;font-size:15px;margin-top:24px!important;padding:15px 18px}
 .hero-disclaimer{font-size:11px!important}
 .hero-art-left{display:block!important;width:min(92vw,470px)!important;left:50%!important;bottom:10px!important;transform:translateX(-50%)!important;opacity:.77!important}
 .hero-art-right{display:none!important}
 .home-hero::after{bottom:-115px}
 .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0;padding:17px 8px 26px!important}
 .trust-strip .trust-item{font-size:11px;padding:4px 6px;white-space:normal;gap:7px}
 .trust-strip svg{width:22px;height:22px}
}
@media(max-width:380px){
 .home-hero{min-height:720px!important}
 .hero-art-left{width:98vw!important}
 .home-hero h1{font-size:32px!important}
}

/* Fix 2026-11-11: full-width lower homepage sections.
   Keep content centered without turning each section background into a narrow card.
   All selectors are homepage-scoped so account and billing pages are unchanged. */
main.wrap.home-main {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:#F5F3EE!important;
  overflow-x:clip;
}
main.home-main > .trust-strip {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:28px max(24px,calc((100vw - 1200px)/2)) 34px!important;
  background:#F5F3EE!important;
  box-sizing:border-box;
}
main.home-main > .intro-section,
main.home-main > .audience-section,
main.home-main > .pricing-section,
main.home-main > .faq-section {
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:78px max(24px,calc((100vw - 1180px)/2)) 86px!important;
  background:#F5F3EE!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
main.home-main > .audience-section {background:#EFF2EC!important;}
main.home-main > .pricing-section {background:#F5F3EE!important;}
main.home-main > .faq-section {background:#EFF2EC!important;}
main.home-main > .intro-section > h2,
main.home-main > .audience-section > h2,
main.home-main > .pricing-section > h2,
main.home-main > .faq-section > h2,
main.home-main > .intro-section > p,
main.home-main > .pricing-section > p {
  max-width:900px;
  margin-left:auto!important;
  margin-right:auto!important;
}
main.home-main .feature-grid,
main.home-main .audience-section .grid {
  max-width:1140px;
  margin:44px auto 0!important;
  width:100%;
}
main.home-main .feature-grid .card,
main.home-main .audience-section .grid .card {
  min-width:0;
  height:100%;
  box-sizing:border-box;
}
main.home-main .faq-section details {
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:860px) {
  main.home-main > .trust-strip {
    padding:22px 24px 30px!important;
  }
  main.home-main > .intro-section,
  main.home-main > .audience-section,
  main.home-main > .pricing-section,
  main.home-main > .faq-section {
    padding:62px 24px 68px!important;
  }
}
@media (max-width:640px) {
  main.home-main > .trust-strip {padding:17px 14px 24px!important;}
  main.home-main > .intro-section,
  main.home-main > .audience-section,
  main.home-main > .pricing-section,
  main.home-main > .faq-section {padding:50px 18px 56px!important;}
  main.home-main .feature-grid,
  main.home-main .audience-section .grid {margin-top:30px!important;}
}

@media (max-width: 640px){
  .brand-mark.clearprep-logo{gap:10px}
  .clearprep-signpost-icon{width:50px}
  .clearprep-logo-divider{height:34px}
  .clearprep-logo-word{font-size:30px;letter-spacing:-1.1px}
}

/* 2026-11-11: logo weight and trust-strip alignment correction. */
.clearprep-logo-word {
  font-weight:500!important;
}

/* Keep each icon and label within its own grid cell, including the long first label. */
main.home-main > .trust-strip {
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  column-gap:0;
}
main.home-main > .trust-strip > .trust-item {
  box-sizing:border-box;
  min-width:0;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:4px 14px;
  white-space:normal;
  overflow-wrap:normal;
  border-right:1px solid #BFCBC0;
}
main.home-main > .trust-strip > .trust-item:last-child { border-right:0; }
main.home-main > .trust-strip > .trust-item > .trust-icon { flex:0 0 29px; }
main.home-main > .trust-strip > .trust-item > span:last-child {
  display:block;
  flex:0 1 auto;
  min-width:0;
  text-align:left;
  line-height:1.4;
}
@media (max-width:1050px) {
  main.home-main > .trust-strip {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px;}
  main.home-main > .trust-strip > .trust-item:nth-child(2) {border-right:0;}
}
@media (max-width:640px) {
  main.home-main > .trust-strip { grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:14px; }
  main.home-main > .trust-strip > .trust-item {gap:8px;padding:5px 10px;font-size:12px;}
  main.home-main > .trust-strip > .trust-item > .trust-icon { flex-basis:22px; }
}
@media (max-width:390px) {
  main.home-main > .trust-strip { grid-template-columns:minmax(0,1fr);row-gap:0; }
  main.home-main > .trust-strip > .trust-item {
    border-right:0;
    border-bottom:1px solid #DCE4DC;
    justify-content:flex-start;
    padding:12px 16px;
    font-size:13px;
  }
  main.home-main > .trust-strip > .trust-item:last-child {border-bottom:0;}
}


/* ClearPrep update: clean trust bar at all viewport widths.
   No vertical separators; items stay grouped as icon + label. */
main.home-main > .trust-strip {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;
  max-width:1200px!important;
  margin:0 auto!important;
  padding:24px 20px 30px!important;
  column-gap:24px!important;
  row-gap:20px!important;
  align-items:center!important;
}
main.home-main > .trust-strip > .trust-item {
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  width:100%!important;
  padding:8px 0!important;
  gap:12px!important;
  border:0!important;
  border-right:0!important;
  border-bottom:0!important;
  background:transparent!important;
  white-space:normal!important;
  text-align:left!important;
}
main.home-main > .trust-strip > .trust-item > .trust-icon {
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
}
main.home-main > .trust-strip > .trust-item > span:last-child {
  flex:0 1 auto!important;
  min-width:0!important;
  text-align:left!important;
  overflow-wrap:normal!important;
  line-height:1.45!important;
}
@media (max-width:1050px) {
  main.home-main > .trust-strip {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-width:720px!important;
    column-gap:32px!important;
  }
  main.home-main > .trust-strip > .trust-item {
    justify-content:flex-start!important;
  }
}
@media (max-width:480px) {
  main.home-main > .trust-strip {
    grid-template-columns:minmax(0,1fr)!important;
    max-width:400px!important;
    padding:16px 28px 24px!important;
    row-gap:8px!important;
  }
  main.home-main > .trust-strip > .trust-item {
    justify-content:flex-start!important;
    gap:16px!important;
    padding:7px 0!important;
    font-size:13px!important;
  }
}

/* All general-purpose text (including member/account/billing pages)
   uses black rather than muted gray. Leave headings, navigation, action
   controls and semantic alerts with their current visual treatments. */
body { color:#111111!important; }
p,
.card p,
.intro-section > p,
.pricing-section > p,
.audience-section p,
.faq-section p,
.heading p,
.auth p,
.muted,
.meter,
label,
td,
th,
small,
.help-text,
.hero-disclaimer,
.home-hero p,
footer,
footer .wrap {
  color:#111111!important;
}
main.home-main > .intro-section > p,
main.home-main > .pricing-section > p {
  color:#111111!important;
}

/* ClearPrep: Why page and updated editorial sections */
.hero-tagline{font-weight:600;color:#244B42;margin-top:8px}
.why-teaser{max-width:900px;margin:48px auto 68px;text-align:center;padding:24px}
.why-teaser p{max-width:760px;margin:14px auto 22px;line-height:1.75}
.why-page{max-width:1100px;margin:50px auto 76px}
.why-page h1{font-family:Georgia,serif;font-size:clamp(2.3rem,5vw,4rem);color:#244B42;margin:14px 0}
.why-page h2{color:#244B42;margin:34px 0 16px}
.why-lead{font-size:1.2rem;line-height:1.65;max-width:770px}
.why-grid{margin:28px 0 34px}
.why-official{margin-left:16px;display:inline-block}
.faq-section details{padding:13px 0;border-bottom:1px solid #d6dfd5}
.faq-section summary{cursor:pointer;font-weight:600}
.faq-section details p{max-width:850px;line-height:1.7}
@media(max-width:700px){.why-official{margin:16px 0 0}.why-page{margin:25px auto 60px}}


/* Logo restore fix: use signpost PNG + live wordmark, not combined logo image */
.clearprep-logo-word{font-weight:500!important;color:#244B42!important}
.clearprep-signpost-icon{width:78px;max-width:none;height:auto;display:block;flex:0 0 auto}
.clearprep-logo-divider{background:#244B42!important}
@media (max-width:900px){
  .clearprep-signpost-icon{width:64px}
}
@media (max-width:640px){
  .clearprep-signpost-icon{width:50px}
}


/* 2026-11-12 — Compact responsive navigation (no PHP or logo changes) */
@media (min-width: 1261px) {
  .site-nav { gap: 12px; }
  .site-links, .account-nav { gap: 8px 13px; font-size: 12px; }
  .site-links a, .account-nav a, .account-nav button.link { white-space: nowrap; }
  .account-nav button.link { font-size: 12px; }
}
@media (min-width: 951px) and (max-width: 1260px) {
  .site-nav { column-gap: 10px; row-gap: 8px; }
  .site-links, .account-nav { gap: 8px 13px; font-size: 12px; }
  .site-links a, .account-nav a, .account-nav button.link { white-space: nowrap; }
  .account-nav button.link { font-size: 12px; }
}
@media (max-width: 950px) {
  .site-nav { grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px; }
  .brand-mark.clearprep-logo { grid-column:1 !important; grid-row:1 !important; }
  .site-links { grid-column:1 !important; grid-row:2 !important; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 9px 16px; font-size:12px; }
  .site-links a { white-space:nowrap; }
  .account-nav { grid-column:1 !important; grid-row:3 !important; justify-content:center; gap:8px 16px; font-size:12px; }
  .account-nav button.link { font-size:12px; }
}
@media (max-width: 640px) {
  .site-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 8px; width:100%; text-align:center; }
  .site-links a { font-size:11px; white-space:normal; line-height:1.3; }
  .account-nav { flex-wrap:wrap; }
}
@media (max-width: 380px) {
  .site-links a { font-size:10px; }
}