/* How-it-works process list. Scoped to #how so production card styles stay unused. */

#how.fk-process{overflow:hidden;padding-top:96px;padding-bottom:16px;scroll-margin-top:16px;}

.fk-process-layout{
  display:grid;
  grid-template-columns:auto minmax(0,38rem);
  gap:36px 40px;
  align-items:start;
  justify-content:center;
}

.fk-process-intro .fk-h2{
  max-width:6ch;
  font-size:clamp(44px,4.6vw,68px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:.92;
}

.fk-process-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
}

.fk-process-row{
  display:grid;
  grid-template-columns:2.6em minmax(9ch,.72fr) 1.55fr;
  gap:12px 20px;
  align-items:baseline;
  padding:22px 0;
  border-top:1px solid var(--line);
}

.fk-process-row:last-child{border-bottom:1px solid var(--line);}

.fk-process-no{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent-2);
}

.fk-process-row h3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500;
  letter-spacing:-.02em;
  margin:0;
}

.fk-process-row p{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--fg-3);
}

@media(max-width:880px){
  #how.fk-process{
    padding-top:52px;
    padding-bottom:16px;
    scroll-margin-top:0;
  }
  .fk-process-intro .fk-h2{font-size:clamp(36px,9vw,52px);}
  .fk-process-layout{grid-template-columns:1fr;gap:20px;}
  .fk-process-row{padding:16px 0;}
}

@media(max-width:600px){
  .fk-process-row{grid-template-columns:2.4em 1fr;gap:8px 16px;}
  .fk-process-row p{grid-column:2;}
}

/* Keep the fade, drop the 18px drop-in so refresh does not shove the list. */
#how .fk-reveal{transform:none;}

.fk-section-more{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  margin:40px 0 0;
  color:var(--accent-2);
  opacity:0;
  pointer-events:none;
}
.fk-section-more.is-in{
  opacity:.9;
  pointer-events:auto;
  transition:opacity .45s ease,transform .45s ease;
}
.fk-section-more.is-gone{
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.fk-section-more svg{
  width:36px;height:36px;display:block;stroke-width:1.75;
  filter:drop-shadow(0 0 10px var(--ink-850));
}
@media(max-width:880px){
  .fk-section-more{display:none;}
}