/* JustJava | Big ideas. Better software. page */
/* hero */
.hero-eyebrow{margin-bottom:14px}

/* journey */
.journey{padding-top:80px;background:var(--ink)}
.j-head .h2{max-width:18ch}
.j-sub{margin:16px 0 0;color:var(--muted-dark);font-size:17px;max-width:40ch}
.j-track{position:relative;height:calc(7 * 85svh + 100svh)}
.j-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:60px}
.j-grid{width:100%}
.j-steps{display:none;list-style:none;margin:0;padding:0}
.j-stage{display:grid;gap:14px}
.j-prog{display:flex;gap:6px}
.j-prog i{flex:1;height:3px;border-radius:2px;background:var(--line-dark);transition:background .3s var(--ease)}
.j-prog i.on{background:var(--ultra)}
.j-frame{position:relative;height:min(56svh,460px);min-height:330px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:var(--ink-raised);display:flex;flex-direction:column;overflow:hidden}
.jf-bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;border-bottom:1px solid var(--line-dark);flex:none}
.jf-dots{display:flex;gap:5px}
.jf-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.jf-tab{font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--muted-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jf-body{position:relative;flex:1}
.sc{position:absolute;inset:14px;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .45s var(--ease);pointer-events:none;display:flex;align-items:center;justify-content:center}
.sc.on{opacity:1;transform:none}
.j-cap{min-height:118px}
.j-cap .jc-n{font:500 12px/1 var(--mono);color:var(--maya);letter-spacing:.08em}
.j-cap h3{margin:8px 0 0;font-size:22px;letter-spacing:-.02em;line-height:1.2}
.j-cap p{margin:6px 0 0;color:var(--muted-dark);font-size:15px;line-height:1.45}
.j-cap.swap{animation:capin .35s var(--ease)}
@keyframes capin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.j-foot{padding-block:40px 80px}
.j-foot p{margin:0;color:var(--muted-dark)}
.j-foot a{color:var(--maya)}
.j-foot b{font:500 12px/1.6 var(--mono);letter-spacing:.08em;color:var(--paper);white-space:nowrap}

/* scene 1: requirement */
.s1-card{width:100%;max-width:400px;background:var(--ink);border:1px solid var(--line-dark);border-radius:10px;padding:16px;display:grid;gap:10px}
.s1-top{display:flex;justify-content:space-between;align-items:center}
.chip.final{background:var(--violet);border-color:var(--violet);color:#fff}
.s1-card label{font-size:13px;font-weight:500;color:var(--muted-dark)}
.s1-type{margin:0;min-height:4.4em;font-size:15px;line-height:1.45;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 12px}
.caret{display:inline-block;width:2px;height:1em;background:var(--maya);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s1-meta{display:flex;flex-wrap:wrap;gap:6px}
.s1-meta span{font:500 10px/1 var(--mono);border:1px solid var(--line-dark);border-radius:4px;padding:6px 7px;color:var(--muted-dark)}
.s1-btn{justify-self:start;background:var(--ultra);color:#fff;border-radius:6px;padding:10px 14px;font-size:14px;font-weight:500;transition:background .3s}
.s1-btn.sent{background:#15803D}
/* scene 2: review */
.s2-doc{width:100%;max-width:420px;background:var(--paper);color:var(--ink);border-radius:8px;overflow:hidden}
.s2-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line-light)}
.s2-h b{font-size:15px}.s2-h span{font:11px/1 var(--mono);color:var(--muted-light)}
.s2-r{padding:8px 14px;border-bottom:1px solid var(--line-light);opacity:.12;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.s2-r.on{opacity:1;transform:none}
.s2-r span{font:500 9px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light)}
.s2-r p{margin:2px 0 0;font-size:13px;line-height:1.35}
.s2-r.flag span{color:var(--ultra);box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .3s}
.s2-r.flag.mark span{box-shadow:inset 0 -2px 0 var(--maya)}
/* scene 3: scope */
.s3{width:100%;max-width:420px;display:grid;gap:10px}
.s3-cols{display:flex;justify-content:space-between;font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted-dark);text-transform:uppercase}
.s3-list{display:grid;gap:6px}
.s3-i{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line-dark);border-radius:6px;padding:9px 12px;font-size:14px;background:var(--ink);transition:transform .45s var(--ease),opacity .3s,border-color .3s}
.s3-i em{width:30px;height:18px;border-radius:9px;background:rgba(255,255,255,.15);position:relative;flex:none;transition:background .25s}
.s3-i em::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}
.s3-i.in{border-color:var(--ultra)}
.s3-i.in em{background:var(--ultra)}
.s3-i.in em::after{transform:translateX(12px)}
.s3-i.out{transform:translateX(18%);opacity:.5;border-style:dashed}
.s3-foot{display:flex;align-items:center;gap:10px;font:12px/1 var(--mono);color:var(--muted-dark)}
.s3-bar{flex:1;display:flex;gap:3px;height:8px}
.s3-bar i{flex:1;border-radius:2px;background:var(--ultra);animation:grow .3s var(--ease)}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
/* scene 4: board */
.s4{width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;gap:8px}
.s4-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font:500 9px/1.2 var(--mono);letter-spacing:.06em;color:var(--muted-dark);text-transform:uppercase}
.s4-cols b{font-weight:500;border-bottom:1px solid var(--line-dark);padding-bottom:6px}
.s4-board{position:relative}
.s4-card{position:absolute;top:calc(var(--r) * 50px);left:calc(var(--c,0) * 25%);width:calc(25% - 6px);font-size:11px;line-height:1.25;padding:8px;border-radius:6px;background:var(--ink);border:1px solid rgba(255,255,255,.18);transition:left .5s cubic-bezier(.2,0,0,1),border-color .3s,background .3s}
.s4-card[data-c="3"]{border-color:#15803D;background:rgba(21,128,61,.18)}
/* scene 5: phone */
.s5-phone{position:relative;width:min(210px,62%);height:100%;max-height:380px;border:1px solid rgba(255,255,255,.28);border-radius:28px;background:#0B1638;overflow:hidden}
.s5-notch{position:absolute;top:8px;left:50%;width:60px;height:16px;margin-left:-30px;border-radius:10px;background:#000;z-index:3}
.s5-notif{position:absolute;left:8px;right:8px;top:34px;background:rgba(30,44,92,.97);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 10px;transform:translateY(-140%);opacity:0;transition:transform .4s var(--ease),opacity .3s;z-index:2}
.s5-notif.on{transform:none;opacity:1}
.s5-notif b{font-size:11px}.s5-notif p{margin:2px 0 0;font-size:11px;line-height:1.3}
.s5-uat{position:absolute;inset:36px 12px 14px;display:grid;align-content:start;gap:8px;opacity:0;transition:opacity .3s}
.s5-uat.on{opacity:1}
.s5-uat small{font:500 9px/1 var(--mono);letter-spacing:.08em;color:var(--maya);text-transform:uppercase}
.s5-uat b{font-size:16px}
.s5-uat ul{margin:0;padding:0 0 0 14px;font-size:11px;line-height:1.5;color:var(--muted-dark)}
.s5-btn{margin-top:6px;text-align:center;background:var(--ultra);border-radius:8px;padding:9px;font-size:12px;font-weight:500;transition:background .3s,transform .15s}
.s5-btn.done{background:#15803D}
/* scene 6: release */
.s6{width:100%;max-width:400px;display:grid;gap:14px}
.s6-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.s6-list li{position:relative;padding:8px 10px 8px 34px;border:1px solid var(--line-dark);border-radius:6px;font-size:14px;color:var(--muted-dark);transition:color .3s,border-color .3s}
.s6-list li::before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:1px solid rgba(255,255,255,.25);transition:all .3s}
.s6-list li.on{color:var(--paper);border-color:rgba(21,128,61,.6)}
.s6-list li.on::before{background:#15803D;border-color:#15803D}
.s6-live{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(6px);transition:all .4s var(--ease)}
.s6-live.on{opacity:1;transform:none}
.s6-live .chip{background:var(--violet);border-color:var(--violet);color:#fff}
.s6-live b{font-size:22px}
.s6-live small{font:11px/1.3 var(--mono);color:var(--muted-dark)}
/* scene 7: corecare */
.s7{width:100%;max-width:440px;display:grid;gap:10px}
.s7-top{display:flex;justify-content:space-between;align-items:baseline;font:12px/1 var(--mono);color:var(--muted-dark)}
.s7-top b{font:500 20px/1 var(--sans);color:var(--maya);font-variant-numeric:tabular-nums}
.s7-top b.bad{color:#FF6B8A}
.s7 svg{width:100%;height:110px;overflow:visible}
#s7Path{fill:none;stroke:var(--maya);stroke-width:2;vector-effect:non-scaling-stroke}
.s7-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted-dark)}
.s7-log li{opacity:.2;transition:opacity .3s}
.s7-log li.on{opacity:1}
.s7-log b{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--maya);margin-right:6px}

/* built with */
.stack{padding-block:64px;border-top:1px solid var(--line-dark)}
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stack-list li{font:500 clamp(1.4rem,1rem + 2vw,2.4rem)/1 var(--sans);letter-spacing:-.02em;border:1px solid var(--line-dark);border-radius:999px;padding:12px 20px}
.stack-note{margin:20px 0 0;color:var(--muted-dark);max-width:52ch}

/* static (reduced motion) journey */
.journey.static .j-track{height:auto}
.journey.static .j-sticky{position:static;height:auto;display:block;padding-top:24px}
.journey.static .j-grid,.journey.static .j-prog,.journey.static .j-cap,.journey.static .j-steps{display:none!important}
.j-static{display:grid;gap:28px}
.j-static h3{margin:0 0 4px;font-size:20px}
.j-static p{margin:0 0 12px;color:var(--muted-dark)}
.j-static .j-frame{height:auto;min-height:0}
.j-static .sc{position:relative;inset:auto;opacity:1;transform:none;padding:14px;min-height:280px}

@media (min-width:900px){
  .journey{padding-top:128px}
  .j-track{height:calc(7 * 70vh + 100vh)}
  .j-sticky{padding-top:0}
  .j-grid{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:center}
  .j-steps{display:grid;gap:4px}
  .j-steps li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--line-dark);opacity:.4;transition:opacity .3s var(--ease)}
  .j-steps li.on{opacity:1}
  .js-n{font:500 12px/1.9 var(--mono);color:var(--maya)}
  .j-steps h3{margin:0;font-size:18px;letter-spacing:-.01em}
  .j-steps p{margin:0;max-height:0;overflow:hidden;color:var(--muted-dark);font-size:15px;line-height:1.45;transition:max-height .4s var(--ease),margin .4s var(--ease)}
  .j-steps li.on p{max-height:5em;margin-top:6px}
  .j-cap{display:none}
  .j-frame{height:540px}
  .s1-card,.s2-doc,.s3,.s6,.s7{zoom:1.22}
  .s5-phone{width:250px;max-height:460px}
  .sc{inset:24px}
  .s4-card{font-size:13px;padding:10px;top:calc(var(--r) * 58px)}
  .s4-cols{font-size:10px}
  .s5-phone{width:230px;max-height:420px}
  .stack{padding-block:96px}
  .stack .wrap{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center}
  .stack .eyebrow{margin:0}
  .stack-note{grid-column:2;margin-top:0}
}

/* Edited Copy Final: hero second line, credibility strip, Standard lede */
.hero-sub{margin:14px 0 0;color:var(--muted-dark);font-size:16px;line-height:1.55;max-width:46ch}
.cred{border-block:1px solid var(--line-dark);background:var(--ink);overflow:hidden}
.cred-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cred-track{list-style:none;margin:0;padding:18px 0;display:flex;width:max-content;animation:cred 38s linear infinite}
.cred-track li{display:flex;align-items:center;white-space:nowrap;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.cred-track li::after{content:"";width:6px;height:6px;margin:0 28px;border-radius:50%;background:var(--maya)}
.cred:hover .cred-track{animation-play-state:paused}
@keyframes cred{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .cred-mask{-webkit-mask-image:none;mask-image:none}
  .cred-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:12px;padding-inline:20px}
  .cred-track li[aria-hidden]{display:none}
}
.j-lede{margin:18px 0 0;font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;color:var(--paper);max-width:52ch}
.pc-sub{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);margin-top:-4px}
@media (min-width:900px){.hero-sub{font-size:17px}.cred-track{padding:22px 0}.cred-track li{font-size:14px}}