/* Mentorify marketing site — clean, white, simple.
   Type: Fraunces (warm display) + Public Sans (body). No monospace.
   Accent: coral is the brand colour; teal + gold are quiet secondary cues. */

:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8F7; --ink:#1C1E1D; --muted:#5F6A66;
  --line:#ECEEEC; --line-strong:#DFE2DF;
  --coral:#E15A38; --coral-dark:#C4482B; --coral-soft:#FCEBE4; --coral-line:#F5D3C6;
  --teal:#137A6C; --teal-soft:#E7F1EF; --teal-line:#CBE4DF;
  --gold:#A9781A; --gold-soft:#F6EFDB; --gold-line:#E9DBB4;
  --violet:#7C6CFF; --violet-soft:#EFECFF; --violet-line:#DAD4FF;
  --ink-2:#101211;
  --shadow:0 1px 2px rgba(20,24,22,.04), 0 6px 20px rgba(20,24,22,.05);
  --shadow-lift:0 10px 28px rgba(20,24,22,.10), 0 2px 10px rgba(20,24,22,.06);
  --maxw:1400px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Public Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:22px;}
a{color:var(--coral); text-decoration:none;}
a:focus-visible, button:focus-visible{outline:2px solid var(--coral); outline-offset:2px; border-radius:4px;}

h1,h2,h3,h4,.disp{font-family:"Fraunces","Georgia",serif; font-optical-sizing:auto; letter-spacing:-.01em; text-wrap:balance; color:var(--ink);}
h1{font-size:clamp(34px,5.6vw,56px); font-weight:600; line-height:1.06; margin:.22em 0 0;}
h1.h1-hero{font-size:clamp(44px,8vw,84px); margin-top:.28em;}
h2{font-size:clamp(23px,3.2vw,33px); font-weight:600; margin:0;}
h3{font-size:19px; font-weight:600; margin:0;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); margin:0;}
.lede{font-size:clamp(16px,1.9vw,19px); color:var(--muted); max-width:60ch; margin:.75em 0 0; text-wrap:pretty;}
.hero .lede + .lede{margin-top:.6em;}
.sec-intro{color:var(--muted); max-width:62ch; margin:10px 0 0; font-size:16px;}

/* ---- nav ---- */
/* Note: intentionally no backdrop-filter here — it would create a new CSS
   containing block for the position:fixed mobile menu below and collapse it. */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); transition:box-shadow .2s ease, background-color .2s ease;}
.nav.scrolled{background:#fff; box-shadow:0 8px 24px rgba(20,24,22,.05);}
.nav .row{display:flex; align-items:center; gap:6px; height:66px;}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:21px; color:var(--ink);}
.nav-brand .brand-stack{display:flex; flex-direction:column; line-height:1.15;}
.nav-brand .brand-stack small{font-family:"Public Sans",sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
.brand .dot{width:24px;height:24px;border-radius:8px;background:var(--coral);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-family:"Fraunces",serif;font-size:15px;font-weight:600;}
.navlinks{display:flex; gap:2px; margin-left:auto; align-items:center;}
.navlinks a:not(.btn){color:var(--muted); font-weight:500; font-size:15px; padding:9px 13px; border-radius:8px; transition:background-color .15s, color .15s;}
.navlinks a:not(.btn):hover, .navlinks a[aria-current="page"]{color:var(--ink); background:var(--surface-2);}
.navlinks .btn{margin-left:10px;}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; padding:12px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;}
.btn.primary{background:var(--coral); color:#fff;}
.btn.coral{background:var(--coral); color:#fff;}
.btn.coral:hover{background:var(--coral-dark); box-shadow:0 8px 20px rgba(225,90,56,.28);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn.ghost:hover{border-color:var(--ink);}
.btn.sm{padding:9px 16px; font-size:14px;}
.btn:active{transform:translateY(1px);}

/* ---- nav: use-cases dropdown ---- */
.dropdown{position:relative;}
.drop-btn{display:inline-flex; align-items:center; gap:5px; background:none; border:none; font:inherit; font-weight:500; font-size:15px; color:var(--muted); padding:9px 13px; border-radius:8px; cursor:pointer;}
.drop-btn:hover, .drop-btn[aria-current="page"]{color:var(--ink); background:var(--surface-2);}
.dropdown.open .drop-btn, .drop-btn[aria-expanded="true"]{color:var(--ink); background:var(--surface-2);}
.drop-btn .chev{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.3; transition:transform .18s ease;}
.dropdown.open .drop-btn .chev{transform:rotate(180deg);}
.dropdown-panel{position:absolute; top:100%; left:50%; transform:translate(-50%,4px); padding-top:12px; width:540px; max-width:82vw; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s;}
.dropdown.open .dropdown-panel{opacity:1; visibility:visible; transform:translate(-50%,0);}
.dropdown-panel-inner{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lift); padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:3px;}
.dropdown-panel a{display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:12px; color:var(--ink);}
.dropdown-panel a:hover{background:var(--surface-2);}
.dropdown-panel .swatch{width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none;}
.dropdown-panel .swatch.gov{background:var(--gold);} .dropdown-panel .swatch.ent{background:var(--coral);} .dropdown-panel .swatch.edu{background:var(--teal);} .dropdown-panel .swatch.ngo{background:var(--violet);}
.dropdown-panel b{display:block; font-size:14.5px; font-weight:600;}
.dropdown-panel small{display:block; font-size:12.5px; color:var(--muted); margin-top:2px; font-weight:400; line-height:1.4;}
.dropdown-panel .drop-cta{grid-column:1/-1; margin-top:3px; padding-top:13px; border-top:1px solid var(--line); border-radius:0; justify-content:space-between; font-weight:600; color:var(--coral);}
.dropdown-panel a[aria-current="page"]{background:var(--surface-2);}

/* ---- nav: mobile menu ---- */
.menu-toggle{display:none; margin-left:auto; background:none; border:none; padding:8px; cursor:pointer; color:var(--ink);}
.menu-toggle svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.menu-toggle .i-close{display:none;}
.menu-toggle[aria-expanded="true"] .i-menu{display:none;}
.menu-toggle[aria-expanded="true"] .i-close{display:block;}
@media (max-width:900px){
  .menu-toggle{display:inline-flex;}
  .navlinks{position:fixed; inset:66px 0 0 0; background:var(--surface); flex-direction:column; align-items:stretch; gap:2px; padding:16px 22px 26px; margin-left:0; overflow-y:auto; transform:translateY(-6px); opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s; border-top:1px solid var(--line);}
  .navlinks.open{opacity:1; visibility:visible; transform:translateY(0);}
  .navlinks a:not(.btn){padding:15px 8px; font-size:16.5px; border-radius:10px;}
  .navlinks .btn{margin-left:0; margin-top:12px; justify-content:center; padding:14px 20px;}
  .dropdown{width:100%;}
  .drop-btn{width:100%; justify-content:space-between; padding:15px 8px; font-size:16.5px;}
  .dropdown-panel{position:static; transform:none!important; width:100%; max-width:none; padding-top:0; opacity:1; visibility:visible; display:none;}
  .dropdown.open .dropdown-panel{display:block;}
  .dropdown-panel-inner{grid-template-columns:1fr; box-shadow:none; border:none; padding:2px 0 6px 16px; gap:2px;}
  .dropdown-panel .drop-cta{border-top:1px solid var(--line); margin-top:6px; padding-top:14px;}
}
@media (min-width:901px){
  .dropdown-panel{ transition-delay:0s; }
}

/* ---- sections ---- */
section{padding-block:52px;}
.tint{background:var(--surface-2);}
.center{text-align:center;}
.center .lede{margin-left:auto;margin-right:auto;}

/* ---- hero ---- */
.hero{padding-block:46px 50px;}
.brandline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--muted); font-weight:500;}
.brandline b{color:var(--ink); font-weight:700;}
.sep{width:5px;height:5px;border-radius:50%;background:var(--coral);display:inline-block;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.kpis{display:flex; gap:18px 44px; flex-wrap:wrap; margin-top:30px;}
.kpi .n{font-family:"Fraunces",serif; font-size:30px; font-weight:600; color:var(--ink);}
.kpi .n .u{font-size:16px; color:var(--muted); font-family:"Public Sans",sans-serif;}
.kpi .l{font-size:13.5px; color:var(--muted); margin-top:2px;}

/* ---- journey strip ---- */
.journey{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px;}
.jcard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); position:relative;}
.jcard .step{font-size:13px; font-weight:700; color:var(--coral);}
.jcard h3{margin:8px 0 6px; font-size:17px;}
.jcard p{margin:0; font-size:14px; color:var(--muted);}
.jcard .pin{position:absolute; top:18px; right:18px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);}

/* ---- feature grid ---- */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:32px;}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow);}
.feat .ic{width:38px;height:38px;border-radius:11px;background:var(--coral-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.feat .ic svg{width:19px;height:19px;stroke:var(--coral);fill:none;stroke-width:2;}
.feat.teal .ic{background:var(--teal-soft);} .feat.teal .ic svg{stroke:var(--teal);}
.feat.gold .ic{background:var(--gold-soft);} .feat.gold .ic svg{stroke:var(--gold);}
.feat h3{margin-bottom:6px;} .feat p{margin:0; font-size:14.5px; color:var(--muted);}

/* ---- split / spotlight ---- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;}
.panel{border-radius:18px; padding:28px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface);}
.panel.coral{background:var(--coral-soft); border-color:var(--coral-line);}
.panel.gold{background:var(--gold-soft); border-color:var(--gold-line);}
.panel.teal{background:var(--teal-soft); border-color:var(--teal-line);}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:999px;}
.badge.coral{color:var(--coral); background:var(--coral-soft);}
.badge.gold{color:var(--gold); background:var(--gold-soft);}
.badge.teal{color:var(--teal); background:var(--teal-soft);}
.badge.violet{color:var(--violet); background:var(--violet-soft);}
.panel.violet{background:var(--violet-soft); border-color:var(--violet-line);}
.flist{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:13px;}
.flist.cols2{display:grid; grid-template-columns:1fr 1fr; gap:12px 28px;}
.flist li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px;}
.flist .ck{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px;background:var(--coral-soft);}
.flist .ck svg{width:12px;height:12px;stroke:var(--coral);fill:none;stroke-width:2.8;}
.flist.teal .ck{background:var(--teal-soft);} .flist.teal .ck svg{stroke:var(--teal);}
.flist.gold .ck{background:var(--gold-soft);} .flist.gold .ck svg{stroke:var(--gold);}
.flist.violet .ck{background:var(--violet-soft);} .flist.violet .ck svg{stroke:var(--violet);}
.flist b{font-weight:600;} .flist span{color:var(--muted);}
@media (max-width:600px){ .flist.cols2{grid-template-columns:1fr;} }
.quote{font-family:"Fraunces",serif; font-size:22px; line-height:1.42; font-weight:500; margin:0; text-wrap:pretty; color:var(--ink);}
.quote .accent{color:var(--coral);}
.tagrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.tag{font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:999px; background:var(--surface); color:var(--muted); border:1px solid var(--line-strong);}

/* ---- pipeline figure ---- */
figure{margin:0;}
.figscroll{overflow-x:auto; padding-bottom:8px;}
.figscroll svg{display:block; min-width:720px; width:100%; height:auto;}
figcaption{color:var(--muted); font-size:14px; margin-top:14px;}

/* ---- audiences / cards ---- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow);}
.card .k{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--coral); margin-bottom:8px;}
.card h3{font-size:17px;} .card p{margin:8px 0 0; font-size:14.5px; color:var(--muted);}

/* ---- cta band (soft, light) ---- */
.ctaband{background:var(--coral-soft);}
.ctaband .wrap{padding-block:60px;}
.ctaband h2{color:var(--ink);}
.ctaband .lede{color:var(--muted);}

/* ---- footer (legacy single-row — kept for reference, superseded by .site-footer) ---- */
footer{color:var(--muted); font-size:14px;}
footer .row{display:flex; gap:22px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
footer .flinks{display:flex; gap:20px; flex-wrap:wrap;}
footer a{color:var(--muted);} footer a:hover{color:var(--ink);}
.foot-note{font-size:13px; margin-top:6px; color:var(--muted);}

/* ---- footer: premium multi-column, dark ---- */
footer.site-footer{background:var(--ink-2); padding-block:56px 26px;}
footer.site-footer .brand{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px;}
.footer-tagline{color:rgba(255,255,255,.78); font-size:14px; margin:14px 0 0; max-width:26ch;}
.footer-desc{color:rgba(255,255,255,.38); font-size:12.5px; margin:10px 0 0; max-width:30ch; line-height:1.65;}
.footer-h{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin:0 0 14px;}
.footer-col{display:flex; flex-direction:column; gap:10px;}
.footer-col a{color:rgba(255,255,255,.68); font-size:14px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); font-size:12.5px; color:rgba(255,255,255,.35);}
.footer-bottom a{color:rgba(255,255,255,.35);}
.footer-bottom a:hover{color:rgba(255,255,255,.72);}
.footer-bottom-links{display:flex; gap:10px; align-items:center;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;} .footer-brand{grid-column:1/-1;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---- legal pages (privacy / terms) ---- */
.legal-hero{background:var(--surface-2); border-bottom:1px solid var(--line); padding-block:40px 34px;}
.legal-crumb{font-size:12.5px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:6px;}
.legal-crumb a{color:var(--muted);} .legal-crumb a:hover{color:var(--ink);}
.legal-date{font-size:13px; color:var(--muted); margin-top:10px;}
.legal-draft-note{display:flex; gap:10px; align-items:flex-start; margin-top:20px; padding:14px 16px; border:1px solid var(--coral-line); background:var(--coral-soft); border-radius:12px; max-width:640px; font-size:13px; color:var(--ink); line-height:1.6;}
.legal-draft-note b{display:block; color:var(--coral); font-weight:700; margin-bottom:3px;}

.legal-layout{display:grid; grid-template-columns:220px 1fr; gap:50px; align-items:start;}
.legal-toc{position:sticky; top:86px;}
.legal-toc > p{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.legal-toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.legal-toc a{font-size:12.5px; color:var(--muted); display:flex; gap:7px;}
.legal-toc a:hover{color:var(--coral);}
.legal-toc .idx{color:var(--line-strong); flex:none;}

.prose-legal section{padding-block:0;}
.prose-legal h2{font-family:"Fraunces",serif; font-size:20px; font-weight:600; color:var(--ink); margin:2.2em 0 .6em;}
.prose-legal h2:first-child{margin-top:0;}
.prose-legal h3{font-size:15.5px; font-weight:700; color:var(--ink); margin:1.6em 0 .5em;}
.prose-legal p{color:var(--muted); margin:0 0 1em; line-height:1.75; max-width:70ch;}
.prose-legal ul{padding-left:1.3em; color:var(--muted); margin:0 0 1em;}
.prose-legal li{margin-bottom:.4em; line-height:1.7;}
.prose-legal a{color:var(--coral);}
.prose-legal strong{color:var(--ink); font-weight:600;}
.legal-callout{background:var(--coral-soft); border:1px solid var(--coral-line); border-radius:14px; padding:18px 20px; margin:1.2em 0;}
.legal-callout p:last-child{margin-bottom:0;}
.legal-footer-note{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);}
@media (max-width:860px){ .legal-layout{grid-template-columns:1fr;} .legal-toc{position:static; margin-bottom:10px;} }

/* ---- contact form ---- */
.contact-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:start; margin-top:34px;}
.cform{display:flex; flex-direction:column; gap:18px;}
.cform label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.cform label .req{color:var(--coral); margin-left:2px;}
.cform input, .cform select, .cform textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); font:inherit; font-size:14.5px; color:var(--ink); transition:border-color .15s, box-shadow .15s;}
.cform input:focus, .cform select:focus, .cform textarea:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft);}
.cform textarea{resize:vertical; min-height:120px; font-family:inherit;}
.cform .consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted);}
.cform .consent input{width:auto; margin-top:3px;}
.cform .consent a{color:var(--coral);}
.cform .cfoot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px;}
.cform .cnote{font-size:12.5px; color:var(--muted);}

.help-panel{background:var(--surface-2); border-radius:20px; padding:26px;}
.help-panel h3{font-size:16px; margin-bottom:16px;}
.help-item{padding:12px 0; border-top:1px solid var(--line);}
.help-item:first-of-type{border-top:none; padding-top:0;}
.help-item b{display:block; font-size:14px; color:var(--ink); font-weight:700;}
.help-item span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}
.help-note{margin-top:20px; padding:16px; background:var(--coral-soft); border:1px solid var(--coral-line); border-radius:14px; font-size:13px; color:var(--ink); line-height:1.6;}
.help-note b{color:var(--coral);}
@media (max-width:820px){ .contact-layout{grid-template-columns:1fr;} }

@media (max-width:900px){
  .journey{grid-template-columns:1fr 1fr;}
  .features{grid-template-columns:1fr 1fr;}
  .grid3{grid-template-columns:1fr;}
  .grid4{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr; gap:26px;}
}
@media (max-width:520px){
  .journey{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr;}
  .grid4{grid-template-columns:1fr;}
}

/* ---- premium micro-interactions ---- */
.jcard, .feat, .card, .cs, .ucpanel, .panel, .stage{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.jcard:hover, .feat:hover, .card:hover, .stage:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--line-strong);}

/* ---- hero: warm gradient + dot texture, used on every page ---- */
.hero{position:relative; overflow:hidden; padding-block:64px 68px;}
.hero::before{content:""; position:absolute; inset:-22% -15% auto -15%; height:640px; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 50% at 20% 18%, rgba(225,90,56,.18), transparent 68%),
    radial-gradient(36% 42% at 86% 6%, rgba(169,120,26,.15), transparent 68%),
    radial-gradient(32% 40% at 55% 50%, rgba(19,122,108,.11), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(28,30,29,.08) 1.4px, transparent 1.4px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 4%, #000 35%, transparent 88%);
  mask-image:radial-gradient(ellipse 60% 58% at 50% 4%, #000 35%, transparent 88%);
}
.hero > .wrap{position:relative; z-index:1;}

h1 .hl{color:var(--coral);}
h1 .hl.gold{color:var(--gold);}
h1 .hl.teal{color:var(--teal);}
h1 .hl.violet{color:var(--violet);}
.hero-trust{margin:20px 0 0; font-size:14px; color:var(--muted);}
.hero-trust b{color:var(--ink); font-weight:700;}

.stat-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:42px;}
.stat-pill{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 22px; box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease;}
.stat-pill:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
.stat-pill .sp-n{font-family:"Fraunces",serif; font-weight:600; font-size:27px; color:var(--coral); line-height:1;}
.stat-pill .sp-l{font-size:12.5px; font-weight:500; color:var(--muted); text-align:left; max-width:11ch; line-height:1.3;}

/* ================================================================
   HOME — "why one platform" unification flow chart
   ================================================================ */
.unify{display:flex; align-items:stretch; gap:16px; margin-top:38px;}
.unify-col{flex:1 1 0; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.unify-col.hub-col{background:var(--coral-soft); border-color:var(--coral-line); align-items:center; text-align:center; flex:1.1 1 0;}
.unify-col.result-col{align-items:center; justify-content:center; text-align:center; background:var(--gold-soft); border-color:var(--gold-line); flex:0.7 1 0;}
.unify-label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;}
.unify-label.accent{color:var(--coral);}
.chip-stack{display:flex; flex-direction:column; align-items:stretch; gap:4px;}
.chip{font-size:13.5px; font-weight:500; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 13px;}
.handoff{font-size:10.5px; color:var(--muted); font-style:italic; text-align:center; padding:1px 0;}
.unify-note{margin:20px 0 0; font-size:13px; color:var(--muted); line-height:1.5;}
.hub{display:inline-flex; align-items:center; gap:9px; background:var(--coral); color:#fff; font-family:"Fraunces",serif; font-weight:600; font-size:18px; padding:12px 22px; border-radius:999px; box-shadow:0 10px 24px rgba(225,90,56,.28);}
.hub-dot{width:23px; height:23px; border-radius:7px; background:rgba(255,255,255,.24); display:inline-flex; align-items:center; justify-content:center; font-size:12.5px;}
.spokes{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:18px;}
.spoke{font-size:12px; font-weight:600; color:var(--coral); background:#fff; border:1px solid var(--coral-line); border-radius:999px; padding:6px 12px;}
.result-pill{font-family:"Fraunces",serif; font-weight:600; font-size:19px; color:var(--gold); background:#fff; border:1px solid var(--gold-line); padding:14px 24px; border-radius:999px;}
.unify-arrow{display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--line-strong); width:20px;}
.unify-arrow svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8;}
@media (max-width:820px){
  .unify{flex-direction:column;}
  .unify-arrow{transform:rotate(90deg); margin:0 auto; height:20px;}
}

/* ================================================================
   MENTORSHIP page — hero cascading layers
   ================================================================ */
.layerstack{position:relative; max-width:320px; margin-inline:auto;}
.layer{border-radius:16px; padding:16px 20px; box-shadow:0 10px 24px rgba(20,24,22,.10); position:relative;}
.layer .ln{display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-bottom:3px;}
.layer .lt{display:block; font-family:"Fraunces",serif; font-weight:600; font-size:17px;}
.layer.l1{background:var(--coral-soft); color:var(--ink); z-index:1;}
.layer.l2{background:#F3C9B4; color:var(--ink); margin-left:12%; margin-top:-9px; z-index:2;}
.layer.l3{background:var(--coral); color:#fff; margin-left:24%; margin-top:-9px; z-index:3;}
.layer.l4{background:var(--ink); color:#fff; margin-left:36%; margin-top:-9px; z-index:4;}
@media (max-width:900px){ .layerstack{display:none;} }

/* ---- numbered context points ---- */
.points-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; margin-top:40px; max-width:720px; margin-inline:auto;}
.point .pn{font-family:"Fraunces",serif; font-size:32px; font-weight:600; color:var(--coral-line); line-height:1; display:block; margin-bottom:8px;}
.point h4{font-size:16px; margin-bottom:4px; font-family:"Public Sans",sans-serif; font-weight:700; color:var(--ink);}
.point p{margin:0; font-size:13.5px; color:var(--muted);}
.point.wide{grid-column:1/-1; max-width:280px; margin-inline:auto; text-align:center;}
@media (max-width:600px){ .points-grid{grid-template-columns:1fr;} }

/* ---- persona radial diagram ---- */
.radial-wrap{background:var(--surface-2); border-radius:24px; padding:34px 24px;}
.radial-wrap.dark{background:var(--ink);}
.radial{position:relative; width:100%; max-width:300px; aspect-ratio:1/1; margin-inline:auto;}
.radial-lines{position:absolute; inset:0; width:100%; height:100%;}
.radial-lines line{stroke:var(--line-strong); stroke-width:.6;}
.radial-wrap.dark .radial-lines line{stroke:rgba(255,255,255,.18);}
.rnode{position:absolute; transform:translate(-50%,-50%); font-size:11px; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 11px; white-space:nowrap;}
.rnode.strong{color:#fff; background:var(--coral); border-color:var(--coral);}
.radial-wrap.dark .rnode{background:transparent; color:var(--teal); border-color:rgba(19,122,108,.5);}
.rcenter{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; letter-spacing:.03em; box-shadow:var(--shadow); text-align:center; line-height:1.15;}
.radial-wrap.dark .rcenter{background:var(--teal); width:74px; height:74px; font-size:10px;}

/* ---- ascending bars ---- */
.bars{display:flex; align-items:flex-end; justify-content:center; gap:20px; height:200px; margin-bottom:14px;}
.bar-col{display:flex; flex-direction:column; align-items:center; gap:10px;}
.bar-col .bar{width:48px; border-radius:10px 10px 4px 4px;}
.bar-col span{font-size:11px; font-weight:700; color:var(--ink); text-align:center; max-width:70px;}
.bars-note{text-align:center; font-size:13px; color:var(--muted); max-width:280px; margin:0 auto;}

/* ---- mini step timeline (compact, for a single persona card) ---- */
.steps-mini{max-width:270px; margin:0 auto;}
.smi{display:flex; gap:13px; align-items:flex-start;}
.smi-dot-col{display:flex; flex-direction:column; align-items:center;}
.smi-dot{width:11px; height:11px; border-radius:50%; border:2px solid var(--violet); background:#fff; flex:none; margin-top:3px;}
.smi-dot.final{background:var(--violet);}
.smi-line{width:2px; flex:1; min-height:26px; background:var(--violet-line); margin:2px 0;}
.smi p{margin:0 0 24px; font-size:13.5px; font-weight:600; color:var(--ink);}
.smi:last-child p{margin-bottom:0; color:var(--violet); font-weight:700;}

/* ---- HOME hero — phone mockup visual ---- */
.phone{display:flex; justify-content:center;}
.phone-frame{width:264px; background:var(--ink-2); border-radius:34px; padding:10px; box-shadow:0 26px 54px rgba(20,24,22,.20), 0 8px 22px rgba(20,24,22,.12);}
.phone-screen{background:var(--surface-2); border-radius:25px; padding:32px 13px 16px; position:relative; display:flex; flex-direction:column; gap:10px; min-height:430px;}
.phone-screen::before{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:54px; height:13px; background:var(--ink-2); border-radius:8px;}
.ps-app{font-family:"Fraunces",serif; font-weight:600; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:7px; margin-bottom:2px;}
.ps-app .dot{width:17px; height:17px; border-radius:5px; background:var(--coral); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:9.5px; font-weight:700;}
.ps-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:0 2px 8px rgba(20,24,22,.04);}
.ps-card.match{display:flex; gap:10px; align-items:center;}
.ps-avatar{width:34px; height:34px; border-radius:50%; background:var(--coral-soft); color:var(--coral); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}
.ps-name{font-size:12.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.ps-tag{font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--coral); background:var(--coral-soft); padding:2px 6px; border-radius:999px;}
.ps-role{font-size:10.5px; color:var(--muted); margin-top:2px;}
.ps-row{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:600; color:var(--ink); gap:8px;}
.ps-time{color:var(--teal); font-weight:700; white-space:nowrap;}
.ps-btn{margin-top:9px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; text-align:center; padding:8px; border-radius:9px;}
.ps-bar{margin-top:9px; height:6px; border-radius:99px; background:var(--line); overflow:hidden;}
.ps-bar span{display:block; height:100%; background:var(--gold); border-radius:99px;}
.ps-card.job .ps-role{margin-top:6px;}
.ps-arrow{color:var(--coral); font-weight:700;}
@media (max-width:900px){ .phone-frame{width:230px;} .phone-screen{min-height:380px;} }

/* ================================================================
   MENTORSHIP page — full roadmap flow chart (goal → placement)
   ================================================================ */
.roadmap-tag{display:flex; justify-content:flex-end; margin-bottom:12px;}
.roadmap-tag span{font-size:11px; color:var(--muted); font-style:italic; border:1px solid var(--line); border-radius:6px; padding:2px 9px;}
.roadmap{max-width:400px; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.rm-node{background:var(--surface-2); border:2px solid var(--line-strong); border-radius:14px; padding:13px 20px; text-align:center;}
.rm-node .rm-k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.rm-node .rm-v{display:block; font-size:14px; font-weight:600; color:var(--ink);}
.rm-seg{width:2px; height:24px; background-image:repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px);}
.rm-seg.done{background-image:none; background-color:var(--teal);}
.rm-step{position:relative; width:100%; border:2px solid var(--line); border-radius:14px; padding:12px 16px; display:flex; gap:12px; align-items:flex-start; background:var(--surface);}
.rm-step.done{background:var(--teal-soft); border-color:var(--teal-line);}
.rm-step.active{border-color:var(--coral); box-shadow:0 10px 22px rgba(225,90,56,.14);}
.rm-num{width:24px; height:24px; border-radius:50%; background:var(--line); color:var(--muted); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}
.rm-step.done .rm-num{background:var(--teal); color:#fff;}
.rm-step.active .rm-num{background:var(--coral); color:#fff;}
.rm-step b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:5px;}
.rm-tags{display:flex; gap:6px; flex-wrap:wrap;}
.rm-tags span{font-size:10.5px; font-weight:600; background:var(--surface-2); color:var(--muted); padding:3px 9px; border-radius:999px;}
.rm-step.done .rm-tags span{background:#fff; color:var(--teal);}
.rm-step.active .rm-tags span{background:var(--coral-soft); color:var(--coral);}
.rm-here{position:absolute; right:12px; top:-11px; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--coral); background:#fff; border:1px solid var(--coral-line); padding:3px 8px; border-radius:999px;}
.rm-goal{background:var(--coral); color:#fff; border-radius:14px; padding:14px 26px; text-align:center; box-shadow:0 12px 26px rgba(225,90,56,.28);}
.rm-goal .rm-k{display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin-bottom:3px;}
.rm-goal .rm-v{display:block; font-family:"Fraunces",serif; font-weight:600; font-size:17px;}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }