/* Home only. Built from site.css tokens; nothing here redefines the design system. */

/* hero: the four outcome markers, one small mono line under the sub */
.ix-outcomes{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.ix-outcomes i{font-style:normal;color:var(--sky)}
.hero .facts{margin-top:0;color:rgba(255,255,255,.78)}
/* hero film: 16:9 in a box that is at most about 10% taller than its own 16:9 (site.css 9), so only a thin strip of the top is lost: keep the dock face and the trucks at the bottom of the first cut */
.hero > .media img,.hero > .media video{object-position:50% 68%}

/* how it works (ink): the lead sits under the headline inside the section bar */
#how .sec-head{padding-bottom:0}



/* problem, round 3 (docs/home-round3.md §6): three full-width rows on paper, each a bar drawn as a CONTOUR (1.5px ink) with no fill. What systems record is the
   solid ink stub at the left (--seen of the width); the rest is the GAP: open paper inside the contour, a sparse flag hatch, a flag dashed edge where the data stops,
   and the NO DATA label in flag. No gray, no sky: the gap is the picture. The number (flag) stands where the data stops; the caption in ink. Same reveal as before
   (data-reveal, site.js 4): the ink stub starts at full width and shrinks to --seen, the text fades in after. Complete without JS, in print and under reduced motion. */
.problem--rows{--gapline:rgba(194,97,31,.4);display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:0;border-top:0}
.problem--rows .pcard{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k k" "n c";column-gap:clamp(20px,3vw,48px);row-gap:6px;align-items:center;
  min-height:clamp(124px,11.5vw,170px);padding:clamp(16px,1.6vw,24px) clamp(20px,2vw,32px) clamp(16px,1.6vw,24px) calc(var(--seen) + clamp(20px,2vw,32px));border:1.5px solid var(--ink);color:var(--ink);background:var(--paper)}
.problem--rows .pcard + .pcard{padding-left:calc(var(--seen) + clamp(20px,2vw,32px));border:1.5px solid var(--ink)}
.problem--rows .pbar{position:absolute;inset:0;z-index:-1;display:flex;height:auto;background:transparent}
.problem--rows .pbar-seen{display:block;flex:none;width:var(--seen);background:var(--hairline);border-right:1.5px solid var(--ink)}
.problem--rows .pbar-unseen{position:relative;display:block;flex:1;background:transparent;border-left:1.5px dashed var(--flag)}
.problem--rows .pbar-unseen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,var(--gapline) 0 1px,transparent 1px 14px);-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 32%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,transparent 32%,#000 62%)}
.problem--rows .pbar-rec{position:absolute;left:calc(var(--seen) + clamp(20px,2vw,32px));bottom:7px;font-style:normal;font-family:var(--mono);font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.problem--rows .pbar-nd{position:absolute;left:12px;top:0;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag-ink);background:var(--paper);padding:4px 8px;border:1px dashed var(--flag)}
.problem--rows .pcard-k{grid-area:k;color:var(--ink-faint)}
.problem--rows .pcard-n{grid-area:n}
.problem--rows .pcard-n b{font-size:clamp(72px,9.5vw,152px);line-height:.9;color:var(--flag)}
.problem--rows .pcard-c{grid-area:c;color:var(--ink);font-size:clamp(17px,1.35vw,21px);max-width:30ch}
.problem--rows .pcard:nth-child(2){--i:1}
.problem--rows .pcard:nth-child(3){--i:2}
html.js .problem--rows.will-draw .pbar-seen{width:100%}
html.js .problem--rows.will-draw .pbar-rec,html.js .problem--rows.will-draw .pcard-k,html.js .problem--rows.will-draw .pcard-n,html.js .problem--rows.will-draw .pcard-c{opacity:0}
html.js .problem--rows.is-in .pbar-seen{width:var(--seen);transition:width .9s cubic-bezier(.7,0,.3,1) calc(var(--i,0) * 180ms)}
html.js .problem--rows.is-in .pbar-rec,html.js .problem--rows.is-in .pcard-k,html.js .problem--rows.is-in .pcard-n,html.js .problem--rows.is-in .pcard-c{opacity:1;transition:opacity .4s ease calc(var(--i,0) * 180ms + .55s)}
@media (max-width:899px){
  .problem--rows{gap:20px}
  .problem--rows .pcard,.problem--rows .pcard + .pcard{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "n" "c";row-gap:8px;min-height:0;padding:18px 18px 32px calc(var(--seen) + 18px)}
  .problem--rows .pcard-n b{font-size:clamp(64px,19vw,84px)}
  .problem--rows .pcard-c{max-width:none}
  .problem--rows .pbar-rec{left:calc(var(--seen) + 18px);bottom:5px}
}


/* phones: the zone label comes off the how film (the last label in the layer) */
@media (max-width:699px){.how-fig .gt-layer .gt-lb:last-child{display:none!important}}


/* how it works, round 4 (docs/home-round4.md): the film alone with its own overlay, full width inside the band's padding (edge to edge under 1000px);
   three text steps in a row (one column on phones), each with the film's own words in mono; then one row saying where Groundtruth sits (the floor,
   Groundtruth, the plan, who acts). Ink band, night tokens, no cards, no arrows drawn as boxes: hairlines and mono only. */
.howfilm{padding:0 var(--pad)}
.how-fig{border:1px solid var(--night-dash)}
@media (max-width:999px){.howfilm{padding:0}.how-fig{width:100vw;margin-left:calc(50% - 50vw);border-inline:0}}

.howsteps{list-style:none;margin:0;padding:clamp(24px,2.8vw,40px) var(--pad) clamp(32px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.howstep{display:grid;gap:8px;align-content:start;padding-top:14px;border-top:1px solid var(--night-dash)}
.howstep p{margin:0}
.howstep-k{display:flex;align-items:baseline;gap:12px;font-size:clamp(20px,1.6vw,24px);font-weight:600;color:var(--paper)}
.howstep-k .step{margin:0;font-size:12px;color:var(--night-muted)}
.howstep-t{font-size:clamp(16px,1.15vw,18px);line-height:1.45;color:var(--night-muted);max-width:30ch}
.howstep-f{display:inline-block;justify-self:start;padding:4px 8px;background:rgba(255,255,255,.06);color:var(--sky);text-transform:none;letter-spacing:.02em;font-size:12px}   /* same voice as the overlay labels (.gt-lb), on the band */
@media (min-width:700px){.howsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px)}}


#how .sec-head .btn{margin-top:6px}
@media (max-width:699px){#how .sec-head .btn{margin-bottom:20px}}

/* contact: a dark photo band with the waitlist form in a paper card (copy left, card right; one column on phones) */
.ix-contact > .media img{object-position:15% 40%}   /* phones: the dark land and water at the left sit behind the copy */
@media (min-width:700px){.ix-contact > .media img{object-position:50% 100%}}
.ix-contact-in{grid-template-columns:minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,40px);padding-block:clamp(48px,6vw,88px)}
/* legibility scrim (founder 2026-10-13: the copy was not readable over the lit cranes): ink fading out toward the form card on wide screens, from the top down where the copy sits above the card.
   Measured on the sampled pixels behind the text: 4.5:1 for body, 3:1 for the heading, at 1440, 1024 and 390. */
.ix-contact::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(11,11,11,.7),rgba(11,11,11,.55) 40%,rgba(11,11,11,.25))}
@media (min-width:1000px){.ix-contact::after{background:linear-gradient(to right,rgba(11,11,11,.7),rgba(11,11,11,.62) 38%,rgba(11,11,11,.2) 60%,rgba(11,11,11,0) 76%)}}
.ix-contact-copy{display:grid;gap:clamp(14px,1.6vw,22px);justify-items:start}
.ix-contact-copy h2{max-width:14ch;font-size:clamp(34px,4.6vw,64px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--paper)}
.ix-contact-copy .lead{max-width:48ch;color:#fff}
.ix-contact-copy .eyebrow{color:rgba(255,255,255,.8)}
.ix-card{width:100%;max-width:560px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:clamp(20px,2.4vw,32px);scroll-margin-top:calc(var(--chrome-h) + 16px)}
.ix-card .form{max-width:none}
/* the card is paper inside an ink band: put the fields back to paper */
.band--ink .ix-card .field{color:var(--ink)}
.band--ink .ix-card .field input,.band--ink .ix-card .field textarea,.band--ink .ix-card .field select{background-color:var(--paper);color:var(--ink);border-color:var(--hairline)}
.band--ink .ix-card .field input:focus,.band--ink .ix-card .field textarea:focus,.band--ink .ix-card .field select:focus{border-color:var(--ink)}
.band--ink .ix-card .form-status{color:var(--ink)}
.ix-card .field textarea{min-height:96px}
@media (min-width:1000px){
  .ix-contact-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,5vw,96px)}
  .ix-card{justify-self:end}
}
.band--ink .ix-card .field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}

/* the NO DATA tags start at the right edge before the reveal: never let them widen the page */
.problem--rows{overflow-x:clip}

/* hero CTA: sky, not paper, so the white NVIDIA badge beside it does not read as a second button (founder 2026-10-13). Badge artwork and size untouched (docs/nvidia-inception.md). */
.hero--full .cta-row > .btn--paper{background:var(--sky);border-color:var(--sky);color:var(--ink)}
.hero--full .cta-row > .btn--paper:hover,.hero--full .cta-row > .btn--paper:focus-visible{background:var(--paper);border-color:var(--paper)}

.ix-events .in{display:grid;gap:14px}
.ix-events-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:clamp(17px,1.3vw,20px);line-height:1.4}
.ix-events-list li{padding-top:8px;border-top:1px solid var(--line,rgba(0,0,0,.12))}