/* styles/_css-base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  text-size-adjust: none;
  font-size: var(--default-font-size);
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-l-xl);
}
:is(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin-block-end: 0;
}
ul,
ol {
  list-style: none;
}
body {
  position: relative;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}
:is(h1, h2, h3, h4, button, input, textarea) {
  line-height: var(--smaller-line-height);
}
label {
  line-height: var(--smaller-line-height);
}
:is(h1, h2, h3, h4) {
  text-wrap: balance;
}
img,
picture {
  max-width: 100%;
  display: block;
}
:is(input, button, textarea, select) {
  font-family: inherit;
  font-size: inherit;
}
textarea:not([rows]) {
  min-height: 10em;
}

/* styles/_css-patterns.css */
:root {
  --pattern1:
    radial-gradient(
      
      circle at 28% 90%,
      rgba(113, 113, 113, 0.03) 0%,
      rgba(113, 113, 113, 0.03) 24%,
      transparent 24%,
      transparent 100% ),
    radial-gradient(
      
      circle at 84% 65%,
      rgba(173, 173, 173, 0.03) 0%,
      rgba(173, 173, 173, 0.03) 45%,
      transparent 45%,
      transparent 100% ),
    radial-gradient(
      
      circle at 46% 12%,
      rgba(141, 141, 141, 0.03) 0%,
      rgba(141, 141, 141, 0.03) 22%,
      transparent 22%,
      transparent 100% ),
    radial-gradient(
      
      circle at 26% 14%,
      rgba(119, 119, 119, 0.03) 0%,
      rgba(119, 119, 119, 0.03) 35%,
      transparent 35%,
      transparent 100% ),
    radial-gradient(
      
      circle at 81% 90%,
      rgba(42, 42, 42, 0.03) 0%,
      rgba(42, 42, 42, 0.03) 40%,
      transparent 40%,
      transparent 100% ),
    radial-gradient(
      
      circle at 28% 100%,
      rgba(234, 234, 234, 0.03) 0%,
      rgba(234, 234, 234, 0.03) 56%,
      transparent 56%,
      transparent 100% ),
    linear-gradient(
      90deg,
      rgb(255, 255, 255),
      rgb(255, 255, 255));
  --pattern2:
    radial-gradient(
      
      circle at 29% 55%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 4%,
      transparent 4%,
      transparent 44%,
      transparent 44%,
      transparent 100% ),
    radial-gradient(
      
      circle at 85% 89%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 51%,
      transparent 51%,
      transparent 52%,
      transparent 52%,
      transparent 100% ),
    radial-gradient(
      
      circle at 6% 90%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 53%,
      transparent 53%,
      transparent 64%,
      transparent 64%,
      transparent 100% ),
    radial-gradient(
      
      circle at 35% 75%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 6%,
      transparent 6%,
      transparent 98%,
      transparent 98%,
      transparent 100% ),
    radial-gradient(
      
      circle at 56% 75%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 16%,
      transparent 16%,
      transparent 23%,
      transparent 23%,
      transparent 100% ),
    radial-gradient(
      
      circle at 42% 0%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 3%,
      transparent 3%,
      transparent 26%,
      transparent 26%,
      transparent 100% ),
    radial-gradient(
      
      circle at 29% 28%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 51%,
      transparent 51%,
      transparent 75%,
      transparent 75%,
      transparent 100% ),
    radial-gradient(
      
      circle at 77% 21%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 35%,
      transparent 35%,
      transparent 55%,
      transparent 55%,
      transparent 100% ),
    radial-gradient(
      
      circle at 65% 91%,
      hsla(329, 0%, 99%, 0.05) 0%,
      hsla(329, 0%, 99%, 0.05) 46%,
      transparent 46%,
      transparent 76%,
      transparent 76%,
      transparent 100% ),
    linear-gradient(
      45deg,
      rgb(83, 91, 235),
      rgb(76, 11, 174));
  --pattern3:
    linear-gradient(
      
      323deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 16.667%,
      rgba(80, 80, 80, 0.05) 16.667%,
      rgba(80, 80, 80, 0.05) 33.334%,
      rgba(240, 240, 240, 0.05) 33.334%,
      rgba(240, 240, 240, 0.05) 50.001000000000005%,
      rgba(191, 191, 191, 0.05) 50.001%,
      rgba(191, 191, 191, 0.05) 66.668%,
      rgba(181, 181, 181, 0.05) 66.668%,
      rgba(181, 181, 181, 0.05) 83.33500000000001%,
      rgba(75, 75, 75, 0.05) 83.335%,
      rgba(75, 75, 75, 0.05) 100.002% ),
    linear-gradient(
      
      346deg,
      rgba(200, 200, 200, 0.06) 0%,
      rgba(200, 200, 200, 0.06) 25%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(153, 153, 153, 0.06) 50%,
      rgba(153, 153, 153, 0.06) 75%,
      rgba(72, 72, 72, 0.06) 75%,
      rgba(72, 72, 72, 0.06) 100% ),
    linear-gradient(
      
      347deg,
      rgba(230, 230, 230, 0.05) 0%,
      rgba(230, 230, 230, 0.05) 25%,
      rgba(54, 54, 54, 0.05) 25%,
      rgba(54, 54, 54, 0.05) 50%,
      rgba(157, 157, 157, 0.05) 50%,
      rgba(157, 157, 157, 0.05) 75%,
      rgba(220, 220, 220, 0.05) 75%,
      rgba(220, 220, 220, 0.05) 100% ),
    linear-gradient(
      
      84deg,
      rgba(215, 215, 215, 0.05) 0%,
      rgba(215, 215, 215, 0.05) 14.286%,
      rgba(96, 96, 96, 0.05) 14.286%,
      rgba(96, 96, 96, 0.05) 28.572%,
      rgba(99, 99, 99, 0.05) 28.572%,
      rgba(99, 99, 99, 0.05) 42.858%,
      rgba(229, 229, 229, 0.05) 42.858%,
      rgba(229, 229, 229, 0.05) 57.144%,
      rgba(77, 77, 77, 0.05) 57.144%,
      rgba(77, 77, 77, 0.05) 71.42999999999999%,
      rgba(79, 79, 79, 0.05) 71.43%,
      rgba(79, 79, 79, 0.05) 85.71600000000001%,
      rgba(204, 204, 204, 0.05) 85.716%,
      rgba(204, 204, 204, 0.05) 100.002% ),
    linear-gradient(
      
      73deg,
      rgba(143, 143, 143, 0.06) 0%,
      rgba(143, 143, 143, 0.06) 16.667%,
      rgba(217, 217, 217, 0.06) 16.667%,
      rgba(217, 217, 217, 0.06) 33.334%,
      rgba(89, 89, 89, 0.06) 33.334%,
      rgba(89, 89, 89, 0.06) 50.001000000000005%,
      rgba(212, 212, 212, 0.06) 50.001%,
      rgba(212, 212, 212, 0.06) 66.668%,
      rgba(129, 129, 129, 0.06) 66.668%,
      rgba(129, 129, 129, 0.06) 83.33500000000001%,
      rgba(88, 88, 88, 0.06) 83.335%,
      rgba(88, 88, 88, 0.06) 100.002% ),
    linear-gradient(
      
      132deg,
      rgba(120, 120, 120, 0.06) 0%,
      rgba(120, 120, 120, 0.06) 20%,
      rgba(255, 255, 255, 0.06) 20%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(34, 34, 34, 0.06) 40%,
      rgba(34, 34, 34, 0.06) 60%,
      rgba(217, 217, 217, 0.06) 60%,
      rgba(217, 217, 217, 0.06) 80%,
      rgba(228, 228, 228, 0.06) 80%,
      rgba(228, 228, 228, 0.06) 100% ),
    linear-gradient(
      
      142deg,
      rgba(192, 192, 192, 0.06) 0%,
      rgba(192, 192, 192, 0.06) 12.5%,
      rgba(219, 219, 219, 0.06) 12.5%,
      rgba(219, 219, 219, 0.06) 25%,
      rgba(140, 140, 140, 0.06) 25%,
      rgba(140, 140, 140, 0.06) 37.5%,
      rgba(223, 223, 223, 0.06) 37.5%,
      rgba(223, 223, 223, 0.06) 50%,
      rgba(246, 246, 246, 0.06) 50%,
      rgba(246, 246, 246, 0.06) 62.5%,
      rgba(102, 102, 102, 0.06) 62.5%,
      rgba(102, 102, 102, 0.06) 75%,
      rgba(198, 198, 198, 0.06) 75%,
      rgba(198, 198, 198, 0.06) 87.5%,
      rgba(214, 214, 214, 0.06) 87.5%,
      rgba(214, 214, 214, 0.06) 100% ),
    linear-gradient(
      
      238deg,
      rgba(148, 148, 148, 0.04) 0%,
      rgba(148, 148, 148, 0.04) 20%,
      rgba(173, 173, 173, 0.04) 20%,
      rgba(173, 173, 173, 0.04) 40%,
      rgba(184, 184, 184, 0.04) 40%,
      rgba(184, 184, 184, 0.04) 60%,
      rgba(93, 93, 93, 0.04) 60%,
      rgba(93, 93, 93, 0.04) 80%,
      rgba(171, 171, 171, 0.04) 80%,
      rgba(171, 171, 171, 0.04) 100% ),
    linear-gradient(
      
      188deg,
      rgba(242, 242, 242, 0.05) 0%,
      rgba(242, 242, 242, 0.05) 20%,
      rgba(137, 137, 137, 0.05) 20%,
      rgba(137, 137, 137, 0.05) 40%,
      rgba(104, 104, 104, 0.05) 40%,
      rgba(104, 104, 104, 0.05) 60%,
      rgba(65, 65, 65, 0.05) 60%,
      rgba(65, 65, 65, 0.05) 80%,
      rgba(89, 89, 89, 0.05) 80%,
      rgba(89, 89, 89, 0.05) 100% ),
    linear-gradient(
      90deg,
      hsl(237, 0%, 20%),
      hsl(237, 0%, 20%));
  --pattern4:
    linear-gradient(
      
      12deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 16.667%,
      rgba(80, 80, 80, 0.05) 16.667%,
      rgba(80, 80, 80, 0.05) 33.334%,
      rgba(240, 240, 240, 0.05) 33.334%,
      rgba(240, 240, 240, 0.05) 50.001000000000005%,
      rgba(191, 191, 191, 0.05) 50.001%,
      rgba(191, 191, 191, 0.05) 66.668%,
      rgba(181, 181, 181, 0.05) 66.668%,
      rgba(181, 181, 181, 0.05) 83.33500000000001%,
      rgba(75, 75, 75, 0.05) 83.335%,
      rgba(75, 75, 75, 0.05) 100.002% ),
    linear-gradient(
      
      67deg,
      rgba(200, 200, 200, 0.06) 0%,
      rgba(200, 200, 200, 0.06) 25%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(153, 153, 153, 0.06) 50%,
      rgba(153, 153, 153, 0.06) 75%,
      rgba(72, 72, 72, 0.06) 75%,
      rgba(72, 72, 72, 0.06) 100% ),
    linear-gradient(
      
      156deg,
      rgba(230, 230, 230, 0.05) 0%,
      rgba(230, 230, 230, 0.05) 25%,
      rgba(54, 54, 54, 0.05) 25%,
      rgba(54, 54, 54, 0.05) 50%,
      rgba(157, 157, 157, 0.05) 50%,
      rgba(157, 157, 157, 0.05) 75%,
      rgba(220, 220, 220, 0.05) 75%,
      rgba(220, 220, 220, 0.05) 100% ),
    linear-gradient(
      
      287deg,
      rgba(215, 215, 215, 0.05) 0%,
      rgba(215, 215, 215, 0.05) 14.286%,
      rgba(96, 96, 96, 0.05) 14.286%,
      rgba(96, 96, 96, 0.05) 28.572%,
      rgba(99, 99, 99, 0.05) 28.572%,
      rgba(99, 99, 99, 0.05) 42.858%,
      rgba(229, 229, 229, 0.05) 42.858%,
      rgba(229, 229, 229, 0.05) 57.144%,
      rgba(77, 77, 77, 0.05) 57.144%,
      rgba(77, 77, 77, 0.05) 71.42999999999999%,
      rgba(79, 79, 79, 0.05) 71.43%,
      rgba(79, 79, 79, 0.05) 85.71600000000001%,
      rgba(204, 204, 204, 0.05) 85.716%,
      rgba(204, 204, 204, 0.05) 100.002% ),
    linear-gradient(
      
      221deg,
      rgba(143, 143, 143, 0.06) 0%,
      rgba(143, 143, 143, 0.06) 16.667%,
      rgba(217, 217, 217, 0.06) 16.667%,
      rgba(217, 217, 217, 0.06) 33.334%,
      rgba(89, 89, 89, 0.06) 33.334%,
      rgba(89, 89, 89, 0.06) 50.001000000000005%,
      rgba(212, 212, 212, 0.06) 50.001%,
      rgba(212, 212, 212, 0.06) 66.668%,
      rgba(129, 129, 129, 0.06) 66.668%,
      rgba(129, 129, 129, 0.06) 83.33500000000001%,
      rgba(88, 88, 88, 0.06) 83.335%,
      rgba(88, 88, 88, 0.06) 100.002% ),
    linear-gradient(
      
      98deg,
      rgba(120, 120, 120, 0.06) 0%,
      rgba(120, 120, 120, 0.06) 20%,
      rgba(255, 255, 255, 0.06) 20%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(34, 34, 34, 0.06) 40%,
      rgba(34, 34, 34, 0.06) 60%,
      rgba(217, 217, 217, 0.06) 60%,
      rgba(217, 217, 217, 0.06) 80%,
      rgba(228, 228, 228, 0.06) 80%,
      rgba(228, 228, 228, 0.06) 100% ),
    linear-gradient(
      
      54deg,
      rgba(192, 192, 192, 0.06) 0%,
      rgba(192, 192, 192, 0.06) 12.5%,
      rgba(219, 219, 219, 0.06) 12.5%,
      rgba(219, 219, 219, 0.06) 25%,
      rgba(140, 140, 140, 0.06) 25%,
      rgba(140, 140, 140, 0.06) 37.5%,
      rgba(223, 223, 223, 0.06) 37.5%,
      rgba(223, 223, 223, 0.06) 50%,
      rgba(246, 246, 246, 0.06) 50%,
      rgba(246, 246, 246, 0.06) 62.5%,
      rgba(102, 102, 102, 0.06) 62.5%,
      rgba(102, 102, 102, 0.06) 75%,
      rgba(198, 198, 198, 0.06) 75%,
      rgba(198, 198, 198, 0.06) 87.5%,
      rgba(214, 214, 214, 0.06) 87.5%,
      rgba(214, 214, 214, 0.06) 100% ),
    linear-gradient(
      
      307deg,
      rgba(148, 148, 148, 0.04) 0%,
      rgba(148, 148, 148, 0.04) 20%,
      rgba(173, 173, 173, 0.04) 20%,
      rgba(173, 173, 173, 0.04) 40%,
      rgba(184, 184, 184, 0.04) 40%,
      rgba(184, 184, 184, 0.04) 60%,
      rgba(93, 93, 93, 0.04) 60%,
      rgba(93, 93, 93, 0.04) 80%,
      rgba(171, 171, 171, 0.04) 80%,
      rgba(171, 171, 171, 0.04) 100% ),
    linear-gradient(
      
      119deg,
      rgba(242, 242, 242, 0.05) 0%,
      rgba(242, 242, 242, 0.05) 20%,
      rgba(137, 137, 137, 0.05) 20%,
      rgba(137, 137, 137, 0.05) 40%,
      rgba(104, 104, 104, 0.05) 40%,
      rgba(104, 104, 104, 0.05) 60%,
      rgba(65, 65, 65, 0.05) 60%,
      rgba(65, 65, 65, 0.05) 80%,
      rgba(89, 89, 89, 0.05) 80%,
      rgba(89, 89, 89, 0.05) 100% ),
    linear-gradient(
      90deg,
      hsl(237, 0%, 20%),
      hsl(237, 0%, 20%));
  --pattern5:
    linear-gradient(
      
      323deg,
      rgb(255 255 255 / 1%) 0%,
      rgb(255 255 255 / 1%) 16.667%,
      rgb(46 46 46 / 1%) 16.667%,
      rgb(46 46 46 / 1%) 33.334%,
      rgb(226 226 226 / 1%) 33.334%,
      rgb(226 226 226 / 1%) 50.001000000000005%,
      rgb(159 159 159 / 1%) 50.001%,
      rgb(159 159 159 / 1%) 66.668%,
      rgb(149 149 149 / 1%) 66.668%,
      rgb(149 149 149 / 1%) 83.33500000000001%,
      rgb(43 43 43 / 1%) 83.335%,
      rgb(43 43 43 / 1%) 100.002% ),
    linear-gradient(
      
      346deg,
      rgb(166 166 166 / 3%) 0%,
      rgb(166 166 166 / 3%) 25%,
      rgb(240 240 240 / 3%) 25%,
      rgb(240 240 240 / 3%) 50%,
      rgb(121 121 121 / 3%) 50%,
      rgb(121 121 121 / 3%) 75%,
      rgb(40 40 40 / 3%) 75%,
      rgb(40 40 40 / 3%) 100% ),
    linear-gradient(
      
      347deg,
      rgb(209 209 209 / 1%) 0%,
      rgb(209 209 209 / 1%) 25%,
      rgb(22 22 22 / 1%) 25%,
      rgb(22 22 22 / 1%) 50%,
      rgb(125 125 125 / 1%) 50%,
      rgb(125 125 125 / 1%) 75%,
      rgb(205 205 205 / 1%) 75%,
      rgb(205 205 205 / 1%) 100% ),
    linear-gradient(
      
      84deg,
      rgb(195 195 195 / 1%) 0%,
      rgb(195 195 195 / 1%) 14.286%,
      rgb(64 64 64 / 1%) 14.286%,
      rgb(64 64 64 / 1%) 28.572%,
      rgb(67 67 67 / 1%) 28.572%,
      rgb(67 67 67 / 1%) 42.858%,
      rgb(214 214 214 / 1%) 42.858%,
      rgb(214 214 214 / 1%) 57.144%,
      rgb(45 45 45 / 1%) 57.144%,
      rgb(45 45 45 / 1%) 71.42999999999999%,
      rgb(47 47 47 / 1%) 71.43%,
      rgb(47 47 47 / 1%) 85.71600000000001%,
      rgb(172 172 172 / 1%) 85.716%,
      rgb(172 172 172 / 1%) 100.002% ),
    linear-gradient(
      
      73deg,
      rgb(111 111 111 / 3%) 0%,
      rgb(111 111 111 / 3%) 16.667%,
      rgb(202 202 202 / 3%) 16.667%,
      rgb(202 202 202 / 3%) 33.334%,
      rgb(57 57 57 / 3%) 33.334%,
      rgb(57 57 57 / 3%) 50.001000000000005%,
      rgb(197 197 197 / 3%) 50.001%,
      rgb(197 197 197 / 3%) 66.668%,
      rgb(97 97 97 / 3%) 66.668%,
      rgb(97 97 97 / 3%) 83.33500000000001%,
      rgb(56 56 56 / 3%) 83.335%,
      rgb(56 56 56 / 3%) 100.002% ),
    linear-gradient(
      
      132deg,
      rgb(88 88 88 / 3%) 0%,
      rgb(88 88 88 / 3%) 20%,
      rgb(249 249 249 / 3%) 20%,
      rgb(249 249 249 / 3%) 40%,
      rgb(2 2 2 / 3%) 40%,
      rgb(2 2 2 / 3%) 60%,
      rgb(185 185 185 / 3%) 60%,
      rgb(185 185 185 / 3%) 80%,
      rgb(196 196 196 / 3%) 80%,
      rgb(196 196 196 / 3%) 100% ),
    linear-gradient(
      
      142deg,
      rgb(160 160 160 / 3%) 0%,
      rgb(160 160 160 / 3%) 12.5%,
      rgb(204 204 204 / 3%) 12.5%,
      rgb(204 204 204 / 3%) 25%,
      rgb(108 108 108 / 3%) 25%,
      rgb(108 108 108 / 3%) 37.5%,
      rgb(191 191 191 / 3%) 37.5%,
      rgb(191 191 191 / 3%) 50%,
      rgb(231 231 231 / 3%) 50%,
      rgb(231 231 231 / 3%) 62.5%,
      rgb(70 70 70 / 3%) 62.5%,
      rgb(70 70 70 / 3%) 75%,
      rgb(166 166 166 / 3%) 75%,
      rgb(166 166 166 / 3%) 87.5%,
      rgb(199 199 199 / 3%) 87.5%,
      rgb(199 199 199 / 3%) 100% ),
    linear-gradient(
      
      238deg,
      rgb(116 116 116 / 2%) 0%,
      rgb(116 116 116 / 2%) 20%,
      rgb(141 141 141 / 2%) 20%,
      rgb(141 141 141 / 2%) 40%,
      rgb(152 152 152 / 2%) 40%,
      rgb(152 152 152 / 2%) 60%,
      rgb(61 61 61 / 2%) 60%,
      rgb(61 61 61 / 2%) 80%,
      rgb(139 139 139 / 2%) 80%,
      rgb(139 139 139 / 2%) 100% ),
    linear-gradient(
      
      188deg,
      rgb(227 227 227 / 1%) 0%,
      rgb(227 227 227 / 1%) 20%,
      rgb(105 105 105 / 1%) 20%,
      rgb(105 105 105 / 1%) 40%,
      rgb(72 72 72 / 1%) 40%,
      rgb(72 72 72 / 1%) 60%,
      rgb(33 33 33 / 1%) 60%,
      rgb(33 33 33 / 1%) 80%,
      rgb(57 57 57 / 1%) 80%,
      rgb(57 57 57 / 1%) 100% ),
    linear-gradient(
      90deg,
      rgb(33 33 33 / 89%),
      rgb(33 33 33 / 89%));
}

/* styles/_design-tokens.css */
:root {
  --color-primary: #da1e28;
  --color-secondary: #fa4d56;
  --color-text: #161616;
  --color-text-light: #f4f4f4;
  --color-text-dark: #999;
  --color-text-highlight: #ff832b;
  --color-text-highlight-light: #fbc39b;
  --color-text-inactive: #999;
  --color-link-inactive: #666;
  --color-link-in-path: #888;
  --color-link-navigation: #161616;
  --background-color-link-hover: rgb(0 0 0 / 5%);
  --color-pagination-active: #666;
  --color-background: #fff;
  --color-background-light: #f4f4f4;
  --color-highlight-background: #ffd4b5;
  --color-dark-background: #323232;
  --color-border-light: #e0e0e0;
  --color-border: #393939;
  --color-shadow: 0px 0px 20px 3px rgb(57 57 57 / 10%);
  --color-surface-hover: rgb(0 0 0 / 3%);
  --color-surface-focus: rgb(0 0 0 / 5%);
  --color-icon-default: #161616;
  --primary-button-color: rgb(218 30 40 / 80%);
  --primary-button-text-color: #f4f4f4;
  --secondary-button-color: rgb(0 0 0 / 60%);
  --secondary-button-text-color: #f4f4f4;
  --tertiary-button-color: rgb(255 255 255 / 80%);
  --tertiary-button-text-color: #161616;
  --glass-background: rgb(255 255 255 / 15%);
  --glass-background-light: rgb(255 255 255 / 85%);
  --glass-background-dark: rgb(0 0 0 / 30%);
  --glass-background-dark-card: rgb(0 0 0 / 70%);
  --glass-backdrop-filter: blur(2px) saturate(180%);
  --glass-border: 1px solid rgb(255 255 255 / 80%);
  --glass-border-dark: 1px solid rgb(0 0 0 / 80%);
  --glass-border-radius: 1rem;
  --glass-box-shadow: 0 4px 16px rgb(0 0 0 / 20%), inset 0 4px 20px rgb(255 255 255 / 30%);
  --color-footer-text-light: #f4f4f4;
  --light-screen: rgb(255 255 255 / 90%);
  --dark-screen: rgb(0 0 0 / 60%);
  --contrast-text-on-light: var(--color-text);
  --contrast-text-on-dark: var(--color-text-light);
  --font-xs: clamp(0.6944rem, 0.6118rem + 0.3307vw, 0.8681rem);
  --font-s: clamp(0.8333rem, 0.7341rem + 0.3968vw, 1.0417rem);
  --font-p: clamp(1rem, 0.881rem + 0.4762vw, 1.25rem);
  --font-h5: clamp(1.2rem, 1.0571rem + 0.5714vw, 1.5rem);
  --font-h4: clamp(1.44rem, 1.2686rem + 0.6857vw, 1.8rem);
  --font-h3: clamp(1.728rem, 1.5223rem + 0.8229vw, 2.16rem);
  --font-h2: clamp(2.0736rem, 1.8267rem + 0.9874vw, 2.592rem);
  --font-h1: clamp(2.4883rem, 2.1921rem + 1.1849vw, 3.1104rem);
  --font-xl: clamp(2.986rem, 2.6305rem + 1.4219vw, 3.7325rem);
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
  --space-4xl: clamp(9rem, 8.6522rem + 1.7391vw, 10rem);
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 5.6196rem + 5.6522vw, 10rem);
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
  --space-l-2xl: clamp(2rem, 0.5714rem + 5.7143vw, 5rem);
  --font-primary: "Open Sans", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  --default-font-weight: 300;
  --default-line-height: 1.5;
  --smaller-line-height: 1;
  --header-height: 80px;
  --container-width: 1024px;
  --gutter: var(--space-s-l);
  --default-border-width: 0.2rem;
  --transition-base: 400ms ease-in-out;
  --transition-movement: 200ms linear;
  --transition-fade: 500ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --tracking: -0.05ch;
  --tracking-s: -0.075ch;
  --code-bg: #fcfcfc;
  --code-text: var(--color-text);
  --code-selection-bg: #b3d4fc;
  --token-comment: slategray;
  --token-punctuation: #999;
  --token-property: #905;
  --token-tag: #905;
  --token-boolean: #905;
  --token-number: #905;
  --token-constant: #905;
  --token-symbol: #905;
  --token-deleted: #905;
  --token-selector: #690;
  --token-attr-name: #690;
  --token-string: #690;
  --token-char: #690;
  --token-builtin: #690;
  --token-inserted: #690;
  --token-operator: #9a6e3a;
  --token-entity: #9a6e3a;
  --token-url: #9a6e3a;
  --token-atrule: #07a;
  --token-attr-value: #07a;
  --token-keyword: #07a;
  --token-function: #dd4a68;
  --token-class-name: #dd4a68;
  --token-regex: #e90;
  --token-important: #e90;
  --token-variable: #e90;
}

/* main.css */
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-family: var(--font-primary);
  font-size: var(--font-p);
  font-weight: var(--default-font-weight);
  line-height: var(--default-line-height);
  letter-spacing: var(--tracking);
  color: var(--color-text);
  background-color: var(--color-background);
}
body.modal-active {
  overflow: hidden;
}
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  max-width: var(--wrapper-max-width, 85rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
:is(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  font-weight: var(--default-font-weight);
  line-height: var(--smaller-line-height);
}
h1 {
  font-size: var(--font-h1);
}
h2 {
  font-size: var(--font-h2);
}
h3 {
  font-size: var(--font-h3);
}
h4 {
  font-size: var(--font-h4);
}
.lead-in {
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-s);
  text-transform: uppercase;
  color: var(--color-text-highlight);
}
.is-dark .lead-in {
  color: var(--color-text-highlight-light);
}
.lead-in + :is(h1, h2, h3, h4) {
  margin-block-start: 0.5rem;
}
:is(h1, h2, h3, h4) + .sub-title {
  margin-top: var(--space-xs-s);
}
p {
  font-size: var(--font-p);
  margin: 0;
}
strong {
  font-size: 0.8em;
}
a {
  font-size: inherit;
  text-decoration: none;
  color: var(--color-primary);
  display: inline-block;
  background-color: transparent;
  transition: all 0.5s ease-in-out;
  &:hover {
    background-color: var(--glass-background);
  }
}
hr {
  border: none;
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-m) 0;
}
svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
}
.to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  opacity: 0;
  z-index: 1000;
  transition: opacity var(--transition-fade);
  background: var(--glass-background-light);
  border: var(--glass-border-dark);
  border-radius: 50%;
  box-shadow: var(--glass-box-shadow);
  backdrop-filter: blur(10px);
  text-decoration: none;
  width: 3rem;
  height: 3rem;
  padding: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  svg {
    width: 100%;
    height: 100%;
    stroke-width: 1px;
  }
}
.scrolling .to-top {
  opacity: 0.5;
  &:hover {
    opacity: 1;
    svg {
      stroke-width: 2px;
    }
  }
}
.flow {
  & * {
    margin-top: 0;
  }
  & > * + * {
    margin-top: var(--flow-space, 1em);
  }
}
.author-date {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-xs);
  color: var(--color-text-inactive);
  margin-top: var(--space-s);
  &::before {
    content: "By ";
    margin-right: 0.25em;
  }
  .author::after {
    content: " | ";
    margin: 0 var(--space-2xs);
  }
  &.is-vertical {
    .author,
    time {
      display: block;
    }
    time {
      flex: 0 0 100%;
    }
    .author::after {
      content: "";
      margin: 0;
    }
  }
}
.brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  .home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      width: var(--space-l-xl);
      height: var(--space-l-xl);
      transform: scale(1);
      transition: transform 250ms ease;
    }
    img {
      max-height: var(--space-l-xl);
    }
  }
  &:hover svg {
    transform: scale(1.05);
  }
}
.breadcrumbs {
  position: absolute;
  top: var(--space-2xl-3xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 100%;
  max-width: var(--wrapper-max-width, 85rem);
  margin: 0 auto var(--space-s-l);
  padding-left: var(--gutter);
  display: flex;
  gap: var(--space-s);
  list-style: none;
  font-family: var(--font-primary);
  li {
    font-size: var(--font-xs);
    text-transform: uppercase;
    transition: color var(--transition-fast);
    &::after {
      content: "\203a";
      margin-left: var(--space-s);
      color: var(--color-primary);
    }
    a {
      color: var(--color-primary);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color var(--transition-fade);
    }
    &:last-child {
      color: var(--color-text-inactive);
      font-weight: 600;
      &::after {
        display: none;
      }
    }
    a:hover {
      text-decoration: none;
      border-bottom-color: var(--color-primary);
    }
  }
}
button {
  background: none;
  border: none;
}
.button,
button {
  display: inline-block;
  text-align: center;
  padding: var(--space-2xs-xs) var(--space-s-m);
  transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
  font-weight: 500;
  letter-spacing: var(--default-letter-spacing);
  background: rgb(218 30 40 / 80%);
  backdrop-filter: var(--glass-backdrop-filter);
  isolation: isolate;
  box-shadow: var(--glass-box-shadow);
  border-radius: 0.5rem;
  cursor: pointer;
  color: #f4f4f4;
  &:hover {
    transform: scale(1.05);
    background-color: transparent;
  }
  &.primary {
    color: var(--primary-button-text-color);
    background: var(--primary-button-color);
  }
  &.secondary {
    color: var(--secondary-button-text-color);
    background: var(--secondary-button-color);
  }
  &.tertiary {
    background: var(--tertiary-button-color);
    color: var(--tertiary-button-text-color);
    border: 1px solid var(--color-border-light);
  }
  &.small {
    padding: 0.5rem 1.5rem;
    font-size: var(--font-xs);
  }
  &.none {
    background: none;
    box-shadow: none;
    padding: 0;
  }
  &:focus {
    outline: 2px solid var(--color-text-light);
    outline-offset: 2px;
    box-shadow: var(--glass-box-shadow), 0 0 0 4px rgb(255 255 255 / 30%);
  }
}
.simple-card {
  position: relative;
  max-width: 30rem;
  color: var(--color-text);
  background-color: var(--glass-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--space-2xs-xs);
  overflow: hidden;
  box-shadow: var(--glass-box-shadow);
  transition: all 0.3s ease-in-out;
  &:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
  a {
    color: inherit;
    text-decoration: none;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    &:after {
      background: none;
      display: none;
    }
  }
  .image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .text-wrapper {
    flex-grow: 1;
    margin-block-start: 10rem;
    padding: var(--space-s-m) var(--space-s-m);
    background-color: var(--glass-background-light);
  }
  .title {
    font-size: var(--font-h5);
    text-transform: uppercase;
    color: var(--color-text);
  }
  .prose {
    font-size: var(--font-p);
    margin-block: var(--space-s-m) 0;
  }
}
.collection-card {
  position: relative;
  max-width: 30rem;
  color: var(--color-text);
  background-color: var(--glass-background);
  border: 1px solid var(--color-border-light);
  border-radius: var(--space-2xs-xs);
  overflow: hidden;
  box-shadow: var(--glass-box-shadow);
  transition: all 0.3s ease-in-out;
  &:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
  a {
    color: inherit;
    text-decoration: none;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    &::after {
      background: none;
      display: none;
    }
  }
  .image-wrapper {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .text-wrapper {
    position: relative;
    flex-grow: 1;
    margin-block-start: 10rem;
    padding: var(--space-s-m) var(--space-s-m) var(--space-l-xl);
    background-color: var(--glass-background-light);
    .icon-wrapper {
      position: absolute;
      bottom: var(--space-s-m);
      right: var(--space-s-m);
      margin: 0;
    }
  }
  .title {
    font-size: var(--font-h5);
    text-transform: uppercase;
    color: var(--color-text);
  }
  .prose {
    font-size: var(--font-p);
    margin-block: var(--space-s-m) 0;
  }
  &.has-pattern {
    .image-wrapper {
      display: none;
    }
    .text-wrapper {
      background: none;
    }
  }
}
.blogs-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-lg) auto;
  padding: 0;
  li {
    width: var(--space-lg);
    height: var(--space-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--space-2xs);
    border: 1px solid var(--color-border-light);
    a {
      border: none;
    }
    &:hover {
      background-color: var(--color-background-light);
      cursor: pointer;
    }
    &.active {
      background-color: var(--color-pagination-active);
      cursor: default;
      pointer-events: none;
      span {
        color: var(--contrast-text-on-dark);
      }
    }
    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}
.ctas {
  --flow-space: var(--space-m-l);
}
.cta-banner .ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  > * {
    flex: 0 0 auto;
    margin-top: 0;
  }
}
.cta {
  font-size: var(--font-s);
  text-decoration: none;
  text-transform: uppercase;
  & + .cta {
    margin-left: var(--space-m-l);
  }
}
.cta.link {
  display: inline-block;
  font-size: var(--font-s);
  transition: all 0.3s ease-in-out;
  &:hover {
    border-bottom-color: currentcolor;
  }
  &:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-bottom-color: currentcolor;
  }
}
.flip-card,
.flip-card-back {
  position: absolute;
  height: 100%;
  padding: var(--space-s-l);
  background-color: var(--color-background);
  border: 1px solid var(--color-border-light);
  color: var(--color-text);
  backface-visibility: hidden;
  transition: transform 0.8s, outline 0.2s ease;
  transform-style: preserve-3d;
  .lead-in {
    font-size: var(--font-xs);
  }
  h3 {
    font-size: var(--font-h5);
  }
  .prose {
    font-size: var(--font-p);
  }
  .flip-icon {
    position: absolute;
    display: block;
    top: 0;
    right: var(--space-s-l);
    width: var(--space-l);
    height: var(--space-l);
    svg {
      width: 100%;
      height: 100%;
      stroke: var(--color-text-light);
    }
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space-xl);
    height: var(--space-xl);
    border-radius: var(--space-3xs);
  }
  svg {
    width: var(--space-2xl);
    height: var(--space-2xl);
    stroke: var(--color-border);
    g,
    path {
      fill: var(--color-background);
    }
  }
}
.flip-card-back {
  background-color: var(--color-dark-background);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  p,
  h1,
  h2,
  h3,
  h4 {
    color: var(--contrast-text-on-dark);
  }
}
.flip-card-wrapper.flip .flip-card {
  transform: rotateY(180deg);
}
.flip-card-wrapper.flip .flip-card-back {
  transform: rotateY(0deg);
}
.image,
.media {
  position: relative;
  overflow: hidden;
  picture,
  .responsive-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    font-size: var(--font-xs);
    padding: var(--space-xs);
    color: var(--color-text-dark);
  }
}
.hamburger-menu {
  --hamburger-padding: 8px;
  --hamburger-border-radius: 4px;
  --hamburger-bar-width: 25px;
  --hamburger-bar-height: 3px;
  --hamburger-bar-spacing: 5px;
  --hamburger-bar-radius: 2px;
  display: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  position: relative;
  padding: var(--hamburger-padding);
  border-radius: var(--hamburger-border-radius);
  span {
    display: block;
    width: var(--hamburger-bar-width);
    height: var(--hamburger-bar-height);
    background-color: var(--color-text);
    margin: var(--hamburger-bar-spacing) 0;
    transition: all var(--transition-base);
    border-radius: var(--hamburger-bar-radius);
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  &.active {
    span {
      background-color: var(--color-primary);
    }
    span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }
  }
}
.main-menu {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-s);
  a {
    color: var(--color-link-navigation);
    padding: 8px 12px;
    border-radius: 4px;
    transition: outline 0.2s ease;
  }
}
@container header (max-width: 48rem) {
  .hamburger-menu {
    display: block;
    margin-left: auto;
  }
  .main-menu {
    display: flex;
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--color-background);
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 10px var(--color-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5rem);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s 0.3s;
    &.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease;
      li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--color-border-light);
        &:last-child {
          border-bottom: none;
        }
      }
    }
    a:hover {
      transform: none;
    }
    li.active a,
    a.active {
      color: var(--color-link-inactive) !important;
      pointer-events: none;
      cursor: default;
    }
    li.active-path a,
    a.active-path {
      color: var(--color-link-in-path) !important;
    }
  }
}
@container header (max-width: 48rem) {
  .dark-theme .main-menu {
    background-color: var(--color-background-dark);
    box-shadow: 0 5px 10px var(--color-shadow-dark);
  }
  .dark-theme .main-menu li {
    border-bottom-color: var(--color-border-dark);
  }
}
.slider-pagination {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 1000;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 50%;
    font-size: 0.8rem;
    color: var(--color-text);
    background: var(--color-border-light);
    border: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
      background: var(--color-primary-light, var(--color-primary));
      transform: scale(1.1);
    }
    &.active {
      background: var(--color-primary);
      color: white;
      cursor: default;
    }
    &:focus {
      background: var(--color-primary-light, var(--color-primary));
    }
  }
  &.is-tabs {
    position: static;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: var(--space-m);
    button {
      width: auto;
      border-radius: 0.5rem;
      padding-inline: 2rem;
    }
  }
}
.is-centered {
  text-align: center;
  max-width: 100%;
}
.prose {
  & > * + * {
    margin-top: var(--flow-space, 1em);
  }
  ul,
  ol {
    list-style: revert;
    padding-left: 1.5em;
    margin-top: var(--space-xs-s);
  }
  ul {
    list-style-type: disc;
  }
  ol {
    list-style-type: decimal;
  }
  li {
    margin-bottom: var(--space-2xs);
  }
  blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-s);
    margin-left: 0;
    font-style: italic;
    color: var(--color-text-inactive);
  }
  code {
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    background-color: var(--color-background-light);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
  }
  pre {
    overflow-x: auto;
    padding: var(--space-s);
    background-color: var(--color-dark-background);
    border-radius: 0.5rem;
    code {
      background: none;
      padding: 0;
      color: var(--color-text);
    }
  }
  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
  }
  strong {
    font-weight: 600;
  }
  em {
    font-style: italic;
  }
}
.is-dark .prose {
  blockquote {
    border-left-color: var(--color-primary-light, var(--color-primary));
    color: var(--contrast-text-on-dark);
  }
  code {
    background-color: rgb(255 255 255 / 10%);
    color: var(--contrast-text-on-dark);
  }
  th {
    background-color: rgb(255 255 255 / 10%);
  }
  th,
  td {
    border-color: rgb(255 255 255 / 20%);
  }
  hr {
    background-color: rgb(255 255 255 / 20%);
  }
}
.text-link {
  display: inline-block;
  padding: 2px;
  font-size: var(--font-s);
  background-color: transparent;
  transition: background-color 0.5s ease-in-out;
  &:after {
    content: "\bb";
    display: inline-block;
    margin-left: 0.25em;
    padding-right: 2px;
  }
  &:hover {
    background-color: var(--background-color-link-hover);
  }
  &:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-bottom-color: currentcolor;
  }
}
.banner {
  --threshold: 50rem;
  --banner-padding: var(--space-s-l);
  --banner-gap: var(--space-m-l);
  --banner-border-radius: var(--glass-border-radius);
  --transition-duration: 0.5s;
  --transition-timing: ease-in-out;
  --max-accordion-height: 1000px;
  .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--banner-gap);
    max-width: var(--threshold);
    margin: 0 auto;
    text-align: center;
    > * {
      flex-grow: 1;
      flex-basis: calc((var(--threshold) - 100%) * 999);
      align-self: stretch;
    }
    &.is-reverse {
      flex-direction: row-reverse;
    }
  }
  .text {
    padding: var(--banner-padding);
  }
  .image {
    border-radius: var(--banner-border-radius);
    overflow: hidden;
  }
}
.banner-accordion-header {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  position: relative;
  &:hover {
    opacity: 0.8;
  }
  h2::after,
  h3::after {
    content: "+";
    color: var(--color-primary);
    font-weight: normal;
    margin-left: var(--space-s);
  }
  &.is-open {
    h2::after,
    h3::after {
      content: "-";
    }
  }
}
.banner-accordion-content {
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  &.is-closed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  &:not(.is-closed) {
    max-height: var(--max-accordion-height);
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
  }
}
.blog-author {
  --threshold: 50ch !important;
  row-gap: var(--content-gap, 2rem);
  .content {
    padding: var(--space-l-2xl);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--glass-border-radius);
  }
  .author-profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    max-width: 20rem;
    margin-inline: auto;
    text-align: center;
    .portrait {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid var(--color-border-light);
      margin-bottom: var(--space-s);
      picture {
        width: auto;
        height: 100%;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .title {
      margin-top: 0;
    }
    .social-links {
      padding: 0;
      margin: 0;
      display: flex;
      gap: var(--space-s);
      margin-block-start: var(--space-s);
      svg {
        stroke: var(--color-text);
        stroke-width: 1px;
        fill: none;
        width: 100%;
        height: 100%;
        transition: stroke 0.5s ease-in-out;
        &.wikipedia {
          position: relative;
          top: 3px;
          * {
            fill: var(--color-text);
          }
        }
        * {
          fill: none;
          stroke: var(--color-text);
          stroke-width: 1px;
          transition: stroke 0.5s ease-in-out, fill 0.5s ease-in-out;
        }
      }
      a {
        border: none;
      }
      a:hover {
        border: none;
        svg {
          stroke: var(--color-primary);
          * {
            stroke: var(--color-primary);
          }
          &.wikipedia {
            * {
              fill: var(--color-primary);
            }
          }
        }
      }
    }
  }
  .author-bio {
    flex-grow: 2 !important;
    max-width: 65ch;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  &.is-reverse {
    .author-bio {
      order: -1;
    }
  }
}
.dark-theme .section-wrapper.blog-author {
  .content {
    border-color: var(--color-border-light);
  }
}
.blog-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-navigation {
  display: flex;
  justify-content: center;
  gap: var(--space-l-2xl);
  flex-wrap: wrap;
}
.blog-nav-link {
  display: inline-block;
  text-decoration: none;
  &.blog-nav-next {
    text-align: right;
  }
}
.dark-theme .blog-navigation {
}
.collection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  li {
    max-width: 17.5rem;
    .responsive-wrapper,
    picture {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.section-wrapper {
  position: relative;
  margin-block: var(--space-l-2xl);
  &:first-child {
    margin-block-start: 0;
  }
  padding: var(--space-s-l);
  &.no-top-margin {
    margin-block-start: 0;
  }
  &.no-bottom-margin {
    margin-block-end: 0;
  }
  &.in-container {
    width: 100%;
    max-width: var(--wrapper-max-width, 85rem);
    margin-inline: auto;
  }
  &.is-dark {
    color: var(--contrast-text-on-dark);
  }
  &.first-section {
    padding-top: var(--space-3xl-4xl);
    &.demo {
      margin-top: var(--space-l-2xl);
    }
  }
  &.first-text-section .text {
    padding-block: 0 !important;
  }
  &.merge-with-next {
    margin-bottom: calc(-1 * var(--space-xl-2xl));
    .text {
      margin-bottom: var(--space-xl-2xl);
    }
  }
  &.full-screen {
    margin-top: calc(-1 * (var(--space-2xl-3xl)));
    margin-bottom: var(--space-2xl-3xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    position: relative;
    .container {
      position: static;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }
  &.no-top-padding {
    padding-block-start: 0;
  }
  &.no-bottom-padding {
    padding-block-end: 0;
  }
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: -1;
  }
  &.has-dark-screen {
    color: var(--contrast-text-on-dark);
    .background-image::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--dark-screen);
      z-index: 1;
    }
  }
  &.has-light-screen {
    color: var(--contrast-text-on-light);
    .background-image::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--light-screen);
      z-index: 1;
    }
  }
  .content {
    --threshold: 60rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 var(--content-gap, 2rem);
    > * {
      flex-grow: 1;
      flex-basis: calc((var(--threshold) - 100%) * 999);
      align-self: stretch;
    }
    &.is-reverse {
      flex-direction: row-reverse;
    }
  }
  &.no-top-padding .text {
    padding-block-start: var(--space-s-l);
  }
  &.no-bottom-padding .text {
    padding-block-end: var(--space-s-l);
  }
}
.dark-theme {
  .section-wrapper {
    &.has-light-screen:not(.is-dark) {
      color: var(--contrast-text-on-dark);
      .background-image::after {
        background: var(--dark-screen);
      }
    }
  }
}
.align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-primary, #007acc);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
}
button:focus,
a:focus,
[tabindex]:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}
.glass-surface {
  background-color: var(--glass-background);
  border: var(--glass-border);
  border-radius: var(--glass-border-radius);
  box-shadow: var(--glass-box-shadow);
  backdrop-filter: var(--glass-backdrop-filter);
}
.glass-surface-light {
  background-color: var(--glass-background-light);
}
.glass-surface-dark {
  background-color: var(--glass-background-dark);
}
.glass-surface-dark-card {
  background-color: var(--glass-background-dark-card);
}
.text-content-width {
  max-width: clamp(45ch, 65ch, 80ch);
  margin-inline: auto;
}
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
.text-image-cta {
  .text {
    flex-grow: 2;
  }
  .image,
  .ctas {
    flex-grow: 1;
  }
  .ctas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: var(--space-xl-2xl);
  }
}
.image-gallery {
}
.hero-cta .content {
  container-type: inline-size;
  opacity: 1;
  box-shadow: 0 2px 4px var(--color-shadow);
  border-radius: var(--space-2xs-xs);
  overflow: hidden;
  background-color: var(--color-text-highlight-light);
  .column.image {
    flex-grow: 1;
  }
  .column.text {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-s-l);
  }
  .column.ctas {
    flex-grow: 1;
    padding-block: var(--space-xl-2xl);
  }
}
@container (max-width: 60rem) {
  .hero-cta .content .column.image {
    display: none;
  }
}
.flip-cards {
  --threshold: 20rem;
  .flip-cards-list {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-s-m);
    > * {
      height: clamp(25rem, 30rem, 35rem);
      width: clamp(15rem, 18rem, 20rem);
      background-color: transparent;
      perspective: 1000px;
    }
  }
  .ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-m-l);
    margin-top: auto;
    * {
      margin: 0;
    }
  }
}
footer {
  background: var(--color-dark-background);
  padding: var(--space-s-l);
  font-size: var(--font-p);
  color: var(--color-footer-text-light);
  margin-top: auto;
  a {
    color: inherit;
    text-decoration: underline;
    transition: opacity var(--transition-fade);
    &:hover {
      opacity: 0.8;
    }
  }
}
body.with-sidebar footer {
  background: none;
  box-shadow: none;
  padding-left: 0;
  border-top: 1px solid var(--color-border-light);
  .container {
    padding: 0;
  }
  p {
    color: var(--color-text);
  }
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(var(--space-xs, 0.3125rem));
  height: clamp(3.25rem, 3.25rem + 1.75vw, 5rem);
  container-name: header;
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  padding-inline: var(--gutter);
  button.hamburger-menu {
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    &:hover,
    &.active,
    &:focus,
    &:focus-visible {
      transform: none;
      background: transparent;
      box-shadow: none;
      outline: none;
    }
  }
  .misc {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    button.none,
    button.theme-toggle,
    button.search-icon-toggle,
    button[type=submit] {
      background: transparent;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      backdrop-filter: none;
      &:hover {
        transform: none;
        background: transparent;
      }
      &:focus,
      &:focus-visible {
        outline: 2px solid var(--color-link-navigation);
        outline-offset: 2px;
        box-shadow: none;
      }
    }
    .search-icon-toggle {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--space-m-l);
      height: var(--space-m-l);
      transition: opacity 0.3s ease;
      svg {
        stroke: var(--color-link-navigation);
        stroke-width: 1px;
      }
      &.search-active {
        opacity: 0;
        pointer-events: none;
      }
    }
    .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: none;
      width: var(--space-m-l);
      height: var(--space-m-l);
      background: transparent;
      transition: background 0.3s ease;
      &:hover {
        background: var(--background-color-link-hover);
      }
      svg {
        stroke: var(--color-link-navigation);
        stroke-width: 1px;
      }
    }
  }
}
.search-page header .misc .search-icon-toggle {
  display: none;
}
.header-search-overlay {
  position: fixed;
  top: clamp(3.25rem, 3.25rem + 1.75vw, 5rem);
  left: 0;
  right: 0;
  z-index: 90;
  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(var(--space-xs, 0.3125rem));
  padding: var(--space-s) var(--gutter);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0s 0.3s;
  &.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .header-search-form {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 40rem;
    margin: 0 auto;
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--space-3xs, 0.25rem);
    overflow: hidden;
    background: var(--background-color-light, #fff);
    .header-search-input {
      flex: 1;
      padding: var(--space-2xs-xs, 0.5rem);
      border: none;
      font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
      background: transparent;
      color: var(--color-text);
      &:focus {
        outline: none;
      }
      &::placeholder {
        color: var(--color-text-muted, #999);
      }
    }
    button[type=submit] {
      padding: var(--space-2xs, 0.75rem);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s ease;
      &:hover {
        background: var(--background-color-link-hover, #f5f5f5);
      }
      svg {
        stroke: var(--color-link-navigation);
        stroke-width: 2px;
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
}
.hero.first-section {
  --hero-text-width: calc(100% - clamp(0px, calc((100vw - 600px) * 2), 40%));
  .background-image {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .text {
    width: var(--hero-text-width);
    padding: var(--space-s-l);
    background: var(--glass-background);
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-box-shadow);
    border-radius: var(--space-2xs-xs);
    overflow: hidden;
  }
  .full-screen {
    position: absolute;
    bottom: var(--space-m);
    left: 55%;
    transform: translateX(-50%);
    background: var(--glass-background-light);
    border: var(--glass-border);
    border-radius: 50%;
    box-shadow: var(--glass-box-shadow);
    backdrop-filter: blur(10px);
    width: var(--space-l);
    height: var(--space-l);
    padding: var(--space-3xs);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
      width: 100%;
      height: 100%;
      stroke-width: 1px;
    }
    &:hover {
      svg {
        stroke-width: 2px;
      }
    }
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  &.is-reverse .text {
    margin-left: auto;
  }
}
.dark-theme .hero.first-section {
  .text {
    background: var(--glass-background-dark);
    color: var(--color-text);
  }
}
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.logos-list .content {
  display: block;
  .text,
  .ctas {
    max-width: clamp(45ch, 65ch, 80ch);
    margin-inline: auto;
  }
  .text {
    margin-bottom: var(--space-m-l);
    text-align: center;
  }
  .ctas {
    margin-top: var(--space-m-l);
  }
  .marquee-container {
    width: 100%;
    margin: 0 auto var(--space-xl) auto;
    overflow: hidden;
  }
  .mask:has(.play)::before,
  .mask:has(.play)::after {
    content: "";
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: var(--space-3xl);
    height: 100%;
    pointer-events: none;
    background-image:
      linear-gradient(
        to right,
        rgb(255 255 255 / 100%) 0%,
        rgb(255 255 255 / 95%) 20%,
        rgb(255 255 255 / 80%) 40%,
        rgb(255 255 255 / 40%) 60%,
        rgb(255 255 255 / 10%) 80%,
        transparent 100%);
  }
  .mask:has(.play)::after {
    left: auto;
    right: 0;
    background-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgb(255 255 255 / 10%) 20%,
        rgb(255 255 255 / 40%) 40%,
        rgb(255 255 255 / 80%) 60%,
        rgb(255 255 255 / 95%) 80%,
        rgb(255 255 255 / 100%) 100%);
  }
  .hint {
    font-style: italic;
    font-size: var(--font-h5);
  }
  .marquee-container {
    width: var(--single-list-width);
    max-width: 100%;
    margin-inline: auto;
    &:hover .marquee {
      animation-play-state: paused;
      transition-duration: 0.8s;
    }
  }
  .marquee {
    --logo-padding: var(--space-s);
    --list-height: var(--logo-list-height, 10rem);
    --animation-speed: var(--logo-animation-speed, 15s);
    position: relative;
    width: var(--single-list-width);
    display: flex;
    gap: 0;
    transform: translate3d(0, 0, 0);
    animation: marquee var(--animation-speed) linear infinite;
    animation-play-state: paused;
    &.play {
      animation-play-state: running;
    }
    @media (prefers-reduced-motion: reduce) {
      animation-play-state: paused !important;
    }
  }
  .logos {
    display: flex;
    width: var(--single-list-width);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    li {
      .icon-wrapper {
        width: 100%;
      }
      svg {
        stroke: var(--color-text);
        stroke-width: 1px;
        fill: none;
        width: 100%;
        height: 100%;
        transition: stroke 0.5s ease-in-out;
        * {
          fill: none;
          stroke: var(--color-text);
          stroke-width: 1px;
        }
      }
      a:hover svg {
        stroke: var(--color-primary);
        * {
          stroke: var(--color-primary);
        }
      }
    }
    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      border: none;
      padding: 0 var(--logo-padding);
    }
    a:hover {
      text-decoration: none;
    }
    img {
      filter: grayscale(100%);
      opacity: 0.5;
      transition: filter 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }
    img:hover {
      filter: grayscale(0);
      opacity: 1;
    }
    .logo-title {
      font-size: var(--font-p);
      text-align: center;
    }
  }
  .is-reverse .logos-wrapper.play {
    animation-direction: reverse;
  }
}
.dark-theme .logos-list .content {
  .mask:has(.play)::before {
    background-image:
      linear-gradient(
        to right,
        rgb(26 26 26 / 100%) 0%,
        rgb(26 26 26 / 95%) 20%,
        rgb(26 26 26 / 80%) 40%,
        rgb(26 26 26 / 40%) 60%,
        rgb(26 26 26 / 10%) 80%,
        transparent 100%);
  }
  .mask:has(.play)::after {
    background-image:
      linear-gradient(
        to right,
        transparent 0%,
        rgb(26 26 26 / 10%) 20%,
        rgb(26 26 26 / 40%) 40%,
        rgb(26 26 26 / 80%) 60%,
        rgb(26 26 26 / 95%) 80%,
        rgb(26 26 26 / 100%) 100%);
  }
}
.section-wrapper {
  .media-image {
    &.content {
      --threshold: 50rem;
      column-gap: 0;
      container-type: inline-size;
      .text {
        background-color: var(--glass-background);
        box-shadow: var(--glass-box-shadow);
        backdrop-filter: var(--glass-backdrop-filter);
        border: var(--glass-border);
        border-radius: var(--glass-border-radius);
        padding: var(--space-s-l);
        overflow: hidden;
        position: relative;
        top: var(--space-s-m);
        left: -1rem;
      }
      .image {
        overflow: hidden;
        border-radius: var(--glass-border-radius);
      }
      @container (max-width: 50rem) {
        .text {
          left: 0;
        }
      }
      &.is-reverse {
        .text {
          left: 0;
          top: var(--space-s-m);
        }
        .image {
          top: -var(--space-s-m);
          left: -1rem;
        }
        @container (max-width: 50rem) {
          .image {
            left: 0;
          }
        }
      }
    }
  }
  &.with-background-image {
    &.in-container .background-image {
      border-radius: var(--glass-border-radius);
    }
    .media-image.content {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 100%;
      max-width: var(--wrapper-max-width, 85rem);
      padding-left: var(--gutter);
      padding-right: var(--gutter);
      .text {
        max-width: 50%;
        top: auto;
        bottom: calc(var(--space-s-m) * -1);
      }
      .image {
        display: none;
      }
    }
  }
}
.slider {
  .slider-wrapper {
    position: relative;
    height: clamp(30rem, 35rem, 40rem);
    margin-block-end: var(--space-2xl);
    container-type: inline-size;
    &:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }
  .slides {
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1;
    height: 100%;
    list-style: none;
    overflow: hidden;
    li {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform: translateX(100%);
      transition: transform 0.6s ease-in-out;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
      grid-template-rows: 1fr;
      @container (max-width: 40rem) {
        grid-template-rows: 1fr 1fr;
      }
      .image {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
      .slide-content {
        padding: 0 var(--space-s-l);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-xs-s);
        background-color: var(--color-background-light);
        .text {
          padding: 0;
        }
      }
      &.is-moving {
        z-index: 100;
      }
      &.is-selected {
        transform: translateX(0%);
      }
      &.is-reset {
        transform: translateX(100%) !important;
        transition: none !important;
      }
    }
  }
}
.testimonial {
  --threshold: 25ch !important;
  padding: var(--space-l-2xl);
  overflow: hidden;
  .quotee {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    max-width: 17rem;
    margin-inline: auto;
    text-align: center;
    .portrait {
      width: var(--space-3xl);
      height: var(--space-3xl);
      border-radius: 50%;
      overflow: hidden;
      img {
        height: auto;
      }
    }
    .name {
      font-size: var(--font-h5);
      font-weight: 500;
      line-height: 2;
    }
    .title {
      font-size: var(--font-p);
      line-height: 1.2;
    }
    .company {
      font-size: var(--font-p);
      line-height: 1.2;
    }
    .logo {
      margin-block-start: var(--space-m);
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--space-3xl) + var(--space-m));
      height: calc(var(--space-3xl) + var(--space-m));
      padding: var(--space-s);
      border-radius: 8px;
      transition: background-color 0.3s ease;
      picture {
        display: block;
        width: var(--space-3xl);
        height: var(--space-3xl);
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
  blockquote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 2 !important;
    font-size: var(--font-h2);
    font-style: italic;
    max-width: 40ch;
    margin: 0;
    text-align: center;
    p {
      font-size: inherit;
    }
  }
}
.dark-theme .testimonial .quotee .logo {
  background-color: rgb(255 255 255 / 15%);
}
.text-only {
  .content {
    display: block;
  }
  .text {
    max-width: clamp(45ch, 65ch, 80ch);
    margin-inline: auto;
    h1,
    h2,
    h3,
    .sub-title {
      margin-bottom: var(--space-s);
      & + div {
        margin-top: 0;
      }
    }
    pre {
      margin: 2em 0;
    }
    .ctas {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: var(--space-m-l);
      * {
        margin: 0;
      }
    }
  }
}
code[class*=language-],
pre[class*=language-] {
  color: var(--code-text);
  background: var(--code-bg);
  font-family:
    Consolas,
    Monaco,
    "Andale Mono",
    "Ubuntu Mono",
    monospace;
  font-size: 0.8em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}
pre[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
code[class*=language-] ::-moz-selection {
  text-shadow: none;
  background: var(--code-selection-bg);
}
pre[class*=language-]::selection,
pre[class*=language-] ::selection,
code[class*=language-]::selection,
code[class*=language-] ::selection {
  text-shadow: none;
  background: var(--code-selection-bg);
}
@media print {
  code[class*=language-],
  pre[class*=language-] {
    text-shadow: none;
  }
}
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}
:not(pre) > code[class*=language-],
pre[class*=language-] {
  border: 1px solid var(--color-border-light);
}
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--token-comment);
}
.token.punctuation {
  color: var(--token-punctuation);
}
.token.namespace {
  opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--token-property);
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--token-selector);
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--token-operator);
}
.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--token-atrule);
}
.token.function,
.token.class-name {
  color: var(--token-function);
}
.token.regex,
.token.important,
.token.variable {
  color: var(--token-regex);
}
.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}