/* How it works is a wide three-part journey, distinct from the Overview split. */
#scene .how-triptych {
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  padding:24px 30px 22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
  color:hsl(var(--text));
  background:transparent;
  pointer-events:auto;
  scrollbar-width:thin;
}
#scene .how-path {margin:0;max-width:none;flex:0 0 auto;}
#scene .how-path :is(a,span) {min-height:22px;font-size:10px;}

.how-triptych-intro {
  display:grid;
  grid-template-columns:minmax(520px,1.35fr) minmax(340px,.65fr);
  gap:clamp(40px,5vw,88px);
  align-items:end;
  flex:0 0 auto;
  padding:6px 0 2px;
}
#scene .how-triptych .story-kicker {
  margin:0 0 11px;
  font:500 10px/1.4 var(--mono-font,ui-monospace,monospace);
  letter-spacing:.09em;
  color:hsl(var(--text-muted));
}
#scene .how-triptych h1 {
  max-width:20ch;
  margin:0;
  font:500 clamp(38px,3.2cqw,54px)/1.02 var(--font-sans,"Albert Sans",sans-serif);
  letter-spacing:-.047em;
  color:hsl(var(--text-strong));
}
#scene .how-triptych .how-simple-deck {
  max-width:48ch;
  margin:0 0 3px;
  padding-left:22px;
  border-left:1px solid hsl(var(--primary) / .48);
  font:400 15px/1.55 var(--font-sans,"Albert Sans",sans-serif);
  color:hsl(var(--text));
}

.how-work-cards {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  flex:1 1 0;
  min-height:330px;
  counter-reset:work-step;
}
.how-work-cards::before {
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,hsl(var(--reference) / .34) 12%,hsl(var(--reference) / .34) 88%,transparent);
  pointer-events:none;
}
#scene .how-work-card {
  position:relative;
  z-index:1;
  box-sizing:border-box;
  min-width:0;
  min-height:0;
  padding:20px;
  display:grid;
  grid-template-rows:auto auto auto minmax(96px,1fr) auto;
  gap:12px;
  border:1px solid hsl(var(--border-default));
  border-radius:8px;
  background:linear-gradient(152deg,hsl(var(--surface) / .42),hsl(var(--canvas) / .92));
  color:hsl(var(--text));
  text-decoration:none;
  overflow:hidden;
  transition:transform 240ms cubic-bezier(.22,.72,.22,1),border-color 180ms,background-color 180ms;
}
#scene .how-work-card::before {
  content:"";
  position:absolute;
  top:0;
  left:20px;
  width:44px;
  height:2px;
  background:hsl(var(--primary));
  opacity:.82;
}
#scene .how-work-card::after {
  content:"";
  position:absolute;
  right:-8px;
  top:calc(50% - 4px);
  width:8px;
  height:8px;
  border-top:1px solid hsl(var(--reference) / .6);
  border-right:1px solid hsl(var(--reference) / .6);
  transform:rotate(45deg);
}
#scene .how-work-card:last-child::after {display:none;}
#scene .how-work-card:is(:hover,:focus-visible,[data-active="true"]) {
  border-color:hsl(var(--reference) / .68);
  background:linear-gradient(152deg,hsl(var(--reference) / .07),hsl(var(--canvas) / .96));
  transform:translateY(-4px);
}
.how-work-card-top {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.how-work-number {font:500 10px/1.35 var(--mono-font,monospace);color:hsl(var(--primary));}
.how-work-signal {font:500 8px/1.35 var(--mono-font,monospace);letter-spacing:.1em;color:hsl(var(--text-muted));}
#scene .how-work-card h2 {
  margin:0;
  font:500 clamp(22px,1.9cqw,30px)/1.08 var(--font-sans,"Albert Sans",sans-serif);
  letter-spacing:-.032em;
  color:hsl(var(--text-strong));
}
#scene .how-work-card .how-work-answer {
  max-width:45ch;
  min-height:3.05em;
  margin:0;
  font:400 14px/1.5 var(--font-sans,"Albert Sans",sans-serif);
  color:hsl(var(--text-muted));
}
.how-work-mesh-frame {
  min-height:96px;
  display:grid;
  grid-template-rows:auto minmax(72px,1fr);
  gap:7px;
  margin-top:3px;
  padding:10px;
  border-top:1px solid hsl(var(--border-subtle));
  border-bottom:1px solid hsl(var(--border-subtle));
  background:hsl(var(--surface) / .16);
  overflow:hidden;
}
.how-work-mesh-label {position:relative;z-index:1;font:500 8px/1.3 var(--mono-font,monospace);letter-spacing:.06em;color:hsl(var(--text-faint));}
.how-work-mesh {display:block;width:100%;height:100%;min-height:72px;border-radius:3px;pointer-events:none;}
.how-work-more {
  display:flex;
  align-items:center;
  min-height:30px;
  color:hsl(var(--complement));
  font:500 12px/1.4 var(--font-sans,"Albert Sans",sans-serif);
}
#scene .how-work-card:is(:hover,:focus-visible) .how-work-more {color:hsl(var(--complement));}

.how-simple-footer {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  flex:0 0 auto;
  padding-top:13px;
  border-top:1px solid hsl(var(--border-subtle));
}
#scene .how-triptych .how-simple-boundary {
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  gap:16px 24px;
}
.how-boundary-label {flex:0 0 auto;font:500 8px/1.4 var(--mono-font,monospace);letter-spacing:.08em;color:hsl(var(--primary));}
#scene .how-triptych .how-simple-boundary strong {font:500 12px/1.45 var(--font-sans,"Albert Sans",sans-serif);color:hsl(var(--text-muted));}
#scene .how-simple-next {
  min-height:38px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  padding:8px 13px;
  border:1px solid hsl(var(--reference) / .45);
  border-radius:6px;
  background:transparent;
  color:hsl(var(--reference));
  font:500 11px/1.35 var(--font-sans,"Albert Sans",sans-serif);
  text-decoration:none;
  white-space:nowrap;
}
#scene .how-triptych :is(a,button):focus-visible {outline:2px solid hsl(var(--primary));outline-offset:3px;}

.hero-alive[data-page="deployment"] .lattice-activity {opacity:0;pointer-events:none;}
.hero-alive[data-page="deployment"] .lattice-field {opacity:.14;}

@media(min-width:901px) and (max-height:780px) {
  #scene .how-triptych {padding:18px 24px;gap:12px;}
  .how-triptych-intro {grid-template-columns:minmax(480px,1.3fr) minmax(310px,.7fr);gap:34px;padding:0;}
  #scene .how-triptych h1 {font-size:38px;}
  #scene .how-triptych .how-simple-deck {font-size:13px;}
  .how-work-cards {min-height:275px;}
  #scene .how-work-card {padding:16px;gap:9px;grid-template-rows:auto auto auto minmax(76px,1fr) auto;}
  #scene .how-work-card h2 {font-size:23px;}
  #scene .how-work-card .how-work-answer {font-size:12px;}
  .how-work-mesh-frame {min-height:76px;grid-template-rows:auto minmax(54px,1fr);padding:8px;}
  .how-work-mesh {min-height:54px;}
  .how-simple-footer {padding-top:9px;}
}
@media(max-width:900px) {
  #scene .how-triptych {padding:18px;}
  .how-triptych-intro {grid-template-columns:1fr;gap:18px;align-items:start;}
  #scene .how-triptych h1 {font-size:clamp(35px,9vw,48px);}
  #scene .how-triptych .how-simple-deck {padding-left:16px;}
  .how-work-cards {grid-template-columns:1fr;min-height:0;flex:none;}
  .how-work-cards::before,#scene .how-work-card::after {display:none;}
  #scene .how-work-card {min-height:300px;}
  .how-simple-footer {grid-template-columns:1fr;align-items:start;gap:14px;}
  #scene .how-triptych .how-simple-boundary {align-items:flex-start;flex-direction:column;gap:6px;}
  #scene .how-simple-next {width:max-content;}
}
@media(prefers-reduced-motion:reduce) {
  #scene .how-work-card {transition:none;}
}