/* T4b-1 (helper H47, 2026-10-14): the REDESIGNED PAGES - the company home "/", the services hub "/services" and the 3D printing service
   page "/services/3d-printing", plus (H56, round 2) the Capabilities page ("/capabilities" since H72, R3-4). Loaded ONLY by those pages (customer/homepage.html links
   it; the others put it in base.html's page_css block), never with customer.css, so its element rules (h1-h3, p, a)
   cannot reach the pages T4b-1 does not redesign. Element rules are scoped to main.t4 (the footer and the menu are shell, not page). Ported from the owner-approved round-2 mockup
   (CC-Reports/T4b-mockups-r2/site/site.css, H42); tokens only (webapp/static/tokens.css).
   Differences from the mockup (docs/t4b1-build-notes.md): flat glass everywhere (no backdrop-filter); the contact card's mono
   line is .contact__hint (".hint" belongs to the consent sheet's markup); the material tiles are generic (rendered from the
   materials query, so the detail-switch uses positions, not ids). */

/* ------------------------------------------------------------------ type on glass */
.t4 h1, .t4 h2, .t4 h3, .t4 p, .t4 ul, .t4 ol, .t4 dl, .t4 dd, .t4 figure, .t4 fieldset { margin: 0; }
.t4 img, .t4 svg { display: block; max-width: 100%; }
.t4 h1, .t4 h2, .t4 h3 { font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--c-on-glass); }
.t4 h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.t4 h2 { font-size: var(--fs-h2); }
.t4 h3 { font-size: var(--fs-h3); }
.t4 p + p { margin-top: var(--s-4); }
.t4 strong { font-weight: var(--fw-semibold); color: var(--c-on-glass); }
.t4 a { color: var(--c-orange-on-glass); text-decoration-thickness: var(--bw-1); text-underline-offset: 0.18em; }
.t4 a:hover { color: var(--c-on-glass); text-decoration-thickness: var(--bw-2); }
.t4 a:active { color: var(--c-on-glass-2); }

.kicker, .label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange-tint);
}
.label--quiet { color: var(--c-on-glass-muted); }
.nowrap { white-space: nowrap; }
.lead { font-size: var(--fs-lead); color: var(--c-on-glass-2); max-width: var(--w-lead); }
.prose { max-width: var(--w-prose); color: var(--c-on-glass-2); }
.contact__hint { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--c-on-glass-muted); }

/* the [PLACEHOLDER - Marketing to write] markers (t4b_copy.PLACEHOLDER): visible on purpose, so no marker can ship unnoticed */
.ph {
  display: inline; background: var(--c-note-bg); color: var(--c-note-ink);
  box-shadow: 0 0 0 var(--bw-1) var(--c-note-line); border-radius: var(--r-1);
  padding: 0 var(--s-1); font-family: var(--font-mono); font-size: 0.85em; font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-brief { font-style: italic; color: var(--c-on-glass-muted); letter-spacing: 0; text-transform: none; font-family: var(--font-sans); }

/* ------------------------------------------------------------------ the hologram card (flat glass) */
.holo {
  position: relative; color: var(--c-on-glass-2);
  background-color: var(--c-glass-flat);
  background-image: linear-gradient(180deg, var(--c-glass-tint), transparent 45%);
  border: var(--bw-1) solid var(--c-holo-edge); border-radius: var(--r-2);
  box-shadow: var(--glow-1), var(--shadow-glass);
}
/* four corner brackets from one pseudo-element */
.brackets::after {
  content: ""; position: absolute; inset: calc(-1 * var(--bw-1)); pointer-events: none; border-radius: var(--r-2);
  --b: var(--c-holo-edge-strong); --l: var(--bracket); --w: var(--bw-2);
  background:
    linear-gradient(var(--b), var(--b)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) right bottom / var(--w) var(--l) no-repeat;
}

/* ------------------------------------------------------------------ buttons: rest / hover / pressed / disabled / focus */
.btn {
  --btn-bg: var(--c-orange-text); --btn-fg: var(--c-white); --btn-border: var(--c-holo-edge-strong); --btn-glow: var(--glow-1);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--s-3) var(--s-5);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
  color: var(--btn-fg); background: var(--btn-bg); border: var(--bw-1) solid var(--btn-border); border-radius: var(--r-1);
  box-shadow: var(--btn-glow); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--d-fast) var(--ease-standard),
    border-color var(--d-fast) var(--ease-standard),
    color var(--d-fast) var(--ease-standard),
    transform var(--d-spring-snap) var(--ease-spring-snap),
    box-shadow var(--d-spring-base) var(--ease-spring-base);
}
.t4 a.btn, .t4 a.btn:hover, .t4 a.btn:active { color: var(--btn-fg); text-decoration: none; }
.btn:hover { --btn-glow: var(--glow-2); --btn-border: var(--c-orange-on-glass); transform: translateY(var(--lift-hover)); }
.btn:active { --btn-bg: var(--c-orange-text-press); --btn-glow: var(--glow-1); transform: translateY(var(--press-shift)) scale(var(--press-scale)); }
.btn .btn-arrow { transition: transform var(--d-spring-base) var(--ease-spring-base); }
.btn:hover .btn-arrow { transform: translateX(var(--s-1)); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-on-glass); --btn-border: var(--c-holo-edge); --btn-glow: none; }
.btn--ghost:hover { --btn-bg: var(--c-glass-hover); --btn-fg: var(--c-on-glass); --btn-border: var(--c-holo-edge-strong); --btn-glow: var(--glow-1); }
.btn--ghost:active { --btn-bg: var(--c-glass-press); --btn-glow: none; }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-small); }
.btn--lg { min-height: calc(var(--tap-min) + var(--s-4)); padding: var(--s-4) var(--s-6); font-size: var(--fs-lead); }
.btn[disabled], .btn[aria-disabled="true"] {
  --btn-bg: var(--c-glass-disabled); --btn-fg: var(--c-on-glass-muted); --btn-border: var(--c-holo-edge-soft); --btn-glow: none;
  border-style: dashed; cursor: not-allowed; transform: none;
}

/* text link with arrow (a control: 44 px tall) */
.t4 .link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min);
  font-weight: var(--fw-semibold); text-decoration: none; color: var(--c-orange-on-glass);
}
.link-arrow span[aria-hidden] { transition: transform var(--d-spring-base) var(--ease-spring-base); }
.t4 .link-arrow:hover { text-decoration: underline; color: var(--c-on-glass); }
.link-arrow:hover span[aria-hidden] { transform: translateX(var(--s-1)); }
.t4 .link-arrow:active { color: var(--c-on-glass-2); }

/* ------------------------------------------------------------------ sections */
.section { padding-block: var(--section-y); }
.section + .section { border-top: var(--bw-1) solid var(--c-holo-rule); }
.section__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: var(--w-prose); }
.section__head::before { content: ""; width: var(--s-6); height: var(--bw-2); background: var(--c-orange); box-shadow: var(--glow-1); }
.section__intro { color: var(--c-on-glass-2); }
.section__foot { margin-top: var(--s-5); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-glass-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-on-glass-muted); }
.t4 .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap-min); min-width: var(--tap-min); color: var(--c-on-glass-2); }
.t4 .crumbs a:hover { color: var(--c-orange-on-glass); }
.crumbs [aria-current] { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--c-on-glass); }

/* ------------------------------------------------------------------ hero (shared) */
.hero { padding-block: var(--s-8) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: center; }
.t4 .hero__title { font-size: var(--fs-display); margin-block: var(--s-4) var(--s-4); text-shadow: var(--glow-text); }
.hero__tagline { font-size: var(--fs-h2); color: var(--c-on-glass); line-height: var(--lh-snug); max-width: 24ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); }
@media (max-width: 760px) {
  .hero { padding-block: var(--s-6) var(--s-7); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__actions { margin-top: var(--s-5); }
}

/* the HUD panel (corner brackets, mono readouts) */
.hud-panel { padding: var(--s-6); }
.hud-panel__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: var(--bw-1) solid var(--c-holo-rule); }
.hud-panel__title { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange-tint); }
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-glass-2); }
/* H56 (owner, round 2): the status line has no decorative dot (the "Live" dot and "Online" are gone; home shows Marketing's label) */
/* H56: Marketing's label stays on one line; on a phone it wraps below the panel title instead of breaking inside */
.status { white-space: nowrap; }
@media (max-width: 480px) { .hud-panel__top { flex-wrap: wrap; } }
.t4 .hud-panel__mark { width: var(--mark-hud); height: var(--mark-hud); stroke: var(--c-orange-tint); fill: none; margin: var(--s-5) auto; filter: drop-shadow(0 0 var(--s-2) var(--c-holo-glow-strong)); }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.readout { padding: var(--s-4) 0; border-top: var(--bw-1) solid var(--c-holo-rule); min-width: 0; }
.readout:nth-child(odd) { padding-right: var(--s-4); }
.readout:nth-child(even) { padding-left: var(--s-4); border-left: var(--bw-1) solid var(--c-holo-rule); }
.readout dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-glass-muted); }
.t4 .readout dd { font-family: var(--font-mono); font-size: var(--fs-readout); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--c-on-glass); margin-top: var(--s-1); text-shadow: var(--glow-text); }
.readout dd small { display: block; font-size: var(--fs-label); color: var(--c-on-glass-2); font-weight: var(--fw-regular); line-height: var(--lh-body); margin-top: var(--s-1); text-shadow: none; }
.readout__unit { font-size: var(--fs-h3); color: var(--c-orange-on-glass); }
.t4 .readout--text dd { font-size: var(--fs-body); font-family: var(--font-sans); word-break: break-word; text-shadow: none; }
/* a readout whose value is a sentence-length constant (the tolerance, the coverage): mono at the h3 size, still a HUD number */
.t4 .readout--mid dd { font-size: var(--fs-h3); word-break: break-word; }
@media (max-width: 760px) {
  .hud-panel { padding: var(--s-5); }
  .t4 .hud-panel__mark { display: none; }
}
@media (max-width: 480px) { .hud-panel { padding: var(--s-4); } }

/* ------------------------------------------------------------------ service cards (home + hub) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-card-min), 1fr)); gap: var(--s-5); list-style: none; padding: 0; margin: 0; }
.cards--hub { grid-template-columns: repeat(3, 1fr); }   /* H56: three cards (owner S1/S2) */
@media (max-width: 960px) { .cards--hub { grid-template-columns: 1fr; } }
.card {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5);
  transition: transform var(--d-spring-base) var(--ease-spring-base), box-shadow var(--d-spring-base) var(--ease-spring-base), border-color var(--d-fast) var(--ease-standard);
}
.card--live { border-color: var(--c-holo-edge-strong); }
.card--live:hover, .card--live:focus-within { transform: translateY(var(--lift-hover)); box-shadow: var(--glow-2), var(--shadow-glass); }
.card--coming { border-style: dashed; border-color: var(--c-holo-edge-soft); box-shadow: var(--shadow-glass); background-image: none; }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card__index { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-on-glass-muted); }
.card__body { color: var(--c-on-glass-2); font-size: var(--fs-small); flex: 1; }
.card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.card--hub { padding: var(--s-6); min-height: calc(var(--s-9) * 2.5); }
.t4 .card--hub h2 { font-size: var(--fs-h2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase;
  border-radius: var(--r-1); border: var(--bw-1) solid currentColor;
}
.chip--live { color: var(--c-orange-on-glass); }
.chip--live::before { content: ""; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--c-orange-tint); box-shadow: var(--glow-1); }
.chip--coming { color: var(--c-on-glass-muted); }

/* trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-card-min), 1fr)); gap: var(--s-5); list-style: none; padding: 0; margin: 0; }
.trust li { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.trust__n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-orange-tint); }
.trust__title { font-weight: var(--fw-semibold); color: var(--c-on-glass); }
.trust__text { color: var(--c-on-glass-2); font-size: var(--fs-small); }

/* contact */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-7); align-items: start; }
.contact__card { padding: var(--s-5); display: grid; gap: var(--s-3); }
.t4 .contact__email { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-medium); word-break: break-word; display: inline-flex; align-items: center; min-height: var(--tap-min); }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ------------------------------------------------------------------ 3D printed parts: instruments (the spec readouts) */
.instruments { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); margin: 0; }
.instrument { grid-column: span 2; padding: var(--s-5); display: grid; align-content: start; gap: var(--s-2); min-width: 0; }
.instrument--wide { grid-column: span 4; }
.instrument--half { grid-column: span 3; }
.instrument--full { grid-column: span 6; }
/* H81 (Legal 1555Z §3): the order terms (dispatch guarantee, shipping, cancelling) are a SECOND panel, apart from the tolerance's */
.t4 .instruments--terms { margin-top: var(--s-7); }   /* .t4: outranks the reset ".t4 dl { margin: 0 }" (line 11) */
.instrument dt { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-on-glass-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); padding-bottom: var(--s-2); border-bottom: var(--bw-1) solid var(--c-holo-rule); }
.t4 .instrument dd { color: var(--c-on-glass); font-size: var(--fs-small); }
.instrument__big { display: block; font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--c-on-glass); text-shadow: var(--glow-text); font-variant-numeric: tabular-nums; }
.instrument__sub { display: block; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--c-on-glass-2); margin-top: var(--s-1); font-variant-numeric: tabular-nums; }
.instrument--volume { grid-template-columns: 1fr auto; column-gap: var(--s-4); }
.instrument--volume dt { grid-column: 1 / -1; }
.t4 .volume-box { width: calc(var(--s-9) + var(--s-6)); height: auto; }
.volume-box .edge { stroke: var(--c-orange-tint); stroke-width: 1.5; fill: none; }
.volume-box .edge--hidden { stroke: var(--c-holo-edge); stroke-dasharray: 3 3; }
.volume-box .face { fill: var(--c-glass-hover); stroke: none; }
.volume-box text { fill: var(--c-on-glass-muted); font-family: var(--font-mono); font-size: var(--fs-label); }
@media (max-width: 960px) { .instruments { grid-template-columns: repeat(2, 1fr); } .instrument, .instrument--wide, .instrument--half { grid-column: span 1; } .instrument--volume, .instrument--full { grid-column: span 2; } }
@media (max-width: 560px) { .instruments { grid-template-columns: 1fr; } .instrument, .instrument--wide, .instrument--half, .instrument--volume, .instrument--full { grid-column: span 1; } .instrument--volume { grid-template-columns: 1fr; } .t4 .volume-box { justify-self: start; } }

/* service hero extras */
.svc-hero { padding-block: var(--s-6) var(--section-y); }
.t4 .svc-hero h1 { margin-block: var(--s-3) var(--s-4); }
.quote-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.filetypes { display: inline-flex; gap: var(--s-2); }
.filetype { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--c-on-glass-2); border: var(--bw-1) solid var(--c-holo-edge-soft); border-radius: var(--r-1); padding: var(--s-1) var(--s-2); }

/* material tiles: a real radio group, selectable; the detail for the selected one shows below (CSS :has, no JS). The tiles are
   rendered from the materials query (catalog.public_materials), so the switch pairs tile N with detail N (up to 6 materials;
   without :has, or past 6, every detail shows and nothing is lost). */
.mat-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.mat-picker legend { padding: 0; margin-bottom: var(--s-3); }
.mat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--w-card-min) - var(--s-7)), 1fr)); gap: var(--s-4); }
.mat-tile {
  display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-5) var(--s-4); min-height: var(--tap-min); cursor: pointer;
  transition: transform var(--d-spring-base) var(--ease-spring-base), box-shadow var(--d-spring-base) var(--ease-spring-base), border-color var(--d-fast) var(--ease-standard), background-color var(--d-fast) var(--ease-standard);
}
.mat-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mat-tile__code { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--c-on-glass); line-height: var(--lh-tight); display: flex; align-items: center; gap: var(--s-3); }
.mat-tile__code::after { content: ""; margin-left: auto; width: var(--s-4); height: var(--s-4); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--bw-2) var(--c-holo-edge); transition: box-shadow var(--d-spring-snap) var(--ease-spring-snap); }
.mat-tile__name { font-size: var(--fs-small); color: var(--c-on-glass-2); }
.mat-tile:hover { border-color: var(--c-holo-edge-strong); transform: translateY(var(--lift-hover)); box-shadow: var(--glow-2), var(--shadow-glass); }
.mat-tile:active { transform: scale(var(--press-scale)); background-color: var(--c-glass-press); }
.mat-tile:has(input:checked) { border-color: var(--c-holo-edge-strong); box-shadow: var(--glow-2), var(--shadow-glass); background-color: var(--c-glass-menu); }
.mat-tile:has(input:checked) .mat-tile__code::after { box-shadow: inset 0 0 0 var(--bw-2) var(--c-orange-tint), inset 0 0 0 var(--s-1) var(--c-glass-menu), inset 0 0 0 var(--s-4) var(--c-orange-tint); }
.mat-tile:has(input:focus-visible) { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }
.mat-details { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.mat-detail { padding: var(--s-5); display: grid; gap: var(--s-3); }
.t4 .mat-detail h3 { font-size: var(--fs-h3); }
.t4 .mat-detail p { font-size: var(--fs-small); color: var(--c-on-glass-2); max-width: var(--w-prose); }
.mat-detail__rec { justify-self: start; }
@supports selector(:has(*)) {
  .materials:has(.mat-tile:nth-child(-n+6) input:checked) .mat-detail:nth-child(-n+6) { display: none; }
  .materials:has(.mat-tile:nth-child(1) input:checked) .mat-detail:nth-child(1),
  .materials:has(.mat-tile:nth-child(2) input:checked) .mat-detail:nth-child(2),
  .materials:has(.mat-tile:nth-child(3) input:checked) .mat-detail:nth-child(3),
  .materials:has(.mat-tile:nth-child(4) input:checked) .mat-detail:nth-child(4),
  .materials:has(.mat-tile:nth-child(5) input:checked) .mat-detail:nth-child(5),
  .materials:has(.mat-tile:nth-child(6) input:checked) .mat-detail:nth-child(6) { display: grid; }
}
.matnote { margin-top: var(--s-5); max-width: var(--w-prose); font-size: var(--fs-small); color: var(--c-on-glass-2); }
@media (max-width: 760px) { .mat-tiles { grid-template-columns: 1fr; } .mat-tile { padding: var(--s-4); } .mat-tile__code { font-size: var(--fs-h3); } }

/* what we make: compact tiles */
.makes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.makes > li { grid-column: span 2; }
.makes > li:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 960px) { .makes { grid-template-columns: 1fr 1fr; } .makes > li, .makes > li:nth-child(n+4) { grid-column: span 1; } .makes > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .makes { grid-template-columns: 1fr; } .makes > li:last-child:nth-child(odd) { grid-column: auto; } }
.make { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.make__n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--c-orange-tint); }
.t4 .make p { font-size: var(--fs-small); color: var(--c-on-glass-2); }

/* fit panel */
.fit { padding: var(--s-6); display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; }
.t4 .fit__glyph { width: var(--s-8); height: var(--s-8); stroke: var(--c-orange-tint); fill: none; stroke-width: 2; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; padding: var(--s-5); } .t4 .fit__glyph { display: none; } }

/* steps as a HUD sequence */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.step { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.step__n { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--c-orange-tint); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t4 .step p { font-size: var(--fs-small); color: var(--c-on-glass-2); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* the "Get an instant quote" moment */
.launch { padding: var(--s-7); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6); align-items: center; border-color: var(--c-holo-edge-strong); box-shadow: var(--glow-2), var(--shadow-glass); }
.t4 .launch__reticle { width: calc(var(--s-9) + var(--s-5)); height: auto; stroke: var(--c-orange-tint); fill: none; filter: drop-shadow(0 0 var(--s-2) var(--c-holo-glow-strong)); }
.t4 .launch h2 { font-size: var(--fs-h1); }
.t4 .launch p { margin-top: var(--s-3); color: var(--c-on-glass-2); max-width: var(--w-prose); }
.launch__go { display: grid; gap: var(--s-3); justify-items: center; }
@media (max-width: 960px) { .launch { grid-template-columns: 1fr; padding: var(--s-6) var(--s-5); } .t4 .launch__reticle { display: none; } .launch__go { justify-items: start; } }

/* ------------------------------------------------------------------ H56 (round 2) /manufacturing-methods; H72 (owner R3-4/R3-5) the
   Capabilities page, /capabilities. R3-5: "FDM 3D printing" is ONE big hologram panel (.method: the .holo glass, the brackets, the
   strong edge) and everything about the process sits INSIDE it: its two lines (the layer lines on the second), then the material cards,
   the heat guide's link and the closing line. The cards inside use a LIGHTER inner style that reads within the hologram: a thin 1 px
   outline at the soft edge tint, a subtle fill, no outer glow and no shadow, no brackets (they are not holograms of their own).
   Tokens only. */
.method { padding: var(--s-6); display: grid; gap: var(--s-6); border-color: var(--c-holo-edge-strong); }
.method__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-5) var(--s-7); align-items: start; }
.method__head { display: grid; gap: var(--s-2); align-content: start; }
.method__index { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); color: var(--c-orange-tint); }
.t4 .method__head h2 { font-size: var(--fs-h2); }
.method__lines { color: var(--c-on-glass-2); max-width: var(--w-prose); }
.t4 .method__lines p { font-size: var(--fs-lead); }
.method__materials { padding-top: var(--s-5); border-top: var(--bw-1) solid var(--c-holo-rule); }
.t4 .method__kicker { margin: 0 0 var(--s-4); }
.mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
/* the inner card: NOT a .holo (no glass shadow, no glow, no tint gradient, no brackets): a thin outline and a subtle fill */
.mm-card {
  padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; min-width: 0;
  background-color: var(--c-glass-disabled); border: var(--bw-1) solid var(--c-holo-edge-soft); border-radius: var(--r-1);
  box-shadow: none; color: var(--c-on-glass-2);
}
.mm-card__code { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--c-orange-on-glass); }
.t4 .mm-card h3 { font-size: var(--fs-h3); }
.t4 .mm-card p { font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4 .mm-guide { margin-top: var(--s-5); }
.t4 .mm-closing { margin-top: var(--s-3); color: var(--c-on-glass-2); max-width: var(--w-prose); }
@media (max-width: 960px) { .method__intro { grid-template-columns: 1fr; } .mm-cards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .method { padding: var(--s-5); gap: var(--s-5); } .mm-card { padding: var(--s-4); } }