/**
 * Features landing page
 *
 * The shared site stylesheet supplies the global header, footer, controls,
 * buttons, and type system. This file contains the Features-specific portal.
 */
.features-hero {
  min-height:39rem;
  padding:clamp(4rem,7vw,7rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr .7fr;
  gap:7vw;
  align-items:end;
  background:var(--blue);
  color:#fff
}
.features-hero h1 {
  margin:1.35rem 0 0;
  font:500 clamp(4.5rem,9vw,8rem)/.82 var(--font-display);
  letter-spacing:-.04em;
  text-transform:uppercase
}
.features-hero h1 em {
  color:var(--gold);
  font-style:normal
}
.features-hero>p {
  max-width:39rem;
  color:#d2dbea;
  font-size:1.05rem;
  line-height:1.8
}
.feature-group {
  padding:clamp(4rem,7vw,7rem) max(4.5vw,calc((100vw - 81.875rem)/2))
}
.feature-group-alt {
  background:var(--cream)
}
.feature-group-heading {
  margin-bottom:clamp(3rem,5vw,4.5rem);
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:clamp(2rem,5vw,5rem)
}
.feature-group-heading h2 {
  margin:0;
  font:500 clamp(3rem,6vw,5rem)/.95 var(--font-display);
  text-transform:uppercase
}
.feature-card-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink)
}
.feature-group-alt .feature-card-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.feature-card {
  min-height:22rem;
  padding:clamp(1.5rem,3vw,2.4rem);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  transition:background .18s ease,color .18s ease
}
.feature-card:hover,.feature-card:focus-visible {
  background:var(--ink);
  color:#fff;
  outline:none
}
.feature-card small {
  color:var(--red);
  font:.65rem var(--font-display);
  letter-spacing:.14em
}
.feature-card strong {
  margin:clamp(3rem,6vw,5rem) 0 1rem;
  font:500 clamp(1.8rem,3vw,2.8rem)/1 var(--font-display);
  text-transform:uppercase
}
.feature-card p {
  margin:0;
  color:#69717d;
  font-size:.78rem;
  line-height:1.7
}
.feature-card:hover p,.feature-card:focus-visible p {
  color:#cbd3df
}
.feature-card>span {
  margin-top:auto;
  padding-top:2rem;
  font-size:.7rem;
  font-weight:800
}
.feature-help {
  padding:clamp(3rem,6vw,5rem) max(4.5vw,calc((100vw - 81.875rem)/2));
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:4vw;
  align-items:center;
  background:var(--ink);
  color:#fff
}
.feature-help h2 {
  margin:.7rem 0 0;
  font:500 clamp(2.5rem,4vw,4rem)/1 var(--font-display);
  text-transform:uppercase
}
.feature-help>p {
  color:#d4dae3;
  line-height:1.7
}
.feature-easter-egg {
  width:max-content;
  margin:-2.2rem 1.1rem 0 auto;
  display:block;
  padding:.4rem;
  opacity:.16;
  filter:grayscale(1);
  font-size:.85rem;
  transition:opacity .2s ease,filter .2s ease
}
.feature-easter-egg:hover,.feature-easter-egg:focus-visible {
  opacity:.9;
  filter:none;
  outline:2px solid var(--gold)
}
@media(max-width:1050px) {
  .feature-card-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .feature-group-alt .feature-card-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .feature-help {
    grid-template-columns:1fr 1fr
  }
  .feature-help .button {
    grid-column:2;
    justify-self:start
  }
}
@media(max-width:700px) {
  .features-hero,.feature-group-heading,.feature-help {
    grid-template-columns:1fr
  }
  .feature-card-grid,.feature-group-alt .feature-card-grid {
    grid-template-columns:1fr
  }
  .feature-card {
    min-height:17rem
  }
  .feature-help .button {
    grid-column:auto
  }
}
@media print {
  .features-hero {
    min-height:0;
    background:#fff;
    color:#000
  }
  .feature-card-grid,.feature-group-alt .feature-card-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .feature-card {
    min-height:0;
    break-inside:avoid
  }
  .feature-easter-egg {
    display:none
  }
}