/* Smile Lab USA — category and article body blocks.
   Prose, fact tables and market quotes that sit between page-builder
   sections and hold the same content column the neighbours use.
   Palette: cream #faf7f2, hairline #ece2d1, ink #1c1b19, forest #14322b,
   rust #b4400f, gold #d8a548 */

.slbody {
  box-sizing: border-box;
  display: block;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0 4px;
  color: #1c1b19;
  font-family: inherit;
  text-align: left;
}

.slbody h2 {
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #14322b;
  text-wrap: balance;
}

.slbody h2 ~ h2 {
  margin-top: 30px;
}

.slbody p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #4b463f;
  /* balance, not pretty: it spreads a paragraph evenly so the closing line
     lands nearly as full as the ones above it. Chrome balances up to six
     lines, so every paragraph here is written short enough to stay inside
     six lines on a 390 pixel screen. */
  text-wrap: balance;
}

.slbody p:last-child {
  margin-bottom: 0;
}

.slbody ul,
.slbody ol {
  margin: 0 0 12px;
  padding: 0 0 0 1.15em;
}

.slbody ul { list-style: disc; }
.slbody ol { list-style: decimal; }

.slbody li {
  margin: 0 0 7px;
  font-size: 16.5px;
  line-height: 1.55;
  color: #4b463f;
  text-wrap: balance;
}

.slbody li b { color: #14322b; }

.slbody a {
  color: #b4400f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.slbody a:hover { color: #14322b; }

/* what the market says out loud, in its own words */
.slbody .slquote {
  margin: 14px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid #d8a548;
  font-size: 16.5px;
  line-height: 1.55;
  font-style: italic;
  color: #4b463f;
  text-wrap: balance;
}

/* the same market voice inside a page-builder text block or an article */
p.slquote {
  margin: 12px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid #d8a548;
  font-style: italic;
  text-wrap: balance;
}

/* the payment line under a price table */
.slbody .slbody__pay {
  margin: 14px 0 0;
  padding: 11px 15px;
  background: #faf7f2;
  border: 1px solid #ece2d1;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b463f;
}

.slbody .slbody__pay b { color: #14322b; }

/* a fact table dropped straight into a body block owns the spacing above it */
.slbody .slsteps { margin-top: 4px; }

@media (max-width: 749px) {
  .slbody { padding: 22px 0 2px; }
  .slbody h2 { font-size: 22px; }
  .slbody h2 ~ h2 { margin-top: 24px; }
  .slbody p,
  .slbody li,
  .slbody .slquote { font-size: 15.5px; }
}

/* article body: the same balanced measure as a category block */
.article-template__content > p,
.article-template__content > ul > li,
.article-template__content > ol > li {
  text-wrap: balance;
}

/* closing block of a category: same balanced measure as the body blocks */
.sl-close-list li,
.sl-close-b .text-content,
.sl-close-s .text-content,
.sl-close-c .text-content {
  text-wrap: balance;
}

/* the note under a fact table: same balanced measure, it is prose too */
.slsteps__note {
  text-wrap: balance;
}

/* Closing action of a category. Without a rule the page builder leaves this
   anchor as bare blue text, and sl-motion.js only paints buttons that already
   carry the action colour, so it never reached the gold treatment either. */
.sl-close-cta .ecom__element--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background-color: #e8b54a;
  color: #14322b;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.sl-close-cta .ecom__element--button:hover,
.sl-close-cta .ecom__element--button:focus-visible {
  background-color: #d99e34;
  color: #14322b;
}

@media (max-width: 749px) {
  .sl-close-cta .ecom__element--button {
    padding: 13px 20px;
    font-size: 15px;
  }
}

/* Price tables on a phone: the column of appliance names and the column of
   prices must both be on screen before the table starts scrolling sideways,
   so the gutters get tighter rather than the type getting smaller. */
@media (max-width: 480px) {
  html section.slsteps.slsteps--table table { font-size: 13.5px; }
  html section.slsteps.slsteps--table th,
  html section.slsteps.slsteps--table td { padding: 8px 12px 8px 0; }
}