@charset "UTF-8";
/* ============================================================================
   FormerCars — landing.css  (screen 2a only)
   Loaded by index.php via $head_extra, on top of fc.css.

   PASS 4 CHANGES — two things, no visual redesign of the page itself:

   1. CONTAINER MODEL. Every section used `padding: <v> 48px`, the old frame
      model. All nine are now the container arithmetic, so the landing page
      lines up with the header, footer and every other page on the site.

   2. TOKEN ALIASES. This file was written against the previous token names.
      fc.css was rewritten from the handoff and uses the handoff's names, so
      the old names below no longer resolve — without these aliases the page
      would render with invalid colours. Aliases rather than a find-replace so
      the mapping stays visible and this file can be retired cleanly later.
   ========================================================================= */

:root {
  --fc-ink-secondary:    var(--fc-ink-soft);
  --fc-ink-tertiary:     var(--fc-ink-meta);
  --fc-line:             var(--fc-rule-card);
  --fc-line-faintest:    var(--fc-rule-faint);
  --fc-line-row:         var(--fc-rule-row);
  --fc-line-soft:        var(--fc-rule-div);
  --fc-line-section:     var(--fc-rule-section);
  --fc-line-card:        var(--fc-rule-card);
  --fc-line-card-admin:  var(--fc-rule-card-adm);
  --fc-line-input:       var(--fc-rule-input);
  --fc-line-btn:         var(--fc-rule-btn);
  --fc-band-cta:         var(--fc-marketing);
  --fc-bg-tint:          var(--fc-sunken);
  --fc-surface-band:     var(--fc-band);
  --fc-surface-sunken:   var(--fc-sunken);
  --fc-success:          var(--fc-found);
  --fc-shadow-lg:        0 30px 90px -34px oklch(0.25 0.02 50 / 0.35);
  --fc-shadow-hover:     var(--fc-lift);
}

   Shared tokens/components live in assets/css/fc.css (loaded first by
   partials/header.php); this file is only the sections unique to the
   marketing homepage.

   Bridge: this file's selectors were drafted against a few convenience
   variable names before fc.css's real token names were confirmed. Rather
   than rewrite every selector below, alias them here to the real fc.css
   tokens so nothing silently falls back to unstyled defaults. */
:root {
  --fc-ink-secondary:  var(--fc-ink-soft);
  --fc-ink-tertiary:   var(--fc-ink-faint);
  --fc-line-section:   var(--fc-line);
  --fc-line-card:      var(--fc-line);
  --fc-line-card-admin:var(--fc-line);
  --fc-line-row:       var(--fc-line-soft);
  --fc-line-faintest:  var(--fc-line-soft);
  --fc-line-input:     oklch(0.19 0.014 40 / 0.18);
  --fc-line-btn:       oklch(0.19 0.014 40 / 0.2);
  --fc-surface-sunken: var(--fc-bg-tint);
  --fc-surface-band:   var(--fc-bg-tint);
  --fc-success:        var(--fc-found);
  --fc-link:           oklch(0.47 0.1 242);
  --fc-band-cta:       #EFA831;
  --fc-shadow-hover:   var(--fc-shadow-lg);
  --fc-card:           var(--fc-paper);
}

.fc-home-hero {
  padding: 60px max(24px, calc((100% - 1200px) / 2)) 44px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
  background: oklch(0.985 0.006 85);
  border-bottom: 1px solid var(--fc-line-section);
}
.fc-home-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.fc-home-hero-eyebrow {
  font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fc-accent);
}
.fc-home-hero h1 {
  margin: 0; font-size: 82px; line-height: 0.9; letter-spacing: -0.04em;
  font-weight: 800; text-wrap: balance;
}
.fc-home-hero-sub {
  margin: 0; font-size: 20px; line-height: 1.5; color: var(--fc-ink-secondary); max-width: 560px;
}
.fc-home-hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.fc-home-hero-ctas .fc-btn { font-size: 16px; padding: 15px 26px; }
.fc-home-hero-facts {
  display: flex; gap: 26px; font-family: var(--fc-font-mono); font-size: 12px;
  color: var(--fc-ink-tertiary); flex-wrap: wrap;
}

/* site totals card */
.fc-totals-card { border: 1px solid var(--fc-line-card); border-radius: 5px; background: var(--fc-card); overflow: hidden; }
.fc-totals-head, .fc-totals-subhead {
  padding: 13px 18px; border-bottom: 1px solid var(--fc-line-section); background: var(--fc-surface-band);
}
.fc-totals-head span, .fc-totals-subhead span {
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-ink-secondary);
}
.fc-totals-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fc-line-section);
}
.fc-totals-cell { background: var(--fc-card); padding: 15px 18px; display: flex; flex-direction: column; gap: 2px; }
.fc-totals-cell .fig { font-family: var(--fc-font-mono); font-size: 27px; line-height: 1; }
.fc-totals-cell .lbl { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-tertiary); }
.fc-totals-subhead { border-top: 1px solid var(--fc-line-section); border-bottom: 1px solid var(--fc-line-section); }
.fc-totals-row {
  padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--fc-line-faintest);
}
.fc-totals-row .info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fc-totals-row .info .name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.fc-totals-row .info .vin { font-family: var(--fc-font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--fc-ink-secondary); }
.fc-totals-footer {
  padding: 12px 18px; display: flex; justify-content: flex-end; border-top: 1px solid var(--fc-line-section); background: var(--fc-surface-band);
}
.fc-totals-footer a {
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fc-accent); border-bottom: 1px solid var(--fc-accent);
}

/* ruler motif */
.fc-ruler { padding: 0 max(24px, calc((100% - 1200px) / 2)); background: var(--fc-ink); }
.fc-ruler-track { display: flex; align-items: flex-end; height: 34px; }
.fc-ruler-track span.pos {
  flex: 1; display: flex; align-items: flex-end; border-left: 1px solid oklch(0.99 0.005 85 / 0.28);
  padding-left: 5px; height: 100%; font-family: var(--fc-font-mono); font-size: 9px;
  letter-spacing: 0.08em; color: oklch(0.99 0.005 85 / 0.5);
}

/* decoder instrument */
.fc-decoder { padding: 46px max(24px, calc((100% - 1200px) / 2)) 40px; display: flex; flex-direction: column; gap: 26px; }
.fc-decoder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.fc-decoder-head h2 { margin: 0; font-size: 42px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.fc-decoder-head p { margin: 0; font-family: var(--fc-font-mono); font-size: 13px; line-height: 1.7; color: var(--fc-ink-secondary); max-width: 420px; }
#fc-vin-input {
  width: 100%; background: var(--fc-card); border: 1px solid var(--fc-line-btn); border-radius: 4px;
  color: var(--fc-ink); font-family: var(--fc-font-mono); font-size: 26px; letter-spacing: 0.3em;
  padding: 18px 20px;
}
.fc-decoder-groups { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.fc-decoder-group { display: flex; flex-direction: column; gap: 8px; transition: opacity 140ms ease; }
.fc-decoder-group .chars { display: flex; gap: 8px; }
/* Cells keep the pale blue at every state — sampled #E1EBF4 fill on a
   #C1C8CF edge, same as the VIN decoder page. Only the bar and label carry
   the segment colour. Gap is 8px inside a group, 12px between (measured). */
.fc-decoder-group .chars span {
  width: 40px; height: 54px; display: grid; place-items: center; border-radius: 3px;
  font-family: var(--fc-font-mono); font-size: 24px;
  background: #E1EBF4; color: var(--fc-ink);
  border: 1px solid #C1C8CF; transition: background 140ms ease;
}
.fc-decoder-group .chars span.is-filled { background: #E1EBF4; color: var(--fc-ink); }
.fc-decoder-group .bar { height: 2px; }
.fc-decoder-group .lbl { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.fc-decoder-check { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.fc-decoder-check .status { display: flex; align-items: center; gap: 9px; font-family: var(--fc-font-mono); font-size: 13px; }
.fc-decoder-check .dot { width: 8px; height: 8px; border-radius: 50%; }
.fc-decoder-check .iso { font-family: var(--fc-font-mono); font-size: 11px; color: var(--fc-ink-tertiary); }
.fc-decoder-hint {
  display: flex; align-items: baseline; gap: 14px; min-height: 22px; font-family: var(--fc-font-mono);
  font-size: 13.5px; color: var(--fc-ink-secondary); padding: 14px 16px; background: var(--fc-surface-sunken); border-radius: 4px;
}
.fc-decoder-hint .title { color: var(--fc-accent); white-space: nowrap; }
.fc-decoder-fields {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fc-line-card);
  border: 1px solid var(--fc-line-card); border-radius: 4px; overflow: hidden;
}
.fc-decoder-fields .cell { background: var(--fc-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; }
.fc-decoder-fields .cell .k { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-ink-tertiary); }
.fc-decoder-fields .cell .v { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.fc-decoder-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fc-decoder-actions .label {
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-tertiary); margin-right: 4px;
}
.fc-decoder-actions a.search-link {
  font-family: var(--fc-font-mono); font-size: 13px; padding: 10px 17px; border: 1px solid var(--fc-line-btn); border-radius: 3px;
}
.fc-decoder-actions a.search-link:hover { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-decoder-actions { justify-content: flex-end; }
.fc-decoder-actions .save { margin-left: auto; }

/* three steps */
.fc-steps { padding: 46px max(24px, calc((100% - 1200px) / 2)); display: flex; flex-direction: column; gap: 26px; background: oklch(0.985 0.006 85); }
.fc-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.fc-steps-head h2 { margin: 0; font-size: 42px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.fc-steps-head .tag { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fc-ink-tertiary); }
.fc-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fc-step { border-top: 2px solid; padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.fc-step .n { font-family: var(--fc-font-mono); font-size: 12px; }
.fc-step h3 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
.fc-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fc-ink-secondary); }
.fc-step.save { border-color: var(--fc-accent); } .fc-step.save .n { color: var(--fc-accent); }
.fc-step.garage { border-color: var(--fc-link); } .fc-step.garage .n { color: var(--fc-link); }
.fc-step.find { border-color: var(--fc-success); } .fc-step.find .n { color: var(--fc-success); }

/* search surfaces */
.fc-surfaces { padding: 46px max(24px, calc((100% - 1200px) / 2)); display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--fc-line-section); }
.fc-surfaces-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.fc-surfaces-head h2 { margin: 0; font-size: 42px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.fc-surfaces-head p { margin: 0; font-family: var(--fc-font-mono); font-size: 13px; line-height: 1.7; color: var(--fc-ink-secondary); max-width: 400px; }
.fc-surfaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fc-line-card); border: 1px solid var(--fc-line-card); border-radius: 4px; overflow: hidden; }
.fc-surface-cell { background: var(--fc-card); padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 190px; }
.fc-surface-cell:hover { background: oklch(0.955 0.012 85); }
.fc-surface-cell .n { font-family: var(--fc-font-mono); font-size: 12px; color: var(--fc-accent); }
.fc-surface-cell h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.fc-surface-cell p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fc-ink-secondary); flex: 1; }
.fc-surface-cell .hit { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-tertiary); border-top: 1px solid var(--fc-line-card); padding-top: 10px; }

/* sample garage preview */
.fc-garage-preview { padding: 46px max(24px, calc((100% - 1200px) / 2)); background: oklch(0.94 0.012 85); display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--fc-line-section); }
.fc-garage-preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.fc-garage-preview-head h2 { margin: 0; font-size: 42px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.fc-view-toggle { display: flex; gap: 8px; align-items: center; }
.fc-view-toggle span { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border-radius: 3px; }
.fc-view-toggle .on { background: var(--fc-ink); color: var(--fc-paper); }
.fc-view-toggle .off { border: 1px solid var(--fc-line-btn); color: var(--fc-ink-secondary); }
.fc-garage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fc-sample-card { background: var(--fc-card); border: 1px solid var(--fc-line-card); border-radius: 4px; overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease; }
.fc-sample-card:hover { transform: translateY(-4px); box-shadow: var(--fc-shadow-hover); }
.fc-sample-card .plate {
  height: 96px; display: grid; place-items: center; background: oklch(0.93 0.022 82);
  background-image: repeating-linear-gradient(135deg, oklch(0.19 0.014 40 / 0.055) 0 3px, transparent 3px 13px);
  border-bottom: 1px solid var(--fc-line-section);
}
.fc-sample-card .plate span { font-family: var(--fc-font-mono); font-size: 13px; letter-spacing: 0.1em; color: oklch(0.36 0.03 60); }
.fc-sample-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; }
.fc-sample-card .top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-sample-card .top-row h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.fc-sample-card .vin { font-family: var(--fc-font-mono); font-size: 12.5px; letter-spacing: 0.1em; padding: 8px 10px; border-radius: 3px; background: var(--fc-surface-sunken); color: var(--fc-ink); }
.fc-sample-card .links { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.fc-sample-card .links a.search { font-family: var(--fc-font-mono); font-size: 11.5px; padding: 6px 11px; border: 1px solid var(--fc-line-input); border-radius: 3px; }
.fc-sample-card .links a.search:hover { border-color: var(--fc-accent); color: var(--fc-accent); }
.fc-sample-card .links a.view { margin-left: auto; font-family: var(--fc-font-mono); font-size: 11.5px; color: var(--fc-ink-tertiary); }
.fc-garage-preview-note { font-family: var(--fc-font-mono); font-size: 12px; color: var(--fc-ink-tertiary); }

/* recall band */
.fc-recall-band { padding: 40px max(24px, calc((100% - 1200px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; border-top: 1px solid var(--fc-line-section); }
.fc-recall-band .eyebrow { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fc-danger); }
.fc-recall-band h2 { margin: 0; font-size: 36px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.fc-recall-band p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fc-ink-secondary); max-width: 520px; }
.fc-recall-band p a { color: var(--fc-danger); border-bottom: 1px solid var(--fc-danger); font-weight: 600; }
.fc-recall-sample { border: 1px solid var(--fc-line-card-admin); border-radius: 4px; overflow: hidden; }
.fc-recall-sample-head { padding: 12px 18px; background: var(--fc-surface-sunken); font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fc-ink-secondary); display: flex; justify-content: space-between; }
.fc-recall-sample-head .open { color: var(--fc-danger); }
.fc-recall-sample-row { padding: 15px 18px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--fc-line-row); }
.fc-recall-sample-row:last-child { border-bottom: none; }
.fc-recall-sample-row .title { font-size: 16px; font-weight: 600; }
.fc-recall-sample-row .meta { font-family: var(--fc-font-mono); font-size: 11.5px; color: var(--fc-ink-tertiary); }

/* discover + faq */
.fc-discover-faq { padding: 46px max(24px, calc((100% - 1200px) / 2)); display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; background: oklch(0.985 0.006 85); border-top: 1px solid var(--fc-line-section); }
.fc-discover-col { display: flex; flex-direction: column; gap: 18px; }
.fc-discover-col .eyebrow, .fc-faq-col .eyebrow { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fc-accent); }
.fc-discover-col h2 { margin: 0; font-size: 32px; line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; }
.fc-discover-list a.row { padding: 15px 0; display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--fc-line-section); }
.fc-discover-list a.row:hover { color: var(--fc-accent); }
.fc-discover-list .count { font-family: var(--fc-font-mono); font-size: 13px; color: var(--fc-accent); }
.fc-discover-list .name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.fc-discover-list .by { font-family: var(--fc-font-mono); font-size: 11.5px; color: var(--fc-ink-secondary); }
.fc-discover-list .arrow { margin-left: auto; font-family: var(--fc-font-mono); font-size: 13px; }
.fc-faq-col { display: flex; flex-direction: column; gap: 18px; }
.fc-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.fc-faq-item { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--fc-line-section); padding-top: 14px; }
.fc-faq-item h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.fc-faq-item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fc-ink-secondary); }

/* closing CTA band */
.fc-closing-band { padding: 60px max(24px, calc((100% - 1200px) / 2)); background: var(--fc-band-cta); color: oklch(0.24 0.05 55); display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.fc-closing-band h2 { margin: 0; font-size: 48px; line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; max-width: 720px; }
.fc-closing-band .tag { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.28 0.05 50); }
.fc-closing-band .fc-btn { background: oklch(0.18 0.014 40); color: oklch(0.97 0.008 85); font-size: 17px; padding: 16px 28px; }
.fc-closing-band .fc-btn:hover { background: oklch(0.24 0.02 45); }

/* ------------------------------------------------------- pass 4 responsive */
/*  The landing page had no breakpoints. Values match the handoff's tablet and
    mobile spec: 1fr/360px hero split stacks, 3- and 4-up grids step down,
    H1 62 -> 48 -> 38, and the two-up bands go single column.                */

@media (max-width: 1199px) {
  .fc-home-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 36px; }
  .fc-home-hero h1 { font-size: 48px; }
  .fc-home-hero-sub { font-size: 18px; max-width: none; }
  .fc-steps-grid, .fc-garage-grid { grid-template-columns: 1fr 1fr; }
  .fc-surfaces-grid { grid-template-columns: 1fr 1fr; }
  .fc-recall-band, .fc-discover-faq { grid-template-columns: 1fr; gap: 32px; }
  .fc-faq-grid { grid-template-columns: 1fr 1fr; }
  .fc-decoder-fields { grid-template-columns: 1fr 1fr; }
  .fc-closing-band h2 { font-size: 38px; }
}

@media (max-width: 767px) {
  .fc-home-hero h1 { font-size: 38px; line-height: 0.98; letter-spacing: -0.03em; }
  .fc-home-hero-facts { grid-template-columns: 1fr; gap: 1px; }
  .fc-home-hero-ctas { flex-direction: column; align-items: stretch; }
  .fc-home-hero-ctas .fc-btn { width: 100%; }
  .fc-steps-grid, .fc-garage-grid, .fc-surfaces-grid,
  .fc-faq-grid, .fc-decoder-fields, .fc-discover-list { grid-template-columns: 1fr; }
  .fc-closing-band { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fc-closing-band h2 { font-size: 28px; }
  .fc-decoder-blocks { overflow-x: auto; }
  .fc-ruler-track { min-width: 640px; }
  .fc-decoder-actions { flex-direction: column; align-items: stretch; }
  .fc-home-hero, .fc-decoder, .fc-steps, .fc-surfaces,
  .fc-garage-preview, .fc-recall-band, .fc-discover-faq { padding-block: 36px; }
}