/* =========================================================
   /install — page-scoped supplement to the v1 "engineering
   documentary" system (app.css). Structure and color all come
   from app.css tokens/classes; this file only adds what's
   specific to this page: the cutaway diagram, the referral
   ticket card's live form/readout, the vetted criteria list on
   a dark section, and the closing line.
   ========================================================= */

/* ---------- Cutaway diagram (§ 01) ---------- */
.idg-art { max-width: 920px; margin: 0 auto; }
.idg-art svg { display: block; width: 100%; height: auto; }
.idg-art text { font-family: var(--sans); }
.idg-lbl { font-size: 12px; font-weight: 600; fill: var(--ink-2); letter-spacing: 0.01em; }
.idg-lbl-accent { fill: var(--orange-dark); }
.idg-lbl-soft { font-size: 11px; font-weight: 500; fill: var(--ink-muted); }
.idg-caption { margin-top: 18px; text-align: center; color: var(--ink-muted); }

/* ---------- Referral ticket card (hero right rail) ---------- */
/* ZIP starter — the hero's primary CTA, light-paper context */
.hz-start { margin: 4px 0 0; position: relative; z-index: 2; }
.hz-label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: 10px; }
.hz-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.hz-row input {
  flex: 0 1 190px; min-width: 140px; padding: 14px 16px;
  font-family: var(--mono); font-size: 20px; letter-spacing: .08em; color: var(--ink);
  background: #FFFDF8; border: 2px solid var(--ink);
}
.hz-row input::placeholder { color: var(--rule); }
.hz-row input:focus { outline: 0; border-color: var(--orange); }
.hz-micro { margin-top: 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.hz-readout { margin-top: 14px; position: relative; z-index: 2; }
.hz-readout:empty { display: none; }
.hz-readout .rt-k { color: var(--ink-muted); }
.hz-readout .rt-v { color: var(--ink); }
.hz-readout .rt-ro-line.rt-ok .rt-v { color: var(--green); }
.hz-readout .rt-ro-line.rt-warn .rt-v { color: var(--warn-2); }
.hz-ooa { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--warn-2); max-width: 46ch; position: relative; z-index: 2; }
.hz-ooa a { color: inherit; }
.hero-ctas.hz-alt { margin-top: 22px; }

/* Top-of-page confirmation band (post-submit redirect lands at the top) */
.iv1-flash { background: var(--green); color: #F5F3EE; position: relative; z-index: 3; }
.iv1-flash-in { display: flex; align-items: center; gap: 16px; padding: 13px 0; }
.iv1-flash-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(245,243,238,.16); padding: 5px 10px; white-space: nowrap; }
.iv1-flash p { margin: 0; font-size: 14.5px; font-weight: 600; }

.rt-body { padding: 20px 18px 4px; }
.rt-h2 { font-family: var(--serif); font-size: 20px; font-weight: 600; font-style: italic; color: var(--paper); margin-bottom: 6px; }
.rt-sub { font-size: 12.5px; color: rgba(245,243,238,.55); margin-bottom: 18px; }
.rt-form { display: flex; flex-direction: column; gap: 12px; }
.rt-field { display: flex; flex-direction: column; gap: 6px; }
.rt-field label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(245,243,238,.5); font-weight: 600; }
.rt-field input {
  font-family: var(--sans); font-size: 15px; color: var(--paper);
  background: rgba(245,243,238,.06); border: 1px solid rgba(245,243,238,.18);
  padding: 11px 13px; border-radius: 0; width: 100%;
}
.rt-field input::placeholder { color: rgba(245,243,238,.35); }
.rt-field input:focus { outline: 0; border-color: var(--orange); background: rgba(245,243,238,.1); }
.rt-submit { width: 100%; justify-content: center; margin-top: 2px; }
.rt-micro { margin-top: 12px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(245,243,238,.4); text-align: center; }

.rt-readout { margin-top: 12px; }
.rt-readout:empty { display: none; }
.rt-ro-line { display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px; opacity: 0; transform: translateY(3px); transition: opacity .3s ease, transform .3s ease; }
.rt-ro-line.rt-show { opacity: 1; transform: none; }
.rt-k { min-width: 70px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,243,238,.45); padding-top: 1px; }
.rt-v { color: var(--paper); font-weight: 600; }
.rt-ro-line.rt-ok .rt-v { color: var(--green); }
.rt-ro-line.rt-warn .rt-v { color: var(--warn); }
.rt-ooa { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--warn); }
.rt-ooa a { color: inherit; }

.rt-assure-wrap { border-top: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.rt-assure { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; margin: 0; }
.rt-assure li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: rgba(245,243,238,.8); }
.rt-assure svg { flex: 0 0 auto; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rt-ro-line { transition: none; }
}

/* ---------- What "vetted" means (§ 03, dark) ---------- */
.iv1-criteria { list-style: none; max-width: 760px; margin: 0; padding: 0; }
.iv1-crit { display: grid; grid-template-columns: 30px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(245,243,238,.15); }
.iv1-crit:last-child { border-bottom: 1px solid rgba(245,243,238,.15); }
.iv1-crit-ix { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--warn); letter-spacing: .05em; padding-top: 3px; }
.iv1-crit h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--paper); margin-bottom: 6px; }
.iv1-crit p { font-size: 14.5px; line-height: 1.6; color: rgba(245,243,238,.75); }

.iv1-made-here {
  margin-top: 44px; max-width: 760px;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; background: rgba(245,243,238,.05); border: 1px solid rgba(245,243,238,.15);
}
.iv1-made-here svg { flex: 0 0 auto; }
.iv1-made-here p { font-size: 15px; line-height: 1.5; color: rgba(245,243,238,.85); }
.iv1-made-here strong { font-family: var(--serif); font-style: italic; color: var(--paper); font-weight: 600; }

/* ---------- Outside the metro checklist (§ 04) ---------- */
.iv1-checklist { list-style: none; max-width: 700px; margin: 20px 0 0; padding: 0; }
.iv1-checklist li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; font-size: 1.02rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.iv1-checklist li:last-child { border-bottom: 0; }
.iv1-checklist svg { flex: 0 0 auto; margin-top: 3px; }
.iv1-checklist em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- Closing line ---------- */
.iv1-closing { padding: 56px 0; text-align: center; border-bottom: 2px solid var(--ink); }
.iv1-closing p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-2); }
.iv1-closing a { color: var(--orange); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232,80,26,.3); text-underline-offset: 3px; }
.iv1-closing a:hover { color: var(--orange-dark); }

@media (max-width: 720px) {
  .idg-caption { font-size: 10px; }
}