/* Open section treatments for the workspace and billing page.
   My reports establishes the precedent: hierarchy through typography, spacing
   and a light divider, not a filled outer card. */

#app .overview-page .overview-start.card {
  box-sizing:border-box;
  margin:26px 0 32px;
  padding:10px 0 30px;
  max-width:none;
  border:0;
  border-bottom:1px solid #3F474A;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#app .overview-page .overview-start > .pill {
  display:inline-block;
  margin:0 0 16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#ADB6B7;
  -webkit-text-fill-color:#ADB6B7;
  font-size:10px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.105em;
  text-transform:uppercase;
}
#app .overview-page .overview-start h2 {
  margin:0 0 10px;
  font-size:clamp(23px,2.3vw,28px);
  line-height:1.25;
}
#app .overview-page .overview-start > p {
  max-width:67ch;
  line-height:1.6;
  margin:0 0 18px;
}
#app .overview-page .overview-start > a {
  margin:0;
}

/* The Free review summary is an open section above the plan cards,
   with a meaningful divider rather than a competing bordered panel. */
#app .billing-redesign .billing-access-summary.card {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  margin:0 0 26px;
  padding:9px 0 28px;
  border:0;
  border-bottom:1px solid #3F474A;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#app .billing-redesign .billing-access-symbol {
  width:36px;
  height:36px;
  background:transparent;
  border:0;
  border-radius:0;
  color:#D7E45B;
}
#app .billing-redesign .billing-access-top {
  grid-template-columns:36px minmax(0,1fr) auto;
  column-gap:14px;
}
#app .billing-redesign .billing-access-actions {
  margin-top:20px;
}
#app .billing-redesign .billing-access-footnote {
  max-width:85ch;
}
#app .billing-redesign .packaging-options {
  margin-top:30px;
}
@media(max-width:850px) {
  #app .billing-redesign .billing-access-top {
    grid-template-columns:36px minmax(0,1fr);
  }
}
@media(max-width:600px) {
  #app .overview-page .overview-start.card {
    margin:22px 0 28px;
    padding:8px 0 25px;
  }
  #app .billing-redesign .billing-access-summary.card {
    padding:6px 0 24px;
  }
  #app .billing-redesign .billing-access-top {
    column-gap:12px;
  }
}