/* Hi-Fi gallery — embedded polished mockups of all 11 screens
   Shared base with wireframes.css for layout chrome,
   plus a complete Direction A mini design-system for the previews */

.hf-page {
  padding: 80px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--ink-100);
}
.hf-page h2 { margin-bottom: 8px; }
.hf-page .meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px;
}
.hf-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 1100px) { .hf-grid { grid-template-columns: 1fr; } }

/* ─── Device chrome ───────────────────────────────── */
.hf-device {
  background: #fff;
  border: 1px solid #d7dbe2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px -28px rgba(11,42,74,.25);
}
.hf-device .hf-chrome {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: #f5f6f8;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5d6678;
  border-bottom: 1px solid #d7dbe2;
}
.hf-device .hf-chrome .dots { display: inline-flex; gap: 4px; }
.hf-device .hf-chrome .dots i { width: 8px; height: 8px; border-radius: 50%; background: #c6ccd7; }

.hf-device.desktop { width: 100%; }
.hf-device .hf-body {
  background: #f7f4ec;
  font-family: "DM Sans", system-ui, sans-serif;
  color: #11161f;
}

/* ─── Direction A mini design system (scoped to .hf-body) ───────────── */
.hf-body { font-size: 11px; line-height: 1.4; }
.hf-body h1, .hf-body h2, .hf-body h3 { margin: 0; font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; letter-spacing: -.015em; color: #0a2540; }
.hf-body a { text-decoration: none; color: inherit; }

.hf-tbar { background: #061425; color: rgba(255,255,255,.86); padding: 6px 14px; font-size: 9.5px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hf-tbar strong { color: #fff; }
.hf-tbar .seal { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #c2271f; color: #fff; font-size: 8px; margin-right: 6px; }

.hf-nav { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(247,244,236,.94); border-bottom: 1px solid rgba(11,42,74,.08); }
.hf-nav .logo { display: inline-flex; align-items: center; gap: 6px; }
.hf-nav .logo .mark { width: 18px; height: 18px; border-radius: 3px; background: #0a2540; color: #fff; display: grid; place-items: center; font-family: "Instrument Serif", serif; font-size: 11px; position: relative; overflow: hidden; }
.hf-nav .logo .mark::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 5px; height: 5px; background: #c2271f; }
.hf-nav .logo .wm { font-family: "Instrument Serif", serif; font-size: 12px; color: #0a2540; line-height: 1; }
.hf-nav .links { display: flex; gap: 10px; font-size: 9.5px; color: #2c3340; margin-left: 6px; }
.hf-nav .links span { cursor: pointer; }
.hf-nav .cta { margin-left: auto; padding: 5px 10px; background: #c2271f; color: #fff; border-radius: 4px; font-size: 10px; font-weight: 600; }

.hf-btn { display: inline-block; padding: 7px 12px; background: #c2271f; color: #fff; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.hf-btn.ghost { background: transparent; color: #0a2540; border: 1px solid rgba(11,42,74,.18); }
.hf-btn.dark { background: #0a2540; color: #fff; }
.hf-btn.lg { padding: 9px 14px; font-size: 11px; }
.hf-btn.full { display: block; text-align: center; }

.hf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(11,42,74,.12); font-size: 9.5px; font-weight: 500; color: #0a2540; }
.hf-pill.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
.hf-pill.amber { background: rgba(243,176,66,.18); color: #7a5a07; border-color: rgba(243,176,66,.4); }

.hf-card { background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: 8px; padding: 12px; }
.hf-card .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #c2271f; margin-bottom: 4px; }

/* Hero specific (homepage) */
.hf-hero { padding: 22px 18px 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; background: radial-gradient(80% 60% at 90% 0%, rgba(11,42,74,.06), transparent 60%); }
.hf-hero h1 { font-size: 28px; line-height: 1; letter-spacing: -.02em; margin: 6px 0 8px; }
.hf-hero h1 .acc { color: #c2271f; font-style: italic; }
.hf-hero .lede { font-size: 11px; color: #2c3340; line-height: 1.4; margin-bottom: 12px; }
.hf-hero .ctas { display: flex; gap: 6px; }
.hf-hero .meta-row { display: flex; gap: 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(11,42,74,.1); font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: #5d6678; }
.hf-hero .meta-row strong { color: #0a2540; display: block; font-size: 11px; font-family: "DM Sans", sans-serif; }

/* Quote card (homepage hero) */
.hf-qcard { background: #fff; border-radius: 10px; padding: 14px; border: 1px solid rgba(11,42,74,.06); box-shadow: 0 12px 30px -14px rgba(11,42,74,.25); position: relative; }
.hf-qcard .pill-top { position: absolute; top: -10px; right: 12px; background: #0a2540; color: #fff; font-size: 9px; padding: 3px 9px; border-radius: 999px; font-family: "JetBrains Mono", monospace; }
.hf-qcard .pill-top .dot { color: #f3b042; }
.hf-qcard h3 { font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600; color: #0a2540; margin-bottom: 8px; }
.hf-qcard .tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: #f7f4ec; border-radius: 5px; padding: 2px; margin-bottom: 8px; }
.hf-qcard .tabs span { padding: 5px 0; text-align: center; font-size: 9px; color: #5d6678; border-radius: 3px; }
.hf-qcard .tabs span.active { background: #fff; color: #0a2540; font-weight: 600; box-shadow: 0 1px 2px rgba(11,42,74,.08); }
.hf-qcard .field { padding: 6px 10px; border: 1px solid #e4e7ee; border-radius: 5px; margin-bottom: 6px; background: #fff; }
.hf-qcard .field .lbl { font-family: "JetBrains Mono", monospace; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #5d6678; }
.hf-qcard .field .val { font-size: 11px; color: #11161f; margin-top: 1px; }
.hf-qcard .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Trust strip */
.hf-trust-strip { background: #ede7d8; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 9px; }
.hf-trust-strip .item { display: inline-flex; align-items: center; gap: 5px; color: #2c3340; font-family: "JetBrains Mono", monospace; }
.hf-trust-strip .item strong { color: #0a2540; font-family: "DM Sans", sans-serif; }
.hf-trust-strip .seal { width: 16px; height: 16px; border-radius: 3px; background: #fff; border: 1px solid #e4e7ee; display: grid; place-items: center; font-family: "Instrument Serif", serif; color: #0a2540; font-size: 9px; }

/* 5-CTA differentiator strip */
.hf-diffs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(11,42,74,.08); margin: 14px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(11,42,74,.08); }
.hf-diffs .dcell { background: #f7f4ec; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.hf-diffs .dcell .num { font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: #c2271f; letter-spacing: .12em; }
.hf-diffs .dcell h4 { font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 600; line-height: 1.2; color: #0a2540; }
.hf-diffs .dcell p { font-size: 9px; color: #2c3340; line-height: 1.3; margin: 0; }

/* Solutions grid */
.hf-sols { padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hf-sols .sol { background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: 6px; overflow: hidden; }
.hf-sols .sol .photo { aspect-ratio: 16/9; background: linear-gradient(135deg, #103258, #061425); display: grid; place-items: center; color: rgba(255,255,255,.4); font-family: "JetBrains Mono", monospace; font-size: 8px; }
.hf-sols .sol .body { padding: 8px 10px; }
.hf-sols .sol .body h4 { font-family: "Instrument Serif", serif; font-size: 14px; font-weight: 400; color: #0a2540; }
.hf-sols .sol .body .meta { font-size: 8.5px; color: #5d6678; margin-top: 2px; }

/* Logo wall */
.hf-logo-wall { padding: 12px 14px; }
.hf-logo-wall h5 { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #c2271f; margin: 0 0 8px; }
.hf-logo-wall .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(11,42,74,.06); border: 1px solid rgba(11,42,74,.06); border-radius: 6px; overflow: hidden; }
.hf-logo-wall .row .tile { background: #f7f4ec; aspect-ratio: 3/1.2; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #103258; font-family: "DM Sans", sans-serif; }

/* Reviews */
.hf-reviews { padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hf-reviews .rev { background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hf-reviews .rev .quote-mark { font-family: "Instrument Serif", serif; font-size: 24px; color: #c2271f; line-height: .6; }
.hf-reviews .rev .stars { color: #f3b042; font-size: 9px; letter-spacing: 2px; }
.hf-reviews .rev p { font-family: "Instrument Serif", serif; font-style: italic; font-size: 10.5px; line-height: 1.35; color: #0a2540; margin: 0; }
.hf-reviews .rev .who { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.hf-reviews .rev .who .av { width: 18px; height: 18px; border-radius: 50%; background: #e6eef9; color: #14406c; display: grid; place-items: center; font-family: "Instrument Serif", serif; font-size: 10px; }
.hf-reviews .rev .who .name { font-weight: 600; color: #0a2540; }
.hf-reviews .rev .who .role { color: #5d6678; font-size: 8.5px; }

/* Final CTA */
.hf-final { background: #ede7d8; padding: 18px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid rgba(11,42,74,.08); }
.hf-final h2 { font-size: 18px; line-height: 1.05; max-width: 18em; }
.hf-final h2 em { color: #c2271f; font-style: italic; }

/* Footer */
.hf-footer { background: #061425; color: rgba(255,255,255,.7); padding: 14px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 14px; font-size: 9px; }
.hf-footer h5 { font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 6px; font-weight: 500; }
.hf-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.hf-footer ul li { color: rgba(255,255,255,.78); }
.hf-footer .brand p { color: rgba(255,255,255,.55); }
.hf-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; margin-top: 4px; font-size: 8px; color: rgba(255,255,255,.5); }

/* Mobile-specific tweaks */
.hf-device.mobile .hf-body { font-size: 10.5px; }
.hf-device.mobile .hf-hero { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
.hf-device.mobile .hf-hero h1 { font-size: 22px; }
.hf-device.mobile .hf-nav .links { display: none; }
.hf-device.mobile .hf-nav .cta { padding: 4px 8px; font-size: 9px; }
.hf-device.mobile .hf-diffs { grid-template-columns: 1fr; gap: 1px; margin: 10px; }
.hf-device.mobile .hf-sols { grid-template-columns: 1fr; padding: 10px; }
.hf-device.mobile .hf-trust-strip { padding: 8px 10px; gap: 6px; }
.hf-device.mobile .hf-reviews { grid-template-columns: 1fr; padding: 10px; }
.hf-device.mobile .hf-logo-wall .row { grid-template-columns: repeat(3, 1fr); }
.hf-device.mobile .hf-final { flex-direction: column; align-items: stretch; gap: 8px; }
.hf-device.mobile .hf-footer { grid-template-columns: 1fr 1fr; }
.hf-device.mobile .hf-trust-strip .item:nth-child(n+4) { display: none; }

/* Quote builder specific */
.hf-qb { padding: 18px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; min-height: 380px; }
.hf-qb .stepper { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.hf-qb .stepper .step { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; }
.hf-qb .stepper .step .n { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; font-size: 9px; background: #e4e7ee; color: #5d6678; }
.hf-qb .stepper .step.done .n { background: #16a34a; color: #fff; }
.hf-qb .stepper .step.active .n { background: #0a2540; color: #fff; }
.hf-qb .stepper .step .lbl { font-size: 9px; color: #5d6678; }
.hf-qb .stepper .step.active .lbl { color: #0a2540; font-weight: 600; }
.hf-qb .stepper .sep { flex: 1; height: 1px; background: #e4e7ee; min-width: 6px; }
.hf-qb .stepper .sep.done { background: #16a34a; }
.hf-qb .panel { background: #fff; border: 1px solid #e4e7ee; border-radius: 10px; padding: 18px; }
.hf-qb .panel h2 { font-family: "Instrument Serif", serif; font-size: 24px; margin-bottom: 4px; line-height: 1.1; }
.hf-qb .panel .sub { font-size: 10px; color: #5d6678; margin-bottom: 14px; }
.hf-qb .summary { background: #fff; border: 1px solid #e4e7ee; border-radius: 10px; padding: 14px; align-self: start; }
.hf-qb .summary h4 { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #5d6678; margin: 0 0 10px; }
.hf-qb .summary .line { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #e4e7ee; font-size: 9.5px; }
.hf-qb .summary .line:last-of-type { border-bottom: 0; }
.hf-qb .summary .line .k { color: #5d6678; }
.hf-qb .summary .line .v { color: #0a2540; font-weight: 600; }
.hf-qb .summary .line .v.dim { color: #a5acba; font-weight: 400; font-style: italic; }
.hf-qb .summary .est { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e4e7ee; display: flex; justify-content: space-between; align-items: baseline; }
.hf-qb .summary .est .lbl { font-family: "JetBrains Mono", monospace; font-size: 8.5px; text-transform: uppercase; color: #5d6678; }
.hf-qb .summary .est .num { font-family: "Instrument Serif", serif; font-size: 22px; color: #0a2540; line-height: 1; }
.hf-qb .gtee-mini { margin-top: 10px; padding: 8px 10px; background: #f7f4ec; border-radius: 6px; font-size: 9px; color: #2c3340; display: flex; gap: 6px; }
.hf-qb .gtee-mini .ic { width: 16px; height: 16px; border-radius: 50%; background: #0a2540; color: #f3b042; display: grid; place-items: center; font-size: 9px; flex-shrink: 0; }
.hf-qb .gtee-mini strong { color: #0a2540; display: block; }
.hf-qb .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.hf-qb .choice { padding: 12px; background: #f7f4ec; border-radius: 8px; border: 2px solid transparent; display: flex; gap: 8px; align-items: flex-start; }
.hf-qb .choice.selected { background: #fff; border-color: #0a2540; }
.hf-qb .choice .ic { width: 26px; height: 26px; border-radius: 6px; background: #e6eef9; color: #0a2540; display: grid; place-items: center; font-family: "Instrument Serif", serif; font-size: 14px; flex-shrink: 0; }
.hf-qb .choice .meta h5 { font-size: 11px; font-weight: 600; color: #0a2540; margin: 0; }
.hf-qb .choice .meta p { font-size: 9px; color: #5d6678; margin: 2px 0 0; }
.hf-qb .nav-controls { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.hf-device.mobile .hf-qb { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
.hf-device.mobile .hf-qb .summary { display: none; }

/* Quote results specific */
.hf-qr { padding: 12px; display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.hf-qr .trip-ctx { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(11,42,74,.08); gap: 8px; flex-wrap: wrap; }
.hf-qr .trip-ctx .stack .eyebrow { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #5d6678; }
.hf-qr .trip-ctx .stack h2 { font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; color: #0a2540; margin-top: 2px; line-height: 1.2; }
.hf-qr .trip-ctx .stack .detail { font-size: 9.5px; color: #5d6678; }
.hf-qr .filter-rail { background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: 8px; padding: 12px; }
.hf-qr .filter-rail h5 { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #5d6678; margin: 0 0 6px; }
.hf-qr .filter-rail .group { padding: 8px 0; border-top: 1px solid #e4e7ee; }
.hf-qr .filter-rail .group:first-of-type { border-top: 0; padding-top: 0; }
.hf-qr .filter-rail .group .lbl { font-size: 9.5px; font-weight: 600; color: #0a2540; margin-bottom: 4px; }
.hf-qr .filter-rail .group label { display: block; font-size: 9px; color: #2c3340; padding: 2px 0; }
.hf-qr .results h3 { font-family: "DM Sans", sans-serif; font-size: 14px; color: #0a2540; margin-bottom: 8px; }
.hf-qr .vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hf-qr .vcard { background: #fff; border: 1px solid rgba(11,42,74,.08); border-radius: 8px; overflow: hidden; }
.hf-qr .vcard.standout { border-color: #0a2540; box-shadow: 0 0 0 1px #0a2540; position: relative; }
.hf-qr .vcard.standout::before { content: "BEST FIT"; position: absolute; top: 0; right: 8px; background: #0a2540; color: #f3b042; font-family: "JetBrains Mono", monospace; font-size: 7.5px; letter-spacing: .1em; padding: 3px 6px; border-radius: 0 0 3px 3px; z-index: 1; }
.hf-qr .vcard .photo { aspect-ratio: 16/8; background: linear-gradient(135deg, #103258, #061425); display: grid; place-items: center; color: rgba(255,255,255,.4); font-family: "JetBrains Mono", monospace; font-size: 8px; position: relative; }
.hf-qr .vcard .photo .tag { position: absolute; top: 6px; left: 6px; background: rgba(243,176,66,.95); color: #0a2540; font-family: "JetBrains Mono", monospace; font-size: 7.5px; font-weight: 600; padding: 2px 5px; border-radius: 2px; }
.hf-qr .vcard .body { padding: 8px 10px; }
.hf-qr .vcard .name { font-family: "Instrument Serif", serif; font-size: 12px; color: #0a2540; line-height: 1.1; }
.hf-qr .vcard .name small { font-family: "DM Sans", sans-serif; font-size: 8.5px; color: #5d6678; display: block; margin-top: 2px; }
.hf-qr .vcard .op { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid #e4e7ee; font-size: 9px; }
.hf-qr .vcard .op .meta { color: #5d6678; }
.hf-qr .vcard .op .meta strong { color: #0a2540; }
.hf-qr .vcard .op .price { font-family: "Instrument Serif", serif; font-size: 18px; color: #0a2540; letter-spacing: -.01em; }
.hf-qr .vcard .actions { display: flex; gap: 4px; margin-top: 6px; }
.hf-qr .vcard .actions .btn-mini { flex: 1; padding: 5px 8px; font-size: 9px; font-weight: 600; text-align: center; border-radius: 4px; background: #c2271f; color: #fff; }
.hf-qr .vcard .actions .btn-mini.ghost { background: transparent; color: #0a2540; border: 1px solid rgba(11,42,74,.18); flex: 0 0 auto; padding: 5px 8px; }
.hf-qr .gtee-call { grid-column: 1 / -1; margin-top: 10px; background: linear-gradient(160deg, #0a2540, #103258); color: #fff; padding: 12px 14px; border-radius: 8px; display: flex; align-items: center; gap: 12px; }
.hf-qr .gtee-call .seal { width: 28px; height: 28px; border-radius: 50%; background: rgba(243,176,66,.18); color: #f3b042; display: grid; place-items: center; font-family: "Instrument Serif", serif; font-size: 16px; flex-shrink: 0; border: 1px solid rgba(243,176,66,.35); }
.hf-qr .gtee-call .body { flex: 1; }
.hf-qr .gtee-call .body h5 { font-family: "DM Sans", sans-serif; font-size: 10px; color: #fff; font-weight: 600; margin: 0; }
.hf-qr .gtee-call .body p { font-size: 9px; color: rgba(255,255,255,.78); margin: 2px 0 0; }
.hf-device.mobile .hf-qr { grid-template-columns: 1fr; padding: 10px; }
.hf-device.mobile .hf-qr .filter-rail { display: none; }
.hf-device.mobile .hf-qr .vcards { grid-template-columns: 1fr; }

/* Caption + open-full link */
.hf-caption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500);
  display: flex; justify-content: space-between;
}
.hf-caption a { color: var(--usc-red-600); border-bottom: 1px solid rgba(194,39,31,.3); }

.hf-screen-stack { display: flex; flex-direction: column; gap: 18px; }