/*
 * Copyright 2026 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* --- Fonts --- */

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-bold-italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-extrabold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean;
  src: url("fonts/adobe-clean-extrabold-italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: adobe-clean-display;
  src: url("fonts/adobe-clean-display-black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
}

@font-face {
  font-family: "Trebuchet MS";
  src: local("Trebuchet MS");
  font-weight: 400;
  size-adjust: 88%;
  ascent-override: 92%;
  descent-override: 18%;
}

@font-face {
  font-family: "Trebuchet MS";
  src: local("Trebuchet MS Bold"), local("Trebuchet MS");
  font-weight: 700;
  size-adjust: 90%;
  ascent-override: 92%;
  descent-override: 18%;
}

/* --- Variables --- */

/* Prefix Legend
 *
 * --s2:  Spectrum 2 - Tokens pulled from spectrum-design-data
 * --se:  Spectrum Edge - Tokens specific to Spectrum on Edge Delivery
 * --sh:  Spectrum Hub - Tokens unique to this project
 * --swc: Spectrum Web Components - Compatibility tokens to make SWC happy
 */

:root {
  /* --- Generated by nx/deps/spectrum/build.js — do not edit --- */

  /* color */
  --s2-gray-25: light-dark(rgb(255 255 255), rgb(17 17 17));
  --s2-gray-50: light-dark(rgb(248 248 248), rgb(27 27 27));
  --s2-gray-75: light-dark(rgb(243 243 243), rgb(34 34 34));
  --s2-gray-100: light-dark(rgb(233 233 233), rgb(44 44 44));
  --s2-gray-200: light-dark(rgb(225 225 225), rgb(50 50 50));
  --s2-gray-300: light-dark(rgb(218 218 218), rgb(57 57 57));
  --s2-gray-400: light-dark(rgb(198 198 198), rgb(68 68 68));
  --s2-gray-500: light-dark(rgb(143 143 143), rgb(109 109 109));
  --s2-gray-600: light-dark(rgb(113 113 113), rgb(138 138 138));
  --s2-gray-700: light-dark(rgb(80 80 80), rgb(175 175 175));
  --s2-gray-800: light-dark(rgb(41 41 41), rgb(219 219 219));
  --s2-gray-900: light-dark(rgb(19 19 19), rgb(242 242 242));
  --s2-gray-1000: light-dark(rgb(0 0 0), rgb(255 255 255));
  --s2-blue-100: light-dark(rgb(245 249 255), rgb(14 23 63));
  --s2-blue-200: light-dark(rgb(229 240 254), rgb(15 28 82));
  --s2-blue-300: light-dark(rgb(203 226 254), rgb(12 33 117));
  --s2-blue-400: light-dark(rgb(172 207 253), rgb(18 45 154));
  --s2-blue-500: light-dark(rgb(142 185 252), rgb(26 58 195));
  --s2-blue-600: light-dark(rgb(114 158 253), rgb(37 73 229));
  --s2-blue-700: light-dark(rgb(93 137 255), rgb(52 91 248));
  --s2-blue-800: light-dark(rgb(75 117 255), rgb(64 105 253));
  --s2-blue-900: light-dark(rgb(59 99 251), rgb(86 129 255));
  --s2-blue-1000: light-dark(rgb(39 77 234), rgb(105 149 254));
  --s2-blue-1100: light-dark(rgb(29 62 207), rgb(124 169 252));
  --s2-blue-1200: light-dark(rgb(21 50 173), rgb(152 192 252));
  --s2-red-100: light-dark(rgb(255 246 245), rgb(54 10 3));
  --s2-red-200: light-dark(rgb(255 235 232), rgb(68 13 5));
  --s2-red-300: light-dark(rgb(255 214 209), rgb(87 17 7));
  --s2-red-400: light-dark(rgb(255 188 180), rgb(115 24 11));
  --s2-red-500: light-dark(rgb(255 157 145), rgb(147 31 17));
  --s2-red-600: light-dark(rgb(255 118 101), rgb(177 38 23));
  --s2-red-700: light-dark(rgb(255 81 61), rgb(205 46 29));
  --s2-red-800: light-dark(rgb(240 56 35), rgb(223 52 34));
  --s2-red-900: light-dark(rgb(215 50 32), rgb(252 67 46));
  --s2-red-1000: light-dark(rgb(183 40 24), rgb(255 103 86));
  --s2-red-1100: light-dark(rgb(156 33 19), rgb(255 134 120));
  --s2-red-1200: light-dark(rgb(129 27 14), rgb(255 167 157));
  --s2-orange-100: light-dark(rgb(255 246 231), rgb(49 16 0));
  --s2-orange-200: light-dark(rgb(255 236 207), rgb(61 21 0));
  --s2-orange-300: light-dark(rgb(255 218 158), rgb(80 27 0));
  --s2-orange-400: light-dark(rgb(255 193 94), rgb(106 36 0));
  --s2-orange-500: light-dark(rgb(255 162 19), rgb(135 47 0));
  --s2-orange-600: light-dark(rgb(252 125 0), rgb(162 59 0));
  --s2-orange-700: light-dark(rgb(232 106 0), rgb(185 73 0));
  --s2-orange-800: light-dark(rgb(212 91 0), rgb(199 82 0));
  --s2-orange-900: light-dark(rgb(194 78 0), rgb(224 100 0));
  --s2-orange-1000: light-dark(rgb(167 62 0), rgb(243 117 0));
  --s2-orange-1100: light-dark(rgb(144 51 0), rgb(255 137 0));
  --s2-orange-1200: light-dark(rgb(118 41 0), rgb(255 173 45));
  --s2-yellow-100: light-dark(rgb(255 248 204), rgb(37 23 0));
  --s2-yellow-200: light-dark(rgb(255 241 151), rgb(47 29 0));
  --s2-yellow-300: light-dark(rgb(255 222 44), rgb(61 39 0));
  --s2-yellow-400: light-dark(rgb(245 199 0), rgb(83 52 0));
  --s2-yellow-500: light-dark(rgb(230 175 0), rgb(107 67 0));
  --s2-yellow-600: light-dark(rgb(210 149 0), rgb(130 82 0));
  --s2-yellow-700: light-dark(rgb(193 131 0), rgb(151 97 0));
  --s2-yellow-800: light-dark(rgb(175 116 0), rgb(164 106 0));
  --s2-yellow-900: light-dark(rgb(158 102 0), rgb(186 124 0));
  --s2-yellow-1000: light-dark(rgb(134 85 0), rgb(203 141 0));
  --s2-yellow-1100: light-dark(rgb(114 72 0), rgb(218 159 0));
  --s2-yellow-1200: light-dark(rgb(93 59 0), rgb(235 183 0));
  --s2-green-100: light-dark(rgb(237 252 241), rgb(0 30 23));
  --s2-green-200: light-dark(rgb(215 247 225), rgb(0 38 29));
  --s2-green-300: light-dark(rgb(173 238 197), rgb(0 51 38));
  --s2-green-400: light-dark(rgb(107 227 162), rgb(0 68 48));
  --s2-green-500: light-dark(rgb(43 209 125), rgb(2 87 58));
  --s2-green-600: light-dark(rgb(18 184 103), rgb(3 106 67));
  --s2-green-700: light-dark(rgb(11 164 93), rgb(4 124 75));
  --s2-green-800: light-dark(rgb(7 147 85), rgb(6 136 80));
  --s2-green-900: light-dark(rgb(5 131 78), rgb(9 157 89));
  --s2-green-1000: light-dark(rgb(3 110 69), rgb(14 175 98));
  --s2-green-1100: light-dark(rgb(2 93 60), rgb(24 193 110));
  --s2-green-1200: light-dark(rgb(1 76 52), rgb(57 215 134));
  --s2-seafoam-100: light-dark(rgb(235 251 246), rgb(0 30 27));
  --s2-seafoam-200: light-dark(rgb(211 246 234), rgb(0 39 35));
  --s2-seafoam-300: light-dark(rgb(169 237 216), rgb(0 50 44));
  --s2-seafoam-400: light-dark(rgb(92 225 194), rgb(0 67 59));
  --s2-seafoam-500: light-dark(rgb(16 207 169), rgb(2 86 75));
  --s2-seafoam-600: light-dark(rgb(13 181 149), rgb(4 105 89));
  --s2-seafoam-700: light-dark(rgb(11 162 134), rgb(6 122 103));
  --s2-seafoam-800: light-dark(rgb(9 144 120), rgb(8 134 112));
  --s2-seafoam-900: light-dark(rgb(7 129 109), rgb(10 154 128));
  --s2-seafoam-1000: light-dark(rgb(5 108 92), rgb(12 173 142));
  --s2-seafoam-1100: light-dark(rgb(3 92 80), rgb(14 190 156));
  --s2-seafoam-1200: light-dark(rgb(1 75 67), rgb(29 214 176));
  --s2-cyan-100: light-dark(rgb(238 250 254), rgb(0 29 39));
  --s2-cyan-200: light-dark(rgb(217 244 253), rgb(0 36 49));
  --s2-cyan-300: light-dark(rgb(183 231 252), rgb(0 48 65));
  --s2-cyan-400: light-dark(rgb(138 213 255), rgb(0 64 88));
  --s2-cyan-500: light-dark(rgb(92 192 255), rgb(0 82 113));
  --s2-cyan-600: light-dark(rgb(48 167 254), rgb(3 99 140));
  --s2-cyan-700: light-dark(rgb(29 149 231), rgb(8 115 168));
  --s2-cyan-800: light-dark(rgb(18 134 205), rgb(13 125 186));
  --s2-cyan-900: light-dark(rgb(11 120 179), rgb(24 142 220));
  --s2-cyan-1000: light-dark(rgb(4 102 145), rgb(38 159 244));
  --s2-cyan-1100: light-dark(rgb(0 87 121), rgb(63 177 255));
  --s2-cyan-1200: light-dark(rgb(0 71 98), rgb(107 199 255));
  --s2-pink-100: light-dark(rgb(255 246 252), rgb(58 0 37));
  --s2-pink-200: light-dark(rgb(255 232 247), rgb(71 0 44));
  --s2-pink-300: light-dark(rgb(255 211 240), rgb(90 0 57));
  --s2-pink-400: light-dark(rgb(255 181 230), rgb(115 7 75));
  --s2-pink-500: light-dark(rgb(255 148 219), rgb(143 18 97));
  --s2-pink-600: light-dark(rgb(255 103 204), rgb(171 29 119));
  --s2-pink-700: light-dark(rgb(242 76 184), rgb(196 39 138));
  --s2-pink-800: light-dark(rgb(228 52 163), rgb(213 45 151));
  --s2-pink-900: light-dark(rgb(206 42 146), rgb(236 67 175));
  --s2-pink-1000: light-dark(rgb(176 31 123), rgb(251 90 196));
  --s2-pink-1100: light-dark(rgb(152 22 104), rgb(255 122 210));
  --s2-pink-1200: light-dark(rgb(128 12 85), rgb(255 159 223));

  /* spacing */
  --s2-spacing-50: 2px;
  --s2-spacing-75: 4px;
  --s2-spacing-100: 8px;
  --s2-spacing-200: 12px;
  --s2-spacing-300: 16px;
  --s2-spacing-400: 24px;
  --s2-spacing-500: 32px;
  --s2-spacing-600: 40px;
  --s2-spacing-700: 48px;
  --s2-spacing-800: 64px;
  --s2-spacing-900: 80px;
  --s2-spacing-1000: 96px;

  /* corner radius */
  --s2-corner-radius-0: 0px;
  --s2-corner-radius-75: 3px;
  --s2-corner-radius-100: 4px;
  --s2-corner-radius-200: 5px;
  --s2-corner-radius-300: 6px;
  --s2-corner-radius-400: 7px;
  --s2-corner-radius-500: 8px;
  --s2-corner-radius-600: 9px;
  --s2-corner-radius-700: 10px;
  --s2-corner-radius-800: 16px;

  /* heading */
  --s2-heading-size-xs: 16px;
  --s2-heading-size-s: 18px;
  --s2-heading-size-m: 22px;
  --s2-heading-size-l: 28px;
  --s2-heading-size-xl: 36px;
  --s2-heading-size-xxl: 40px;
  --s2-heading-size-xxxl: 58px;
  --s2-heading-size-xxxxl: 73px;
  --s2-heading-font-weight: 500;
  --s2-heading-line-height: 1.2;
  --s2-heading-margin-top-multiplier: 0.8889;
  --s2-heading-margin-bottom-multiplier: 0.25;

  /* body */
  --s2-body-size-xxs: 11px;
  --s2-body-size-xs: 12px;
  --s2-body-size-s: 14px;
  --s2-body-size-m: 16px;
  --s2-body-size-l: 18px;
  --s2-body-size-xl: 20px;
  --s2-body-size-xxl: 22px;
  --s2-body-size-xxxl: 25px;
  --s2-body-font-weight: 400;
  --s2-body-line-height: 1.5;
  --s2-body-margin-multiplier: 0.75;

  /* component */
  --s2-component-xs-regular-font-size: 11px;
  --s2-component-xs-regular-font-weight: 400;
  --s2-component-xs-regular-line-height: 14px;
  --s2-component-xs-medium-font-size: 11px;
  --s2-component-xs-medium-font-weight: 500;
  --s2-component-xs-medium-line-height: 14px;
  --s2-component-xs-bold-font-size: 11px;
  --s2-component-xs-bold-font-weight: 700;
  --s2-component-xs-bold-line-height: 14px;
  --s2-component-s-regular-font-size: 12px;
  --s2-component-s-regular-font-weight: 400;
  --s2-component-s-regular-line-height: 16px;
  --s2-component-s-medium-font-size: 12px;
  --s2-component-s-medium-font-weight: 500;
  --s2-component-s-medium-line-height: 16px;
  --s2-component-s-bold-font-size: 12px;
  --s2-component-s-bold-font-weight: 700;
  --s2-component-s-bold-line-height: 16px;
  --s2-component-m-regular-font-size: 14px;
  --s2-component-m-regular-font-weight: 400;
  --s2-component-m-regular-line-height: 18px;
  --s2-component-m-medium-font-size: 14px;
  --s2-component-m-medium-font-weight: 500;
  --s2-component-m-medium-line-height: 18px;
  --s2-component-m-bold-font-size: 14px;
  --s2-component-m-bold-font-weight: 700;
  --s2-component-m-bold-line-height: 18px;
  --s2-component-l-regular-font-size: 16px;
  --s2-component-l-regular-font-weight: 400;
  --s2-component-l-regular-line-height: 20px;
  --s2-component-l-medium-font-size: 16px;
  --s2-component-l-medium-font-weight: 500;
  --s2-component-l-medium-line-height: 20px;
  --s2-component-l-bold-font-size: 16px;
  --s2-component-l-bold-font-weight: 700;
  --s2-component-l-bold-line-height: 20px;
  --s2-component-xl-regular-font-size: 18px;
  --s2-component-xl-regular-font-weight: 400;
  --s2-component-xl-regular-line-height: 22px;
  --s2-component-xl-medium-font-size: 18px;
  --s2-component-xl-medium-font-weight: 500;
  --s2-component-xl-medium-line-height: 22px;
  --s2-component-xl-bold-font-size: 18px;
  --s2-component-xl-bold-font-weight: 700;
  --s2-component-xl-bold-line-height: 22px;
  --s2-component-s-height: 24px;
  --s2-component-m-height: 32px;
  --s2-component-l-height: 40px;
  --s2-component-xl-height: 48px;


  /* --- End generated --- */

  /* Future S2 generation candidates */
  --s2-elevated-shadow:
      0 0 2px rgb(0 0 0 / 12%),
      0 2px 6px rgb(0 0 0 / 4%),
      0 4px 12px rgb(0 0 0 / 8%);
  --s2-corner-radius-850: 20px;
  --s2-corner-radius-950: 32px;
  --s2-corner-radius-1050: 40px;
  --s2-spacing-85: 6px;

  /* fonts */
  --s2-font-family: adobe-clean, 'Adobe Clean', 'Trebuchet MS', sans-serif;
  --s2-font-display-family: 'Adobe Clean Display', adobe-clean-display, sans-serif;

  /* se etc conveniences */
  --se-adobe-corporate-color: rgb(235 16 0);
  --se-corner-radius-50: 1px;
  --se-body-background-color: light-dark(#fff, #000);
  --se-border-width-200: 2px;
  --se-focus-indicator-width: 2px;
  --se-component-m-height: 32px;

  /* grid */
  --se-grid-container-width: 83.4%;
  --se-grid-column-width: calc(var(--se-grid-container-width) / 12);
  --se-grid-gutter-width: 8.3%;

  /* header */
  --sh-header-height: 104px;

  /* options table buttons */
  --sh-content-color-white: rgb(255 255 255);
  --sh-decode-transition: opacity 0.2s ease-in-out;

  /* color schemes */
  color-scheme: light dark;

  /*
   * @adobe/spectrum-wc tokens for general SWC compatibility.
   */
  --swc-gray-25: var(--s2-gray-25);
  --swc-gray-800: var(--s2-gray-800);
  --swc-tooltip-tip-height: 5px;
  --swc-component-height-75: 24px;
  --swc-component-padding-vertical-75: var(--s2-spacing-75);
  --swc-component-edge-to-text-75: 9px;
  --swc-font-size-75: var(--s2-component-s-regular-font-size);
  --swc-line-height-font-size-75: var(--s2-component-s-regular-line-height);
}

@media (width >= 1800px) {
  :root {
    --se-grid-container-width: 1500px;
  }
}

/* --- Spectrum Edge specific decoration hiding --- */
main > div,
div[data-status],
.template-loading {
  display: none;
}

.section {
  --section-justify-align: start;

  display: block;

  > .default-content {
    max-width: var(--se-grid-container-width);
    margin: 0 auto;

    > .btn-group {
      display: flex;
      justify-content: var(--section-justify-align);
      gap: var(--s2-spacing-200);
    }
  }

  &.center {
    --section-justify-align: center;
  }
}

/* --- Spectrum Edge default styles --- */
@layer spectrum-edge {
  @property --sitenav-nav-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 56px;
  }

  @property --sitenav-level-2-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 0;
  }

  html.spectrum-edge {
    --se-body-color: var(--s2-gray-700);
    --se-smaller-heading-color: var(--s2-gray-800);
    --se-larger-heading-color: var(--s2-gray-1000);

    /* sitenav */
    --sitenav-inline-start-margin: 24px;
    --sitenav-inline-end-margin: 56px;
    --sitenav-nav-width: 56px;
    --sitenav-nav-expanded-width: 180px;
    --sitenav-gap: 6px;
    --sitenav-level-2-width: 0;
    --sitenav-level-2-expanded-width: 264px;
    --sitenav-layout-transition-duration: 300ms;
    --sitenav-layout-transition-ease: cubic-bezier(0.8, 0, 0.2, 1);

    /* pagenav */
    --pagenav-inline-start-margin: 56px;
    --pagenav-inline-end-margin: 24px;
    --pagenav-min-inline-size: 216px;

    /* deep link scrollling */
    scroll-behavior: smooth;

    /* Set the sitenav track to prevent CLS */
    --sitenav-track-width:
      calc(
        var(--sitenav-inline-start-margin) +
        var(--sitenav-nav-width) +
        var(--sitenav-gap) +
        var(--sitenav-level-2-width) +
        var(--sitenav-inline-end-margin));

    /* Set the pagenav track to prevent CLS too */
    --pagenav-track-width: calc(
        var(--pagenav-min-inline-size) +
        var(--pagenav-inline-start-margin) +
        var(--pagenav-inline-end-margin));

    /* Below 900px the sitenav becomes a fixed overlay (see sitenav.css) rather
    than a rail that pushes main content over, so its track shouldn't grow
    when it opens or drills into a level-2 list. Page nav does not display at all. */
    @media (width < 900px) {
      --sitenav-track-width: 0;
      --pagenav-track-width: 0;
    }

    /* Only allow transition once sitenav is in the DOM */
    &:has(#sitenav) {
      transition:
        --sitenav-nav-width var(--sitenav-layout-transition-duration) var(--sitenav-layout-transition-ease),
        --sitenav-level-2-width var(--sitenav-layout-transition-duration) var(--sitenav-layout-transition-ease);
    }

    /* marketing page/homepage */
    &:has(meta[name="template"][content="marketing"]) {
      --sitenav-track-width: auto;
      --pagenav-track-width: auto;
      --se-heading-color: var(--s2-gray-1000);

      .section h1 {
        font-size: 64px;
        font-weight: 500;
        line-height: 1;
        margin-block-end: var(--s2-spacing-400);

        em {
          font-style: normal;
          opacity: 0.5;
        }
      }

      p {
        margin-block: var(--s2-spacing-400);
        max-inline-size: 80ch;
        margin-inline: auto;
      }

      main > .section,
      main > .section:first-of-type,
      main > .section:last-of-type {
        padding-inline: unset;
        padding-block: unset;
        border-block-end: none;
      }
    }

    /* all other pages */
    scrollbar-gutter: stable;

    main > .section {
      &:not(:has(.page-hero)) {
        padding-block: 120px;
        border-block-end: 1px solid rgb(from var(--s2-gray-1000) r g b / 8%);
      }
    }

    @media (width > 900px) {
      main > .section {
        padding-inline: 64px;
      }
    }

    main > .section:first-of-type,
    main > .section:has(.playground) {
      padding-block-start: 0;
      padding-inline: 0;
    }

    main > .section:last-of-type {
      border-block-end: none;
    }

    /* keeps the space between sections but hides the divider line */
    main > .section.no-divider {
      border-block-end: none;
    }

    &[expand-sitenav],
    &:has(#sitenav .level-1-button[aria-expanded="true"]) {
      --sitenav-level-2-width: var(--sitenav-level-2-expanded-width);

      &:has(#sitenav):not(:has(#sitenav .level-1-button[aria-expanded="true"])) {
        --sitenav-level-2-width: 0;
      }
    }

    &:has(#sitenav[is-expanded]) {
      --sitenav-nav-width: var(--sitenav-nav-expanded-width);
    }

    body {
      display: grid;
      place-content: center;
      grid-template:
        'header header header' var(--sh-header-height)
        'sitenav main pagenav' 1fr
        'sitenav footer pagenav' auto / var(--sitenav-track-width) minmax(auto, var(--se-grid-container-width)) minmax(var(--pagenav-track-width), auto);
      min-height: 100svh;
      margin: 0;
      color: var(--se-body-color);
      font-family: 'Adobe Clean', 'Trebuchet MS', sans-serif;
      font-size: var(--s2-body-size-m);
      line-height: var(--s2-body-line-height);

      @media (width > 900px) {
        place-content: unset;
      }

      header {
        visibility: hidden;
        position: fixed;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        block-size: var(--sh-header-height);
        padding-inline: var(--s2-spacing-400);
      }

      #sitenav {
        display: none;
      }

      main {
        grid-area: main;
      }

      .page-nav {
        display: none;

        @media (width >= 900px) {
          display: block;
          grid-area: pagenav;
        }
      }

      footer {
        display: none;
        grid-area: footer;
      }

      .bg-img {
        display: none;
        position: fixed;
        inset: 0;
        z-index: -1;

        img {
          opacity: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
          transition: --sh-decode-transition;

          &.decoded {
            opacity: 1;
          }
        }
      }

      /* Don't let fonts load unless there's a session */
      &.session {
        font-family: var(--s2-font-family);
      }

      &.no-header {
        --sh-header-height: 0;
      }

      &.is-returning {
        --sh-decode-transition: none;
      }
    }

    .scheme-aware-pic {
      display: none;
    }

    .light-scheme .light-pic {
      display: revert;
    }

    .dark-scheme .dark-pic {
      display: revert;
    }

    /* Semantic elements */
    h1, .heading-size-xxl { font-size: var(--s2-heading-size-xxl); }
    h2, .heading-size-xl { font-size: var(--s2-heading-size-xl); }
    h3, .heading-size-l { font-size: var(--s2-heading-size-l); }
    h4, .heading-size-m { font-size: var(--s2-heading-size-m); }
    h5, .heading-size-s { font-size: var(--s2-heading-size-s); }
    h6, .heading-size-xs { font-size: var(--s2-heading-size-xs); }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    [class*="heading-size"] {
      font-weight: var(--s2-heading-font-weight);
      line-height: var(--s2-heading-line-height);
      margin: calc(1em * var(--s2-heading-margin-top-multiplier)) 0 calc(1em * var(--s2-heading-margin-bottom-multiplier));
    }

    h1, h2, h3,
    .heading-size-l,
    .heading-size-xl,
    .heading-size-xxl {
      color: var(--se-larger-heading-color);
    }

    h4, h5, h6,
    .heading-size-m,
    .heading-size-s,
    .heading-size-xs {
      color: var(--se-smaller-heading-color);
    }

    /* Beyond semantics */
    .heading-size-xxxxl { font-size: var(--s2-heading-size-xxxxl); }
    .heading-size-xxxl { font-size: var(--s2-heading-size-xxxl); }

    p {
      margin: calc(1em * var(--s2-body-margin-multiplier)) 0;
    }

    a {
      color: var(--s2-blue-900);
    }

    code {
      background-color: rgb(from var(--s2-gray-1000) r g b / 8%);
      padding: 2px;
      border-radius: 3px;
      font-size: var(--s2-component-s-medium-font-size);
      color: var(--se-body-color);
    }

    input,
    textarea,
    select,
    button {
      font: inherit;
    }

    button {
      font-size: var(--s2-component-l-regular-font-size);
      cursor: pointer;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    strong {
      font-weight: 700;
    }

    .icon {
      display: block;
      width: 20px;
      height: 20px;
    }

    .visually-hidden {
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .light-scheme {
      color-scheme: light;
    }

    .dark-scheme {
      color-scheme: dark;
    }

    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }
}

@media (width >= 900px) {
  .section > .default-content {
    max-width: revert;
    margin: revert;
  }
}