/**
 * Onboarding landing page styles
 */

header.header,
section[role=main] ~ .zone-el {
  display: none;
}

section[role=main] {
  background-color: #f4f4f4;
  box-shadow: none;
  margin: 0 auto 30px;
}

.story-body .intro {
  align-items: center;
  margin: 30px auto;
}

.story-body .intro .h2 {
  font-weight: 600;
  font-family: "McClatchy Sans", sans-serif;
}

.story-body .expander {
  padding: 15px;
  justify-content: space-between;
  text-transform: none;
  margin: 0;
}

.story-body .expander:after {
  filter: invert(1);
}

.story-body .grid.panels {
  grid-template-columns: minmax(0px, 1fr);
}

.grid.panels > .paper {
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, .2), 
    0 1px 5px 0 rgba(0, 0, 0, .13); 
}

.story-body .expander.open .panel {
  display: flex;
  flex-direction: column;
}

.story-body .panel > * {
  margin: 15px 30px;
}

.story-body .panel > figure {
  margin: 0;
}

.story-body .panel .buttons {
  margin: 30px 0;
  display: grid;
  grid-gap: 10px;
  justify-content: center;
}

.welcome-video figcaption {
  padding: 10px 15px 0;
}

.grid > .package {
  padding: 0;
}

.newsletter-icon {
  width: 50px;
  fill: #31409F;
}

.story-body figure video {
  display: block;
  width: 100%;
  outline: none;
}

.miami-app .app-screen {
  max-width: 250px;
}

.miami-app .app-perks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.app-perks .package {
  padding: 15px 0;
}

.icon-header {
  text-transform: none;
  font-weight: 500;
  font-family: "McClatchy Sans", sans-serif;
}

.icon-header svg {
  position: relative;
  width: 20px;
  fill: #31409F;
  margin-right: 5px;
}

.buttons .badges img {
  height: 40px;
}

.buttons .badges a + a {
  margin-left: 15px;
}

.featured-story h1 {
  --lc: #222;
  --lhc: #222;
  --ld: none;
}

.featured-story .more-link {
  padding-left: 0;
}

@media(min-width: 600px) {
  .featured-story .header {
    text-align: left;
    padding: 0;
    align-items: flex-start;
  }
}

.social-account {
  display: grid;
  grid-template-columns: 75px 1fr;
  align-items: center;
}

.social-account .package > *:not(:first-child) {
  margin-top: 0px;
}

.grid.social {
  grid-template-columns: 1fr 1fr;
}

.social-account figure {
  border-radius: 50%;
  overflow: hidden;
}

.panel .button.ghost {
  --lhc: #222;
}