/* Homepage guide cards: the internal guide links as a row of cards in the landing's button style (heading font, uppercase,
   thin border, arrow on hover). Positioned and solid so the legacy fixed hero never shows through. Design review 28 Sep:
   top-aligned content, a keyboard focus ring, motion only when the visitor allows it. */
.component__guide-cards { position: relative; background: #0b2034; padding: 0 20px 60px; }
.component__guide-cards-heading { max-width: 1100px; margin: 0 auto 16px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #fff; }
.component__guide-cards-row { display: flex; gap: 16px; max-width: 1100px; margin: 0 auto; }
.component__guide-cards-card { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  min-height: 76px; padding: 14px 40px 14px 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 3px;
  background: rgba(8, 21, 36, .6); color: #fff; text-decoration: none !important; }
.component__guide-cards-card:after { content: ''; position: absolute; top: calc(50% - 4px); right: 20px; width: 8px; height: 8px;
  border-right: 2px solid #9dfd9a; border-bottom: 2px solid #9dfd9a; transform: rotate(-45deg); }
.component__guide-cards-card:hover, .component__guide-cards-card:focus-visible { border-color: #9dfd9a; background: rgba(157, 253, 154, .06); }
.component__guide-cards-card:hover:after, .component__guide-cards-card:focus-visible:after { right: 14px; }
.component__guide-cards-card:focus-visible { outline: 2px solid #9dfd9a; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .component__guide-cards-card { transition: border-color .2s, background-color .2s; }
  .component__guide-cards-card:after { transition: right .2s; }
}
.component__guide-cards-title { font-family: 'Blender', serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.component__guide-cards-blurb { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .7); }
@media (max-width: 959px) { .component__guide-cards-row { flex-wrap: wrap; } .component__guide-cards-card { flex: 1 1 calc(50% - 8px); } }
@media (max-width: 599px) { .component__guide-cards-card { flex-basis: 100%; } }