/* fxa core (group B): site header on phone, eyebrow wrapping, lede measure, back-to-top */
.lede{text-wrap:pretty}
@media (max-width:640px){
  header.site .wrap{padding-top:10px;padding-bottom:10px;row-gap:8px}
  header.site .brand{gap:10px;min-width:0}
  header.site .brand img{height:30px;width:auto}
  header.site .brand span{font-size:11px;letter-spacing:.07em;padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  header.site nav{display:flex;flex-wrap:nowrap;column-gap:18px;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{flex:0 0 auto;white-space:nowrap;margin:0;font-size:14px;line-height:1.25;padding:6px 0}
  header.site nav a:last-child{margin-right:28px}
  header.site.fxa-more .wrap{position:relative}
  header.site.fxa-more .wrap::after{content:"\203A";position:absolute;right:0;bottom:10px;width:44px;height:29px;line-height:27px;
    text-align:right;padding-right:14px;box-sizing:border-box;background:#0A244B;color:#fff;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:24px;font-weight:600;pointer-events:none}
  .eyebrow{font-size:12px;letter-spacing:.06em;text-wrap:balance}
  main .hero{padding-top:0}
  main .hero h1{margin-top:0}
}
.fxa-top{position:fixed;right:16px;bottom:16px;z-index:40;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;font-weight:600;
  color:#fff;background:#0A244B;border:1px solid #0A244B;border-radius:2px;padding:10px 14px;text-decoration:none;min-height:44px;box-sizing:border-box;
  display:inline-flex;align-items:center}
.fxa-top:hover{text-decoration:underline;color:#fff}
.fxa-top:focus-visible{outline:3px solid #B13630;outline-offset:2px}
.fxa-top[hidden]{display:none}
@media print{.fxa-top{display:none!important}}
.fxa-nw{white-space:nowrap}
.fxa-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* site */
/* row 3: readable table type, bill numbers never wrap */
.bt{font-size:15px}
.bt tbody th[scope=row]{font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;white-space:nowrap}
.bt .chip{font-size:12px}
/* row 4: sticky column labels while reading the long list (wrapper must not be a scroll box) */
@media (min-width:901px){
  .table-wrap:has(> table.bt){overflow:visible}
  .bt thead th{position:sticky;top:0;z-index:2;background:#fff;box-shadow:inset 0 -1px 0 var(--rule)}
}
/* row 5: on wide screens Latest Actions sits beside the hero text (same order, nothing moved) */
@media (min-width:1100px){
  main > .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  main > .wrap > *{grid-column:1/-1;min-width:0}
  main > .wrap > .hero{grid-column:1;border-bottom:0;margin-bottom:0}
  main > .wrap > .latest{grid-column:2;margin-top:8px;align-self:start}
  main > .wrap > .latest h2{margin-top:0}
}
/* row 2: what the 0 under Introduced means */
.fxa-intro{margin:-8px 0 var(--s3)}
/* row 7: tablet stage cards 3 + 2, both rows full */
@media (min-width:561px) and (max-width:900px){
  .pipeline{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pipeline li{grid-column:span 2}
  .pipeline li:nth-child(4),.pipeline li:nth-child(5){grid-column:span 3}
}
/* row 6: phone hero reaches the stage cards sooner */
@media (max-width:640px){
  .hero .lede{font-size:18px;line-height:1.45;margin-bottom:12px}
  .hero .count{margin:0 0 6px}
  .hero{padding-bottom:16px;margin-bottom:16px}
  .latest{margin:12px 0 16px}
  .latest h2{margin-top:4px}
  .pipeline li:last-child:nth-child(odd){grid-column:1/-1}
}