/* ── v30: people build it · already using AI ───────────────── */
/* the desk panel says the example is an example */
.ds-top p{display:flex;flex-direction:column;gap:.2rem}
.ds-sub{font-family:var(--ui);font-weight:400;font-size:.82rem;color:var(--dim)}

/* People build it. People keep it running. (light, between two dark acts) */
.built{background:var(--paper);color:var(--ink);padding:7rem 0}
.built .eyebrow{color:var(--read)}
.built h2{font-size:clamp(2.1rem,4.2vw,3.4rem);max-width:18ch}
.built .lede{color:#4A5054;margin-top:1.1rem;max-width:40rem}
.built-steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.built-steps li{border:1px solid var(--rule);border-radius:16px;padding:1.6rem 1.5rem 1.7rem;background:#FFFFFF}
.bs-n{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:rgba(15,92,78,.1);color:var(--read);
  font-family:var(--hero);font-weight:700;font-size:.95rem}
.built-steps h3{font-family:var(--hero);font-weight:600;font-size:1.25rem;margin:1rem 0 .5rem;letter-spacing:-.01em}
.built-steps p{color:#4A5054;line-height:1.6;font-size:.98rem}

/* Already paying for ChatGPT, Claude, Copilot or Grok? */
.already{background:var(--night-2);padding:7rem 0;border-top:1px solid rgba(255,255,255,.05)}
.already h2{font-size:clamp(2rem,3.8vw,3.1rem);max-width:20ch}
.already .lede{margin-top:1.1rem;max-width:42rem}
.al-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.6rem}
.al-card{border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.3rem 1.5rem;background:rgba(23,27,31,.7);
  transition:border-color .5s cubic-bezier(.32,.72,0,1),transform .5s cubic-bezier(.32,.72,0,1)}
.al-card:hover{border-color:rgba(243,195,106,.45);transform:translateY(-3px)}
.al-card h3{font-family:var(--hero);font-weight:600;font-size:1.08rem;color:var(--paper);margin-bottom:.55rem}
.al-card p{color:var(--fog);font-size:.92rem;line-height:1.6}
.al-go{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:2.2rem}
.al-more{color:var(--teal);text-decoration:none;font-weight:500}
.al-more:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:1080px){.al-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .built,.already{padding:4.5rem 0}
  .built-steps{grid-template-columns:1fr;gap:.9rem;margin-top:2rem}
  .al-grid{grid-template-columns:1fr;gap:.8rem;margin-top:1.8rem}
  .al-go{flex-direction:column;align-items:stretch}
  .al-go .hv2-try{justify-content:center;min-height:52px}
  .al-go .al-more{text-align:center}
  .nav-custom{display:none}
}

/* ── proof: real numbers right after the hero ── */
.proof{background:var(--night-2);padding:4.5rem 0 5rem;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.proof .eyebrow{color:var(--teal)}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
.pf-stat{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.pf-stat b{font-family:var(--hero);font-weight:600;font-size:clamp(2.4rem,4.2vw,3.4rem);line-height:1;color:var(--paper);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pf-stat span{color:var(--fog);font-size:.95rem}
.pf-case{margin-top:2.2rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2rem;align-items:center;
  padding:1.8rem 2rem;border:1px solid rgba(243,195,106,.3);border-radius:20px;background:rgba(243,195,106,.05)}
.pf-k{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.pf-case h3{font-family:var(--hero);font-weight:600;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;margin:.6rem 0 1rem;color:var(--paper);text-wrap:balance}
.pf-go{color:var(--teal);text-decoration:none;font-weight:500}
.pf-go:hover{text-decoration:underline;text-underline-offset:4px}
.pf-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:0}
.pf-nums div{padding:.9rem 1rem;border-radius:12px;background:rgba(11,14,17,.55);border:1px solid var(--line)}
.pf-nums dt{font-size:.78rem;color:var(--dim);margin-bottom:.3rem}
.pf-nums dd{margin:0;font-size:1.05rem;color:var(--fog);font-variant-numeric:tabular-nums}
.pf-nums dd b{color:var(--lamp);font-weight:600;font-size:1.25rem}
.pf-nums dd i{font-style:normal;color:var(--dim);margin:0 .2rem}
@media(max-width:900px){
  .proof{padding:3.5rem 0}
  .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
  .pf-case{grid-template-columns:1fr;padding:1.4rem 1.2rem;gap:1.2rem}
}

/* ── The five moments intro: the proof fills the right half ──
   The intro is a full sticky screen; its words sat alone on the left with
   the right half empty until the first moment arrived. The real numbers
   and the Englewood case sit there now, and fade out with the intro. */
.m-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:3.5rem;align-items:center}
.m-intro>.mi-say{max-width:40rem}
.mi-proof{max-width:30rem;justify-self:end;width:100%;padding:1.6rem 1.7rem;border:1px solid rgba(255,255,255,.08);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.mp-k{display:flex;align-items:center;gap:.55rem;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0}
.mp-stats{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.4rem}
.mp-stats li{display:flex;flex-direction:column;gap:.3rem;padding-top:.8rem;border-top:1px solid var(--line)}
.mp-stats b{font-family:var(--hero);font-weight:600;font-size:clamp(2rem,3vw,2.7rem);line-height:1;color:var(--paper);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mp-stats span{font-size:.85rem;color:var(--fog)}
.mp-case{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.08)}
.mp-ck{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin:0}
.mp-ch{margin:.45rem 0 0;font-family:var(--hero);font-weight:600;font-size:1.12rem;line-height:1.3;color:var(--paper);text-wrap:balance}
.mp-case dl{margin:.9rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.mp-case dt{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.mp-case dd{margin:.25rem 0 0;font-size:.95rem;color:var(--fog);white-space:nowrap}
.mp-case dd b{color:var(--paper);font-weight:600}
.mp-case dd i{font-style:normal;color:var(--dim)}
.mp-go{display:inline-block;margin-top:1rem;font-size:.88rem;color:var(--teal);text-decoration:none;font-weight:500}
.mp-go:hover{color:var(--paper)}
@media(max-width:940px){
  .m-intro{grid-template-columns:1fr;align-content:center;row-gap:1.6rem}
  .mi-proof{justify-self:stretch;max-width:none;padding:1rem 1.1rem}
  .mp-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:.7rem}
  .mp-stats li{padding-top:.5rem}
  .mp-stats b{font-size:1.5rem}
  .mp-stats span{font-size:.68rem;line-height:1.25}
  .mp-case{display:none}
}

/* ── Scroll cue on the intro: an arrow that says what scrolling does ── */
.m-go{display:inline-flex;align-items:center;gap:.7rem}
.m-go-arrow{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid rgba(243,195,106,.45);
  animation:mgo 1.8s cubic-bezier(.45,0,.55,1) infinite}
.m-go-arrow svg{width:1rem;height:1rem}
@keyframes mgo{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.m-go-arrow{animation:none}}

/* ── Workers on the job: cycling examples (js/examples.js) ── */
.mp-slides{display:grid}
.mp-slide{grid-area:1/1;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mp-case.multi .mp-slide:not(.on){opacity:0;transform:translateX(14px);pointer-events:none}
.mp-case.multi .mp-slide.on{opacity:1;transform:none}
.mp-case.still .mp-slide{transition:none}
.mp-dots{display:flex;gap:.45rem;margin-top:1.1rem}
.mp-dots button{position:relative;width:1.6rem;height:1.4rem;padding:0;border:0;background:none;cursor:pointer}
.mp-dots button span{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.mp-dots button[aria-current] span::after{content:"";position:absolute;inset:0;background:var(--teal);transform-origin:left;transform:scaleX(1)}
.mp-case.tick:not(.still) .mp-dots button[aria-current] span::after{animation:mpfill 7s linear forwards}
.mp-case.paused .mp-dots button[aria-current] span::after{animation-play-state:paused}
@keyframes mpfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mp-dots button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
/* phones tall enough get the example too */
@media(max-width:940px) and (min-height:760px){
  .mp-case{display:block;margin-top:1rem;padding-top:.9rem}
  .mp-ch{font-size:1rem}
  .mp-case dl{gap:.5rem}
  .mp-case dd{font-size:.85rem}
  .mp-go{margin-top:.6rem}
}
/* longer figures wrap inside their column instead of running into the next */
.mp-case dd{white-space:normal;line-height:1.35}
.mp-case dt{line-height:1.3}
.mp-case dl{align-items:start}