/* Vibe96 — About (/about). Package 191: moved out of the page's <style> block; colours use the central tokens. */
/* Manrope, served from our own domain: the headlines depend on its narrow, tight shapes,
   and self-hosting means the page never waits on a third party for them. */
/* ═══ About — scoped to this page so nothing here leaks into the rest of the site ═══ */
.ab{--ink:var(--v96-ink);--body:var(--v96-body);--soft:var(--v96-faint);--purple:var(--v96-purple);--purple-d:var(--v96-purple-d);--lav:#F1EDFD;--lav-2:#F7F5FC;--line:#E6E3F0;--navy:#1E1733;
    font-family:"Manrope",system-ui,sans-serif;color:var(--ink);flex:1;background:#fff;-webkit-font-smoothing:antialiased}
.ab *{box-sizing:border-box}
.ab a{text-decoration:none}
.ab .wrap{max-width:1920px;margin:0 auto;padding:0 clamp(20px,8.75vw,168px)}
.ab .eyebrow{margin:0 0 clamp(14px,1.2vw,22px);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.ab h1,.ab h2,.ab h3{margin:0;color:var(--ink);font-weight:700;letter-spacing:-.04em}
.ab h2{font-size:clamp(32px,2.87vw,55px);line-height:1.15;letter-spacing:-.03em}
.ab p{margin:0}
.ab .muted{color:var(--body);line-height:1.72;letter-spacing:.01em}
.ab .purple{color:var(--purple)}

/* buttons */
.ab .btn{display:inline-flex;align-items:center;gap:clamp(10px,1vw,16px);height:clamp(50px,3.4vw,66px);padding:0 clamp(20px,1.6vw,30px);border-radius:10px;font-size:18px;font-weight:700;letter-spacing:-.01em;transition:background .15s,border-color .15s,transform .15s}
.ab .btn:hover{transform:translateY(-1px)}
.ab .btn-primary{background:var(--v96-blue);color:#fff}
.ab .btn-primary:hover{background:var(--purple-d)}
.ab .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid #D9D6E4}
.ab .btn-ghost:hover{border-color:var(--purple);color:var(--purple)}

/* hero */
.ab .hero{padding:clamp(36px,4vw,76px) 0 clamp(40px,3.5vw,67px)}
.ab .hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,80px);align-items:center}
.ab .hero h1{font-size:clamp(44px,4.64vw,89px);line-height:1.1;letter-spacing:-.058em;font-weight:800;margin-bottom:clamp(22px,1.8vw,34px)}
.ab .hero h1 .purple{display:block;padding-bottom:.12em;margin-bottom:-.12em;background:linear-gradient(90deg,#7B2FF7,#6A1BF0);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab .hero-lead{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:clamp(14px,1vw,20px)}
.ab .hero-copy{font-size:20px;line-height:1.8;letter-spacing:.01em;max-width:520px;margin-bottom:clamp(26px,2.1vw,40px)}
.ab .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(20px,1.6vw,30px)}
.ab .hero-note{font-size:14px;color:var(--soft)}
.ab .hero-art{position:relative;background:radial-gradient(ellipse at 50% 45%,#F6F3FF 0%,#fff 68%);border-radius:24px}
.ab .hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.ab .hero-pill{position:absolute;left:14%;bottom:4%;display:inline-flex;align-items:center;gap:10px;padding:clamp(9px,.7vw,13px) clamp(16px,1.3vw,24px);border-radius:999px;background:#fff;box-shadow:0 8px 30px rgba(40,24,110,.10),0 0 0 1px rgba(40,24,110,.05);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ab .hero-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#1FB36A;box-shadow:0 0 0 4px rgba(31,179,106,.14)}
.ab .eyebrow.dot{display:flex;align-items:center;gap:11px}
.ab .eyebrow.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple)}

/* strip */
.ab .strip{background:var(--lav-2);border-top:1px solid #EEEAF7;border-bottom:1px solid #EEEAF7}
.ab .strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding-top:clamp(20px,1.65vw,31px);padding-bottom:clamp(20px,1.65vw,31px);font-size:19px;letter-spacing:-.01em}
.ab .strip span:nth-child(odd){color:var(--body)}
.ab .strip span:nth-child(even){font-weight:700;color:var(--ink)}

/* why we exist */
.ab .why{padding:clamp(56px,5.6vw,107px) 0}
.ab .why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.ab .why-copy{max-width:800px}
.ab .why h2::after{content:"";display:block;width:clamp(44px,3vw,62px);height:4px;border-radius:2px;background:var(--purple);margin-top:clamp(22px,1.8vw,34px)}
.ab .why-copy .why-lead{font-size:26px;font-weight:700;line-height:1.55;letter-spacing:-.015em;color:var(--ink);margin-bottom:clamp(16px,1.2vw,24px)}
.ab .why-copy p{font-size:20px;line-height:1.75;margin-bottom:clamp(14px,1.1vw,22px)}

/* journey */
.ab .journey{background:#F6F4FB;padding:clamp(60px,5.6vw,108px) 0 clamp(44px,4vw,78px)}
.ab .sec-head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,2.6vw,50px)}
.ab .sec-aside{font-size:19px;color:var(--body);line-height:1.6;max-width:420px}
.ab .cards5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,.9vw,18px)}
.ab .jcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,1.46vw,28px) clamp(16px,1vw,19px) clamp(18px,1.4vw,27px);color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.ab .jcard:hover{border-color:#CDB8FB;box-shadow:0 12px 34px rgba(62,28,160,.08);transform:translateY(-2px)}
.ab .jtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(16px,1.9vw,36px)}
.ab .jnum{font-size:24px;font-weight:700;color:#8C6FE0;letter-spacing:-.02em}
.ab .badge{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ab .badge.live{background:#E7F6EE;color:#1B7F4B}
.ab .badge.beta{background:#EFE8FE;color:#6425E0}
.ab .badge.next{background:#EFEEF4;color:var(--v96-body)}
.ab .jimg{aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#fff;margin-bottom:clamp(18px,2.1vw,40px)}
.ab .jimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ab .jcard h3{font-size:22px;letter-spacing:-.025em;margin-bottom:12px}
.ab .jcard .muted{font-size:17px;line-height:1.68;flex-grow:1;margin-bottom:clamp(24px,2vw,38px)}
.ab .jfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:calc(2.6em + clamp(14px,1.1vw,20px));line-height:1.3;padding-top:clamp(14px,1.1vw,20px);border-top:1px solid #EEECF4;font-size:14px;font-weight:700;color:var(--ink)}
.ab .jfoot svg{color:var(--purple);flex:none}
.ab .footnote{margin-top:clamp(20px,1.6vw,30px);text-align:center;font-size:14px;color:var(--soft)}

/* two ways in */
.ab .ways{padding:clamp(60px,5.6vw,108px) 0}
.ab .ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.1vw,22px)}
.ab .way{position:relative;display:block;border-radius:18px;padding:clamp(28px,2.5vw,48px) clamp(28px,2.5vw,48px) clamp(32px,2.8vw,54px);min-height:clamp(240px,19.6vw,376px);transition:transform .15s,box-shadow .15s}
.ab .way:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(40,24,110,.10)}
.ab .way .eyebrow{font-size:13px;margin-bottom:clamp(12px,1vw,18px)}
.ab .way h3{font-size:clamp(23px,1.88vw,36px);letter-spacing:-.035em;margin-bottom:clamp(12px,1vw,20px)}
.ab .way p.copy{font-size:19px;line-height:1.7;max-width:620px;margin-bottom:clamp(20px,1.6vw,30px)}
.ab .way .go{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:700}
.ab .way.light{background:var(--lav)}
.ab .way.light .copy{color:var(--body)}
.ab .way.light .go{color:var(--purple)}
.ab .way.dark{background:var(--navy)}
.ab .way.dark .eyebrow{color:#B99BFF}
.ab .way.dark h3{color:#fff}
.ab .way.dark .copy{color:#C9C5D9}
.ab .way.dark .go{color:#fff}

/* CEO */
.ab .ceo{background:var(--lav);padding:clamp(56px,4.9vw,94px) 0}
.ab .ceo-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4.4vw,88px);align-items:center}
.ab .ceo-photo{position:relative;max-width:470px;margin:0 auto 0 0}
.ab .ceo-photo img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.ab .namecard{position:absolute;left:0;bottom:6%;background:#fff;border-radius:12px;padding:clamp(14px,1.1vw,20px) clamp(18px,1.4vw,26px);box-shadow:0 10px 30px rgba(40,24,110,.10);min-width:clamp(170px,11vw,210px)}
.ab .namecard b{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:3px}
.ab .namecard span{font-size:14px;color:var(--soft)}
.ab .ceo-text{position:relative}
.ab .ceo-text .quote{position:absolute;right:0;top:-.15em;font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:clamp(90px,7vw,140px);line-height:1;color:#D9CCFB;pointer-events:none}
.ab .ceo-text h2{font-size:clamp(30px,2.4vw,46px);letter-spacing:-.035em;margin-bottom:clamp(20px,1.7vw,32px);padding-right:clamp(40px,5vw,110px)}
.ab .ceo-text .muted{font-size:20px;line-height:1.8;margin-bottom:clamp(12px,1vw,20px);max-width:820px}
.ab .sign{display:flex;align-items:baseline;gap:16px;margin-top:clamp(16px,1.3vw,26px)}
.ab .sign b{font-size:20px;letter-spacing:-.02em}
.ab .sign span{font-size:14px;color:var(--soft)}

/* people */
.ab .people{padding:clamp(64px,7.4vw,142px) 0 clamp(60px,5.6vw,108px)}
.ab .pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.1vw,22px)}
.ab .pcard{display:grid;grid-template-columns:clamp(170px,14.2vw,273px) minmax(0,1fr);gap:clamp(18px,2vw,40px);align-items:end;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fff 40%,#FAF8FF);padding:clamp(28px,3vw,58px) clamp(20px,1.8vw,34px) 0;overflow:hidden}
.ab .pcard img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.ab .pcard .ptext{align-self:center;padding-bottom:clamp(20px,1.6vw,30px)}
.ab .pcard .eyebrow{font-size:13px;margin-bottom:clamp(10px,.8vw,16px)}
.ab .pcard h3{font-size:clamp(24px,1.77vw,34px);letter-spacing:-.025em;margin-bottom:clamp(8px,.6vw,12px)}
.ab .pcard .role{font-size:17px;font-weight:700;color:var(--purple);margin-bottom:clamp(14px,1.1vw,22px)}
.ab .pcard .muted{font-size:17px}

/* principles */
.ab .principles{background:var(--v96-tint);padding:clamp(60px,5.6vw,108px) 0}
.ab .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,56px);margin-top:clamp(28px,2.6vw,50px)}
.ab .pitem{border-top:1px solid #DCD9E6;padding-top:clamp(18px,1.4vw,26px)}
.ab .pitem .n{font-size:14px;font-weight:700;color:#8C6FE0;margin-bottom:clamp(14px,1.1vw,22px)}
.ab .pitem h3{font-size:26px;letter-spacing:-.02em;margin-bottom:10px}
.ab .pitem .muted{font-size:18px}

/* builders */
.ab .builders{padding:clamp(56px,4.8vw,92px) 0}
.ab .bgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,80px);align-items:center}
.ab .bgrid h2{margin-bottom:clamp(18px,1.5vw,28px)}
.ab .bgrid .muted{font-size:20px;line-height:1.8;margin-bottom:clamp(20px,1.6vw,30px)}
.ab .bgrid .link{display:inline-flex;align-items:center;gap:14px;font-size:18px;font-weight:700;color:var(--purple)}
.ab .bgrid .link:hover{color:var(--purple-d)}
.ab .bgrid img{display:block;width:100%;max-width:clamp(320px,26.3vw,505px);height:auto;margin:0 auto}

/* closing band */
.ab .cta{background:linear-gradient(115deg,#7B22FB 0%,#6A1FF2 42%,#2E4FEA 100%);color:#fff;text-align:center;padding:clamp(56px,4.4vw,84px) 0}
.ab .cta .eyebrow{color:rgba(255,255,255,.82)}
.ab .cta h2{color:#fff;font-size:clamp(34px,3.23vw,62px);line-height:1.12;letter-spacing:-.04em;margin-bottom:clamp(26px,2.1vw,40px)}
.ab .cta h2 em{font-style:normal;color:rgba(214,202,255,.72)}
.ab .cta .row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ab .cta .btn-light{background:#fff;color:var(--purple)}
.ab .cta .btn-light:hover{background:var(--v96-soft)}
.ab .cta .btn-line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.ab .cta .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ═══ smaller screens ═══ */
@media (max-width:1180px){
  .ab .cards5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab .pcard{grid-template-columns:1fr;padding-top:clamp(24px,3vw,40px)}
  .ab .pcard img{max-width:260px;margin:0 auto}
  .ab .pcard .ptext{order:-1;padding-bottom:0}
}
@media (max-width:900px){
  .ab .hero-grid,.ab .why-grid,.ab .ceo-grid,.ab .bgrid,.ab .ways-grid,.ab .pcards,.ab .pgrid{grid-template-columns:1fr}
  .ab .cards5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab .ceo-photo{max-width:340px;margin:0 auto}
    .ab .bgrid img{margin:0 auto}
  .ab .strip .wrap{justify-content:flex-start}
}
@media (max-width:1180px){ .ab .br-wide{display:none} }
@media (max-width:560px){
  .ab .strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
  .ab .pcard img{max-width:190px}
  .ab .hero-art{margin-top:8px}
  .ab .cards5{grid-template-columns:1fr}
  .ab .btn{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){ .ab *{transition:none!important} .ab .jcard:hover,.ab .way:hover,.ab .btn:hover{transform:none} }

/* "Vibe96 at a glance" (was inline) */
.ab .glance{width:min(100% - 2 * clamp(20px,5vw,96px),1500px);margin:clamp(40px,4vw,72px) auto;padding:clamp(26px,2.4vw,40px);border:1px solid var(--v96-line);border-radius:22px;background:#fff}
.ab .glance h2{margin:0;font-size:clamp(24px,2vw,34px);font-weight:800;letter-spacing:-.03em}
.ab .glance p.lead{margin:10px 0 0;font-size:17px;line-height:1.65;color:var(--v96-body);max-width:860px}
.ab .glance .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:22px}
.ab .glance .fact{padding:18px;border-radius:16px;background:var(--v96-tint)}
.ab .glance .fact b{display:block;font-size:clamp(26px,2vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--v96-ink)}
.ab .glance .fact span{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--v96-body)}
.ab .glance p.note{margin:14px 0 0;font-size:13px;color:var(--v96-faint)}