/* The homepage, on top of glass.css. The panes of the stack show plain interface, and the six
   projects show their real screens. The stack itself is drawn by scripts/stack.mjs at build time;
   the rules marked "stack.mjs" below carry numbers that file checks. */
ul,ol{list-style:none;margin:0;padding:0}

/* ---------- the opening ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,56px);align-items:center;padding-block:clamp(24px,3.6vh,52px) clamp(36px,6vh,72px);min-height:min(calc(100vh - 73px),900px)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
h1{font:800 clamp(46px,6.05vw,90px)/.9 var(--display);text-transform:uppercase}
h1 span{display:block;white-space:nowrap}
h1 .hl,h2 .hl{display:inline}
.sub{font-size:clamp(20px,2.05vw,27px);line-height:1.22;font-weight:600;color:var(--coral);margin-top:24px;max-width:30ch}
.note{font-size:16px;line-height:1.6;margin-top:20px;max-width:44ch;color:var(--soft)}

/* ---------- the stack ---------- */
.stage{position:relative}
.stack{width:100%;height:auto;overflow:visible}
.grid-line{fill:none;stroke:#6CCBFF;stroke-opacity:.22;stroke-width:1}
.p-ops{--k:0}.p-field{--k:1}.p-customer{--k:2}.p-ai{--k:3}
.pane{transform:translate(calc(var(--mx,0)*var(--k)*7px),calc(var(--my,0)*var(--k)*5px - var(--lift,0px)));transition:transform .6s var(--ease),opacity .45s}
.enter{animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--k)*.17s + .15s)}
.bob{animation:bob 6.5s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-1.4s)}
.shade{fill:#01060E;opacity:.6}
.slab{fill:rgba(108,203,255,.07);stroke:rgba(255,255,255,.22);stroke-width:1}
.frost{fill:#06274A;opacity:.74}
.p-ai .frost{fill:#8A3F38;opacity:.78}
.glass{stroke:rgba(255,255,255,.62);stroke-width:1.3;transition:stroke .3s,stroke-width .3s}
.glint{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.8}
.sheen{animation:sheen 8s var(--ease) infinite;animation-delay:calc(var(--k)*.5s + 2s)}
.p-ai .glass{stroke:#FFC0B5}
.p-ai .slab{fill:rgba(255,111,89,.14);stroke:rgba(255,170,156,.45)}
.p-title{font:800 14px var(--body);letter-spacing:.16em;fill:#fff}
.p-sub{font:500 11px var(--body);fill:rgba(255,255,255,.72)}

.day{font:700 8.5px var(--body);letter-spacing:.12em;fill:rgba(255,255,255,.55)}
.day.hot{fill:#fff}
.crew{font:700 9.5px var(--body);letter-spacing:.12em;fill:rgba(255,255,255,.88)}
.col-hot{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.24);stroke-width:1}
.job{fill:#6CCBFF;opacity:.36}
.job.devon{fill:#FF8E7B}
.job.tue{opacity:1}
.mover{transition:transform .75s var(--ease)}
/* stack.mjs: Devon's twelve drop in under Maya's eight */
.stage[data-state=done] .mover{transform:translate(0,66.8px)}

.route-ghost{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round;stroke-linejoin:round}
.route{fill:none;stroke:#6CCBFF;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:run 9s linear infinite;filter:drop-shadow(0 0 5px rgba(108,203,255,.85))}
/* stack.mjs: the route the runner rides */
.runner{offset-path:path('M36 176L100 112L170 160L244 92L324 134');offset-rotate:0deg;fill:#fff;animation:ride 9s linear infinite;filter:drop-shadow(0 0 6px #6CCBFF)}
.stop-ring{fill:#06223F;stroke:#fff;stroke-width:1.8}
.stop-ok{fill:none;stroke:#6CCBFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:ok0 9s linear infinite}
.s1 .stop-ok{animation-name:ok1}.s2 .stop-ok{animation-name:ok2}.s3 .stop-ok{animation-name:ok3}.s4 .stop-ok{animation-name:ok4}
.mini{font:700 8.5px var(--body);letter-spacing:.16em;fill:rgba(255,255,255,.62)}

.card{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.36);stroke-width:1}
.photo-hill{fill:rgba(4,27,50,.55)}
.photo-sun{fill:var(--amber)}
.ln{fill:rgba(255,255,255,.42)}
.h-dot{fill:var(--ice)}
.paid{fill:var(--pool)}
.sent{animation:sent 7s var(--ease) infinite}
.sent-bg{fill:var(--coral)}
.sent-ok{fill:none;stroke:var(--night);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sent-t{font:800 9px var(--body);letter-spacing:.14em;fill:var(--night)}

.think{fill:#fff;animation:think 1.4s ease-in-out infinite}
.t1{animation-delay:.2s}.t2{animation-delay:.4s}
.stage:not([data-state=ask]) .think{animation:none;opacity:.5}
.ask{font:700 23px var(--body);fill:#fff}
/* The two answers need the script, so they stay out of sight until it is running. */
.ask-btn{display:none;cursor:pointer;outline:none}
.js .ask-btn{display:inline}
.ask-btn rect{transition:fill .2s,stroke-width .2s}
.ask-btn.yes rect{fill:#fff}
.ask-btn.no rect{fill:rgba(4,27,50,.28);stroke:#fff;stroke-width:1.4}
.ask-btn-t{font:800 14.5px var(--body);fill:var(--night);pointer-events:none}
.ask-btn.no .ask-btn-t{fill:#fff}
.ask-btn.yes:hover rect{fill:#FFE9E4}
.ask-btn.no:hover rect{fill:rgba(4,27,50,.5)}
.ask-btn:focus-visible rect{stroke:var(--night);stroke-width:3.5}
.stage[data-state=ask] .ask-btn.yes rect{animation:beat 1.9s ease-in-out infinite}
.js .ask-btn.gone,.ask-controls .gone{display:none}

.thread-line{stroke:rgba(108,203,255,.5);stroke-width:1.2;stroke-dasharray:2 5}
.thread-foot{fill:none;stroke:rgba(108,203,255,.65);stroke-width:1.2}
.pulse{fill:#fff;filter:drop-shadow(0 0 5px #6CCBFF);animation:pulse-run 2.3s linear infinite}
/* stack.mjs: how far light travels between two panes, and when each one sets off */
.pulse.down{--len:117px}
.pulse.up{--len:-117px}
.wait-22{animation-delay:.22s}
.wait-30{animation-delay:.30s}
.wait-44{animation-delay:.44s}
.wait-70{animation-delay:.70s}
.thread.hot .thread-line{stroke:rgba(255,150,134,.6)}
.thread.hot .thread-foot{stroke:rgba(255,150,134,.7)}
.thread.hot .pulse{opacity:0;animation:none;fill:#FFE0D9;filter:drop-shadow(0 0 7px var(--coral))}
.stage.flash .thread.hot .pulse{animation:pulse-once .5s linear both}

.stage[data-hot=ai] .p-ai,.stage[data-hot=customer] .p-customer,.stage[data-hot=field] .p-field,.stage[data-hot=ops] .p-ops{--lift:12px}
.stage[data-hot=ai] .p-ai .glass,.stage[data-hot=customer] .p-customer .glass,.stage[data-hot=field] .p-field .glass,.stage[data-hot=ops] .p-ops .glass{stroke:#fff;stroke-width:2}
.stage.picked .pane{opacity:.45}
.stage.picked[data-hot=ai] .p-ai,.stage.picked[data-hot=customer] .p-customer,.stage.picked[data-hot=field] .p-field,.stage.picked[data-hot=ops] .p-ops{opacity:1}

.ask-controls{display:none}
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:4px}
.legend button{display:block;width:100%;text-align:left;background:none;border:0;border-top:2px solid rgba(255,255,255,.24);padding:12px 0 0;cursor:pointer;transition:border-color .3s}
.lg-name{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.lg-line{display:block;font-size:13.5px;line-height:1.4;color:var(--dim);margin-top:5px}
.stage[data-hot=ai] .legend [data-pane=ai],.stage[data-hot=customer] .legend [data-pane=customer],.stage[data-hot=field] .legend [data-pane=field],.stage[data-hot=ops] .legend [data-pane=ops]{border-top-color:var(--coral)}

/* ---------- proof ---------- */
.proof ul{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.proof li{padding:26px 28px 30px}
.proof li+li{border-left:1px solid var(--line)}
.proof li:first-child{padding-left:0}
.proof-figure{font:800 clamp(52px,6.2vw,92px)/.95 var(--display);color:var(--coral);display:flex;align-items:center;gap:14px}
.proof-figure small{font-size:.62em}
.proof-figure .live-dot{width:16px;height:16px}
.proof-text{margin-top:8px;font-size:16px;max-width:30ch;color:var(--soft)}

/* ---------- the sections ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2{font:800 clamp(56px,9vw,136px)/.86 var(--display);text-transform:uppercase}
.sec-head p{font-size:17px;max-width:36ch;color:var(--soft)}
.sec-head .mono{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:16px;max-width:none}
.pains,.work,.files,.how,.about{padding-bottom:var(--section)}
.pains{padding-top:var(--section)}
.pain-list{display:grid;gap:16px}
.pain{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 56px;align-items:center;padding:30px 34px}
.pain-said{font-size:clamp(22px,2.3vw,32px);line-height:1.22;font-weight:600}
.tagline{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:8px}
.build p:last-child{font-size:17px;color:rgba(255,255,255,.9);max-width:44ch}

.file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.file{position:relative;padding:24px 24px 22px}
.file-label{font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stamp{position:absolute;top:17px;right:18px;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--coral);border:1.5px solid var(--coral);padding:4px 8px;transform:rotate(-5deg)}
.file h3{font:800 clamp(26px,2.4vw,34px)/1 var(--display);text-transform:uppercase;margin:34px 0 18px;max-width:17ch}
.file dl div{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:10px 0;border-top:1px dashed rgba(255,255,255,.26);font-size:14.5px}
.file dt{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);padding-top:3px}
.redact{display:inline-block;height:13px;background:rgba(255,255,255,.9);vertical-align:middle;margin-right:6px}
.r-170{width:170px}.r-120{width:120px}.r-80{width:80px}.r-60{width:60px}.r-40{width:40px}
.file-more{border:1.5px dashed rgba(255,255,255,.45);border-radius:22px;transition:border-color .3s}
.file-more:hover{border-color:var(--coral)}
.file-more a{display:flex;flex-direction:column;height:100%;min-height:236px;padding:24px;text-decoration:none}
.more-title{font:800 34px/1 var(--display);text-transform:uppercase;margin-top:auto}
.more-note{margin-top:12px;font-size:15px;color:var(--soft)}
.more-cta{color:var(--coral);font-weight:700;white-space:nowrap}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.step{position:relative;padding:28px 28px 30px}
.step h3{font:800 clamp(30px,2.8vw,40px)/1 var(--display);text-transform:uppercase}
.step p{margin-top:14px;font-size:16px;color:var(--soft)}
.step+.step::before{content:'→';position:absolute;left:-17px;top:50%;transform:translate(-50%,-50%);color:var(--coral);font-weight:800;font-size:22px}

.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:center}
.about-pane{overflow:hidden;padding:44px 26px 20px;background:radial-gradient(62% 72% at 24% 16%,rgba(255,196,128,.62),transparent 70%),linear-gradient(135deg,rgba(255,154,136,.42),rgba(255,111,89,.16))}
.about-pane img{width:100%}
.about-copy h2{font:600 clamp(28px,3.2vw,44px)/1.14 var(--body);letter-spacing:-.01em}
.about-copy p{margin-top:18px;font-size:17px;color:var(--soft);max-width:58ch}
.about-copy .link{margin-top:14px}

/* The sections below the opening arrive as they scroll into view, once the script is running. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease),border-color .3s}
.js .rv.in{opacity:1;transform:none}

@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes bob{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
@keyframes sheen{0%,58%{transform:translateX(0)}100%{transform:translateX(580px)}}
@keyframes run{from{stroke-dashoffset:100}82%,to{stroke-dashoffset:0}}
@keyframes ride{from{offset-distance:0%}82%,to{offset-distance:100%}}
@keyframes ok0{0%,1%{opacity:0}3%,97%{opacity:1}100%{opacity:0}}
@keyframes ok1{0%,20%{opacity:0}22%,97%{opacity:1}100%{opacity:0}}
@keyframes ok2{0%,40%{opacity:0}42%,97%{opacity:1}100%{opacity:0}}
@keyframes ok3{0%,61%{opacity:0}63%,97%{opacity:1}100%{opacity:0}}
@keyframes ok4{0%,81%{opacity:0}83%,97%{opacity:1}100%{opacity:0}}
@keyframes sent{0%,38%{opacity:0;transform:translateY(5px)}46%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes think{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes beat{50%{stroke:rgba(255,255,255,.45);stroke-width:7}}
@keyframes pulse-run{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(var(--len));opacity:0}}
@keyframes pulse-once{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(var(--len));opacity:0}}

/* ---------- narrower screens ---------- */
@media (max-width:1040px){.file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  /* A tablet held upright: the words, then the stack at a size its panes can be read. */
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:8px}
  .sub,.note{max-width:none}
  h1{font-size:clamp(46px,11.6vw,96px)}
  .stage{width:100%;max-width:680px;margin-inline:auto}
  .legend{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:720px){
  /* On a phone the stack is drawn larger than the column and cut at the sides, so the top pane's
     question can be read; the two answers move to full-size buttons under it. */
  .stage{overflow:hidden;width:auto;max-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stack{width:150%;max-width:none;margin-left:-25%}
  .ask-btn,.js .ask-btn{display:none}
  .ask-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:50px;margin:0 0 20px;visibility:hidden}
  .js .ask-controls{visibility:visible}
  .ask-controls button{min-height:50px;border:1.5px solid #fff;background:transparent;border-radius:99px;padding:0 10px;font-weight:700;font-size:15px;cursor:pointer}
  .ask-controls .ctl-yes{background:#fff;color:var(--night)}
  .proof ul{grid-template-columns:minmax(0,1fr)}
  .proof li{padding:20px 0 22px}
  .proof li+li{border-left:0;border-top:1px solid var(--line)}
  .file-grid,.steps{grid-template-columns:minmax(0,1fr)}
  .pain{grid-template-columns:minmax(0,1fr);padding:24px}
  .step+.step::before{content:'↓';left:50%;top:-17px}
  .about{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .route{stroke-dashoffset:0}
  .stop-ok{opacity:1}
  .runner{offset-distance:100%}
  .js .rv{opacity:1;transform:none}
}