/* Home page layout. Shared components live in /assets/site.css.
   Index numbers, hairline cells and spec rails are the page's recurring devices; icons stay in the menus. */

.idx{display:block;font:500 12px/16px var(--mono);letter-spacing:.06em;color:var(--c-muted)}

/* ---------- hero: copy over a full-bleed character field ---------- */
.hero-home{position:relative;display:grid;align-items:center;min-height:min(92vh,900px);padding:112px 0 128px;overflow:hidden;background:var(--night)}
.hero-home::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(to right,var(--night-line) 0 1px,transparent 1px calc(100% / 12));-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 85%);mask-image:linear-gradient(to bottom,#000 0,transparent 85%)}
.hero-inner{position:relative;z-index:1}
.hero-copy{max-width:920px}
.hero-home .display-xl{max-width:920px;font-size:clamp(44px,5.7vw,84px);line-height:1.02;letter-spacing:-.035em}
.h1-line{display:inline-block;white-space:nowrap}
@media (min-width:880px){.h1-line{display:block}}
.hero-home .hero-lead{font-size:20px;line-height:31px;color:var(--on-night-text);max-width:600px;margin-top:32px}
.hero-home .btn-row{margin-top:36px}
.hero-spec{margin-top:88px}
.hero-ascii{position:absolute;inset:0;z-index:0;pointer-events:none;
  /* fade in from the copy side and out above the spec rail, so neither sits on live characters */
  -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 42%,#000 78%),linear-gradient(to bottom,#000 0,#000 64%,transparent 92%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,transparent 42%,#000 78%),linear-gradient(to bottom,#000 0,#000 64%,transparent 92%);
  mask-composite:intersect}
.hero-ascii pre{position:absolute;inset:0;margin:0;padding:0;font-family:var(--mono);font-size:13px;line-height:1.16;white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none}
.ascii-base{color:rgba(140,150,168,.30)}
.ascii-hot{color:var(--signal-400);text-shadow:0 0 12px rgba(255,122,87,.45)}
@media (max-width:879px){
  .hero-home{display:block;min-height:0;padding:64px 0 40px}
  .hero-home::before{display:none}
  .hero-home .display-xl{font-size:clamp(28px,9vw,38px);line-height:1.08;letter-spacing:-.03em}
  .hero-home .hero-lead{font-size:18px;line-height:28px;margin-top:24px}
  .hero-spec{margin-top:48px}
  .hero-ascii{position:relative;inset:auto;height:180px;margin-top:32px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
  .hero-ascii pre{font-size:11px}
}

/* ---------- spec rail: label + arrowed values, hairline cells ---------- */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--c-line)}
.spec>div{padding:14px 20px 0 0;min-width:0}
.spec>div+div{padding-left:20px;border-left:1px solid var(--c-line)}
.spec dt{font:500 11px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.spec dd{margin:6px 0 0;font:400 14px/21px var(--sans);color:var(--c-text)}
.spec .arr{color:var(--c-muted);margin:0 4px}
@media (max-width:879px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}.spec>div{padding:14px 16px 16px 0;border-bottom:1px solid var(--c-line)}.spec>div+div{padding-left:0;border-left:0}.spec>div:nth-child(even){padding-left:16px;border-left:1px solid var(--c-line)}}
@media (max-width:359px){.spec{grid-template-columns:minmax(0,1fr)}.spec>div:nth-child(even){padding-left:0;border-left:0}}

/* ---------- numbered capability strip ---------- */
.strip{background:var(--white)}
.strip-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--line)}
.strip-list li{padding:24px 24px 28px 0;display:flex;flex-direction:column}
.strip-list li+li{padding-left:24px;border-left:1px solid var(--line)}
.strip-list .idx{margin-bottom:18px}
.strip-title{font:500 16px/22px var(--sans);color:var(--ink)}
.strip-text{margin-top:6px;font:400 14px/21px var(--sans);color:var(--muted)}
@media (max-width:1079px){.strip-list{grid-template-columns:repeat(2,minmax(0,1fr))}.strip-list li,.strip-list li+li{border-left:0;border-top:1px solid var(--line);padding-left:0}.strip-list li:nth-child(-n+2){border-top:0}.strip-list li:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}.strip-list li:last-child{grid-column:1/-1;padding-left:0;border-left:0}}
@media (max-width:639px){.strip-list{grid-template-columns:minmax(0,1fr)}.strip-list li,.strip-list li+li,.strip-list li:nth-child(even){padding:20px 0;border-left:0;border-top:1px solid var(--line)}.strip-list li:first-child{border-top:0}}

/* ---------- statement ---------- */
.statement-head{text-align:center}
.statement-head .eyebrow{text-align:center}
.statement{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.15;letter-spacing:-.025em;color:var(--muted);max-width:1040px;margin:0 auto;text-wrap:balance}
.statement .ink{color:var(--ink)}

/* ---------- hairline cells (problem, controls) ---------- */
.cells{display:grid;margin-top:64px;border-top:1px solid var(--c-line)}
.cells-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{padding:28px 24px 32px 0;border-bottom:1px solid var(--c-line);min-width:0}
.cells-3 .cell:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--c-line)}
.cell .idx{margin-bottom:28px}
.cell .h3{font-size:22px;line-height:28px}
.cell p{margin-top:10px;font-size:15px;line-height:24px;color:var(--c-muted);max-width:420px}
@media (max-width:879px){
  .cells-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cells-3 .cell:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .cells-3 .cell:nth-child(even){padding-left:24px;border-left:1px solid var(--c-line)}
}
@media (max-width:539px){
  .cells{margin-top:40px}
  .cells-3{grid-template-columns:minmax(0,1fr)}
  .cells-3 .cell:nth-child(even){padding-left:0;border-left:0}
  .cell{padding:22px 0 24px}
  .cell .idx{margin-bottom:16px}
}

/* ---------- the two modes: large index list ---------- */
.big-list{margin-top:56px;border-top:1px solid var(--line)}
.big-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;padding:44px 0 52px;border-bottom:1px solid var(--line)}
.big-row-head{grid-column:1/7;min-width:0}
.big-row-head .display-l{font-size:clamp(36px,4.8vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:560px}
.big-line{margin-top:22px;font:500 20px/28px var(--sans);letter-spacing:-.01em;color:var(--ink)}
.big-desc{margin-top:12px;font-size:17px;line-height:27px;color:var(--text);max-width:520px}
.big-row-body{grid-column:7/12;padding-top:12px;min-width:0}
.big-row-body .checks{margin-top:0}
.big-row-body .link-arrow{margin-top:28px}
.big-row>.idx{grid-column:12/13;text-align:right;padding-top:14px}
@media (max-width:879px){
  .big-list{margin-top:40px}
  .big-row{grid-template-columns:minmax(0,1fr) auto;padding:32px 0 36px}
  .big-row-head{grid-column:1}
  .big-row>.idx{grid-column:2;grid-row:1;padding-top:8px}
  .big-row-body{grid-column:1/-1;padding-top:0}
}

/* ---------- workflow: five hairline columns, proof stages ruled in signal ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;row-gap:40px}
.step-cell{border-top:1px solid var(--line-strong);padding-top:20px;min-width:0}
.step-cell.is-proof{border-top:2px solid var(--signal-600);padding-top:19px}
.step-cell .idx{margin-bottom:28px}
.step-cell.is-proof .idx{color:var(--signal-700)}
.step-cell .h3{font-size:22px;line-height:28px}
.step-cell p{margin-top:10px;font-size:15px;line-height:24px;color:var(--muted)}
.spec-rails{margin-top:56px}
@media (max-width:1079px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.steps{grid-template-columns:minmax(0,1fr);row-gap:28px}.step-cell .idx{margin-bottom:16px}}

/* ---------- coverage grid ---------- */
.surfaces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.surface{padding:28px 24px 28px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.surface:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid var(--line)}
.surface .idx{margin-bottom:28px}
.surface .h4{font-size:19px;line-height:26px}
.surface .small{margin-top:6px;font-size:15px;line-height:23px}
.surface-id{margin-top:auto;padding-top:18px;font:400 12px/16px var(--mono);color:var(--muted)}
@media (max-width:1079px){.surfaces{grid-template-columns:repeat(2,minmax(0,1fr))}.surface:not(:nth-child(4n+1)){padding-left:0;border-left:0}.surface:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}}
@media (max-width:479px){.surfaces{grid-template-columns:minmax(0,1fr)}.surface:nth-child(even){padding-left:0;border-left:0}.surface{padding:22px 0}.surface .idx{margin-bottom:16px}}

/* ---------- closing: two large blocks ---------- */
.cta-blocks{padding:var(--section-y) 0;background:var(--white)}
.cta-grid{display:grid;grid-template-columns:7fr 5fr;gap:16px}
.cta-block{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:36px 40px;border-radius:var(--r-frame);transition:background-color .15s var(--ease)}
.cta-block-kicker{font:500 14px/20px var(--sans);opacity:.72}
.cta-block-title{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.2vw,46px);line-height:1.06;letter-spacing:-.028em;margin-top:56px;padding-right:64px}
.cta-block .icon{position:absolute;right:36px;bottom:40px;width:36px;height:36px;transition:transform .15s var(--ease)}
.cta-block:hover .icon{transform:translateX(6px)}
.cta-block-primary{background:var(--ink);color:#fff}
.cta-block-primary:hover{background:var(--night-2)}
.cta-block-secondary{background:var(--paper-2);color:var(--ink)}
.cta-block-secondary:hover{background:var(--line)}
.cta-block:focus-visible{outline:2px solid var(--signal-600);outline-offset:3px}
@media (max-width:879px){.cta-grid{grid-template-columns:minmax(0,1fr)}.cta-block{min-height:200px;padding:28px 24px}.cta-block-title{margin-top:36px;padding-right:48px}.cta-block .icon{right:24px;bottom:30px;width:28px;height:28px}}

/* ---------- event ticker along the hero's lower edge ---------- */
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:1;height:40px;border-top:1px solid var(--night-line);overflow:hidden;white-space:nowrap;font:400 12px/40px var(--mono);letter-spacing:.04em;color:var(--on-night-muted);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:inline-block;will-change:transform;animation:tick 70s linear infinite}
.ticker span{display:inline-block;padding:0 36px}
.ticker span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--signal-400);margin-right:14px;vertical-align:1px;opacity:.8}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
@media (max-width:879px){.ticker{position:relative;margin-top:0}}

/* ---------- large numerals ---------- */
.idx-lg{font:400 44px/1 var(--display);letter-spacing:-.03em;color:var(--line-strong)}
.big-row>.idx-lg{padding-top:6px}
.big-row-head .display-l{font-size:clamp(36px,5.2vw,76px)}

/* ---------- evidence tour: pinned record, steps light its markers ---------- */
.tour{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;align-items:start}
.tour-sticky{position:sticky;top:calc(var(--header-h) + 24px)}
.tour-steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0}
.tour-steps .legend-item{min-height:34vh;padding:28px 0;border-top:1px solid var(--line);align-content:center;transition:opacity .25s var(--ease)}
.tour-steps .legend-item .h5{font-size:22px;line-height:30px;font-weight:500}
.tour-steps .legend-item p{margin-top:8px;font-size:16px;line-height:26px;color:var(--text)}
.js .tour-steps .legend-item{opacity:.35}
.js .tour-steps .legend-item.is-active{opacity:1}
.record .record-pane,.record .record-card{transition:opacity .3s var(--ease)}
.record.has-focus .record-pane:not(.record-bottom):not(.is-focus),.record.has-focus .record-card:not(.is-focus){opacity:.4}
.record .marker{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.record .marker.is-focus{transform:scale(1.25);box-shadow:0 0 0 4px rgba(214,63,34,.18)}
@media (max-width:1079px){
  .tour{grid-template-columns:minmax(0,1fr)}
  .tour-sticky{position:static}
  .tour-steps{margin-top:40px}
  .tour-steps .legend-item{min-height:0;padding:20px 0}
  .js .tour-steps .legend-item{opacity:1}
  .record.has-focus .record-pane:not(.record-bottom):not(.is-focus),.record.has-focus .record-card:not(.is-focus){opacity:1}
}

/* ---------- reveal on scroll (JS adds .reveal; without JS everything is simply visible) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal:nth-child(4n+2){transition-delay:.06s}.js .reveal:nth-child(4n+3){transition-delay:.12s}.js .reveal:nth-child(4n+4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- closing blocks, louder ---------- */
.cta-block{min-height:320px}
.cta-block-title{font-size:clamp(32px,3.6vw,54px)}