/* Blocking sheet for long-form pages (/a/, /for/, /condition/, /stack/).
   The full styles.css loads after first paint. These rules match the
   chrome-active article layout so the late sheet and the top bar do not
   move the headline or the bottom line. */
body{background:var(--color-page);color:var(--color-text-primary)}
main.ar-wrap,main.sx-wrap,main.ca-wrap,main.sk-wrap{
  max-width:760px;margin:0 auto;padding:18px 24px 64px;
  font-size:16.5px;line-height:1.7;color:var(--color-text-primary);
}
main.ar-wrap h1,main.sx-wrap h1,main.ca-wrap h1,main.sk-wrap h1,
html.rc-chrome-active main.ar-wrap h1,html.rc-chrome-active main.sx-wrap h1,
html.rc-chrome-active main.ca-wrap h1,html.rc-chrome-active main.sk-wrap h1{
  font-size:2.2rem;font-weight:800;letter-spacing:-.6px;line-height:1.15;
  margin:0 0 12px;color:var(--color-text-primary);
}
main.ar-wrap p,main.sx-wrap p,main.ca-wrap p,main.sk-wrap p{
  font-size:16px;line-height:1.7;margin:0 0 18px;color:var(--color-text-primary);
}
.ar-bottomline{border-left:3px solid var(--color-brand);padding:4px 0 4px 18px;margin:18px 0 24px}
.ar-bottomline-label{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-brand);margin:0 0 6px;
}
.ar-bottomline p{font-size:16px;line-height:1.5;margin:0;font-weight:500;color:var(--color-text-primary)}
@media(max-width:600px){
  .ar-bottomline p{font-size:15px}
}
html.rc-chrome-active .ar-meta,
html.rc-chrome-active .sx-meta,
html.rc-chrome-active .ca-meta,
html.rc-chrome-active .sk-meta,
html.rc-chrome-active .ca-kicker,
html.rc-chrome-active .sk-kicker,
html.rc-chrome-active .sx-kicker,
html.rc-chrome-active .ss-last-reviewed{display:none !important}
.rc-top{
  display:flex;justify-content:space-between;align-items:center;
  box-sizing:border-box;height:59px;overflow:hidden;
  padding:6px 0 4px;border-bottom:1px solid var(--color-border-tertiary);
  margin-bottom:20px;font-size:13px;
}
.rc-top-grp{display:inline-flex;align-items:center;gap:14px}
.rc-top-link{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  padding:4px 2px;color:var(--color-text-secondary);font:inherit;font-size:13px;
  font-weight:500;text-decoration:none;cursor:pointer;
}
.rc-top-link.rc-close{font-size:22px;line-height:1;width:24px;height:24px;justify-content:center;padding:0}
.rc-top-sep{display:inline-block;width:1px;height:14px;background:var(--color-border-tertiary)}
@media(min-width:641px){
  .rc-top{height:57px;padding:14px 0 12px}
}
@media(max-width:640px){
  .rc-top-grp{gap:4px}
  .rc-top-link{padding:13px 8px}
  .rc-top-link.rc-close{width:44px;height:44px;padding:0}
}
.rc-cat{
  display:flex;align-items:center;gap:8px;box-sizing:border-box;height:19px;overflow:hidden;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-brand);margin:0 0 8px;
}
.rc-cat:empty::before{display:none}
.rc-trust{
  display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:14px 18px;
  box-sizing:border-box;min-height:111px;
  margin:10px 0 28px;padding-bottom:18px;
  border-bottom:1px solid var(--color-border-tertiary);
  font-size:13px;color:var(--color-text-secondary);
}
@media(min-width:641px){
  .rc-trust{min-height:75px}
}
.rc-trust-item{display:inline-flex;align-items:center;gap:5px}
img{max-width:100%;height:auto}
/* Mobile styles.css pushes every page down 70px for a fixed beta-bar
   and site-nav. Article pages do not render that bar, so the offset is
   an empty band above Prev/Next. Collapse it here. The :has() selector
   outranks the later `body { padding-top: 70px }` rule, and it does not
   match the homepage. A few pixels plus the notch stay as padding. */
@media(max-width:768px){
  body:has(main.ar-wrap),
  body:has(main.sx-wrap),
  body:has(main.ca-wrap),
  body:has(main.sk-wrap){
    padding-top:calc(8px + env(safe-area-inset-top)) !important;
  }
}
/* The header replaces the byline and hides the injected breadcrumb.
   Keep both out of the flow from the first paint. */
html.rc-hold nav.ssux-bc,
html.rc-hold nav[aria-label="Breadcrumb"]{display:none !important}
/* The header script inserts the top bar, category, and trust line.
   Hold that space with fixed boxes so the article text paints immediately
   and does not move when the header arrives. The authored byline is hidden
   because the trust line replaces it. Pages that never load the header
   do not set rc-hold, so they keep their own byline. */
html.rc-hold .ar-meta,
html.rc-hold .sx-meta,
html.rc-hold .ca-meta,
html.rc-hold .sk-meta,
html.rc-hold .ca-kicker,
html.rc-hold .sk-kicker,
html.rc-hold .sx-kicker,
html.rc-hold .ss-last-reviewed{display:none !important}
html.rc-hold:not(.rc-chrome-active) main.ar-wrap::before,
html.rc-hold:not(.rc-chrome-active) main.sx-wrap::before,
html.rc-hold:not(.rc-chrome-active) main.ca-wrap::before,
html.rc-hold:not(.rc-chrome-active) main.sk-wrap::before{
  content:"";display:block;height:106px;
}
html.rc-hold:not(.rc-chrome-active) main.ar-wrap h1,
html.rc-hold:not(.rc-chrome-active) main.sx-wrap h1,
html.rc-hold:not(.rc-chrome-active) main.ca-wrap h1,
html.rc-hold:not(.rc-chrome-active) main.sk-wrap h1{margin-bottom:151px}
@media(min-width:641px){
  html.rc-hold:not(.rc-chrome-active) main.ar-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.sx-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.ca-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.sk-wrap::before{height:104px}
  html.rc-hold:not(.rc-chrome-active) main.ar-wrap h1,
  html.rc-hold:not(.rc-chrome-active) main.sx-wrap h1,
  html.rc-hold:not(.rc-chrome-active) main.ca-wrap h1,
  html.rc-hold:not(.rc-chrome-active) main.sk-wrap h1{margin-bottom:115px}
}
/* Common questions paints as a card before the deferred stylesheet arrives. */
.ar-faq{
  margin:28px 0 12px;
  padding:14px 16px 4px;
  border:1px solid var(--color-border-tertiary,#e5e7eb);
  border-radius:12px;
  background:rgba(31,122,107,.045);
}
main.ar-wrap .ar-faq > h2,
main.ca-wrap .ar-faq > h2,
main.sx-wrap .ar-faq > h2,
main.sk-wrap .ar-faq > h2{
  font-size:0.72rem !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--color-brand,#1F7A6B) !important;
  line-height:1.3 !important;
  margin:0 0 12px !important;
}
main.ar-wrap .ar-faq > h3,
main.ca-wrap .ar-faq > h3,
main.sx-wrap .ar-faq > h3,
main.sk-wrap .ar-faq > h3{
  font-size:1.02rem !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  color:var(--color-text-primary,#0c0a09) !important;
  line-height:1.35 !important;
  margin:16px 0 6px !important;
}
main.ar-wrap .ar-faq > p,
main.ca-wrap .ar-faq > p,
main.sx-wrap .ar-faq > p,
main.sk-wrap .ar-faq > p{
  font-size:15px !important;
  line-height:1.6 !important;
  margin:0 0 14px !important;
}
/* Phones and small tablets: a shorter title and a tighter stack from the
   Prev/Next row through the trust line. Selectors include .rc-hold so they
   beat the 2.2rem rule in styles.css, which loads later. Desktop is left
   alone. Scoped to the article mains so homepage .rc-top cards are untouched. */
@media(max-width:768px){
  main.ar-wrap h1,
  main.sx-wrap h1,
  main.ca-wrap h1,
  main.sk-wrap h1,
  html.rc-hold.rc-chrome-active main.ar-wrap h1,
  html.rc-hold.rc-chrome-active main.sx-wrap h1,
  html.rc-hold.rc-chrome-active main.ca-wrap h1,
  html.rc-hold.rc-chrome-active main.sk-wrap h1{
    font-size:30px !important;
    font-weight:800;
    letter-spacing:-.4px !important;
    line-height:1.15 !important;
    margin:0 0 6px !important;
  }
  main.ar-wrap > .rc-top,
  main.sx-wrap > .rc-top,
  main.ca-wrap > .rc-top,
  main.sk-wrap > .rc-top{margin-bottom:8px !important}
  main.ar-wrap > .rc-cat,
  main.sx-wrap > .rc-cat,
  main.ca-wrap > .rc-cat,
  main.sk-wrap > .rc-cat{margin-bottom:4px !important}
  main.ar-wrap > .rc-trust,
  main.sx-wrap > .rc-trust,
  main.ca-wrap > .rc-trust,
  main.sk-wrap > .rc-trust{margin-top:4px !important}
  html.rc-hold:not(.rc-chrome-active) main.ar-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.sx-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.ca-wrap::before,
  html.rc-hold:not(.rc-chrome-active) main.sk-wrap::before{height:90px}
}