/* =============================================================
   Beyond Logic: brand layer ("the signed spec sheet")
   Paper / Ink / one vermilion signal. Loaded last on the $25K-build pages.
   Vermilion is reserved for what's certain: the price, the 30-day date,
   and the primary CTA. Everything else is paper and ink.
   ============================================================= */

:root {
  --paper: #f5f3ee;
  --sheet: #fbfaf7;
  --vellum: #ece8df;
  --rule: #d9d5cc;
  --rule-strong: #c9c4b8;
  --ink: #111315;
  --ink-2: #3a3f45;
  --graphite: #5b6168;
  --signal: #c8381b;
  --signal-hover: #a52e16;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* ---------- Type ---------- */
.scope-page { font-family: var(--body); background: var(--paper); }
.scope-page h1, .scope-page h2, .scope-page h3, .scope-page h4 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
.home { --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; }
.section-head h2, .home .scope-process-heading h2 { letter-spacing: -.025em; line-height: 1.08; }
.who-copy h2, .final-cta h2, .contact-side h2 { letter-spacing: -.025em; }
.build-body h3, .included-card h3, .case-copy h3, .offer-card h3 { letter-spacing: -.015em; }
.faq-list summary { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
.section-label { color: var(--graphite); font-weight: 500; letter-spacing: .06em; }
.home ::selection { background: var(--ink); color: #fff; }
.scope-page .btn, .scope-page .brand { font-family: var(--display); font-weight: 600; }

/* ---------- Logo: wordmark closed by the total rule ---------- */
.wordmark {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  font: 600 1.18rem/1 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
}
.wordmark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.home .brand, .scope-page .brand { gap: 0; color: var(--ink); }
.scope-page footer .brand .wordmark { font-size: 1.05rem; }

/* ---------- Shape: sharp corners, no glow ---------- */
.home .btn, .work-order, .included-card, .build-card, .boundaries, .contrast-grid, .badge-row li,
.faq-list summary::after, .who-photo, .case-row, .offer-card, .chip-row span, .form-panel,
.scope-nudge, .aba-links a, .aba-links i, .contact-points i, .track-note, .included-card > i,
.nav-dropdown-menu, .scope-page .scope-card, .scope-result-stats div, .scope-section, .build-tag,
.scope-lead-fields .field input, .home .field input, .home .field select, .home .field textarea,
.scope-current-question textarea, .scope-message p { border-radius: 2px; }
.work-order, .form-panel, .offer-card.featured, .home .nav-dropdown-menu { box-shadow: none; }
.who-photo { box-shadow: 10px 10px 0 var(--vellum), 10px 10px 0 1px var(--rule-strong); }

/* ---------- Buttons ---------- */
.home .btn-lime, .scope-page .btn-lime {
  background: var(--signal); border-color: var(--signal); color: #fff;
  font-family: var(--display); font-weight: 600;
}
.home .btn-lime:hover, .scope-page .btn-lime:hover,
.home .nav-links .btn-lime:hover { background: var(--signal-hover); border-color: var(--signal-hover); color: #fff; }
.home .nav-links .btn-lime { background: var(--signal); color: #fff; }
.home .btn-outline { color: var(--ink); border-color: var(--ink); }
.home .btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.home a:focus-visible, .home button:focus-visible, .home summary:focus-visible { outline-color: var(--signal); }

/* ---------- Hero ---------- */
.home-hero, .inner-hero { background: var(--paper); }
.home-hero::before, .inner-hero::before { display: none; }
.home-kicker { color: var(--graphite); font-weight: 500; letter-spacing: .08em; }
.home-kicker .dot { width: 7px; height: 7px; border-radius: 0; background: var(--ink); box-shadow: none; }
.home-hero h1 {
  max-width: 14ch;
  color: var(--ink);
  font-size: clamp(2.6rem, 5.6vw, 4.9rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.inner-hero h1 { font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.home-hero h1 .accent, .inner-hero h1 .accent { color: var(--ink); }
.home-lede { color: var(--ink-2) !important; }

/* The price line, set like an invoice total */
.hero-priceline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 30px;
  font: 500 clamp(.92rem, 1.4vw, 1.08rem)/1 var(--mono);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
.hero-priceline .lead { flex: 1 1 24px; max-width: 64px; border-top: 1px solid var(--rule-strong); }
.hero-priceline .total {
  position: relative; padding-bottom: 7px;
  color: var(--signal); font-size: 2em; letter-spacing: 0;
}
.total-rule { position: relative; display: inline-block; padding-bottom: 7px; }
.hero-priceline .total::after, .total-rule::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
}

@media (max-width: 760px) {
  .hero-priceline { gap: 10px; }
  .hero-priceline .lead { display: none; }
  .hero-priceline .total { font-size: 1.7em; }
}
.home .nav-toggle { border-radius: 2px; }

/* ---------- Work order (the spec sheet) ---------- */
.work-order { background: var(--sheet); border-color: var(--ink); }
.work-order::before { background: var(--ink); height: 3px; left: 0; right: 0; top: -1px; }
.work-order-head .mono { color: var(--ink); }
.work-order-lines dd small { color: var(--graphite); }
.work-order-lines div:first-child dd { color: var(--signal); font-family: var(--mono); font-size: 1.25rem; }
.work-order-lines div:nth-child(2) dd { color: var(--signal); }
.stamp { border-color: var(--signal); color: var(--signal); border-radius: 0; }

/* ---------- Build strip: a quiet ink band, no marquee ---------- */
.build-strip { background: var(--ink); border-color: var(--ink); }
.build-strip-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding: 4px 16px; }
.build-strip span[aria-hidden="true"] { display: none; }
.build-strip span { gap: 18px; padding: 14px 0 14px 18px; color: var(--paper); font: 500 .8rem/1 var(--mono); letter-spacing: .08em; }
.build-strip span::after { content: "·"; font-size: 1rem; color: var(--graphite); }
.build-strip span:nth-last-child(9)::after { content: ""; }

/* ---------- Sections ---------- */
.final-cta { background: var(--paper); border-top-color: var(--rule); }
.included-card:hover, .build-card:hover, .aba-links a:hover { border-color: var(--ink); }
.included-card > i { background: var(--vellum); color: var(--ink); }
.boundaries { border-color: var(--rule-strong); }
.offer-card.featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.offer-card.featured .offer-price { color: var(--signal); }
.who-proof a, .text-link { color: var(--ink); }
.who-proof a { border-bottom-color: var(--ink); }
.text-link:hover, .who-proof a:hover { color: var(--signal); }
.contact-points a, .track-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Flagship proof: RosterABA ---------- */
.build-card.featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-color: var(--ink); }
.build-card.featured .build-chrome { grid-column: 1 / -1; }
.builds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.build-card.featured picture { height: 100%; border-right: 1px solid var(--rule-strong); }
.build-card.featured .build-shot { height: 100%; aspect-ratio: auto; border-bottom: 0; }
.build-card.featured .build-tag { border-color: var(--signal); color: var(--signal); }
.build-spec { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.build-spec li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .88rem; color: var(--ink); }
.build-spec li span { color: var(--graphite); font: 500 .76rem/1.5 var(--mono); text-align: right; }
.build-spec-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: -6px 0 22px; }
.build-spec-total .label { color: var(--graphite); font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.build-spec-total .total-rule { color: var(--signal); font: 500 1.35rem/1 var(--mono); }
@media (max-width: 1080px) {
  .builds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builds-grid > .build-card:last-child { grid-column: 1 / -1; }
  .build-card.featured { grid-template-columns: 1fr; }
  .build-card.featured picture { border-right: 0; border-bottom: 1px solid var(--rule-strong); }
  .build-card.featured .build-shot { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .builds-grid { grid-template-columns: 1fr; }
}

/* ---------- Scoper: price and date are the signal ---------- */
.scope-fixed strong, .scope-result-stats strong { color: var(--signal); font-family: var(--mono); font-weight: 500; }
/* On vellum the small figures need the deeper signal to keep AA contrast */
.scope-workspace .scope-fixed strong, .scope-result-top .scope-result-stats strong { color: var(--signal-hover); }
.scope-result-stats div { border-color: var(--rule-strong); background: var(--sheet); }
.scope-result-stats span { color: var(--graphite); }
.scope-section { border-color: var(--rule); background: var(--sheet); }
.scope-section h3 { color: var(--ink); }
.scope-section h3 i, .scope-section li::before { color: var(--ink); background-color: var(--ink); }
.scope-section h3 i { background-color: transparent; }
.scope-section p, .scope-section li { color: var(--ink-2); }
.scope-page .scope-hero .scope-accent { color: var(--signal); }
.mobile-cta { background: var(--signal); }

/* ---------- Footer ---------- */
.scope-page footer.footer-simple { background: var(--paper); border-top-color: var(--ink); }
.scope-page footer .footer-bottom { color: var(--graphite); }
.scope-page footer a { color: var(--ink-2); }
.scope-page footer a:hover { color: var(--ink); }