/* The JustJava Standard page */
.values{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line-light)}
.values li{display:grid;gap:10px;padding-block:28px;border-bottom:1px solid var(--line-light)}
.values h3{margin:0;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.025em;line-height:1.1}
.values p{margin:0;color:var(--muted-light);max-width:52ch}
@media (min-width:900px){.values li{grid-template-columns:5fr 7fr;gap:48px;align-items:baseline;padding-block:36px}}
.s-hero{padding-block:40px 80px}
.s-title{font-size:clamp(2.3rem,1.2rem + 4.4vw,5rem);max-width:17ch}
.s-hero .lede{max-width:40ch;margin-top:24px}
.s-sig{margin:40px 0 0;font:500 12px/1.6 var(--mono);letter-spacing:.1em;color:var(--maya)}
.s-sig b{font-weight:400;color:var(--muted-dark);margin-inline:4px}
.pr h3{font-size:clamp(1.35rem,1.15rem + 1vw,2rem)}
.s-how .h2{max-width:14ch}
.how{margin-top:48px;display:grid;gap:0}
.phase{position:relative;display:grid;align-content:start;gap:4px;padding:28px 0;border-top:1px solid var(--line-dark)}
.ph-name{margin:0 0 8px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--maya)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;opacity:.35;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.steps li.in{opacity:1;transform:none}
.steps .n{font:500 13px/1.9 var(--mono);color:var(--muted-dark);letter-spacing:.04em}
.steps h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.steps p{margin:4px 0 0;color:var(--muted-dark);max-width:44ch}
.steps .has-demo .n{color:var(--maya)}
.steps .p-go{display:inline-flex;margin-top:10px;color:var(--maya);text-decoration:none;font-weight:500}
.s-base .h2{max-width:16ch}
.base-lede{margin:20px 0 0;color:var(--muted-light);font-size:18px;max-width:44ch}
.base{margin-top:40px;display:grid;gap:20px;align-items:start}
.base-read{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:4;background:var(--ink);color:var(--paper);border-radius:8px;padding:16px 18px;display:grid;gap:14px;transition:top .3s var(--ease)}
body.nav-hidden .base-read{top:calc(env(safe-area-inset-top,0px) + 8px)}
.br-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chip.lo{border-color:var(--maya);color:var(--maya)}
.chip.md{border-color:#F5B94A;color:#F5B94A}
.chip.hi{border-color:#FF6B8A;color:#FF6B8A}
.br-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.br-nums b{display:block;position:relative;overflow:hidden;height:34px;font-size:32px;line-height:34px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.br-nums b span{display:block}
.br-nums small{font-size:12px;line-height:1.3;color:var(--muted-dark);display:block;margin-top:4px}
.br-bar{display:flex;gap:3px;height:10px}
.br-bar i{flex:1;border-radius:2px;background:var(--ultra);transform-origin:left;animation:grow .3s var(--ease)}
.br-bar i.dep{background:var(--maya)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
.br-later{margin:0;font-size:13px;line-height:1.45;color:var(--muted-dark);min-height:2.9em}
.br-later b{color:var(--paper);font-weight:500}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cap button{width:100%;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;text-align:left;background:var(--paper);border:1px solid var(--line-light);border-radius:8px;padding:16px 18px;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.cap button:hover{border-color:rgba(7,15,41,.3)}
.cap .c-name{font-weight:500;font-size:16px;display:block}
.cap .c-meta{display:block;margin-top:4px;font:12px/1.4 var(--mono);color:var(--muted-light)}
.cap .c-meta em{font-style:normal;color:#8A5A12}
.sw{width:44px;height:26px;border-radius:13px;background:rgba(7,15,41,.15);position:relative;transition:background .2s var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.cap [aria-pressed="true"]{border-color:var(--ultra);background:#F2F6FF}
.cap [aria-pressed="true"] .sw{background:var(--ultra)}
.cap [aria-pressed="true"] .sw::after{transform:translateX(18px)}
.cap.core .c-meta::after{content:" · core";color:var(--ultra)}
.base-note{margin:28px 0 0;font-size:14px;color:var(--muted-light);max-width:60ch}
.s-cta .wrap{display:block}
@media (min-width:900px){
  .s-hero{padding-block:120px 128px}
  .how{grid-template-columns:repeat(4,1fr);gap:28px}
  .phase{border-top:0;padding:0}
  .phase::before{content:"";display:block;height:2px;background:var(--line-dark);margin-bottom:22px;background-image:linear-gradient(var(--ultra),var(--ultra));background-repeat:no-repeat;background-size:var(--fill,0%) 100%;transition:background-size .6s var(--ease)}
  .phase.in::before{--fill:100%}
  .steps li{grid-template-columns:1fr;gap:4px}
  .base{grid-template-columns:420px 1fr;gap:48px}
  .base-read{top:100px;padding:24px}
  body.nav-hidden .base-read{top:40px}
  .caps{grid-template-columns:1fr 1fr}
}

.steps .art{margin-top:10px}