/* answers.css : the reading layer for /answers and the answer articles.

   WHAT THIS FILE OWNS
   The article measure, prose headings, the index list, the related-answer list,
   and the blue links inside that copy. Chrome (tokens, nav, type, FAQ, footer,
   buttons) is /folio.css. This file does not restate it.

   The pages are flow sections. They do not pin, and they do not load scrollcraft. */

.ans-page h1.display{
  max-width:20ch;
  font-size:clamp(36px,4.8vw,68px);
}

.ans-page .lead{max-width:66ch}

.ans-updated{
  margin:18px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
}

/* The pill is position:fixed. Home and Free Build clear it on the first stage
   with this same top pad (Care uses the same tokens, a few pixels tighter).
   .sec's own pad starts the eyebrow inside the pill: 75px against an 82px
   pill on desktop, 48px against 70px on a phone. Only the opening header
   needs it. Later sections are already below the fold. */
.ans-page main > header.sec{
  padding-top:calc(var(--nav-h) + var(--nav-inset) + 34px);
}

.ans-prose{
  max-width:66ch;
  margin:64px auto 0;
  font-size:16.5px;
  line-height:1.7;
  color:var(--muted);
}

.ans-prose h2{
  font-family:var(--sans);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--text);
  margin:2.1em 0 .55em;
}

.ans-prose h2:first-child{margin-top:0}
.ans-prose p{margin:0 0 1em}
.ans-prose p:last-child{margin-bottom:0}
.ans-prose strong{color:var(--text);font-weight:600}

.ans-prose ul,
.ans-prose ol{
  margin:0 0 1em;
  padding-left:1.25em;
}
.ans-prose li{margin:0 0 .4em}
.ans-prose li:last-child{margin-bottom:0}

.ans-prose .ans-table-wrap{
  overflow-x:auto;
  margin:1.2em 0 1.6em;
  -webkit-overflow-scrolling:touch;
}
.ans-prose table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.45;
}
.ans-prose caption{
  caption-side:top;
  text-align:left;
  font-weight:600;
  color:var(--text);
  margin:0 0 .65em;
}
.ans-prose th,
.ans-prose td{
  border-top:1px solid var(--line);
  padding:12px 12px 12px 0;
  vertical-align:top;
  text-align:left;
}
.ans-prose th{color:var(--text);font-weight:600}
.ans-prose tr:last-child th,
.ans-prose tr:last-child td{border-bottom:1px solid var(--line)}

.ans-prose a,
.ans-page .fit a{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:.18em;
}

.ans-prose a:hover,
.ans-page .fit a:hover{color:var(--text)}

.ans-index,
.ans-related{
  max-width:720px;
  margin:56px auto 0;
  text-align:left;
}

#who{display:block;margin:72px auto 0;max-width:720px}

.ans-index a,
.ans-related a{
  display:block;
  padding:20px 0;
  border-top:1px solid var(--line);
  color:inherit;
  text-decoration:none;
}

.ans-index a:last-child,
.ans-related a:last-child{border-bottom:1px solid var(--line)}

.ans-index h2,
.ans-related h3{
  font-family:var(--sans);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--text);
  margin:0;
}

.ans-index p,
.ans-related p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.55;
}

.ans-index a:hover h2,
.ans-related a:hover h3{color:var(--blue)}

.ans-page .inline-cta{justify-content:center;margin-top:48px}
.ans-page .fit{margin-top:28px}

@media (max-width:760px){
  .ans-prose{margin-top:40px;font-size:16px}
  .ans-index,.ans-related{margin-top:36px}
}