/* about page styles (load after base.css) */
.menu a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}

/* Hero */
.a-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;padding:130px 0 clamp(36px,5vh,64px)}
.a-hero #gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.a-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:35%;background:linear-gradient(to bottom,transparent,var(--space));z-index:-1;pointer-events:none}
.a-title{font-weight:500;font-size:clamp(46px,8.2vw,138px);line-height:.94;letter-spacing:-.05em;display:grid;gap:.1em}
.a-title .l2{justify-self:end;text-align:right}
.a-hero-foot{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px 64px;align-items:end;margin-top:clamp(40px,8vh,90px)}
.a-hero-foot .lede{color:var(--ink);font-size:clamp(18px,1.5vw,22px);max-width:46ch}
.a-hero-foot .meta{justify-self:end;display:flex;gap:12px;flex-wrap:wrap}
.no-gl .a-hero{background:radial-gradient(50% 45% at 55% 45%,rgba(255,0,200,.22),transparent 70%)}

/* Values switcher */
.values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.v-stage{position:relative;aspect-ratio:1/1;max-height:640px;width:100%;border-radius:var(--r-lg);border:1px solid var(--pink-soft);background:radial-gradient(70% 70% at 50% 50%,rgba(255,0,200,.14),transparent 70%),var(--space-2);overflow:hidden}
.v-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent);opacity:.6}
.v-stage svg{position:absolute;inset:0;width:100%;height:100%}
.v-ill{opacity:0;visibility:hidden}
.v-ill text{font-family:var(--font)}
.v-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.v-item{border-bottom:1px solid var(--line);position:relative}
.v-item button{display:flex;align-items:baseline;gap:18px;width:100%;text-align:left;padding:28px 0 26px;cursor:pointer}
.v-item .vn{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:2.2em;transition:color .5s}
.v-item .vt{font-size:clamp(30px,3.6vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ink-3);transition:color .6s var(--ease)}
.v-item button:hover .vt{color:var(--ink-2)}
.v-item.on .vt{color:var(--ink)}
.v-item.on .vn{color:var(--pink)}
.v-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.v-item.on .v-body{grid-template-rows:1fr}
.v-body>div{overflow:hidden}
.v-body p{color:var(--ink-2);max-width:48ch;padding:0 0 30px calc(2.2em + 18px);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--ease-out)}
.v-item.on .v-body p{opacity:1;transform:none;transition-delay:.2s}
.v-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--pink);transform:scaleX(0);transform-origin:left}

/* Platform showcase */
.showcase{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(100px,12vw,180px)}
.sc-frame{position:relative;perspective:1600px;height:clamp(360px,54vw,760px)}
.sc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%}
.sc-shot{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.09);background:#111}
.sc-shot img{width:100%}
.sc-a{left:12%;top:4%;width:76%;z-index:2}
.sc-b{left:0;top:30%;width:34%;z-index:1}
.sc-c{right:0;top:22%;width:26%;z-index:3}
.sc-glow{position:absolute;left:50%;top:55%;width:70%;height:60%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,0,200,.35),transparent);filter:blur(40px);z-index:-1}
.sc-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:28px;color:var(--ink-3);font-size:14px}

/* Approach: horizontal pinned track */
.approach{overflow:hidden}
.ap-head{padding-top:14px;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
/* Dots sit at 0%, 50% and 100%: the outer columns are equal, so the middle one is centred exactly.
   The line runs dot centre to dot centre, so fill progress 0 / .5 / 1 lands on each dot. */
.ap-rail{--dot:15px;position:relative;display:grid;grid-template-columns:1fr auto 1fr;margin-bottom:34px}
.ap-rail::before,.ap-rail .fill{content:"";position:absolute;left:calc(var(--dot) / 2);right:calc(var(--dot) / 2);top:calc(var(--dot) / 2 - .5px);height:1px}
.ap-rail::before{background:var(--line-2)}
.ap-rail .fill{background:var(--pink);transform-origin:left;transform:scaleX(0)}
.ap-rail span{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:14px;line-height:1.3;white-space:nowrap;color:var(--ink-3);transition:color .4s}
.ap-rail span:first-of-type{justify-self:start;align-items:flex-start}
.ap-rail span:last-of-type{justify-self:end;align-items:flex-end}
.ap-rail span::before{content:"";flex:none;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--space);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .4s,box-shadow .4s}
.ap-rail span.on{color:var(--ink)}
.ap-rail span.on::before{background:var(--pink);box-shadow:0 0 0 5px rgba(255,0,200,.18)}
.ap-track{display:flex;gap:24px;will-change:transform}
.ap-card{flex:0 0 min(1040px,82vw);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,48px);align-items:center;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--space-2);padding:clamp(24px,3.4vw,52px);min-height:clamp(420px,58vh,560px)}
.ap-num{font-size:clamp(64px,7vw,112px);font-weight:500;letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(255,0,200,.7)}
.ap-card h3{font-size:clamp(26px,2.5vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:28px 0 16px}
.ap-card p{color:var(--ink-2);max-width:40ch}
.ap-vis{position:relative;height:100%;min-height:300px;border-radius:18px;background:radial-gradient(90% 80% at 80% 100%,rgba(255,0,200,.16),transparent 60%),#19181c;border:1px solid var(--line);overflow:hidden}
.ap-vis .shot{position:absolute;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.ap-vis .shot img{width:100%}
.ap-vis .chip{position:absolute}

/* Blockers */
.blockers-card{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(60% 80% at 50% 110%,rgba(255,0,200,.2),transparent 70%),var(--space-2);min-height:clamp(460px,60vh,600px);display:grid;place-items:center;text-align:center;padding:clamp(40px,6vw,90px) clamp(22px,4vw,60px);overflow:hidden;transition:border-color .8s}
.blockers-card.clear{border-color:var(--pink-soft)}
.bk-copy{position:relative;z-index:1;max-width:760px}
.bk-copy .h2{margin-bottom:22px}
.bk-copy .lede{margin:0 auto 34px;max-width:52ch}
.blk{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 14px;border-radius:14px;background:#2E2D33;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 40px -14px rgba(0,0,0,.9);font-size:15px;color:var(--ink-2);white-space:nowrap;pointer-events:none;will-change:transform}
.blk i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--ink-3)}

@media (max-width:1080px){
  .a-hero-foot{grid-template-columns:1fr}
  .a-hero-foot .meta{justify-self:start}
  .values{grid-template-columns:1fr}
  .v-stage{max-width:520px;aspect-ratio:1.2/1}
  .ap-track{flex-direction:column}
  .ap-track{width:100%}
  .ap-card{flex:none;width:100%;grid-template-columns:minmax(0,1fr);min-height:0}
  .ap-vis{min-height:0;aspect-ratio:4/3;height:auto;width:100%}
  .ap-rail{display:none}
  .sc-frame{height:auto;aspect-ratio:1.35/1}
}
@media (max-width:720px){
  .a-title .l2{justify-self:start;text-align:left}
  .a-hero{padding-top:110px}
  .v-body p{padding-left:0}
  .ap-vis .chip{height:30px;font-size:12px;padding:0 10px 0 8px}
  .ap-vis .chip[style*="right:8%"]{right:auto!important;left:8%;bottom:calc(9% + 38px)!important}
  .blk{height:40px;font-size:13px;padding:0 14px 0 10px}
}