/* ==========================================================================
   First Call Auto Care - document pages 2026

   The warranty, privacy, SMS terms and image credits pages were the last four
   still on the raw Duda template. Each carried its own inline styling and all
   four rendered their headings in Orbitron, a display face that appears
   nowhere else on the site, because Duda ships

       #dm div.dmContent h2 { font-family: Orbitron; font-weight: 900 }

   at specificity (1,1,2). Nothing scoped to a class can beat that, which is
   why every selector here is anchored to the same `#dm div.dmContent` and
   adds its own class on top: (1,2,2) wins, and it wins for the same reason
   Duda's rule does rather than by accident.

   Scoped to .fcdoc. Reuses the tokens from service-2026.css so a visitor
   arriving from a service page does not cross a visual seam.
   ========================================================================== */

#dm div.dmContent .fcdoc,
.fcdoc {
  --ink: #1d1f21;
  --ink-soft: #4a4f55;
  /* Was #8b9096, which is 3.22:1 on paper and 3.00:1 on the wash band:
     a WCAG AA failure at 4.5:1 everywhere it is used, and it is used for
     the Step 1..5 labels, the coupon expiry date and "and older models
     too". Darkened to the lightest value that clears 4.8:1 on the harder
     of the two grounds, so the muted hierarchy survives.
     CHANGE_ID fc-contrast-20260916 */
  --ink-faint: #6a6d72;
  --line: #e6e7e9;
  --wash: #f6f7f8;
  --accent: #c8362f;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.68;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.fcdoc *,
.fcdoc *::before,
.fcdoc *::after { box-sizing: border-box; }

/* ---- shell ------------------------------------------------------------ */

.fcdoc__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* The masthead is the one flourish these pages get. It separates a legal
   document from the page that sent you to it. */
.fcdoc__head {
  padding: 64px 0 34px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
#dm div.dmContent .fcdoc__eyebrow,
.fcdoc__eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
#dm div.dmContent .fcdoc h1,
.fcdoc h1 {
  margin: 0;
  max-width: 22ch;
  font-family: inherit;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--ink);
  text-transform: none;
  text-align: left;
}
#dm div.dmContent .fcdoc__sub,
.fcdoc__sub {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 17px;
  color: var(--ink-soft);
}
#dm div.dmContent .fcdoc__stamp,
.fcdoc__stamp {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}

/* ---- two column layout, contents rail on the left --------------------- */

.fcdoc__cols {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 0 72px;
  align-items: start;
}
.fcdoc__cols--solo { grid-template-columns: minmax(0, 1fr); }

.fcdoc__toc {
  position: sticky;
  top: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
#dm div.dmContent .fcdoc__toc-label,
.fcdoc__toc-label {
  margin: 0 0 14px 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* The indent sits on the item, never on the list. Duda ships
   `#site_content ol:not(.defaultList){-webkit-padding-start:0}` at (1,1,1),
   which silently zeroes any padding set on the list itself. */
.fcdoc__toc li { margin: 0; }
#dm div.dmContent .fcdoc__toc a,
.fcdoc__toc a {
  display: block;
  padding: 7px 0 7px 20px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
}
.fcdoc__toc a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ---- body ------------------------------------------------------------- */

.fcdoc__body { max-width: 74ch; }

#dm div.dmContent .fcdoc__body h2,
.fcdoc__body h2 {
  margin: 52px 0 14px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--ink);
  text-transform: none;
  text-align: left;
}
.fcdoc__body h2:first-child { margin-top: 0; }
/* Anchored headings sit under a sticky header when jumped to, so they carry
   their own scroll offset rather than landing behind it. */
.fcdoc__body h2[id] { scroll-margin-top: 24px; }

#dm div.dmContent .fcdoc__body h3,
.fcdoc__body h3 {
  margin: 30px 0 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  text-transform: none;
  text-align: left;
}

#dm div.dmContent .fcdoc__body p,
.fcdoc__body p {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--ink-soft);
  text-align: left;
}
.fcdoc__body ul,
.fcdoc__body ol { margin: 0 0 18px; padding: 0; }
.fcdoc__body li {
  margin: 0 0 8px 22px;
  font-size: 16px;
  color: var(--ink-soft);
}
#dm div.dmContent .fcdoc a,
.fcdoc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fcdoc strong { color: var(--ink); font-weight: 700; }

/* ---- pull-out note ---------------------------------------------------- */

.fcdoc__note {
  margin: 34px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--wash);
  font-size: 15.5px;
}
#dm div.dmContent .fcdoc__note p,
.fcdoc__note p { margin: 0; }

/* ---- the sign on the warranty page ------------------------------------ */

/* Portrait now, because the sign is portrait and the whole shield is shown:
   the plaque reads NATIONWIDE WARRANTY, which on this page is the argument
   rather than something to crop out. No caption; the sign says it itself. */
.fcdoc__sign {
  float: right;
  width: 260px;
  margin: 4px 0 24px 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.fcdoc__sign img { display: block; width: 100%; height: auto; }
#dm div.dmContent .fcdoc__sign figcaption,
.fcdoc__sign figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--wash);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: left;
}

/* ---- credits, which are a list rather than prose ---------------------- */

.fcdoc__credits { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 48px; }
.fcdoc__credits li {
  margin: 0 0 10px;
  padding-left: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  break-inside: avoid;
}
.fcdoc__credits b { color: var(--ink); font-weight: 700; }

/* ---- closing actions -------------------------------------------------- */

.fcdoc__cta {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#dm div.dmContent .fcdoc__cta a,
.fcdoc__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.fcdoc__cta a.p { background: var(--accent); color: #fff; }
.fcdoc__cta a.p:hover { background: #a92b25; }
.fcdoc__cta a.s { border: 1px solid #d6d8da; color: var(--ink); }
.fcdoc__cta a.s:hover { border-color: var(--ink); }

/* ---- narrow ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .fcdoc__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fcdoc__toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .fcdoc__toc-label { width: 100%; margin-left: 0; }
  .fcdoc__toc a { padding: 6px 12px; border-left: 0; border: 1px solid var(--line); border-radius: 999px; }
  .fcdoc__toc a:hover { border-color: var(--accent); }
}
@media (max-width: 700px) {
  #dm div.dmContent .fcdoc h1,
  .fcdoc h1 { font-size: 32px; }
  .fcdoc__head { padding-top: 44px; }
  /* Not full width on a phone: a portrait image at 100% would be taller than
     the screen and push the text it belongs to off the bottom. */
  .fcdoc__sign { float: none; width: 60%; max-width: 240px; margin: 0 auto 26px; }
  .fcdoc__credits { columns: 1; }
}