/* Route-specific AVDS card and step composition for the workflow page. */
html[data-theme="dark"] body[data-avds-page="how-it-works"] {
  --avds-surface-tint: #23262b;
  --avds-rail: #d8ba70;
  --surface-canvas: #17191c;
  --surface-base: #202328;
  --surface-muted: #1c1f23;
  --surface-header: rgba(23, 25, 28, .94);
  --surface-header-scrolled: rgba(23, 25, 28, .98);
  --surface-hover: #2b3036;
  --color-text-primary: #f2f1ed;
  --color-text-secondary: #c5c7c6;
  --color-text-muted: #a5a8aa;
  --color-accent-primary: #d8ba70;
  --color-accent-primary-hover: #ead095;
  --color-accent-primary-subtle: #2d2922;
  --color-accent-primary-active: #f0d99e;
  --color-accent-secondary: #d4bc80;
  --color-border-default: #41464d;
  --color-border-subtle: #33383f;
  --color-text-on-accent: #1b1b1a;
}

body[data-avds-page="how-it-works"] .seo-main {
  background: var(--surface-canvas);
}

body[data-avds-page="how-it-works"] .product-layer {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: start;
  column-gap: 10px;
}

body[data-avds-page="how-it-works"] .product-layer-index {
  grid-column: 1;
  grid-row: 1;
  padding-top: .35em;
}

body[data-avds-page="how-it-works"] .product-layer h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 10px;
}

body[data-avds-page="how-it-works"] .product-layer p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

body[data-avds-page="how-it-works"] .product-layer > a {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
}

body[data-avds-page="how-it-works"] .product-map::before,
body[data-avds-page="how-it-works"] .product-layer::before,
body[data-avds-page="how-it-works"] .deployment-matrix article::before {
  display: none;
}

body[data-avds-page="how-it-works"] .footer-brand {
  grid-column: 1;
  grid-row: 1;
}

body[data-avds-page="how-it-works"] .footer-tagline {
  grid-column: 1;
  grid-row: 2;
  max-width: 34ch;
}

body[data-avds-page="how-it-works"] .footer-nav {
  grid-column: 2;
  grid-row: 1 / span 2;
}

body[data-avds-page="how-it-works"] .footer-bottom {
  grid-row: 3;
}

@media (min-width: 1100px) {
  body[data-avds-page="how-it-works"] .deployment-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-avds-page="how-it-works"] .deployment-matrix > article:last-child {
    grid-column: auto;
  }

  body[data-avds-page="how-it-works"] .product-layer-grid--balanced {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body[data-avds-page="how-it-works"] .product-layer-grid--balanced > .product-layer {
    grid-column: span 2;
  }

  body[data-avds-page="how-it-works"] .product-layer-grid--balanced > .product-layer:nth-last-child(-n+2) {
    grid-column: span 3;
  }
}

@media (min-width: 769px) and (max-width: 1399px) {
  body[data-avds-page="how-it-works"] .header .page-share {
    width: 40px;
    min-width: 40px;
    padding: 0;
  }

  body[data-avds-page="how-it-works"] .header .page-share-text {
    display: none;
  }
}

@media (max-width: 768px) {
  body[data-avds-page="how-it-works"] .footer-brand,
  body[data-avds-page="how-it-works"] .footer-tagline,
  body[data-avds-page="how-it-works"] .footer-nav,
  body[data-avds-page="how-it-works"] .footer-bottom {
    grid-column: 1;
    grid-row: auto;
  }
}