/* Jitcar editorial — sourced, calm, and built from the LOTLINE tokens. */
.blog-shell,
.blog-article {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.blog-hero {
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, rgba(250, 204, 21, .13), transparent 42%),
    var(--paper);
}
.blog-hero .blog-shell { padding-block: 26px 42px; }
.blog-hero h1,
.article-head h1 {
  max-width: 850px;
  margin: 8px 0 12px;
  font-size: clamp(2.15rem, 5vw, 4.2rem);
  line-height: .99;
  letter-spacing: -.045em;
}
.blog-hero > .blog-shell > p:last-child {
  max-width: 710px;
  margin: 0;
  color: var(--steel);
  font-size: var(--fs-md);
  line-height: 1.65;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
  color: var(--steel);
  font-size: var(--fs-xs);
}
.breadcrumbs a { color: inherit; }
.breadcrumbs a:hover { color: var(--asphalt); }

.blog-index .eyebrow,
.blog-article-page .eyebrow,
.blog-gone .eyebrow {
  margin: 0;
  color: var(--lane-ink);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
}

.blog-library { padding-block: 42px 72px; }
.buyer-tools-feature { padding-top: 42px; }
.blog-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.blog-section-head h2 { margin: 5px 0 0; font-size: var(--fs-2xl); }
.blog-section-head > span {
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.blog-card {
  position: relative;
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: 0 7px 24px rgba(35, 38, 43, .045);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-2);
  box-shadow: 0 11px 28px rgba(35, 38, 43, .075);
}
.blog-category {
  margin: 0 0 18px;
  color: var(--lane-ink);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.blog-card h3 {
  margin: 0 0 11px;
  font-size: var(--fs-lg);
  line-height: 1.22;
  letter-spacing: -.025em;
}
.blog-card h3 a { color: var(--asphalt); text-decoration: none; }
.blog-card h3 a::after { position: absolute; inset: 0; content: ""; }
.blog-card > p:not(.blog-category) {
  margin: 0;
  color: var(--steel);
  font-size: var(--fs-sm);
  line-height: 1.58;
}
.blog-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
}
.blog-card-link {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 15px;
  border-bottom: 2px solid var(--lane);
  color: var(--asphalt);
  font-size: var(--fs-sm);
  font-weight: var(--w-extrabold);
  text-decoration: none;
}

.buyer-tool-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.buyer-tool-links > a {
  display: flex;
  min-height: 238px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--lane);
  border-radius: var(--radius-card);
  background: var(--asphalt);
  color: var(--paper);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.buyer-tool-links > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(35, 38, 43, .14);
}
.buyer-tool-links span {
  color: var(--lane);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.buyer-tool-links strong { margin-top: 16px; font-size: var(--fs-md); line-height: 1.3; }
.buyer-tool-links p { margin: 8px 0 0; color: var(--steel-2); font-size: var(--fs-xs); line-height: 1.55; }
.buyer-tool-links em { margin-top: auto; color: var(--paper); font-size: var(--fs-xs); font-style: normal; font-weight: var(--w-extrabold); }

.blog-article-page { padding-top: 34px; }
.article-head {
  max-width: 980px;
  padding: 12px 0 38px;
}
.article-head h1 { font-size: clamp(2.05rem, 5.4vw, 4rem); }
.article-deck {
  max-width: 820px;
  margin: 0;
  color: var(--steel);
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.55;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--steel);
  font-size: var(--fs-xs);
}
.article-byline strong { color: var(--asphalt); }
.article-byline time { font-family: var(--mono); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(220px, 1fr);
  gap: clamp(36px, 7vw, 92px);
  padding: 40px 0 72px;
  border-top: 1px solid var(--hairline);
}
.article-body { min-width: 0; }
.article-intro {
  margin: 0 0 34px;
  padding: 22px 24px;
  border-left: 4px solid var(--lane);
  background: var(--paper);
  font-size: var(--fs-md);
  font-weight: var(--w-semibold);
  line-height: 1.7;
}
.article-body section { scroll-margin-top: 90px; }
.article-body h2 {
  margin: 36px 0 12px;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing: -.025em;
}
.article-body p,
.article-body li {
  font-size: var(--fs-base);
  line-height: 1.78;
}
.article-body p { margin: 0 0 14px; }
.article-body ul { margin: 8px 0 22px; padding-left: 24px; }
.article-body li { margin-bottom: 6px; padding-left: 3px; }
.article-body li::marker { color: var(--lane-ink); }

/* Article utilities: user-entered math and evidence, never invented claims. */
.buyer-tool {
  margin: 34px 0 46px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--hairline-2);
  border-top: 5px solid var(--lane);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: 0 12px 32px rgba(35, 38, 43, .07);
}
.buyer-tool-head { margin-bottom: 22px; }
.buyer-tool-head h2 { margin: 7px 0 8px; }
.buyer-tool-head > p:last-child { max-width: 650px; margin: 0; color: var(--steel); font-size: var(--fs-sm); line-height: 1.6; }
.buyer-tool label,
.buyer-tool legend {
  display: block;
  margin-bottom: 7px;
  color: var(--asphalt);
  font-size: var(--fs-xs);
  font-weight: var(--w-extrabold);
}
.buyer-tool input,
.buyer-tool select {
  width: 100%;
  height: 50px;
  border: 1.5px solid var(--hairline-2);
  border-radius: var(--radius-field);
  outline: 0;
  background: var(--paper);
  color: var(--asphalt);
  font: inherit;
}
.buyer-tool input { padding: 0 13px; }
.buyer-tool select { padding: 0 38px 0 13px; }
.buyer-tool input:focus,
.buyer-tool select:focus {
  border-color: var(--lane-ink);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .25);
}
.money-input,
.suffix-input { position: relative; }
.money-input > span,
.suffix-input > span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  pointer-events: none;
}
.money-input > span { left: 14px; }
.money-input input { padding-left: 29px; }
.suffix-input > span { right: 13px; }
.suffix-input input { padding-right: 68px; }
.tool-shared-field { max-width: 330px; margin-bottom: 18px; }
.tool-field-grid,
.otd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.otd-grid .tool-shared-field { max-width: none; margin: 0; }
.loan-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.loan-offer {
  min-width: 0;
  margin: 0;
  padding: 17px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-field);
}
.loan-offer legend { padding-inline: 5px; font-size: var(--fs-sm); }
.tool-results,
.charge-results {
  display: grid;
  gap: 6px;
  margin: 18px 0 0;
}
.tool-results > div,
.charge-results > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.tool-results dt,
.charge-results dt { color: var(--steel); font-size: var(--fs-xs); }
.tool-results dd,
.charge-results dd { margin: 0; font-family: var(--mono); font-size: var(--fs-sm); font-weight: var(--w-bold); text-align: right; }
.tool-verdict {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-control);
  background: var(--fill-quiet);
  font-weight: var(--w-extrabold);
}
.tool-disclaimer { margin: 14px 0 0 !important; color: var(--steel); font-size: var(--fs-2xs) !important; line-height: 1.55 !important; }
.otd-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius-field);
  background: var(--asphalt);
  color: var(--paper);
}
.otd-total span { font-size: var(--fs-xs); font-weight: var(--w-bold); }
.otd-total strong { color: var(--lane); font-family: var(--mono); font-size: var(--fs-xl); }
.tool-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.tool-reset {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid var(--lane);
  background: transparent;
  color: var(--asphalt);
  font-weight: var(--w-extrabold);
  cursor: pointer;
}
.checklist-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.checklist-meter {
  height: 7px;
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--fill-quiet);
}
.checklist-meter i { display: block; width: 0; height: 100%; background: var(--lane); transition: width .2s ease; }
.buyer-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.buyer-checklist label {
  display: flex;
  min-height: 64px;
  align-items: start;
  gap: 11px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.buyer-checklist label:has(input:checked) { border-color: var(--lane-ink); background: rgba(250, 204, 21, .09); }
.buyer-checklist input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--asphalt); }
.buyer-checklist small { display: block; margin-bottom: 3px; color: var(--steel); font-family: var(--mono); font-size: .6rem; font-weight: var(--w-regular); text-transform: uppercase; }
.charge-inputs { margin-bottom: 18px; }
.charge-results { grid-template-columns: repeat(3, 1fr); }
.charge-results > div { display: block; padding: 13px; border: 1px solid var(--hairline); border-radius: var(--radius-control); }
.charge-results dd { margin-top: 7px; text-align: left; }
.article-aside > div {
  position: sticky;
  top: 88px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
}
.article-aside h2 { margin: 8px 0 10px; font-size: var(--fs-md); }
.article-aside p:not(.eyebrow) { color: var(--steel); font-size: var(--fs-xs); line-height: 1.6; }
.article-aside a { font-size: var(--fs-sm); font-weight: var(--w-extrabold); }
.article-cta {
  margin: 42px 0;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--asphalt);
  color: var(--paper);
}
.article-cta h2 { max-width: 520px; margin: 8px 0 20px; color: var(--paper); }
.article-cta .btn { text-decoration: none; }
.article-sources {
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}
.article-sources > p { color: var(--steel); font-size: var(--fs-sm); }
.article-sources a { overflow-wrap: anywhere; }

.related-guides { padding-bottom: 80px; }
.related-guides > h2 { margin: 7px 0 16px; font-size: var(--fs-2xl); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.related-grid > a {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--asphalt);
  text-decoration: none;
}
.related-grid span { color: var(--steel); font-family: var(--mono); font-size: var(--fs-2xs); text-transform: uppercase; }
.related-grid strong { margin-top: 12px; font-size: var(--fs-md); line-height: 1.35; }
.related-grid em { margin-top: auto; color: var(--asphalt); font-size: var(--fs-xs); font-style: normal; font-weight: var(--w-extrabold); }
.related-grid > a:hover { border-color: var(--lane); }

.blog-gone { min-height: 55vh; padding-block: 80px; }
.blog-gone h1 { max-width: 700px; margin: 9px 0 12px; font-size: var(--fs-4xl); }
.blog-gone > p:not(.eyebrow) { max-width: 620px; margin: 0 0 22px; color: var(--steel); line-height: 1.65; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buyer-tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { order: -1; }
  .article-aside > div { position: static; }
}

@media (max-width: 640px) {
  .blog-shell,
  .blog-article { width: min(100% - 28px, 1180px); }
  .blog-hero .blog-shell { padding-block: 20px 30px; }
  .breadcrumbs { margin-bottom: 22px; }
  .blog-library { padding-block: 30px 52px; }
  .blog-grid,
  .related-grid { grid-template-columns: 1fr; }
  .buyer-tool-links,
  .loan-offers,
  .tool-field-grid,
  .otd-grid,
  .buyer-checklist,
  .charge-results { grid-template-columns: 1fr; }
  .buyer-tool-links > a { min-height: 205px; }
  .buyer-tool { margin-inline: -2px; padding: 18px; }
  .tool-shared-field { max-width: none; }
  .otd-total { align-items: start; flex-direction: column; }
  .blog-card { min-height: 280px; padding: 19px; }
  .blog-section-head { align-items: start; }
  .article-head { padding-bottom: 28px; }
  .article-layout { padding: 28px 0 52px; gap: 24px; }
  .article-intro { padding: 18px; }
  .article-cta { padding: 20px; }
  .related-guides { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .buyer-tool-links > a,
  .checklist-meter i { transition: none; }
}

@media print {
  body.blog-tool-printing .site-head,
  body.blog-tool-printing .site-foot,
  body.blog-tool-printing .article-head,
  body.blog-tool-printing .article-aside,
  body.blog-tool-printing .related-guides,
  body.blog-tool-printing .article-body > :not(.buyer-tool),
  body.blog-tool-printing .tool-actions { display: none !important; }
  body.blog-tool-printing .article-layout,
  body.blog-tool-printing .blog-article { display: block; width: 100%; padding: 0; border: 0; }
  body.blog-tool-printing .buyer-tool { margin: 0; box-shadow: none; }
}