/* Presentation-only palette shared by the editorial and preserved article layouts. */
:root {
  --paper: #eee;
  --soft: #eee;
  --sand: #eee;
  --line: #d6d6d6;
}

body { background: #fff; }

.preview-line,
.navigation,
.footer,
.tool-callout,
.video-section,
.price-callout,
.notice,
.sources,
.story-placeholder,
caption,
thead th,
.featured-guide,
.tool-band,
.panel { background: #eee; }

.preview-line,
.tool-callout,
.tool-steps strong { color: var(--ink); }
.tool-callout .eyebrow,
.tool-steps span { color: var(--green); }
.tool-steps span { border-color: var(--line); }
.tool-steps p { color: var(--muted); }
.tool-callout .button.light {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.tool-callout .button.light:hover { background: #173b2c; }
.video-outline { background: linear-gradient(135deg, #fff, #ddd); }

/* These headers contain their own content rather than an inner .wrap. */
.masthead.wrap {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(32px, calc((100% - 1180px) / 2));
  background: #eee;
}
.site-header.wrap,
.site-footer.wrap {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(40px, calc((100% - 1240px) / 2));
  background: #eee;
}

/* Extend the pricing band to the edges while keeping its content aligned. */
.price-callout.wrap {
  width: 100%;
  margin-inline: 0;
  padding-inline: max(32px, calc((100% - 1180px) / 2));
}

.footer,
.site-footer.wrap {
  background: #333;
  color: #eee;
  border-top-color: #555;
}
.footer p,
.footer .small,
.site-footer p,
.site-footer small { color: #ddd; }
.footer .small { border-top-color: #555; }
.site-footer a { color: #eee; }
.site-footer .brand-symbol { --ink: #eee; }

.hero-photo figcaption,
.article-photograph figcaption,
.tool-photo figcaption { background: #fff; }

@media (max-width: 760px) {
  .site-header.wrap,
  .site-footer.wrap { padding-inline: 20px; }
}
@media (max-width: 640px) {
  .masthead.wrap,
  .price-callout.wrap { padding-inline: 18px; }
}