/* Slice 10: factory and program pages (about, how-we-make-it, quality-control, certifications,
   compliance, sampling, production-calendar, who-we-serve, private-label, white-label, shipping).
   Main device: the "at a glance" spec sheet under each hero, so a buyer gets what / who / where /
   how in one read. It never animates in: it must be visible on first paint. */

/* ---------- hero tightening when a spec sheet follows ---------- */
.page-hero:has(+ .ef10-glance) { padding-bottom: clamp(20px, 2.6vw, 32px); }
.ef10-glance { padding-block: 0 clamp(36px, 5vw, 64px); }
/* Same background follows: do not stack two paddings into a dead gap. */
.ef10-glance + .band:not(.band-alt) { padding-top: clamp(8px, 1.5vw, 16px); }

/* ---------- the spec sheet ---------- */
.ef10-spec {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.ef10-spec-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  font: 500 .7rem/1.4 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ef10-spec-head span:last-child { color: #aebbd0; }
.ef10-spec-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ef10-spec-grid > div {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin: 0 0 0 -1px; /* hides the left rule on the first cell of each row */
  min-width: 0;
}
.ef10-spec-grid dt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 500 .68rem/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ef10-spec-grid dt .n { color: var(--accent-ink); }
.ef10-spec-grid dd {
  margin: 8px 0 0;
  font: 600 1.04rem/1.3 var(--f-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ef10-spec-grid dd small {
  display: block;
  margin-top: 4px;
  font: 400 .86rem/1.45 var(--f-body);
  letter-spacing: 0;
  color: var(--ink-2);
}
.ef10-spec-foot {
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: .84rem;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .ef10-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ef10-spec-grid > div { padding: 14px 14px 16px; }
  .ef10-spec-grid dd { font-size: .98rem; }
  .ef10-spec-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ef10-spec-head { padding: 10px 14px; }
}
@media (max-width: 330px) {
  .ef10-spec-grid { grid-template-columns: 1fr; }
}

/* ---------- flatter, sheet-like cards on the factory pages ----------
   Less "template card", more printed spec: hairline borders, no drop shadow, a navy top rule. */
:is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
    .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
    .route-white-label, .route-shipping) main :is(.feature-grid .card, .steps4 li, .cert-card, .segment, .make-step) {
  box-shadow: none;
  border-radius: var(--radius);
  border-color: var(--rule-strong);
}
:is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
    .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
    .route-white-label, .route-shipping) main :is(.feature-grid .card, .steps4 li) {
  border-top: 3px solid var(--navy);
}

/* Who we serve: number the buyer types like rows on a sheet. */
.route-who-we-serve .segments { counter-reset: seg; }
.route-who-we-serve .segment h2::before {
  counter-increment: seg;
  content: counter(seg, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--accent-ink);
}

/* Shipping: method table reads as a spec table. The method name stays on one line; the
   descriptive cells wrap and use the body face, since mono is meant for figures. */
.route-shipping .tiers td b { font-family: var(--f-display); }
.route-shipping .ef20-ship .tiers td { vertical-align: top; }
.route-shipping .ef20-ship .tiers td:not(:first-child) {
  white-space: normal;
  font-family: var(--f-body);
  line-height: 1.5;
}
.route-shipping .ef10-ship-note { margin-top: 12px; }