/* ================================================================
   Counter hero + /parts guide (Work Order M, 2026-09-16)

   Linked from templates/homepage.html and templates/parts.html: one
   hero, one stylesheet. Block A is the shared hero and card (Work
   Order L, moved here from homepage.css with its notes). Homepage only
   pieces (tabs, the wide result card) stay in homepage.css, which
   loads after this file. Block B is /parts only. Block C is the guide.

   .search-hint and .text-link are scoped to .hero on purpose: parts.html
   has its own .search-hint (under the symptom box) and .text-link (the
   row link on result cards) and these must not restyle them.

   Chrome palette only: #CC0000 #990000 #FF3333 #0A0A0A #FFFFFF.
   Relies on :root vars both templates define
   (--red --text --muted --subtle --border --surface --white
    --shadow-lg --shadow-red --radius-lg --font).
   ================================================================ */

/* ---------- A. Shared hero + card (homepage and /parts) ---------- */
/* ================================================================
   HERO: "The Counter" (Work Order L, 2026-09-12)
   One wide plate, headline + search card over the empty left side,
   trust line bottom right. Values off the approved board (canvas D).
   Chrome palette only: #CC0000 #990000 #FF3333 #0A0A0A #FFFFFF.
================================================================ */
.hero {
  position: relative;
  /* Plate edges never flash white while the image loads. */
  background: #0A0A0A;
  min-height: 696px;
  overflow: hidden;
  /* The card changes height on purpose (form, busy line, result, wide
     result). Scroll anchoring reacted to the swap by gliding the page
     450 px on every desktop lookup (Morgy, 2026-09-12). Off in here. */
  overflow-anchor: none;
}
/* Real <img>, not a CSS background, so preload, alt and LCP all work.
   Cover at every width (no fixed crop: the board's 1530 px crop left a
   black bar past 1440 on wide monitors, Morgy 2026-09-12). 62% 40%
   keeps his whole face in frame from 900 through 2560. */
.hero-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
  display: block;
}
.hero-shade-x {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.55) 34%, rgba(10,10,10,0) 52%);
}
.hero-shade-y {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 80%, rgba(10,10,10,.45) 100%);
}
.hero-inner {
  position: relative;
  /* 40 under the card too: with the promise block the card runs
     taller than the board and was kissing the hero's bottom edge. */
  max-width: 1296px; margin: 0 auto; padding: 40px 72px 40px;
}
.hero-copy {
  display: flex; flex-direction: column; gap: 24px; width: 470px;
  transition: width .35s cubic-bezier(.25,.8,.25,1);
}
.hero-h1 {
  margin: 0;
  font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -.03em;
  color: #FFFFFF; text-shadow: 0 2px 18px rgba(10,10,10,.5);
  width: 640px;
}
.hero-h1 .red { color: #FF3333; }
.hero .search-card { box-shadow: 0 24px 60px rgba(10,10,10,.45); }

@media (max-width: 1100px) {
  .hero-inner { padding-left: 40px; padding-right: 40px; }
}

/* Phone: whole scene as a band, then headline, then card. Nothing
   over his face ("it's not gonna clock just seeing his face"). */
@media (max-width: 768px) {
  .hero { min-height: 0; }
  .hero-plate {
    position: relative; inset: auto;
    /* 3:2 band, the whole scene (Morgy, 2026-09-12: keep the 3:2
       scene, take the card to 820). */
    width: 100%; height: auto; aspect-ratio: 3 / 2;
    object-fit: cover; object-position: 50% 50%;
    margin-top: -6px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .hero-shade-x, .hero-shade-y { display: none; }
  /* Phone budget (Morgy, 2026-09-12): the whole card, promise block
     included, lands under y 820 on a 390 x 844 phone with the full
     3:2 scene. The headline sits 52 px into the fade, the card and
     promise block lose their desktop air, and the in-card trust line
     goes: the footer carries it, and the hero trust line is already
     dropped here for the same reason. Copy is untouched. */
  .hero-inner { padding: 0 16px 20px; margin-top: -52px; }
  .hero-copy { width: auto; gap: 12px; }
  .hero-h1 { font-size: 28px; width: auto; text-shadow: 0 2px 14px rgba(10,10,10,.9); }
  .hero .search-card { padding: 12px; gap: 8px; }
  .hero .search-field { margin-bottom: 12px; }
  .hero .search-field label { margin-bottom: 6px; }
  .hero .search-btn { margin-top: 0; }
  .hero .search-foot { margin-top: 12px; }
  /* The .text-link half outranks the .hero scoped base rule further down. */
  .hero .search-foot > * + *, .hero .search-foot > .text-link { margin-top: 6px; }
  .hero .pledge { padding: 6px 12px; }
  .hero .pledge-row + .pledge-row { margin-top: 6px; padding-top: 6px; }
  .hero .pledge-say { font-size: 13px; line-height: 1.35; }
  .hero .search-trust { display: none; }
}
@media (max-width: 430px) {
  /* Phone budget, last inch: the placement hint under the model field
     goes; the tag hint after a scan still answers "where is it". The
     homepage keeps its By part hint; /parts has only the model hint. */
  .hero #mode-model .search-hint, .hero--parts .search-hint { display: none; }
}

/* ── Hero search card (two-field) ─────── */
.search-card {
  width: 100%; max-width: 540px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
/* H7: the hero inputs upper-case what the customer types, and the
   placeholder inherited it ("E.G. W10882923"). */
.search-card input::placeholder { text-transform: none; }
.search-field { margin-bottom: 16px; }
.search-field label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.search-field input {
  width: 100%;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 13px 16px;
  font-family: var(--font); font-size: 16px; font-weight: 500;
  color: var(--text); background: var(--surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.search-field input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(204,0,0,0.08);
  background: var(--white);
}
/* Scoped to .hero: parts.html has its own .search-hint under the symptom box. */
.hero .search-hint {
  padding-left: 0;
  font-size: 12px; color: var(--subtle); margin-top: 6px;
}
.search-btn {
  width: 100%; padding: 16px;
  /* /parts has no global button reset; the homepage's says the same. */
  border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
  color: var(--white); border-radius: 12px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: var(--shadow-red);
  transition: opacity 0.15s, transform 0.15s; margin-top: 8px;
}
.search-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.search-btn[disabled] { opacity: .7; transform: none; cursor: default; }
/* ── Card footer under Find My Part ─────────────────────────────────
   The promise block (Morgy's phone line), one quiet grey trust line,
   a hairline, then the one action (text link) centered on its own
   44 px row. Replaced a trust row with green bullets, a text link
   with negative margins, and a rule line that all read at the same
   weight and ran into each other; then green/red stat tiles, which
   Morgy rejected.
   Vertical scale in this card (spacing audit, 2026-09-12): 24 around
   the button (field to button, button to footer), 16 between groups
   (tabs to form, field to field), 12 inside the footer, 8 label to
   input, 6 input to hint. Phone (390 budget: card bottom at y 820):
   one 12 step between every group, 6 inside, 12 card padding. */
.search-foot { margin-top: 24px; }
.search-trust {
  margin: 12px 0 0; font-size: 13px; line-height: 1.55;
  color: var(--muted); font-weight: 500;
}
.search-trust .trust-locate { font-weight: 700; color: var(--red); }
.search-trust .trust-sep { margin: 0 7px; color: #c9c9c9; }
/* Pledge block: Morgy's phone line under Find My Part. One quiet panel,
   two rows, the day is the loudest word. Chrome palette only, no green,
   no colored tiles. stock-eta.js picks the copy. Named "pledge" because
   ".promise" is the dark mid-page section further down this file. On
   phones the tag sits above the sentence so the line does not wrap
   three deep next to an 86 px label.
   Spacing (audit, 2026-09-12): 12 / 16 padding, 12 tag to sentence,
   8 each side of the hairline between rows. Phone keeps 6 vertical
   so the card bottom holds at y 820 on a 390 screen, sides 12. */
.pledge {
  margin: 0; padding: 12px 16px;
  background: var(--surface, #F9FAFB); border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
}
.pledge-row { display: flex; gap: 12px; align-items: flex-start; }
.pledge-row + .pledge-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, #E5E7EB); }
.pledge-tag {
  flex: none; width: 86px; padding-top: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.pledge-say { font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--text); min-width: 0; }
.pledge-say b { font-weight: 800; }
.pledge-say .day { color: var(--red); font-weight: 800; }
.pledge-chip {
  display: inline-block; margin-top: 4px; padding: 2px 9px;
  font-size: 12px; font-weight: 600; color: var(--red);
  background: var(--red-bg, #FFF0F0); border-radius: 999px;
}
@media (max-width: 480px) {
  .pledge-row { flex-direction: column; gap: 2px; }
  .pledge-tag { width: auto; padding-top: 0; }
  .pledge-say { font-size: 14.5px; }
}

/* ── "Text a real person" link under the finder (Work Order H8) ──────
   One line, 44 px tap target, the header's SVG bubble. Hairline above
   separates the action from the two fact lines. */
/* Text link spacing (audit, 2026-09-12): 12 above the hairline, the
   44 px row centers its own text (no extra top padding, desktop and
   phone alike), 8 icon to text. */
/* Scoped to .hero: parts.html has its own .text-link, the row link on result cards. */
.hero .text-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-top: 12px; padding-top: 0;
  border-top: 1px solid #ececec;
  color: var(--text);
  font-size: 15px; font-weight: 500; line-height: 1.2;
  text-decoration: none;
}
.hero .text-link strong { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero .text-link svg { width: 18px; height: 18px; fill: var(--red); flex: none; }
.hero .text-link:hover strong, .hero .text-link:focus-visible strong { text-decoration-thickness: 2px; }

/* ---------- B. /parts only ---------- */
/* The hero lives inside .search-header > .container on this template.
   In hero mode both go full bleed so the plate reaches the edges. */
body.hero-mode .search-header{
  padding: 0; background: none; border: 0;
}
body.hero-mode .search-header > .container{
  max-width: none; padding: 0;
}
/* Eyebrow above the H1, white on the plate. Same words the old nm-hero
   carried, same 11 / .08em label scale as the card labels. */
.hero-eyebrow{
  margin: 0 0 -8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #FFFFFF; opacity: .85; text-shadow: 0 1px 8px rgba(10,10,10,.6);
}
/* /parts has no mode tabs, so the card starts straight at the model
   field. Pull the card's first label up to the padding edge. */
.hero--parts .search-card > .search-field:first-child{ margin-top: 0; }
/* The homepage widens the card for companions. Not on /parts: results
   render in .results-area below, not in the card. */
.hero--parts .hero-copy{ width: 470px; }
@media (max-width: 768px){
  .hero--parts .hero-copy{ width: auto; }
  .hero-eyebrow{ margin-bottom: -4px; }
}

/* ---------- C. Guide blocks (hero mode only) ---------- */
.parts-guide{ display: none; }
body.hero-mode .parts-guide{ display: block; }
.parts-guide{
  max-width: 1296px; margin: 0 auto; padding: 8px 72px 72px;
}
.guide-block{ padding: 56px 0 0; }
.guide-block + .guide-block{ border-top: 1px solid var(--border); margin-top: 56px; }
.guide-eyebrow{
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--red);
}
.guide-block h2{
  margin: 0 0 12px; font-size: 32px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.02em; color: var(--text);
}
.guide-lede{ margin: 0 0 24px; max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.guide-foot{ margin: 20px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }

.tag-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.tag-grid li{
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; display: flex; flex-direction: column; gap: 4px;
}
.tag-grid b{ font-size: 15px; font-weight: 800; color: var(--red); }
.tag-grid span{ font-size: 14.5px; line-height: 1.45; color: var(--text); }

.step-list{
  margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.step-list li{
  counter-increment: step; position: relative;
  padding: 20px 20px 20px 64px; background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); font-size: 15px; line-height: 1.5; color: var(--muted);
}
.step-list li::before{
  content: counter(step); position: absolute; left: 20px; top: 18px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #cc0000 0%, #990000 100%); color: #fff;
  font-weight: 800; font-size: 15px;
}
.step-list b{ display: block; color: var(--text); font-weight: 800; margin-bottom: 4px; }

.faq-list{ margin: 24px 0 0; max-width: 760px; }
.faq-item{ padding: 18px 0; border-top: 1px solid var(--border); }
.faq-item:last-child{ border-bottom: 1px solid var(--border); }
.faq-item dt{ font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.faq-item dd{ margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1100px){ .parts-guide{ padding-left: 40px; padding-right: 40px; } }
@media (max-width: 768px){
  .parts-guide{ padding: 0 16px 48px; }
  .guide-block{ padding-top: 36px; }
  .guide-block + .guide-block{ margin-top: 36px; }
  .guide-block h2{ font-size: 26px; }
  .tag-grid, .step-list{ grid-template-columns: 1fr; }
  .tag-grid li{ flex-direction: row; gap: 12px; align-items: baseline; }
  .tag-grid b{ flex: none; width: 96px; }
}