/* The main page (job 151, jose 2026-11-01: "2 heros in 1 up top", his picture). Its own lines beside site.css (which
   stays under 1000). Behind each half one of jose's own pictures (redo 1, 2026-11-02): the GB10 in the rack behind "Take
   the machine.", the blue light behind "Just make the call." and its typing terminal (term.css, term.js). Every frame
   whole, never one fat side; the dividers are hairlines. */

/* ---- the top: one headline, two heroes ---- */
.hero2{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(2rem,1rem + 3vw,3.5rem) var(--s6)}
.hero2__head{text-align:center;max-width:64rem;margin-inline:auto}
.hero2__head h1{font-size:clamp(var(--t2),.9rem + 2.4vw,var(--t4));text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
.hero2__head .lead{margin-top:var(--s3);color:var(--blue-300)}
.hero2__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(2rem,1rem + 2.5vw,3.25rem)}
/* jose's two pictures (redo 3: "on the left image, we need to have a long gradient towards the background color so we
   get it to disapier slowly and not cut off at the end. and the same on the right ... the left image to be kind of
   aligned to the right and then the right image to be aligned to the left"). Each at one size, 60rem by 20rem (their
   own 3:1). The left one ends at the centre line, so its GB10 (65% to 86% of the picture) stands beside the words and
   the floor runs out to the left; the right one starts at the centre line, its dark side under the words and its chip
   (36% to 44%) where the code card turns, the streams running out to the right. A long gradient melts each into the
   page over its outer half; its top, its bottom and the centre line melt too, so the two never meet. */
.hero2__half::before{content:"";position:absolute;z-index:-1;top:50%;width:60rem;height:20rem;transform:translateY(-50%);
  pointer-events:none;background:center/100% 100% no-repeat}
.hero2__half--gpu::before{right:0;background-image:url("/assets/hero/home-left.webp");
  -webkit-mask:linear-gradient(90deg,transparent,#000 55%,#000 94%,transparent),linear-gradient(transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 55%,#000 94%,transparent) intersect,linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.hero2__half--api::before{left:0;background-image:url("/assets/hero/home-right.webp");
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 45%,transparent),linear-gradient(transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 6%,#000 45%,transparent) intersect,linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.hero2__half{position:relative;display:flex;align-items:center;gap:var(--s4);min-height:25rem;padding-block:var(--s4)}
.hero2__half--gpu{padding-right:var(--s5)}
.hero2__half--api{padding-left:var(--s5);border-left:1px solid var(--hair)}
.hero2__half--api .hero2__copy{flex-basis:14rem}
.hero2__copy{position:relative;z-index:1;flex:0 1 17rem;min-width:0}
/* the words stay readable over the pictures' light: a soft glow of the page's own colour behind the letters */
.hero2__copy :is(h2,p){text-shadow:0 0 .5rem var(--bg),0 0 1.1rem var(--bg),0 0 2rem var(--bg)}
.hero2__copy h2{font-size:clamp(var(--t3),.9rem + 1.9vw,3rem);line-height:1.02;margin-top:var(--s3)}
.hero2__copy p.hero2__deck{margin-top:var(--s3);color:var(--text);max-width:24ch}
.hero2__copy .btn{margin-top:var(--s5)}
.hero2__copy .hero__fine{margin-top:var(--s3)}
.hero2__half--gpu .hero2__copy{flex-basis:13.5rem}

/* the terminal: on the right of its half; it types a call to one of our models, spins and types the next */
.hero2__term{flex:1 1 0;min-width:0}
.hero2__term .cx-term__title{margin-right:0}
.hero2__term pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible;font-size:.74rem;min-height:calc(7 * 1.85em + 2 * var(--s4))}

@media (max-width:1080px){
  .hero2__half{flex-direction:column;align-items:flex-start}
  .hero2__copy,.hero2__half--gpu .hero2__copy{flex-basis:auto}
  .hero2__term{width:100%}
  .hero2__half--gpu{min-height:28rem;justify-content:flex-start}
  /* the words above, the GB10 under them: its picture sits at the foot of its block */
  .hero2__half--gpu::before{top:auto;bottom:-2rem;transform:none}
}
@media (max-width:760px){
  .hero2__grid{grid-template-columns:minmax(0,1fr)}
  /* stacked: each picture across the window, behind its own half, a little darker under the words */
  .hero2__half::before,.hero2__half--gpu::before,.hero2__half--api::before{left:calc(50% - 50vw);right:calc(50% - 50vw);
    top:0;bottom:0;width:auto;height:auto;transform:none;opacity:.6;background-size:cover;
    -webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
  .hero2__half--gpu::before{background-position:75% center}
  .hero2__half--api::before{background-position:40% center}
  .hero2__half--gpu{padding-right:0;min-height:0;padding-bottom:0}
  .hero2__half--api{padding-left:0;border-left:0;border-top:1px solid var(--hair);padding-top:var(--s6)}
}

/* ---- two paths: rent the GPU, or call the model ---- */
.paths{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--s5)}
.paths a{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);color:var(--text);text-decoration:none;text-align:left}
.paths a+a{border-left:1px solid var(--hair)}
.paths a:hover b{color:var(--blue-300)}
.paths svg{width:3rem;height:3rem;flex:none;padding:.7rem;border:1px solid var(--hair-2);border-radius:var(--r-in);
  fill:none;stroke:var(--blue-400);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.paths b{display:block;color:var(--strong);font-size:var(--t1)}
.paths b::after{content:" \2192";color:var(--blue-400)}
.paths span{color:var(--dim)}
.center{text-align:center}
.center h2{font-size:var(--t3)}
.center .lead{margin-inline:auto}

/* ---- the models row ---- */
.mrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.mrow a{display:block;border:1px solid var(--hair);border-radius:var(--r);padding:var(--s4);color:var(--text);text-decoration:none;
  transition:border-color .2s,background .2s}
.mrow a:hover{border-color:var(--blue-500);background:var(--wash)}
.mrow b{display:block;color:var(--strong);font-size:var(--t1)}
.mrow small{display:block;margin-top:.25rem;color:var(--dim);font-size:var(--t-1)}
.mrow .num{display:block;margin-top:var(--s3);font-size:var(--t-1);color:var(--cyan-300)}
.mrow .mdrop__new{margin-left:.35rem}
.mlinks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s4)}

/* ---- the Coder band ---- */
.cband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);
  border:1px solid var(--hair-2);border-radius:var(--r);padding:var(--s5) var(--s6)}
.cband h2{font-size:var(--t2)}
.cband h2 em{font-style:normal;color:var(--blue-300)}
.cband>div{flex:1 1 32rem}
.cband p{color:var(--dim);margin-top:var(--s2)}

/* ---- the products the top shows least ---- */
.prow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.prow li{border:1px solid var(--hair);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.prow h3{font-size:var(--t1)}
.prow p{color:var(--dim);font-size:var(--t-1)}
.prow .num{color:var(--cyan-300);font-size:var(--t-1)}
.prow .go{margin-top:auto}

@media (max-width:900px){
  .mrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prow{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .paths{grid-template-columns:minmax(0,1fr)}
  .paths a{padding-inline:0}
  .paths a+a{border-left:0;border-top:1px solid var(--hair)}
  .mrow,.prow{grid-template-columns:minmax(0,1fr)}
  .cband{padding:var(--s4)}
}