/* Mobile body and lede share one size. Section intros, ledes and paragraphs
   use these tokens. Display headings stay on the existing scale and step up
   to Fraunces 400, the heaviest weight this site loads. */
:root{
  --hg-text:clamp(15px,calc(14.63px + .095vw),16px);
  --hg-lh:1.6;
  --hg-lede:clamp(16px,calc(15.63px + .095vw),17px);
  --hg-lede-lh:1.55;
  /* Last section to the footer. Mid-page rhythm stays on its own padding. */
  --hg-foot-gap:56px;
}

@media (max-width:1023px){
  :root{
    --hg-text:15px;
    --hg-lh:1.55;
    --hg-lede:var(--hg-text);
    --hg-lede-lh:var(--hg-lh);
  }

  /* Tailwind's preflight sets body line-height to inherit after the critical CSS. */
  body{
    font-size:var(--hg-text);
    line-height:var(--hg-lh);
  }

  .lead,
  .body-s,
  .hero .sub,
  .prose,
  .decade-sub,
  .decade-label,
  .pass-band-copy p,
  .partner-band p,
  .globe-cta p,
  .ins-note-dek,
  .ins-guide-dek,
  .ins-feature-dek,
  .cmp-lead,
  .ins-lead,
  .itb-s,
  .hg-dl-thanks p,
  .sline-a,
  .sblock .sline,
  .sband,
  .canswer,
  .credits .intro,
  main .pcar .pcar-head p,
  main .scard-body p,
  main .tperson .tr,
  main .prose .gate .gt-okline,
  main p.text-\[1\.15rem\]{
    font-size:var(--hg-text);
    line-height:var(--hg-lh);
  }

  /* Important utilities that pin a lede or answer above the body token. */
  main :is(p,li,div,span):is(.\!text-\[21px\],.\!text-\[20px\],.\!text-\[1rem\],.\!text-\[\.98rem\]){
    font-size:var(--hg-text) !important;
    line-height:var(--hg-lh) !important;
  }

  main :is(h1,h2,h3,h4,.d-xxl,.d-hero,.d-slide,.d-l,.d-m,.d-s),
  details.q summary{
    font-weight:400;
  }

  /* Smallest display step. 16px sat on the 15px body; 18px is already its desktop cap. */
  main .d-s,
  .band .row > h3.d-m,
  main .scard-body h3,
  main .tregion h3{
    font-size:18px;
  }

  main .prose .gate .gt-qh{
    font-size:17px;
    line-height:1.35;
  }
}

/* Footer groups are native disclosures on phones. From 768px they stay the open columns. */
footer.band details.facc > summary{
  display:block;
  list-style:none;
}
footer.band details.facc > summary::-webkit-details-marker{display:none}
footer.band details.facc > summary::marker{content:""}
@media (min-width:768px){
  footer.band details.facc > ul{display:block}
  footer.band details.facc > summary{pointer-events:none}
}

/* Phone footer. Lists stay closed so the band is about half its open height. Desktop is unchanged. */
@media (max-width:767px){
  footer.band > .wrap{
    padding-top:12px;
    padding-bottom:10px;
  }
  footer.band .grid12{
    row-gap:20px;
  }
  footer.band img.h-14{
    width:66px;
    height:32px;
  }
  footer.band .col-span-12 > p{
    margin-top:6px;
    font-size:12px;
    line-height:1.25;
  }
  footer.band .grid.grid-cols-2{
    align-items:start;
    column-gap:16px;
    row-gap:20px;
  }
  footer.band details.facc > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:32px;
    margin:0;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.12em;
    cursor:pointer;
  }
  footer.band details.facc > summary:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
  }
  footer.band details.facc > summary::after{
    content:"";
    flex:none;
    width:6px;
    height:6px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
  }
  footer.band details.facc[open] > summary::after{
    transform:translateY(1px) rotate(-135deg);
  }
  footer.band details.facc > ul{
    margin:2px 0 0;
    font-size:12.5px;
    line-height:1.25;
  }
  footer.band .grid.grid-cols-2 > details.facc:nth-child(3){
    grid-column:1 / -1;
  }
  footer.band details.facc[open]:nth-child(3) > ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:16px;
  }
  footer.band a.inline-block{
    min-height:0;
    padding-top:1px;
    padding-bottom:1px;
    line-height:1.25;
  }
  footer.band .mt-20.pt-8{
    margin-top:16px;
    padding-top:8px;
    row-gap:4px;
    font-size:11px;
    line-height:1.35;
  }
}

/* Phone and tablet program directories. A short underline field above the
   compare link. 16px type avoids iOS zoom; the row itself stays short. */
@media (max-width:1023px){
  .hg-find{
    display:flex;
    align-items:center;
    position:relative;
    margin-top:14px;
    max-width:100%;
  }
  .hg-find-q{
    width:100%;
    height:40px;
    margin:0;
    padding:0 4px 0 0;
    border:0;
    border-bottom:1px solid #858b81;
    border-radius:0;
    background:transparent;
    color:var(--ink);
    font-family:"DM Sans",system-ui,sans-serif;
    font-size:16px;
    line-height:1.2;
    -webkit-appearance:none;
    appearance:none;
  }
  .hg-find.has-q .hg-find-q{padding-right:36px}
  .hg-find-q::placeholder{color:var(--ink-3);opacity:1}
  .hg-find-q::-webkit-search-decoration,
  .hg-find-q::-webkit-search-cancel-button{display:none}
  .hg-find-q:focus{
    outline:none;
    border-bottom-color:var(--meadow);
  }
  .hg-find-x{
    position:absolute;
    right:0;
    top:50%;
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:var(--ink-3);
    font-size:18px;
    line-height:1;
    transform:translateY(-50%);
    cursor:pointer;
  }
  .hg-find-none{
    margin:8px 0 0;
    font-size:13px;
    line-height:1.4;
    color:var(--ink-3);
  }
  #mnav .hg-find{margin-top:2px}
  #mnav .hg-find-compare{margin-top:10px;margin-bottom:6px}
}
@media (min-width:1024px){
  .hg-find,
  .hg-find-none{display:none !important}
}

/* .bj pins the block above the footer at 24px / 36px. One token restores
   that meeting: 56px, and 84px from 1024px (the same 1.5× step). */
@media (min-width:1024px){
  :root{--hg-foot-gap:84px}
}
main > section:last-of-type.bj,
main > section:last-of-type > div.bj:last-of-type,
main > article:last-of-type:not(:has(~ section)) .bj{
  padding-bottom:var(--hg-foot-gap);
}
/* A trailing paragraph margin would stack on the token. */
main > section:last-of-type > div.bj:last-of-type .prose > section:last-child > p:last-child{
  margin-bottom:0;
}