@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===================================================================
   The Executive Function Framework - shared styles
   New layout: each page runs white (top) -> 1px light-blue rule ->
   dark-blue content (below), all within one scrolling page.
   Colors, fonts, and the frosted-glass look are sampled from / kept
   consistent with the animated brain logo (our touchstone).
   =================================================================== */
:root{
  --hero-bg: radial-gradient(120% 120% at 50% 38%, #ffffff 0%, #f3f5f7 70%, #e9edf1 100%);
  --dark-bg: radial-gradient(120% 120% at 50% 35%, #1d2733 0%, #10161f 60%, #0a0e14 100%);
  --ef-ink:#22324e; --ef-accent:#6f8f63; --ink-light:#cdd6e2;

  /* accents sampled from the brain logo outline */
  --logo-sage:#a9c79a;   /* sage green (on dark)            */
  --logo-amber:#e3b35f;  /* orange-yellow                   */
  --logo-blue:#acc0d6;   /* lighter blue - used for the thin divider rules */

  --on-dark:#eef2f7;     /* near-white body text on the dark background */
  /* logo-tinted pastel panels (black text sits on these) */
  --panel-gray:#ccd3da; --panel-green:#dde9d4; --panel-yellow:#f5e8cd; --panel-blue:#dee8f2;
  /* subtle 1px borders: a darker, more saturated step along each panel's gradient */
  --panel-gray-bd:#535353; --panel-green-bd:#6f8f63; --panel-yellow-bd:#d49c49; --panel-blue-bd:#2b3b5c;
  --panel-ink:#16202e;   /* near-black text on the light panels */
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:"Futura","Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  color:var(--ef-ink);
  background:var(--hero-bg); background-attachment:fixed;
}
/* optional whole-page dark theme (kept for flexibility) */
body.theme-dark{ color:var(--ink-light); background:var(--dark-bg); }

/* ------- logo (Home only): canvas + animated wordmark ------- */
/* canvas + wordmark are placed inside the .hero.logo-stage section and sized by
   logo.js; they scroll away with the page (plain scroll, no fixed overlay). */
#ef-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
#ef-word{position:absolute;z-index:2;pointer-events:none}
#ef-word .efl{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.6em;opacity:0;transform:translate(0,-50%);will-change:transform,opacity}
#ef-word .ln{height:1px;background:var(--ef-accent);opacity:.85}
#ef-word .tx{white-space:nowrap}
.efl-the{top:82.2%}    .efl-the .tx{color:var(--ef-ink);font-weight:500;letter-spacing:.42em}   .efl-the .ln{width:2.4em}
.efl-main{top:87.2%}   .efl-main .tx{color:var(--ef-ink);font-weight:500;letter-spacing:.20em}
.efl-frame{top:93.1%}  .efl-frame .tx{color:var(--ef-accent);font-weight:500;letter-spacing:.34em} .efl-frame .ln{width:4.2em}

/* =====================================================================
   Dual-background page scaffold (plain vertical scroll)
   .hero      = white (top) region. On Home it holds the animated logo
                (sized/placed by logo.js) and is <100vh so a slice of the
                dark section peeks below the fold as a scroll cue. On
                FAQ/Connect it holds a centered page title.
   .content   = dark-blue region in normal flow below the hero, with a thin
                light-blue rule (::before) marking the seam.
   ===================================================================== */
.hero{position:relative;z-index:1;width:100%}
/* Home: hero is just the logo + a small gap, so the dark section starts right below it.
   logo.js sets the exact px height; this calc is a close pre-paint default to avoid a flash. */
.hero.logo-stage{height:80vh;height:calc(11svh + min(70.9vw,74svh));overflow:hidden}
.hero.titled{
  min-height:46vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(56px,11vh,120px) 6vw clamp(34px,7vh,64px);
}
.hero .eyebrow{font:600 12px/1 "Montserrat",system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--ef-accent);opacity:.92;margin:0 0 14px}
.hero h1{font:700 clamp(30px,5vw,56px)/1.06 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em;color:var(--ef-ink);margin:0}
.hero .sub{font:500 clamp(14px,1.6vw,19px)/1.4 "Futura","Century Gothic",system-ui,sans-serif;letter-spacing:.05em;color:var(--ef-accent);margin:.7em 0 0}

.content{
  position:relative;color:var(--on-dark);    /* plain flow below the hero */
  background:var(--dark-bg);
  font-family:"Montserrat",system-ui,sans-serif;
  padding:clamp(44px,8vh,96px) 6vw clamp(72px,12vh,150px);
}
/* the seam: thin light-blue rule marking the white -> dark boundary */
.content::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,86%);height:1px;
  background:linear-gradient(90deg,transparent,var(--logo-blue) 12%,var(--logo-blue) 88%,transparent);
  opacity:.6;
}
.wrap{max-width:1060px;margin:0 auto}

/* reusable thin section-divider rule (light blue, faded ends) */
.rule{
  border:0;height:1px;width:min(1100px,88%);margin:clamp(30px,5.5vh,60px) auto;
  background:linear-gradient(90deg,transparent,var(--logo-blue) 12%,var(--logo-blue) 88%,transparent);
  opacity:.55;
}

/* reusable frosted text box / callout (for occasional colored boxes) */
.panel{
  color:var(--ink-light);
  background:rgba(17,23,33,.55);
  -webkit-backdrop-filter:blur(15px) saturate(120%);
  backdrop-filter:blur(15px) saturate(120%);
  border:1px solid rgba(205,214,226,.14);
  border-radius:22px;
  box-shadow:inset 1px 1px 0 rgba(205,214,226,.08), 0 34px 90px -46px rgba(0,0,0,.75);
  padding:clamp(22px,3.2vw,44px) clamp(20px,3.4vw,50px);
}

/* ===================== home / page content typography ===================== */
/* section titles (Cormorant Garamond ~20pt), white on the dark background */
.content h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(25px,2.9vw,31px);line-height:1.12;letter-spacing:.01em;color:#fff;margin:0 0 .55em}
.content h3{margin:0 0 .6em}
.content p{font:400 clamp(15px,1.05vw,16px)/1.62 "Montserrat",system-ui,sans-serif;margin:0 0 .95em}
.content p.placeholder{color:rgba(205,214,226,.5);font-style:italic;letter-spacing:.03em}

/* small italic eyebrow + italic subtitle (on dark) */
.t-eyebrow{font-family:"Montserrat",sans-serif;font-style:italic;font-size:13px;letter-spacing:.14em;margin:0 0 .7em;opacity:.92}
.t-subtitle{font-family:"Montserrat",sans-serif;font-style:italic;font-weight:500;font-size:clamp(15px,1.3vw,17px);line-height:1.5;margin:0 0 1.15em}

/* section wrappers + vertical rhythm */
.section{margin:clamp(58px,8vh,112px) 0}
.sec{max-width:1040px;margin-inline:auto}          /* horizontal centering only -- keep .section vertical rhythm */
.sec-narrow{max-width:720px;margin-inline:auto}
.center{text-align:center}

/* lists */
.content ul{list-style:none;margin:.4em 0 1.05em;padding:0}
.content li{position:relative;padding-left:20px;margin:.42em 0;font:400 clamp(15px,1.05vw,16px)/1.5 "Montserrat",system-ui,sans-serif}
.content li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--logo-sage)}

/* colored panels (logo-tinted, black text) */
.cpanel{border-radius:5px;border:1px solid transparent;color:var(--panel-ink);padding:clamp(22px,2.8vw,38px) clamp(22px,3vw,40px);box-shadow:0 26px 64px -40px rgba(0,0,0,.7)}
.cpanel.gray{background:var(--panel-gray);border-color:var(--panel-gray-bd)} .cpanel.green{background:var(--panel-green);border-color:var(--panel-green-bd)}
.cpanel.yellow{background:var(--panel-yellow);border-color:var(--panel-yellow-bd)} .cpanel.blue{background:var(--panel-blue);border-color:var(--panel-blue-bd)}
.cpanel p{color:var(--panel-ink)}
.cpanel li{color:var(--panel-ink)} .cpanel li::before{background:var(--panel-ink);opacity:.6}
.cpanel a{color:#1d3a63}
.phead{font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;line-height:1.3;margin:0 0 .7em}
.phead-serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(18px,1.7vw,21px);line-height:1.2;margin:0 0 .55em}
.psub{font-family:"Montserrat",sans-serif;font-weight:600;font-size:13.5px;margin:-.45em 0 1em}
.price{font-family:"Montserrat",sans-serif;font-style:italic;font-weight:600;margin:.9em 0 0}

/* centered serif pull-quote (gray panels) -- .content .quote beats .content p so the
   inherited bottom margin is removed and the text sits vertically centered in the panel */
.content .quote{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.34;text-align:center;color:var(--panel-ink);margin:0}

/* white pill buttons -> other pages */
.btn-row{text-align:center;margin:clamp(26px,4.2vh,44px) 0}
.btn{display:inline-block;background:#fff;color:#15191f;font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;letter-spacing:.05em;text-decoration:none;padding:13px 32px;border-radius:999px;box-shadow:0 16px 38px -22px rgba(0,0,0,.7);transition:background .2s ease,transform .15s ease}
.btn:hover{background:#eef2f7;transform:translateY(-1px)}

/* side-by-side panel groups (stack on small screens) */
.panel-row{display:grid;grid-template-columns:1fr;align-items:start;gap:clamp(16px,2vw,26px);max-width:1040px;margin:0 auto}
@media(min-width:760px){.panel-row{grid-template-columns:1fr 1fr}}
.panel-grid{display:grid;grid-template-columns:1fr;align-items:start;gap:clamp(16px,1.8vw,22px);max-width:1180px;margin:0 auto}
@media(min-width:620px){.panel-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.panel-grid{grid-template-columns:repeat(4,1fr)}}

/* graphic placeholder */
.gfx{display:flex;align-items:center;justify-content:center;text-align:center;min-height:150px;border:1px dashed rgba(205,214,226,.3);border-radius:16px;color:rgba(205,214,226,.5);font:600 11px/1.6 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;margin:clamp(20px,3vh,34px) auto;max-width:680px}

/* grey 1px page-break rule (most of the width) */
.rule-gray{border:0;height:1px;width:min(1100px,84%);margin:clamp(34px,6.5vh,68px) auto;background:linear-gradient(90deg,transparent,rgba(205,214,226,.5) 12%,rgba(205,214,226,.5) 88%,transparent)}

/* footer text links (very bottom) */
.home-foot{text-align:center;margin-top:clamp(26px,5vh,48px)}
.home-foot a{font-family:"Montserrat",sans-serif;font-size:11px;color:var(--on-dark);text-decoration:none;margin:0 .7em;letter-spacing:.04em;opacity:.85}
.home-foot a:hover{opacity:1;text-decoration:underline}