/* ----------------------------------------------------------------------------
DO NOT EDIT DIRECTLY

This is nativestartCSS by Sanico Software.

Please override global values in a file called base.css, refer to the docs.

Version: v1.0.1

All code and all related items are the intellectual property
of Diribulous PTY LTD - Sanico Software

---------------------------------------------------------------------------- */
@layer reset, theme, base, components;

/* ----------------------------------------------------------------------------
Recommended Media Queries
break-sm-x1: 40rem (640px) - @media (width >= 40rem) { ... }
break-md: 48rem (768px) - @media (width >= 48rem) { ... }
break-lg-x1: 64rem (1024px) - @media (width >= 64rem) { ... }
break-lg-x2: 80rem (1280px) - @media (width >= 80rem) { ... }
---------------------------------------------------------------------------- */

@layer theme {
  :root {
    /* --------------------------------------------------
    Fonts and Typography
    ----------------------------------------------------- */
    /* font family */
    --default-font-header:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", arial, sans-serif;
    --default-font-body:
      system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", arial, sans-serif;

    --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.8rem);
    --font-size-sm-x3: 70%;
    --font-size-sm-x2: 80%;
    --font-size-sm-x1: 90%;
    --font-size-md: 100%;
    --font-size-lg-x1: 115%;
    --font-size-lg-x2: 130%;
    --font-size-lg-x3: 145%;
    --font-size-lg-x4: 160%;
    --font-size-lg-x5: 175%;

    --default-font-weight: var(--font-weight-normal);
    --font-weight-lighter: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semi-bold: 500;
    --font-weight-bold: 700;
    --font-weight-bolder: 800;
    --font-weight-boldest: 900;
    --font-weight-full: 1000;

    --default-line-height: var(--line-height-normal);
    --line-height-tightest: 1.1;
    --line-height-tighter: 1.25;
    --line-height-tight: 1.375;
    --line-height-normal: 1.5;
    --line-height-loose: 1.65;
    --line-height-looser: 1.7;
    --line-height-loosest: 2;

    --letter-spacing-tightest: -0.1em;
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    --underline-offset-0: 0px;
    --underline-offset-1: 1px;
    --underline-offset-2: 2px;
    --underline-offset-3: 4px;
    --underline-offset-4: 8px;

    /* --------------------------------------------------
    Colors
    ----------------------------------------------------- */
    /* shades with lch values */
    --shade-0: 97% calc(c / 16) h;
    --shade-1: 94% calc(c / 4) h;
    --shade-2: 88% c h;
    --shade-3: 70% c h;
    --shade-4: 60% c h;
    --shade-5: 50% c h;
    --shade-6: 40% c h;
    --shade-7: 30% c h;
    --shade-8: 22% calc(c / 1.5) h;
    --shade-9: 18% calc(c / 2) h;

    /* source colors */
    --default-color-neutral: oklch(80% 0.01 300deg);
    --default-color-primary: oklch(0.5754 0.0574 244.63);
    --default-color-secondary: oklch(0.7986 0.0581 92.91);

    /* common colors */
    --color-white: oklch(1 0 0);
    --color-black: oklch(0 0 0);

    --color-neutral-0: oklch(from var(--default-color-neutral) var(--shade-0));
    --color-neutral-1: oklch(from var(--default-color-neutral) var(--shade-1));
    --color-neutral-2: oklch(from var(--default-color-neutral) var(--shade-2));
    --color-neutral-3: oklch(from var(--default-color-neutral) var(--shade-3));
    --color-neutral-4: oklch(from var(--default-color-neutral) var(--shade-4));
    --color-neutral-5: oklch(from var(--default-color-neutral) var(--shade-5));
    --color-neutral-6: oklch(from var(--default-color-neutral) var(--shade-6));
    --color-neutral-7: oklch(from var(--default-color-neutral) var(--shade-7));
    --color-neutral-8: oklch(from var(--default-color-neutral) var(--shade-8));
    --color-neutral-9: oklch(from var(--default-color-neutral) var(--shade-9));

    --color-primary-0: oklch(from var(--default-color-primary) var(--shade-0));
    --color-primary-1: oklch(from var(--default-color-primary) var(--shade-1));
    --color-primary-2: oklch(from var(--default-color-primary) var(--shade-2));
    --color-primary-3: oklch(from var(--default-color-primary) var(--shade-3));
    --color-primary-4: oklch(from var(--default-color-primary) var(--shade-4));
    --color-primary-5: oklch(from var(--default-color-primary) var(--shade-5));
    --color-primary-6: oklch(from var(--default-color-primary) var(--shade-6));
    --color-primary-7: oklch(from var(--default-color-primary) var(--shade-7));
    --color-primary-8: oklch(from var(--default-color-primary) var(--shade-8));
    --color-primary-9: oklch(from var(--default-color-primary) var(--shade-9));

    --color-secondary-0: oklch(
      from var(--default-color-secondary) var(--shade-0)
    );
    --color-secondary-1: oklch(
      from var(--default-color-secondary) var(--shade-1)
    );
    --color-secondary-2: oklch(
      from var(--default-color-secondary) var(--shade-2)
    );
    --color-secondary-3: oklch(
      from var(--default-color-secondary) var(--shade-3)
    );
    --color-secondary-4: oklch(
      from var(--default-color-secondary) var(--shade-4)
    );
    --color-secondary-5: oklch(
      from var(--default-color-secondary) var(--shade-5)
    );
    --color-secondary-6: oklch(
      from var(--default-color-secondary) var(--shade-6)
    );
    --color-secondary-7: oklch(
      from var(--default-color-secondary) var(--shade-7)
    );
    --color-secondary-8: oklch(
      from var(--default-color-secondary) var(--shade-8)
    );
    --color-secondary-9: oklch(
      from var(--default-color-secondary) var(--shade-9)
    );

    /* default colors used in website */
    --default-color-text: var(--color-black);
    --default-color-bg: var(--color-white);
    --default-color-bg-dark: var(--color-neutral-8);
    --default-lch-shadow: 0.2679 0.003 264.51;

    /* ---------------------------------------------------------------------------
  borders
  --------------------------------------------------------------------------- */
    --border-radius-1: 2px;
    --border-radius-2: 5px;
    --border-radius-3: 1rem;
    --border-radius-4: 2rem;
    --border-radius-5: 4rem;
    --border-radius-round: 9999px;

    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-3: 5px;
    --border-width-4: 10px;
    --border-width-5: 25px;

    /* --------------------------------------------------
    Shadows
    ----------------------------------------------------- */
    --default-shadow-strength: 1%;
    --default-shadow-strength-3: calc(var(--default-shadow-strength) + 2%);
    --default-shadow-strength-4: calc(var(--default-shadow-strength) + 3%);
    --default-shadow-strength-5: calc(var(--default-shadow-strength) + 4%);
    --default-shadow-strength-6: calc(var(--default-shadow-strength) + 5%);
    --default-shadow-strength-7: calc(var(--default-shadow-strength) + 6%);
    --default-shadow-strength-8: calc(var(--default-shadow-strength) + 7%);
    --default-shadow-strength-10: calc(var(--default-shadow-strength) + 9%);

    --shadow-1: 0 1px 2px -1px
      oklch(var(--default-lch-shadow) / var(--default-shadow-strength-10));
    --shadow-2:
      0 3px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 7px 14px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6));
    --shadow-3:
      0 -1px 3px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 1px 2px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 2px 5px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 4px 12px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 12px 15px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    --shadow-4:
      0 -2px 5px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 1px 1px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 2px 2px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 5px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 9px 9px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 16px 16px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7));
    --shadow-5:
      0 -1px 2px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 2px 1px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 5px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 10px 10px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 20px 20px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 40px 40px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    --shadow-6:
      0 -1px 2px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 3px 2px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 7px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4)),
      0 12px 10px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 22px 18px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 41px 33px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-7)),
      0 100px 80px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));

    /* --------------------------------------------------
    Lengths and Containers
    ----------------------------------------------------- */
    --length-0: 0rem;
    --length-0-5: 0.125rem;
    --length-1: 0.25rem;
    --length-1-5: 0.375rem;
    --length-2: 0.5rem;
    --length-2-5: 0.625rem;
    --length-3: 0.75rem;
    --length-3-5: 0.875rem;
    --length-4: 1rem;
    --length-5: 1.25rem;
    --length-6: 1.5rem;
    --length-7: 1.75rem;
    --length-8: 2rem;
    --length-9: 2.25rem;
    --length-10: 2.5rem;
    --length-11: 2.75rem;
    --length-12: 3rem;
    --length-14: 3.5rem;
    --length-16: 4rem;
    --length-20: 5rem;
    --length-24: 6rem;
    --length-28: 7rem;
    --length-32: 8rem;
    --length-36: 9rem;
    --length-40: 10rem;
    --length-44: 11rem;
    --length-48: 12rem;
    --length-52: 13rem;
    --length-56: 14rem;
    --length-60: 15rem;
    --length-64: 16rem;
    --length-72: 18rem;
    --length-80: 20rem;
    --length-96: 24rem;

    --max-reach-sm-x4: 16rem;
    --max-reach-sm-x3: 18rem;
    --max-reach-sm-x2: 20rem;
    --max-reach-sm-x1: 24rem;
    --max-reach-md: 28rem;
    --max-reach-lg-x1: 32rem;
    --max-reach-lg-x2: 36rem;
    --max-reach-lg-x3: 42rem;
    --max-reach-lg-x4: 48rem;
    --max-reach-lg-x5: 56rem;
    --max-reach-lg-x6: 64rem;
    --max-reach-lg-x7: 72rem;
    --max-reach-lg-x8: 80rem;

    /* --------------------------------------------------
    General
    ----------------------------------------------------- */
    --space-sm-x4: 0.2em;
    --space-sm-x3: 0.4em;
    --space-sm-x2: 0.6em;
    --space-sm-x1: 0.8em;
    --space-md: 1em;
    --space-lg-x1: 1.5em;
    --space-lg-x2: 2em;
    --space-lg-x3: 3em;
    --space-lg-x4: 4em;
    --space-lg-x5: 5em;

    --z-0: 0;
    --z-1: 1;
    --z-2: 2;
    --z-3: 3;
    --z-4: 4;
    --z-5: 5;
    --z-important: 2147483647;

    /* --------------------------------------------------
    Animations
    ----------------------------------------------------- */
    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
    --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);

    --animation-fade-in: fade-in 0.5s var(--ease-3);
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-fade-out: fade-out 0.5s var(--ease-3);
    --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
    --animation-scale-up: scale-up 0.5s var(--ease-3);
    --animation-scale-down: scale-down 0.5s var(--ease-3);
    --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
    --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
    --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
    --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
    --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
    --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
    --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
    --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
    --animation-shake-x: shake-x 0.75s var(--ease-out-5);
    --animation-shake-y: shake-y 0.75s var(--ease-out-5);
    --animation-shake-z: shake-z 1s var(--ease-in-out-3);
    --animation-spin: spin 2s linear infinite;
    --animation-ping: ping 5s var(--ease-out-3) infinite;
    --animation-blink: blink 1s var(--ease-out-3) infinite;
    --animation-float: float 3s var(--ease-in-out-3) infinite;
    --animation-bounce: bounce 2s var(--ease-elastic-in-out-2) infinite;
    --animation-pulse: pulse 2s var(--ease-out-3) infinite;
  }

  @media (min-width: 48em) {
    :root {
      --font-size-lg-x2: 175%;
      --font-size-lg-x3: 200%;
      --font-size-lg-x4: 225%;
      --font-size-lg-x5: 250%;
    }
  }

  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }

  @keyframes fade-in-bloom {
    0% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(2) blur(10px);
    }
    100% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }
  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes fade-out-bloom {
    100% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(2) blur(10px);
    }
    0% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }

  @keyframes scale-up {
    to {
      transform: scale(1.25);
    }
  }
  @keyframes scale-down {
    to {
      transform: scale(0.75);
    }
  }
  @keyframes slide-out-up {
    to {
      transform: translateY(-100%);
    }
  }
  @keyframes slide-out-down {
    to {
      transform: translateY(100%);
    }
  }
  @keyframes slide-out-right {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes slide-out-left {
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes slide-in-up {
    from {
      transform: translateY(100%);
    }
  }
  @keyframes slide-in-down {
    from {
      transform: translateY(-100%);
    }
  }
  @keyframes slide-in-right {
    from {
      transform: translateX(-100%);
    }
  }
  @keyframes slide-in-left {
    from {
      transform: translateX(100%);
    }
  }
  @keyframes shake-x {
    0%,
    100% {
      transform: translateX(0%);
    }
    20% {
      transform: translateX(-5%);
    }
    40% {
      transform: translateX(5%);
    }
    60% {
      transform: translateX(-5%);
    }
    80% {
      transform: translateX(5%);
    }
  }
  @keyframes shake-y {
    0%,
    100% {
      transform: translateY(0%);
    }
    20% {
      transform: translateY(-5%);
    }
    40% {
      transform: translateY(5%);
    }
    60% {
      transform: translateY(-5%);
    }
    80% {
      transform: translateY(5%);
    }
  }
  @keyframes shake-z {
    0%,
    100% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(-2deg);
    }
    40% {
      transform: rotate(2deg);
    }
    60% {
      transform: rotate(-2deg);
    }
    80% {
      transform: rotate(2deg);
    }
  }
  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes ping {
    90%,
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  @keyframes float {
    50% {
      transform: translateY(-25%);
    }
  }
  @keyframes bounce {
    25% {
      transform: translateY(-20%);
    }
    40% {
      transform: translateY(-3%);
    }
    0%,
    60%,
    100% {
      transform: translateY(0);
    }
  }
  @keyframes pulse {
    50% {
      transform: scale(0.9, 0.9);
    }
  }
}

@layer base {
  html {
    font-size: 16px;
  }

  body {
    background-color: var(--default-color-bg);
    color: var(--default-color-text);
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-family: var(--default-font-body);
    font-weight: var(--default-font-weight);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--default-font-header);
  }
}

@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  html,
  body,
  div,
  span,
  applet,
  button,
  input,
  select,
  textarea,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    min-width: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section {
    display: block;
  }

  body {
    line-height: 1;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  blockquote,
  q {
    quotes: none;
  }

  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: none;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  img,
  svg {
    display: block;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

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

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }

  /* Reset link */
  a {
    color: inherit;
    text-decoration: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }
}
@layer base {
  html {
    /* Taken from the logo */
    --default-color-primary: oklch(48.86% 0.231 292.89deg);

    /* Taken from the Sanico Kilobites (blog) logo */
    --default-color-secondary: oklch(75.15% 0.2234 143.64deg);
    --default-color-bg: var(--color-primary-0);
    --default-font-size: clamp(1rem, calc(15px + 0.390625vw), 1.6rem);
    --default-color-yellow: oklch(79.5% 0.184 86.05deg);
    --color-yellow-0: oklch(from var(--default-color-yellow) var(--shade-0));
    --color-yellow-1: oklch(from var(--default-color-yellow) var(--shade-1));
    --color-yellow-2: oklch(from var(--default-color-yellow) var(--shade-2));
    --color-yellow-3: oklch(from var(--default-color-yellow) var(--shade-3));
    --color-yellow-4: oklch(from var(--default-color-yellow) var(--shade-4));
    --color-yellow-5: oklch(from var(--default-color-yellow) var(--shade-5));
    --color-yellow-6: oklch(from var(--default-color-yellow) var(--shade-6));
    --color-yellow-7: oklch(from var(--default-color-yellow) var(--shade-7));
    --color-yellow-8: oklch(from var(--default-color-yellow) var(--shade-8));
    --color-yellow-9: oklch(from var(--default-color-yellow) var(--shade-9));
    --default-color-red: oklch(60% 0.1776 22.24deg);
    --color-red-0: oklch(from var(--default-color-red) var(--shade-0));
    --color-red-1: oklch(from var(--default-color-red) var(--shade-1));
    --color-red-2: oklch(from var(--default-color-red) var(--shade-2));
    --color-red-3: oklch(from var(--default-color-red) var(--shade-3));
    --color-red-4: oklch(from var(--default-color-red) var(--shade-4));
    --color-red-5: oklch(from var(--default-color-red) var(--shade-5));
    --color-red-6: oklch(from var(--default-color-red) var(--shade-6));
    --color-red-7: oklch(from var(--default-color-red) var(--shade-7));
    --color-red-8: oklch(from var(--default-color-red) var(--shade-8));
    --color-red-9: oklch(from var(--default-color-red) var(--shade-9));
    --color-dark-gradient: linear-gradient(
      to bottom right,
      var(--color-primary-8),
      var(--color-primary-5)
    );
    --color-dark-gradient-secondary: linear-gradient(
      to bottom right,
      var(--color-secondary-8),
      var(--color-secondary-5)
    );
    --transition-duration-lg-x1: 500ms;
    --transition-duration-md: 300ms;
    --transition-duration-sm-x1: 150ms;
    --font-family-code:
      ui-monospace, "Cascadia Code", "Source Code Pro", menlo, consolas,
      "DejaVu Sans Mono", monospace;
  }

  html:has(dialog[open]) {
    overflow: hidden;
  }

  /* Taken from Tailwind CSS */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  /* Theme specific edit */
  #nav-header {
    display: contents;
  }

  @keyframes card-marquee-right {
    0% {
      translate: 0;
    }

    100% {
      translate: calc(-50% - 0.5 * var(--gap));
    }
  }

  @keyframes card-marquee-left {
    0% {
      translate: calc(-50% - 0.5 * var(--gap));
    }

    100% {
      translate: 0;
    }
  }
}
@layer components {
  .about-letter {
    position: relative;
    width: 100%;
    max-width: var(--max-reach-lg-x7);
    margin-inline: auto;
    margin-block-end: var(--space-lg-x3);
  }

  .about-letter__container {
    h2 {
      justify-content: center;
    }
  }

  .about-letter__body {
    padding: var(--space-md);
    border-radius: var(--border-radius-2);
    border: var(--border-width-2) solid var(--color-neutral-2);
    line-height: var(--line-height-loose);
    background-color: var(--color-white);
    position: relative;

    > p {
      margin-block-end: var(--space-sm-x2);
    }

    > p:first-child::first-letter {
      float: left;
      margin-inline-end: 0.1em;
      font-size: 300%;
      font-weight: var(--font-weight-boldest);
      line-height: var(--line-height-tightest);
    }
  }

  .about-letter__body-shadow {
    position: absolute;
    bottom: calc(-1 * var(--length-12));
    left: 50%;
    translate: -50%;
    width: 80%;
    height: var(--length-20);
    background: radial-gradient(
      ellipse at top,
      oklch(from var(--color-black) l c h / 25%) 0%,
      oklch(from var(--color-black) l c h / 0%) 70%
    );
  }

  .about-letter__letter-ending {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .about-letter__author {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-boldest);
  }

  .about-letter__signature {
    width: var(--length-32);
    height: auto;
  }

  .about-letter__profile-image {
    aspect-ratio: 1 / 1;
    width: calc(var(--length-16) + 15%);
    height: calc(var(--length-16) + 15%);
    border: var(--border-width-2) solid var(--color-neutral-2);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .about-letter__signature {
      width: var(--length-44);
    }

    .about-letter__profile-image {
      width: var(--length-40);
      height: var(--length-40);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .about-letter__body {
      container-type: inline-size;
      column-count: 2;
      column-gap: var(--space-lg-x2);
    }

    .about-letter__profile-image {
      width: calc(var(--length-16) + 15%);
      height: calc(var(--length-16) + 15%);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .about-letter__profile-image {
      width: calc(var(--length-16) + 25%);
      height: calc(var(--length-16) + 25%);
    }

    .about-letter__body {
      padding: var(--space-lg-x1);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .about-sanico-arrows {
    overflow: clip;
    background: var(--color-dark-gradient);
    padding-block-start: var(--space-lg-x3);
    color: var(--color-white);
  }

  .about-sanico-arrows__container {
    position: relative;
  }

  .about-sanico-arrows__grid {
    margin-inline: auto;
    display: grid;
    padding-block-end: var(--length-96);
  }

  .about-sanico-arrows__content {
    display: grid;
    gap: var(--space-sm-x1);
    align-self: center;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-md);
  }

  .about-sanico-arrows__title {
    text-align: left;
    font-size: var(--font-size-lg-x3);
    line-height: var(--line-height-tighter);
    font-weight: var(--font-weight-bold);
    text-wrap: pretty;
    padding-block-end: var(--space-sm-x4);
  }

  .about-sanico-arrows__description {
    text-align: left;
    color: var(--color-neutral-1);
    font-size: var(--font-size-lg-x1);
    margin-block-end: var(--space-sm-x3);
    line-height: var(--line-height-loose);
    width: min(100%, var(--max-reach-lg-x2));
  }

  .about-sanico-arrows__image-wrapper {
    position: absolute;
    bottom: calc(var(--length-72) * -1);
    right: 50%;
    width: max-content;
    translate: 50%;
  }

  .about-sanico-arrows__image {
    width: var(--length-96);
    height: auto;
    object-fit: contain;
  }

  .about-sanico-arrows__overlay {
    position: absolute;
    top: 0;
    width: 100%;
    fill: var(--color-white);
    text-align: center;
  }

  .about-sanico-arrows__label {
    position: absolute;
  }

  .about-sanico-arrows__label--left {
    left: 0;
    top: var(--space-md);
  }

  .about-sanico-arrows__label--right {
    right: var(--space-sm-x2);
    top: calc(-1 * var(--space-sm-x3));
  }

  .about-sanico-arrows__scribble {
    width: var(--length-20);
    height: var(--length-20);
  }

  .about-sanico-arrows__scribble--left {
    rotate: 24deg;
    margin-inline-start: calc(var(--space-sm-x4) * -1);
  }

  .about-sanico-arrows__scribble--right {
    rotate: -24deg;
    scale: -1 1;
  }

  .about-sanico-arrows__name-card {
    position: absolute;
    top: calc(var(--length-16) * -1);
    width: max-content;
  }

  .about-sanico-arrows__name-card--left {
    left: var(--length-14);
  }

  .about-sanico-arrows__name-card--right {
    right: var(--length-14);
  }

  .about-sanico-arrows__name {
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-bold);
  }

  .about-sanico-arrows__role {
    font-size: var(--font-size-sm-x2);
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48em) {
    .about-sanico-arrows__grid {
      margin-block-start: calc(var(--space-md) * -1);
      min-height: 45rem;
      max-width: var(--max-reach-lg-x5);
      grid-template-columns: 1fr min-content;
      align-items: end;
      gap: var(--space-lg-x3);
      padding-block-end: 0;
    }

    .about-sanico-arrows__content {
      height: fit-content;
      padding-block-end: var(--space-lg-x5);
      padding-inline-start: var(--space-lg-x1);
      padding-inline-end: 0;
    }

    .about-sanico-arrows__image-wrapper {
      position: static;
      margin-inline-end: var(--space-sm-x1);
      translate: 0 var(--length-12);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64em) {
    .about-sanico-arrows {
      padding-block-start: var(--length-32);
    }

    .about-sanico-arrows__grid {
      max-width: var(--max-reach-lg-x8);
      margin-inline: auto;
      gap: var(--length-24);
    }

    .about-sanico-arrows__content {
      margin-block: auto;
      gap: var(--space-sm-x2);
      padding-inline-start: var(--space-md);
    }

    .about-sanico-arrows__name-card--left {
      left: calc(var(--length-10) * -1);
      top: calc(-1 * var(--length-20));
    }

    .about-sanico-arrows__name-card--right {
      right: calc(var(--length-14) * -1);
      top: var(--length-20);
    }

    .about-sanico-arrows__image-wrapper {
      margin-inline-end: var(--length-20);
    }

    .about-sanico-arrows__image {
      width: 28rem;
    }

    .about-sanico-arrows__label--left {
      left: calc(var(--space-sm-x1) * -1);
      top: var(--length-32);
    }

    .about-sanico-arrows__scribble--left {
      rotate: 6deg;
    }

    .about-sanico-arrows__scribble--right {
      scale: 1 1;
      rotate: 180deg;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80em) {
    .about-sanico-arrows {
      padding-block-start: var(--length-40);
    }

    .about-sanico-arrows__container {
      margin-inline: auto;
    }

    .about-sanico-arrows__title {
      width: 100%;
    }

    .about-sanico-arrows__grid {
      max-width: calc(var(--max-reach-lg-x8) + 10rem);
      min-height: auto;
      gap: var(--length-32);
    }

    .about-sanico-arrows__content {
      padding-inline-start: var(--space-sm-x1);
    }

    .about-sanico-arrows__image-wrapper {
      margin-inline-end: var(--length-24);
    }

    .about-sanico-arrows__image {
      width: 32rem;
    }

    .about-sanico-arrows__name-card--left {
      left: calc(var(--length-14) * -1);
      top: calc(-1 * var(--length-28));
    }

    .about-sanico-arrows__name-card--right {
      right: calc(var(--length-24) * -1);
      top: var(--length-20);
    }
  }
}
@layer components {
  .about-sanico {
    display: contents;
  }

  .about-sanico__header-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x1);
    padding-block-start: var(--space-lg-x3);
    padding-block-end: var(--space-lg-x2);
  }

  .about-sanico__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 30%,
      black 100%
    );
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .about-sanico {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    .about-sanico__header-wrapper {
      padding-block: var(--space-lg-x3);
      margin-block: auto;
    }

    .about-sanico__image {
      height: 100%;
      max-height: var(--max-reach-md);
      aspect-ratio: unset;
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 30%,
        black 90%,
        transparent 100%
      );
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .about-video {
    max-width: var(--max-reach-lg-x4);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .about-video__decoration-fragment-container {
    max-width: var(--max-reach-lg-x6);
    padding: var(--space-lg-x3) var(--space-md);
    position: absolute;
    left: 50%;
    translate: -50%;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .about-video__open-button {
    position: relative;
    margin-inline: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--border-radius-2);
    box-shadow: var(--shadow-4);
    transition: all 300ms ease-in-out;
    cursor: pointer;

    img {
      aspect-ratio: 16 / 9;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .about-video__open-button-svg {
    position: absolute;
    left: var(--length-4);
    top: var(--length-4);
    width: var(--length-16);
    height: var(--length-16);
    fill: var(--color-white);
    transition: all 300ms ease-in-out;
  }

  @media (any-hover: hover) {
    .about-video__video-container:hover {
      .about-video__open-button {
        translate: 0 calc(-1 * var(--length-2));
        scale: 1.03;
        box-shadow: var(--shadow-5);
      }

      .about-video__open-button-svg {
        translate: 0 calc(-1 * var(--length-1));
      }
    }
  }

  .about-video__video-container:active {
    .about-video__open-button {
      translate: 0 0;
      scale: 1;
      box-shadow: var(--shadow-3);
    }

    .about-video__open-button-svg {
      translate: 0 0;
    }
  }

  .about-video__modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-important);
    width: 100vw;
    height: 100vh;
  }

  .about-video__modal-click-away-box {
    position: absolute;
    inset: 0;
    background-color: oklch(from var(--color-white) l c h / 90%);
  }

  .about-video__modal-iframe-container {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    aspect-ratio: 16 / 9;
    width: 85%;
    height: auto;
    overflow: hidden;
    max-width: var(--max-reach-lg-x6);
    border-radius: var(--border-radius-2);
    box-shadow: var(--shadow-4);
    background-color: var(--color-black);

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .about-video__text-container {
    position: relative;
    text-align: center;
    color: var(--color-white);
  }

  .about-video__title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tighter);
  }

  @media (any-hover: hover) {
    .about-video__title-button:hover {
      scale: 0.95;
      color: var(--color-primary-1);
    }
  }

  .about-video__title-button {
    color: var(--color-white);
    cursor: pointer;
    transition: all 200ms ease-in-out;

    &:active {
      scale: 0.9;
      color: var(--color-primary-2);
    }

    svg {
      display: inline-block;
      margin-block-end: 0.15em;
      vertical-align: middle;
      width: var(--length-6);
      height: var(--length-6);
      fill: currentcolor;
    }
  }

  .about-video__duration {
    font-size: var(--font-size-sm-x1);
  }

  .about-video__body-text {
    padding-top: var(--space-sm-x1);
  }

  .about-video__decoration-fragment {
    position: absolute;
    width: var(--length-32);
    height: 80%;
    mask-size: contain;
    mask-repeat: no-repeat;
    background-repeat: no-repeat;
  }

  .about-video__decoration-fragment--left {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88.443 204.052'%3E%3Cpath d='m732.3 600.49 22.23-10.5-22.23-8.58z' transform='translate(-560.002 -288.776)scale(.82071)'/%3E%3Cpath d='m781.65 582.19 39.03 15.42v-63.2l-39.03-15.18z' transform='translate(-641.508 -356.248)scale(.82071)'/%3E%3Cpath d='m774.54 478.23-46.95 20.05 38.14 15.07 43.84-20.56z' transform='translate(-575.98 -392.488)scale(.82071)'/%3E%3C/svg%3E");
    background-image: linear-gradient(
      to bottom,
      oklch(from var(--color-white) l c h / 50%) 0%,
      oklch(from var(--color-white) l c h / 10%) 100%
    );
    left: var(--length-4);
    top: var(--length-8);
  }

  .about-video__decoration-fragment--right {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92.305 209.401'%3E%3Cpath d='m767.33 622.41 46.95-20.05-38.14-15.07-43.84 20.56z' transform='translate(-601.006 -301.417)scale(.82071)'/%3E%3Cpath d='M760.22 581.41v-62.96l-39.03-15.42v63.2z' transform='translate(-531.616 -343.477)scale(.82071)'/%3E%3Cpath d='m787.34 510.65 22.23 8.58v-19.08z' transform='translate(-636.798 -410.478)scale(.82071)'/%3E%3C/svg%3E");
    mask-position: bottom;
    background-image: linear-gradient(
      to top,
      oklch(from var(--color-white) l c h / 15%) 0%,
      oklch(from var(--color-white) l c h / 5%) 100%
    );
    bottom: var(--length-8);
    right: var(--length-4);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .about-video__title {
      svg {
        width: var(--length-8);
        height: var(--length-8);
      }
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .about-video__decoration-fragment {
      width: var(--length-52);
    }
  }
}
@layer components {
  .approach {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .approach__item {
    display: flex;
    gap: var(--space-sm-x3);
  }

  .approach__item-bullet {
    display: block;
    margin-block-start: 0.5ch;
    flex-shrink: 0;
    width: var(--length-4);
    height: var(--length-4);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .approach__item-bullet {
      width: var(--length-6);
      height: var(--length-6);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .big-tech {
    width: fit-content;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    column-gap: var(--space-lg-x1);
  }

  .big-tech__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--length-24);
    width: auto;
    max-width: var(--length-32);

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .big-tech {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .big-tech {
      column-gap: var(--space-lg-x3);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .big-tech__logo {
      height: var(--length-32);
      width: auto;
      max-width: var(--length-44);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .big-tech__logo {
      height: var(--length-44);
      width: auto;
      max-width: var(--length-52);
    }
  }
}
@layer components {
  .blog-footer {
    background-color: var(--color-white);
    padding-block-start: var(--space-lg-x3);
    padding-block-end: var(--space-lg-x5);
  }

  .blog-footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg-x1);
    max-width: var(--max-reach-lg-x5);
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  .blog-footer__image {
    width: var(--length-28);
    height: var(--length-28);
    border-radius: var(--border-radius-2);
    object-fit: cover;
    box-shadow: var(--shadow-3);
  }

  .blog-footer__sanico-kilobytes-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg-x4);
  }

  .blog-footer__logo-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    align-items: center;
    margin-block-start: var(--space-sm-x1);
  }

  .blog-footer__logo-text-container {
    text-align: center;
  }

  .blog-footer__logo-svg {
    height: var(--length-20);
    width: auto;
  }

  .blog-footer__logo-title {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-boldest);
    color: var(--color-secondary-9);

    span {
      color: var(--color-secondary-6);
    }
  }

  .blog-footer__logo-subtitle {
    color: var(--color-secondary-9);
  }

  .blog-footer__title {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-tighter);

    span {
      color: var(--color-primary-6);
    }
  }

  .blog-footer__description {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    color: var(--color-neutral-6);
    max-width: 60ch;
  }

  .blog-footer__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-block-start: var(--space-sm-x2);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .blog-footer__logo-container {
      margin-block-start: 0;
      flex-direction: row;
      gap: var(--space-md);
    }

    .blog-footer__logo-text-container {
      text-align: left;
    }

    .blog-footer__logo-title {
      font-size: var(--font-size-lg-x4);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .blog-footer__logo-container {
      gap: var(--space-lg-x1);
    }

    .blog-footer__logo-svg {
      height: var(--length-28);
    }

    .blog-footer__image {
      width: var(--length-32);
      height: var(--length-32);
    }
  }
}
@layer components {
  .blog-list {
    display: flex;
    flex-direction: column;
  }

  .blog-list__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-lg-x5);
    border-block-end: var(--border-width-3) solid var(--color-primary-6);

    &:first-child {
      padding-block-start: var(--space-lg-x2);
    }

    &:last-child {
      border-block-end: none;
    }
  }

  .blog-list__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x2);
    text-align: center;
    width: 100%;
  }

  .blog-list__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x2);
    font-size: var(--font-size-sm-x2);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  .blog-list__avatar-image {
    width: var(--length-16);
    height: var(--length-16);
    border-radius: 100em;
    object-fit: cover;
    border: var(--border-width-2) solid var(--color-primary-3);
    transition: inherit;
  }

  .blog-list__avatar {
    transition: all 200ms ease-in-out;

    @media (any-hover: hover) {
      &:hover {
        scale: 95%;

        .blog-list__avatar-image {
          border-color: var(--color-primary-2);
          filter: brightness(105%);
        }
      }
    }

    &:active {
      scale: 90%;

      .blog-list__avatar-image {
        border-color: var(--color-primary-4);
        filter: brightness(95%);
      }
    }
  }

  .blog-list__byline {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);
    color: var(--color-neutral-6);
  }

  .blog-list__author {
    font-weight: var(--font-weight-bold);
  }

  .blog-list__title {
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
    text-align: center;
    max-width: var(--max-reach-lg-x5);
    color: var(--color-primary-8);
  }

  .blog-list__title-link {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease-in-out;

    &:hover {
      color: var(--color-primary-6);
    }
  }

  .blog-list__cover {
    width: 100%;
    max-width: var(--max-reach-lg-x5);
  }

  .blog-list__cover-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--border-radius-2);
    display: block;
  }

  .blog-list__excerpt {
    width: 100%;
  }

  .blog-list__read-more {
    display: inline-block;
    margin-block-start: var(--space-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: underline;
    text-decoration-color: oklch(from var(--color-primary-6) l c h / 50%);
    text-underline-offset: var(--underline-offset-3);
    transition: all 200ms ease-in-out;

    &:hover {
      color: var(--color-primary-6);
      text-decoration-color: oklch(from var(--color-primary-6) l c h / 75%);
    }
  }

  .blog-list__pagination {
    display: flex;
    gap: var(--space-lg-x3);
    padding-block-start: var(--space-lg-x3);
    border-block-start: var(--border-width-2) solid var(--color-primary-3);
    letter-spacing: var(--letter-spacing-wide);

    &:has(> :nth-child(1):last-child) {
      justify-content: center;
    }

    &:has(> :nth-child(2):last-child) {
      justify-content: space-between;
    }
  }

  .blog-list__pagination-link {
    display: inline-block;
    margin-block-start: var(--space-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg-x1);
    letter-spacing: var(--letter-spacing-wide);
    text-decoration: underline;
    text-decoration-color: oklch(from var(--color-primary-6) l c h / 50%);
    text-underline-offset: var(--underline-offset-3);
    transition: all 200ms ease-in-out;
    color: var(--color-primary-7);

    &:hover {
      color: var(--color-primary-6);
      text-decoration-color: oklch(from var(--color-primary-6) l c h / 75%);
      scale: 0.95;
    }
  }
}
@layer components {
  .blog-prose {
    /* Fluid typography scale — easily overridden in one place */
    --blog-prose-h1-size: var(--font-size-lg-x5);
    --blog-prose-h2-size: var(--font-size-lg-x3);
    --blog-prose-h3-size: var(--font-size-lg-x2);
    --blog-prose-h4-size: var(--font-size-md);
    --blog-prose-h5-size: var(--font-size-sm-x1);
    --blog-prose-h6-size: var(--font-size-sm-x2);
    --blog-prose-body-size: var(--font-size-md);

    /* Spacing */
    --blog-prose-gap: var(--space-lg-x1);
    --blog-prose-heading-gap: var(--space-lg-x2);
    --blog-prose-list-indent: var(--space-lg-x1);
    --blog-prose-list-item-gap: var(--space-sm-x1);
    --blog-prose-blockquote-border: var(--length-1);

    /* Measure & layout */
    --blog-prose-max-width: 56ch;
    --blog-prose-width: auto;
    --blog-prose-line-height: var(--line-height-loosest);
    --blog-prose-heading-line-height: var(--line-height-tighter);

    /* Colors */
    --blog-prose-heading-color: var(--color-primary-8);
    --blog-prose-link-color: var(--color-primary-7);
    --blog-prose-link-hover-color: var(--color-primary-8);
    --blog-prose-link-active-color: var(--color-primary-9);
    --blog-prose-link-decoration-color: var(--color-primary-3);
    --blog-prose-blockquote-border-color: var(--color-primary-3);
    --blog-prose-code-bg: var(--color-neutral-1);
    --blog-prose-strong-color: var(--color-primary-9);
    --blog-prose-em-color: var(--color-neutral-6);
    --blog-prose-list-marker-color: var(--color-primary-5);

    /* Container */
    width: var(--blog-prose-width);

    /* First/last-child margin reset */
    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }

  .blog-prose--blog {
    --blog-prose-width: min(90%, var(--blog-prose-max-width));

    margin-inline: auto;
  }

  .blog-prose--compact {
    --blog-prose-width: var(--max-reach-lg-x5);
  }

  /* Headings */
  .blog-prose h1,
  .blog-prose h2,
  .blog-prose h3,
  .blog-prose h4,
  .blog-prose h5,
  .blog-prose h6 {
    color: var(--blog-prose-heading-color);
    text-wrap: pretty;
    line-height: var(--blog-prose-heading-line-height);
  }

  .blog-prose h1 {
    font-size: var(--blog-prose-h1-size);
    font-weight: var(--font-weight-bolder);
  }

  .blog-prose h2 {
    font-size: var(--blog-prose-h2-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--blog-prose-heading-gap);
  }

  .blog-prose h3 {
    font-size: var(--blog-prose-h3-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--blog-prose-gap);
  }

  .blog-prose h4 {
    font-size: var(--blog-prose-h4-size);
    font-weight: var(--font-weight-bold);
    margin-top: var(--blog-prose-gap);
  }

  .blog-prose h5,
  .blog-prose h6 {
    font-weight: var(--font-weight-bold);
    margin-top: var(--blog-prose-gap);
  }

  .blog-prose h5 {
    font-size: var(--blog-prose-h5-size);
  }

  .blog-prose h6 {
    font-size: var(--blog-prose-h6-size);
  }

  /* Paragraphs */
  .blog-prose p {
    line-height: var(--blog-prose-line-height);
    margin-top: var(--blog-prose-gap);
  }

  /* Links */
  .blog-prose a {
    color: var(--blog-prose-link-color);
    font-weight: var(--font-weight-semi-bold);
    text-underline-offset: var(--underline-offset-3);
    text-decoration: underline;
    text-decoration-color: oklch(
      from var(--blog-prose-link-decoration-color) l c h / 50%
    );
    transition: all 200ms ease-in-out;
  }

  @media (any-hover: hover) {
    .blog-prose a:hover {
      color: var(--blog-prose-link-hover-color);
      text-decoration-color: oklch(
        from var(--blog-prose-link-decoration-color) l c h / 75%
      );
      scale: 0.95;
    }
  }

  .blog-prose a:active {
    color: var(--blog-prose-link-active-color);
    text-decoration-color: oklch(
      from var(--blog-prose-link-decoration-color) l c h / 25%
    );
    scale: 0.9;
  }

  .blog-prose a:focus-visible {
    outline: var(--border-width-2) solid var(--blog-prose-link-color);
    outline-offset: var(--underline-offset-3);
  }

  /* Strong */
  .blog-prose strong,
  .blog-prose b {
    font-weight: var(--font-weight-bolder);
    color: var(--blog-prose-strong-color);
  }

  /* Emphasis */
  .blog-prose em,
  .blog-prose i {
    color: var(--blog-prose-em-color);
    font-style: italic;
  }

  /* Lists — restore list styles removed by reset layer */
  .blog-prose ul,
  .blog-prose ol {
    list-style: revert;
    padding-inline-start: var(--blog-prose-list-indent);
    margin-top: var(--blog-prose-gap);
  }

  .blog-prose li {
    margin-top: var(--blog-prose-list-item-gap);
  }

  .blog-prose ul > li::marker,
  .blog-prose ol > li::marker {
    color: var(--blog-prose-list-marker-color);
  }

  /* Nested lists */
  .blog-prose ul ul,
  .blog-prose ul ol,
  .blog-prose ol ul,
  .blog-prose ol ol {
    margin-top: var(--blog-prose-list-item-gap);
    margin-bottom: var(--blog-prose-list-item-gap);
  }

  /* List-item paragraphs */
  .blog-prose > ul > li p,
  .blog-prose > ol > li p {
    margin-top: var(--blog-prose-list-item-gap);
    margin-bottom: var(--blog-prose-list-item-gap);
  }

  .blog-prose > ul > li > p:first-child,
  .blog-prose > ol > li > p:first-child {
    margin-top: var(--blog-prose-gap);
  }

  .blog-prose > ul > li > p:last-child,
  .blog-prose > ol > li > p:last-child {
    margin-bottom: var(--blog-prose-gap);
  }

  /* Blockquotes */
  .blog-prose blockquote {
    margin-top: var(--blog-prose-gap);
    padding-inline-start: var(--blog-prose-gap);
    border-left: var(--blog-prose-blockquote-border) solid
      var(--blog-prose-blockquote-border-color);
    font-style: normal;
  }

  .blog-prose blockquote p:first-of-type::before {
    content: open-quote;
  }

  .blog-prose blockquote p:last-of-type::after {
    content: close-quote;
  }

  /* Code blocks */
  .blog-prose pre {
    background: var(--blog-prose-code-bg);
    overflow-x: auto;
    padding: var(--space-md);
    margin-top: var(--blog-prose-gap);
  }

  /* Inline code */
  .blog-prose code {
    background: var(--blog-prose-code-bg);
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x4);
    font-family: var(--font-family-code);
    font-weight: var(--font-weight-semi-bold);
    word-break: break-all;
  }

  /* Reset inline code styles inside pre blocks */
  .blog-prose pre code {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  .blog-prose pre code::before,
  .blog-prose pre code::after {
    content: none;
  }

  /* Box-decoration-break for inline code across line breaks */
  .blog-prose p code,
  .blog-prose li code {
    box-decoration-break: clone;
  }

  /* Images — bare minimum */
  .blog-prose img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Mobile spacing tightening */
  @media (width < 40rem) {
    .blog-prose {
      --blog-prose-gap: var(--space-md);
      --blog-prose-heading-gap: var(--space-lg-x1);
    }
  }
}
@layer components {
  .book-appointment {
    max-width: min(var(--max-reach-lg-x4), 100%);
    margin-inline: auto;
  }

  .book-appointment__note {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
  }

  .book-appointment__form {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: relative;
    align-items: center;
  }

  .book-appointment__turnstile {
    max-width: 100%;
    overflow: scroll;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .book-appointment__form {
      gap: var(--space-lg-x1);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .businesses-worked-with-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 300ms ease-in-out;

    a {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: var(--space-md);
      border-radius: var(--border-radius-3);
      background-color: var(--color-primary-0);
      color: var(--color-black);
      transition: all 300ms ease-in-out;
    }
  }

  .businesses-worked-with-card--white {
    a {
      background-color: var(--color-white);
    }
  }

  .businesses-worked-with-card:has(a:active) {
    scale: 95%;

    a {
      background-color: var(--color-primary-2);
    }
  }

  @media (any-hover: hover) {
    .businesses-worked-with-card:hover {
      scale: 105%;

      a {
        background-color: var(--color-primary-1);
      }

      .businesses-worked-with-card__completed-badge {
        background-color: var(--color-secondary-6);
        rotate: 0deg;
      }
    }
  }

  .businesses-worked-with-card__completed-badge {
    position: absolute;
    top: calc(-1 * var(--space-sm-x3));
    right: calc(-1 * var(--space-sm-x3));
    background-color: var(--color-secondary-5);
    color: var(--color-white);
    border-radius: var(--border-radius-round);
    width: var(--length-16);
    height: var(--length-16);
    rotate: 15deg;
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-sm-x1);
    align-items: center;
    flex-direction: column;
    box-shadow: var(--shadow-3);
    transition: all 300ms ease-in-out;

    svg {
      width: var(--length-6);
      height: var(--length-6);
      fill: var(--color-white);
    }

    p {
      font-size: var(--font-size-sm-x3);
    }
  }

  .businesses-worked-with-card__logo {
    width: fit-content;
    max-width: var(--length-36);
    height: auto;
    max-height: var(--length-14);
    object-fit: contain;
    object-position: left;
    padding: var(--space-sm-x3);
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);
  }

  .businesses-worked-with-card__logo--dark-background {
    background-color: var(--color-black);
  }

  .businesses-worked-with-card__company-info {
    padding-block-start: var(--space-md);
    padding-block-end: var(--space-sm-x1);
  }

  .businesses-worked-with-card__company-name {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
  }

  .businesses-worked-with-card__who {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
  }

  .businesses-worked-with-card__location {
    font-size: var(--font-size-sm-x1);
    display: flex;
    align-items: center;
    gap: var(--space-sm-x4);

    svg {
      width: var(--length-7);
      height: var(--length-7);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .businesses-worked-with-card__logo {
      width: fit-content;
      max-width: var(--length-40);
      height: auto;
      max-height: var(--length-16);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .businesses-worked-with-card__completed-badge {
      width: var(--length-20);
      height: var(--length-20);

      svg {
        width: var(--length-8);
        height: var(--length-8);
      }

      p {
        font-size: var(--font-size-sm-x3);
      }
    }
  }
}
@layer components {
  .businesses-worked-with {
    overflow-x: clip;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    padding-block-start: var(--space-lg-x1);
    padding-block-end: var(--space-md);
  }

  .businesses-worked-with__list {
    display: grid;

    --gap: var(--space-md);

    gap: var(--gap);
    grid-auto-flow: column;
    width: min-content;
    animation: calc(24s * 0.5 * var(--number-projects)) linear 0s
      card-marquee-right infinite;

    &:hover,
    &:active {
      animation-play-state: paused;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* remove animation if user prefers reduced motion and allow for scrolling instead */
    .businesses-worked-with__list {
      animation: none;
    }

    .businesses-worked-with {
      overflow-x: scroll;
      padding-inline: var(--space-lg-x3);
    }

    .businesses-worked-with__project--duplicate {
      display: none;
    }
  }

  .businesses-worked-with__project {
    width: var(--length-52);
    height: 100%;
    transition: all 300ms ease-in-out;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .businesses-worked-with__project {
      width: var(--length-64);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .businesses-worked-with__list {
      grid-template-rows: repeat(2, 1fr);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .businesses-worked-with__project {
      width: var(--length-80);
    }
  }
}
@layer components {
  .button {
    --button-transition: all 200ms ease-in-out;
    --button-gap: var(--space-sm-x2);
    --button-padding: var(--space-sm-x3);
    --button-font-weight: var(--font-weight-bold);

    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--button-gap);
    border-radius: var(--border-radius-2);
    padding: var(--button-padding);
    padding-inline-start: var(
      --button-padding-inline-start,
      var(--space-sm-x2)
    );
    font-weight: var(--button-font-weight);
    transition: var(--button-transition);
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        scale: 0.95;
      }
    }

    &:active {
      scale: 0.9;
    }
  }

  /* 
  Button styles:
    - primary: primary colour as background
    - secondary: no background; primary colour as border and text colour
    - link: no background nor padding; primary colour as text colour
  */
  @media (any-hover: hover) {
    .button--primary:hover {
      background-color: var(--button-primary-color-hover);
      color: var(--button-secondary-color-hover);
    }

    .button--secondary:hover {
      border: var(--border-width-2) solid var(--button-primary-color-hover);
      color: var(--button-primary-color-hover);
    }

    .button--link:hover {
      color: var(--button-primary-color-hover);
      text-decoration-color: oklch(
        from var(--button-primary-color) l c h / 75%
      );
    }
  }

  .button--primary {
    background-color: var(--button-primary-color);
    color: var(--button-secondary-color);

    &:active {
      background-color: var(--button-primary-color-active);
      color: var(--button-secondary-color-active);
    }
  }

  .button--secondary {
    border: var(--border-width-2) solid var(--button-primary-color);
    color: var(--button-primary-color);

    &:active {
      border: var(--border-width-2) solid var(--button-primary-color-active);
      color: var(--button-primary-color-active);
    }
  }

  .button--link {
    display: block;

    --button-padding: 0;
    --button-padding-inline-start: 0;
    --button-margin-block-end: calc(
      var(--length-0-5) + var(--underline-offset-3)
    );

    /* to account for underline */
    margin-block-end: var(--button-margin-block-end);
    color: var(--button-primary-color);
    text-decoration: underline;
    text-decoration-color: oklch(from var(--button-primary-color) l c h / 50%);
    text-decoration-thickness: var(--length-0-5);
    text-underline-offset: var(--underline-offset-3);

    &:active {
      color: var(--button-primary-color-active);
      text-decoration-color: oklch(
        from var(--button-primary-color) l c h / 25%
      );
    }
  }

  .button--link-no-margin-block-end {
    --button-margin-block-end: 0;
  }

  .button--no-bold {
    --button-font-weight: var(--font-weight-normal);
  }

  .button--link-no-initial-underline {
    text-decoration-color: transparent;
  }

  /* 
  Button colour scheme definitions:
    - --primary and --secondary style variants will choose appropriate options, including for hover and active variants.
  */
  .button--light {
    --button-primary-color: var(--color-white);
    --button-primary-color-hover: var(--color-primary-0);
    --button-primary-color-active: var(--color-primary-1);
    --button-secondary-color: var(--color-primary-8);
    --button-secondary-color-hover: var(--color-primary-7);
    --button-secondary-color-active: var(--color-primary-9);
  }

  .button--middle {
    --button-primary-color: var(--color-primary-6);
    --button-primary-color-hover: var(--color-primary-5);
    --button-primary-color-active: var(--color-primary-7);
    --button-secondary-color: var(--color-white);
    --button-secondary-color-hover: var(--color-primary-0);
    --button-secondary-color-active: var(--color-primary-1);
  }

  .button--dark {
    --button-primary-color: var(--color-primary-8);
    --button-primary-color-hover: var(--color-primary-7);
    --button-primary-color-active: var(--color-primary-9);
    --button-secondary-color: var(--color-white);
    --button-secondary-color-hover: var(--color-primary-0);
    --button-secondary-color-active: var(--color-primary-1);
  }

  .button--light-green {
    --button-primary-color: var(--color-white);
    --button-primary-color-hover: var(--color-secondary-0);
    --button-primary-color-active: var(--color-secondary-1);
    --button-secondary-color: var(--color-secondary-8);
    --button-secondary-color-hover: var(--color-secondary-7);
    --button-secondary-color-active: var(--color-secondary-9);
  }

  .button--middle-green {
    --button-primary-color: var(--color-secondary-6);
    --button-primary-color-hover: var(--color-secondary-5);
    --button-primary-color-active: var(--color-secondary-7);
    --button-secondary-color: var(--color-white);
    --button-secondary-color-hover: var(--color-secondary-0);
    --button-secondary-color-active: var(--color-secondary-1);
  }

  .button--dark-green {
    --button-primary-color: var(--color-secondary-8);
    --button-primary-color-hover: var(--color-secondary-7);
    --button-primary-color-active: var(--color-secondary-9);
    --button-secondary-color: var(--color-white);
    --button-secondary-color-hover: var(--color-secondary-0);
    --button-secondary-color-active: var(--color-secondary-1);
  }

  /* Button icons */

  /* Part 1: Base styles */
  .button__icon {
    overflow: hidden;
    border-radius: var(--border-radius-2);
    padding: var(--button-padding, var(--space-sm-x3));
    transition: var(--button-transition);

    svg {
      width: var(--length-4);
      height: var(--length-4);
      transition: var(--button-transition);
      fill: currentcolor;
    }
  }

  .button__icon--larger {
    svg {
      width: var(--length-6);
      height: var(--length-6);
      transition: var(--button-transition);
      fill: currentcolor;
    }
  }

  .button--link .button__icon {
    display: inline-block;
    vertical-align: middle;
    margin-block-end: 0.15em;
    margin-inline-start: var(--space-sm-x3);
    padding-inline-end: 0.15em;
  }

  @media (any-hover: hover) {
    .button:hover .button__icon {
      translate: var(--length-0-5);

      svg {
        translate: 10%;
      }
    }
  }

  /* Part 2: Button style-specific styles */
  .button--primary .button__icon {
    background-color: var(--button-secondary-color);
    color: var(--button-primary-color);

    svg {
      fill: var(--button-primary-color);
    }
  }

  .button--secondary .button__icon {
    background-color: var(--button-primary-color);
    color: var(--button-secondary-color);

    svg {
      fill: var(--button-secondary-color);
    }
  }

  .button:active .button__icon {
    translate: var(--length-1);

    svg {
      translate: 150%;
    }
  }

  @media (any-hover: hover) {
    .button--primary:hover .button__icon {
      background-color: var(--button-secondary-color-hover);
      color: var(--button-primary-color-hover);

      svg {
        fill: var(--button-primary-color-hover);
      }
    }

    .button--secondary:hover .button__icon {
      background-color: var(--button-primary-color-hover);
      color: var(--button-secondary-color-hover);

      svg {
        fill: var(--button-secondary-color-hover);
      }
    }
  }

  .button--primary:active .button__icon {
    background-color: var(--button-secondary-color-active);
    color: var(--button-primary-color-active);

    svg {
      fill: var(--button-primary-color-active);
    }
  }

  .button--secondary:active .button__icon {
    background-color: var(--button-primary-color-active);
    color: var(--button-secondary-color-active);

    svg {
      fill: var(--button-secondary-color-active);
    }
  }

  /* Additional button style modifiers */
  .button--origin-left {
    transform-origin: left;
  }

  .button--origin-right {
    transform-origin: right;
  }
}
@layer components {
  .buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
}
@layer components {
  .code-block {
    border: var(--border-width-4) solid var(--color-primary-6);
    border-radius: var(--border-radius-4);
    overflow: hidden;
    height: var(--length-80);
    width: 120%;
    min-width: min-content;
    max-width: none;
  }

  .code-block__code-menu {
    display: flex;
    padding: var(--space-sm-x3);
    padding-inline-start: var(--space-sm-x1);
    gap: var(--space-sm-x3);
    background-color: var(--color-primary-5);
  }

  .code-block__code-button {
    border-radius: var(--border-radius-round);
    background-color: var(--color-primary-4);
    width: var(--length-2);
    height: var(--length-2);
  }

  .code-block__code > div {
    padding-block-start: var(--space-sm-x1);
    padding-inline-start: var(--space-sm-x2);
    font-size: var(--font-size-sm-x3);
    font-family: var(--font-family-code);

    td:nth-of-type(1) > pre > code > span {
      color: #abb2bf !important;
    }

    /* 1st column (number column), and 5th line of code */
    td:nth-of-type(1) > pre > code > span:nth-of-type(5) {
      color: white !important;
    }

    /* 2nd column (code column), and 5th line of code */
    td:nth-of-type(2) > pre > code > span:nth-of-type(5) {
      position: relative;
      background-color: oklch(from var(--color-white) l c h / 5%);

      &::after {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0.3ch;
        left: 10ch;
        background-color: var(--color-primary-4);
        animation: 1.1s step-start 0s infinite code-block__cursor-blink;
      }
    }
  }

  @keyframes code-block__cursor-blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .code-block--custom-business-software {
      height: var(--length-96);
    }

    .code-block--hero-short {
      height: calc(
        100% - var(--hero-short-business-software-apps__spacing-block-end)
      );
      min-width: auto;
      width: 150%;
    }

    .code-block__code-menu {
      padding: var(--space-sm-x2);
      padding-inline-start: var(--space-md);
      gap: var(--space-sm-x2);
    }

    .code-block__code-button {
      width: var(--length-3);
      height: var(--length-3);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .code-block--custom-business-software {
      position: absolute;
      height: calc(100% - var(--space-lg-x1));
      min-width: auto;
      width: 150%;
    }

    .code-block__result {
      left: 15vw;
      height: var(--length-64);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .code-block__code-button {
      width: var(--length-4);
      height: var(--length-4);
    }

    .code-block__result {
      left: min(25vw, 30rem);
    }
  }
}
@layer components {
  .code-result {
    position: absolute;
    left: 55vw;
    bottom: calc(-1 * var(--length-12));
    height: var(--length-52);
    padding: var(--space-sm-x2);
    object-fit: cover;
    border: var(--border-width-3) solid var(--color-neutral-2);
    border-radius: var(--border-radius-3);
    background-color: var(--color-neutral-1);
    box-shadow: var(--shadow-3);
    display: grid;
    gap: var(--space-sm-x1);
    grid-template-columns: repeat(2, min-content);

    > div {
      box-shadow: var(--shadow-2);
    }
  }

  .code-result--hero-short {
    display: none;
  }

  .code-result__bar-chart {
    display: grid;
    grid-template-columns: repeat(var(--number-of-bars), 1fr);
    gap: var(--space-sm-x3);
    align-items: end;
    position: relative;
    height: 100%;
    padding: var(--space-md) var(--space-md) var(--space-sm-x2) var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);

    /* horizontal and veritcal axes */
    &::before,
    &::after {
      content: "";
      background-color: var(--color-neutral-2);
      position: absolute;
      display: block;

      --axis-spacing: var(--space-sm-x2);
      --axis-thickness: var(--length-0-5);
      --axis-length: calc(100% - 2 * var(--space-sm-x2));

      left: var(--axis-spacing);
      bottom: var(--axis-spacing);
    }

    &::before {
      width: var(--axis-length);
      height: var(--axis-thickness);
    }

    &::after {
      width: var(--axis-thickness);
      height: var(--axis-length);
    }
  }

  .code-result__bar-chart-bar {
    position: relative;

    --bar-chart-height: calc(100% * (var(--height) / var(--maximum)));

    width: var(--length-7);
    height: var(--bar-chart-height);
    border-radius: var(--border-radius-2) var(--border-radius-2) 0 0;
    box-shadow: var(--shadow-3);
    animation: 3s ease-in-out calc(700ms * var(--i)) infinite
      code-result__bar-chart-height;

    &:nth-of-type(3n + 1) {
      background-color: var(--color-primary-2);
    }

    &:nth-of-type(3n + 2) {
      background-color: var(--color-primary-4);
    }

    &:nth-of-type(3n) {
      background-color: var(--color-primary-3);
    }
  }

  /* Here, var(--length-2) is the offset for animation purposes */
  @keyframes code-result__bar-chart-height {
    0%,
    100% {
      height: var(--bar-chart-height);
    }

    50% {
      height: calc(var(--bar-chart-height) - var(--length-2));
    }
  }

  .code-result__bar-chart-horizontal-lines {
    position: absolute;
    inset: 0;
    display: grid;
    padding: var(--space-md) var(--space-md) var(--space-sm-x2)
      var(--space-sm-x2);
  }

  .code-result__bar-chart-horizontal-line {
    background-color: var(--color-neutral-1);
    width: 100%;
    height: var(--length-0-5);
  }

  .code-result__pie-chart {
    position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);

    &::before {
      content: "";
      display: block;
      border-radius: var(--border-radius-round);
      position: absolute;
      inset: var(--space-sm-x2);
      box-shadow: var(--shadow-3);
    }
  }

  .code-result__pie-chart-slice {
    position: absolute;
    inset: var(--space-sm-x2);
    border-radius: var(--border-radius-round);

    --starting-angle: calc(
      360deg *
        ((var(--ongoing-weights-sum) - var(--weight)) / var(--weights-sum))
    );
    --ending-angle: calc(
      3600deg * (var(--ongoing-weights-sum) / var(--weights-sum))
    );

    animation: 3s ease-in-out calc(700ms * var(--i)) infinite
      code-result__pie-chart-angle;

    --smoothing-angle: 1deg; /* to avoid jagged edges */
    &:nth-of-type(3n + 1) {
      background-image: conic-gradient(
        transparent calc(var(--starting-angle) - var(--smoothing-angle)),
        var(--color-primary-2) var(--starting-angle) var(--ending-angle),
        transparent calc(var(--ending-angle) + var(--smoothing-angle))
      );
    }

    &:nth-of-type(3n + 2) {
      background-image: conic-gradient(
        transparent calc(var(--starting-angle) - var(--smoothing-angle)),
        var(--color-primary-3) var(--starting-angle) var(--ending-angle),
        transparent calc(var(--ending-angle) + var(--smoothing-angle))
      );
    }

    &:nth-of-type(3n) {
      background-image: conic-gradient(
        transparent calc(var(--starting-angle) - var(--smoothing-angle)),
        var(--color-primary-4) var(--starting-angle) var(--ending-angle),
        transparent calc(var(--ending-angle) + var(--smoothing-angle))
      );
    }
  }

  /* these required to tell the browser how to animate these CSS properties, namely by specifying its type (in this case, an "<angle>" */
  @property --starting-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @property --ending-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  /* here, (0.03 * var(--weights-sum)) is the offset for animation purposes */
  @keyframes code-result__pie-chart-angle {
    0%,
    100% {
      --starting-angle: calc(
        360deg *
          ((var(--ongoing-weights-sum) - var(--weight)) / var(--weights-sum))
      );
      --ending-angle: calc(
        3600deg * (var(--ongoing-weights-sum) / var(--weights-sum))
      );
    }

    50% {
      --starting-angle: calc(
        360deg *
          (
            (
                var(--ongoing-weights-sum) - (0.03 * var(--weights-sum)) -
                  var(--weight)
              ) /
              var(--weights-sum)
          )
      );
      --ending-angle: calc(
        3600deg *
          (
            (var(--ongoing-weights-sum) + (0.03 * var(--weights-sum))) /
              var(--weights-sum)
          )
      );
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .code-result--custom-business-software {
      left: 60vw;
    }

    .code-result--hero-short {
      display: grid;
      left: 10vw;
      bottom: calc(
        -1 * var(--length-7) +
          var(--hero-short-business-software-apps__spacing-block-end)
      );
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .code-result {
      height: var(--length-64);
      left: 15vw;
    }

    .code-result__bar-chart-bar {
      width: var(--length-10);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .code-result--custom-business-software {
      left: min(25vw, 30rem);
    }

    .code-result--hero-short {
      left: min(15vw, 15rem);
    }
  }
}
@layer components {
  .commitment {
    width: 100%;
    position: relative;
  }

  .commitment__background {
    position: absolute;
    inset: 0;
    width: 100%;
    left: 50%;
    translate: -50%;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(
        to bottom right,
        oklch(from var(--color-primary-8) l c h / 80%),
        oklch(from var(--color-primary-5) l c h / 80%)
      );
      color: var(--color-white);
    }
  }

  .commitment__background-image {
    /* idea here is to fade the images into each other */

    /* math:
      - width is 55% of the entire .commitment, and so we want to fade the extra 5%. We are overflowing by 5% on both sides, so total 2 * 5%
      - if we draw, we see that this extra 5% is 10%/55% = 2/11 th of each commitment__background-image, which is about 18.18%
    */
    position: absolute;
    width: 55%;
    height: 100%;
    top: 0;
    bottom: 0;
    object-fit: cover;

    &:first-child {
      left: 0;
      object-position: 50% 47%;
    }

    &:last-child {
      right: 0;
      object-position: 50% 55%;

      /* transparent gradient to fade in-between images */
      mask-image: linear-gradient(to right, transparent 0%, black 18.18%);
    }
  }

  .commitment__container {
    position: relative;
    width: 100%;
    margin-inline: auto;
    padding: var(--space-lg-x5) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    color: var(--color-white);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .commitment__container {
      padding: 7em var(--space-md);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    /* to deal with very large screens, fade out left and right of image and replace with gradient background */
    .commitment {
      background-image: var(--color-dark-gradient);
    }

    .commitment__background {
      max-width: 120rem;
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
      );
    }

    .commitment__container {
      max-width: var(--max-reach-lg-x8);
    }
  }
}
@layer components {
  .contact {
    display: flex;
    flex-direction: column;
    max-width: var(--max-reach-lg-x5);
  }

  .contact__note {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
  }

  .contact__form {
    margin-top: var(--space-md);
    overflow: clip;
    display: flex;
    box-shadow: var(--shadow-3);
    border-radius: var(--border-radius-3);
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--color-primary-0);
    position: relative;
  }

  .contact__turnstile {
    max-width: 100%;
    overflow: scroll;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .contact__form {
      padding: var(--space-lg-x1);
      gap: var(--space-lg-x1);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .custom-business-software {
    display: grid;
    gap: var(--space-lg-x2);
  }

  .custom-business-software__text-column {
    display: grid;
    gap: var(--space-md);
  }

  .custom-business-software__steps {
    display: grid;
    gap: var(--space-md);
  }

  .custom-business-software__step {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--border-radius-2);
    border: var(--border-width-2) solid var(--color-neutral-2);
  }

  .custom-business-software__step-icon {
    border-radius: var(--border-radius-2);
    background-color: var(--color-primary-5);
    padding: var(--space-sm-x2);
    flex-shrink: 0;

    svg {
      width: var(--length-9);
      height: var(--length-9);
      fill: var(--color-white);
    }
  }

  .custom-business-software__step-title {
    font-weight: var(--font-weight-bold);
  }

  .custom-business-software__step-subtitle {
    font-size: var(--font-size-sm-x1);
  }

  .custom-business-software__media-column {
    position: relative;
    margin-bottom: var(--length-12);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .custom-business-software__steps {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .custom-business-software {
      grid-template-columns: fit-content(50%) 1fr;
      gap: var(--space-lg-x4);
    }

    .custom-business-software__steps {
      width: fit-content;
      grid-template-columns: 1fr;
    }

    .custom-business-software__media-column {
      position: relative;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}
@layer components {
  .custom-ecommerce-card {
    width: var(--length-40);
    height: fit-content;
    border-radius: var(--border-radius-3);
    overflow: hidden;
    box-shadow: var(--shadow-3);
  }

  .custom-ecommerce-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
  }

  .custom-ecommerce-card__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x1);
    background-color: var(--color-white);
    color: var(--color-black);
    padding: var(--space-md);
  }

  .custom-ecommerce-card__name {
    text-align: center;
    font-weight: var(--font-weight-bolder);
    line-height: var(--line-height-tighter);
  }

  .custom-ecommerce-card__button {
    display: inline-block;
    border-radius: var(--border-radius-round);
    padding: var(--space-sm-x2) var(--space-lg-x1);
    background-color: var(--color-primary-1);
    font-size: var(--font-size-sm-x3);
  }

  .custom-ecommerce-card--small {
    width: var(--length-36);

    .custom-ecommerce-card__image {
      aspect-ratio: 16 / 9;
    }

    .custom-ecommerce-card__name {
      font-size: var(--font-size-sm-x2);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .custom-ecommerce-card {
      width: var(--length-52);
    }

    .custom-ecommerce-card--small {
      width: var(--length-40);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .custom-ecommerce-card--small {
      width: var(--length-48);

      .custom-ecommerce-card__image {
        aspect-ratio: 5 / 3;
      }

      .custom-ecommerce-card__name {
        font-size: var(--font-size-sm-x1);
      }
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .custom-ecommerce-card--small {
      width: var(--length-56);

      .custom-ecommerce-card__name {
        font-size: var(--font-size-md);
      }
    }
  }
}
@layer components {
  .custom-ecommerce {
    overflow-x: hidden;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
  }

  .custom-ecommerce__cards {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    align-items: center;
    user-select: none;
    width: min-content;

    --gap: var(--space-md);

    gap: var(--gap);
    padding-block: var(--space-lg-x1);

    /* negative animation delay so there are already some cards overflowing to the left */
    animation: calc(7s * var(--number-cards)) linear -7s card-marquee-left
      infinite;
  }

  .custom-ecommerce__card {
    display: block;
    width: min-content;
    height: fit-content;

    &:nth-child(3n) {
      grid-row: span 2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* remove animation if user prefers reduced motion and allow for scrolling instead */
    .custom-ecommerce__cards {
      animation: none;
    }

    .custom-ecommerce {
      overflow-x: scroll;
      padding-inline: var(--space-lg-x3);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .custom-ecommerce__cards {
      --gap: var(--space-lg-x2);
    }
  }
}
@layer components {
  .custom-websites {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: min(70vh, 20rem);
    margin-block: var(--space-md);
    overflow: hidden;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  }

  .custom-websites__image {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;

    --total-time: 30s;
    --seconds-per-container: calc(var(--total-time) / var(--child-count));
    --animation-delay: calc(
      var(--seconds-per-container) * var(--container-index) * -1
    );

    animation: var(--total-time) linear 0s infinite
      custom-websites__move-towards;
    animation-delay: var(--animation-delay, 0);
    border: var(--border-width-4) solid var(--color-neutral-1);
    border-radius: var(--border-radius-2);

    /* based on --shadow-3, but multiply all y-offset by -1 for upwards */
    box-shadow:
      0 1px 3px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 -1px 2px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 -2px 5px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 -4px 12px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 -12px 15px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    transition: all 300ms ease-in-out;

    a {
      display: block;
      width: 100%;
      height: 100%;
    }

    img {
      aspect-ratio: 16 / 9;
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: top;
    }

    &:has(a:active) {
      translate: 0 calc(-1 * var(--length-2));
      scale: 95%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* pause scrolling if user prefers reduced motion. */
    .custom-websites__image {
      animation-play-state: paused;
    }
  }

  .custom-websites__image-overlay {
    pointer-events: none;
    position: absolute;
    inset: 0;
    text-align: center;
    padding-block-start: var(--space-md);
    color: white;
    background-color: oklch(from var(--color-primary-7) l c h / 50%);
    backdrop-filter: blur(5px);
    font-weight: var(--font-weight-boldest);
    font-size: var(--font-size-lg-x1);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
  }

  .custom-websites__image:has(a:active) .custom-websites__image-overlay {
    opacity: 1;
  }

  @media (any-hover: hover) {
    .custom-websites__image:hover {
      translate: 0 -1%;
      scale: 105%;
    }

    .custom-websites__image:hover .custom-websites__image-overlay {
      opacity: 1;
    }
  }

  @keyframes custom-websites__move-towards {
    0% {
      transform: translateY(max(-20vh, -5rem)) scale(0.5);
      z-index: 0;
      opacity: 0;
    }

    5% {
      opacity: 1;
    }

    95% {
      opacity: 1;
    }

    99% {
      opacity: 0;
      z-index: 10;
    }

    100% {
      opacity: 0;
      z-index: 0;
      transform: translateY(min(50vh, 15rem)) scale(1);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .custom-websites {
      height: min(100vh, 30rem);
    }

    @keyframes custom-websites__move-towards {
      0% {
        transform: translateY(max(-25vh, -30rem)) scale(0.5);
        z-index: 0;
        opacity: 0;
      }

      5% {
        opacity: 1;
      }

      95% {
        opacity: 1;
      }

      99% {
        opacity: 0;
        z-index: 10;
      }

      100% {
        opacity: 0;
        z-index: 0;
        transform: translateY(min(50vh, 40rem)) scale(1);
      }
    }
  }
}
@layer components {
  .decoration-fragment {
    position: absolute;
    width: 80%;
    height: 100%;
    mask-size: contain;
    mask-repeat: repeat-y;
    background-repeat: no-repeat;
    mask-image: var(--lazy-mask-image);
    mask-position: bottom left;
    background-image: linear-gradient(
      to bottom,
      oklch(from var(--color-primary-3) l c h / 10%) 0%,
      oklch(from var(--color-primary-1) l c h / 15%) 100%
    );
    bottom: 0;
    left: 60%;
    pointer-events: none;
  }

  .decoration-fragment--landscape {
    width: 90%;
    min-width: var(--max-reach-sm-x1);
    top: 0;
    mask-repeat: repeat-x;
    mask-position: center left;
    background-image: linear-gradient(
      to right,
      oklch(from var(--color-primary-3) l c h / 0%) 0%,
      oklch(from var(--color-primary-3) l c h / 10%) 10%,
      oklch(from var(--color-primary-1) l c h / 15%) 80%,
      oklch(from var(--color-primary-0) l c h / 0%) 100%
    );
    left: 20%;
  }

  .decoration-fragment--full {
    width: 100%;
    height: 100%;
    left: unset;
    right: unset;
    mask-position: center left;
    min-width: var(--max-reach-sm-x1);
    top: 0;
    mask-repeat: repeat;
    background-image: linear-gradient(
      to right,
      oklch(from var(--color-primary-3) l c h / 0%) 0%,
      oklch(from var(--color-primary-3) l c h / 10%) 10%,
      oklch(from var(--color-primary-1) l c h / 15%) 80%,
      oklch(from var(--color-primary-0) l c h / 0%) 100%
    );
  }

  .decoration-fragment--shorter {
    /* Accomodate for the clip bottom */
    height: 90%;
  }

  .decoration-fragment--short {
    max-height: var(--max-reach-sm-x2);
  }

  .decoration-fragment--center {
    left: 50%;
    translate: -50%;
    mask-position: center;
  }

  .decoration-fragment--animate {
    --decoration-fragment-translation: var(--space-sm-x2);

    animation: decoration-fragment__animation 7s var(--ease-in-out-3) infinite;
  }

  @keyframes decoration-fragment__animation {
    0%,
    100% {
      translate: 0 calc(-1 * var(--decoration-fragment-translation));
    }

    50% {
      translate: 0 var(--decoration-fragment-translation);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* remove animation if user prefers reduced motion */
    .decoration-fragment--animate {
      animation: none;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .decoration-fragment {
      width: 25%;
      left: unset;
      right: 0;
      mask-position: bottom right;
    }

    .decoration-fragment--landscape {
      width: 90%;
      left: 30%;
      right: unset;
      mask-position: center left;
    }

    .decoration-fragment--full {
      width: 100%;
      left: unset;
      right: unset;
      mask-position: center left;
    }

    .decoration-fragment--center {
      left: 50%;
      translate: -50%;
      mask-position: center;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}
@layer components {
  .demo-blueprint {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-blueprint__frame {
    --demo-blueprint-bg: var(--color-neutral-1);
    --demo-blueprint-grid: var(--color-neutral-2);
    --demo-blueprint-line: var(--color-primary-4);
    --demo-blueprint-accent: var(--color-primary-5);
    --demo-blueprint-block: var(--color-primary-1);
    --demo-blueprint-block-border: var(--color-primary-3);

    width: 100%;
    height: 100%;
    background: var(--demo-blueprint-bg);
    position: relative;
    overflow: hidden;
  }

  /* Grid background */
  .demo-blueprint__grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(
        to right,
        var(--demo-blueprint-grid) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        var(--demo-blueprint-grid) 1px,
        transparent 1px
      );
    background-size: 24px 24px;
    opacity: 0;
    animation: demo-blueprint__grid-fade 8s ease-in-out infinite;
  }

  /* Corner brackets */
  .demo-blueprint__corner {
    position: absolute;
    width: 10%;
    height: 10%;
  }

  .demo-blueprint__corner--tl {
    top: 5%;
    left: 5%;
  }

  .demo-blueprint__corner--tr {
    top: 5%;
    right: 5%;
  }

  .demo-blueprint__corner--bl {
    bottom: 5%;
    left: 5%;
  }

  .demo-blueprint__corner--br {
    bottom: 5%;
    right: 5%;
  }

  .demo-blueprint__corner-h {
    position: absolute;
    height: 1px;
    background: var(--demo-blueprint-line);
  }

  .demo-blueprint__corner-v {
    position: absolute;
    width: 1px;
    background: var(--demo-blueprint-line);
  }

  .demo-blueprint__corner--tl .demo-blueprint__corner-h {
    top: 0;
    left: 0;
    width: 100%;
    transform-origin: left;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 0.2s;
  }

  .demo-blueprint__corner--tl .demo-blueprint__corner-v {
    top: 0;
    left: 0;
    height: 100%;
    transform-origin: top;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 0.3s;
  }

  .demo-blueprint__corner--tr .demo-blueprint__corner-h {
    top: 0;
    right: 0;
    width: 100%;
    transform-origin: right;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  .demo-blueprint__corner--tr .demo-blueprint__corner-v {
    top: 0;
    right: 0;
    height: 100%;
    transform-origin: top;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  .demo-blueprint__corner--bl .demo-blueprint__corner-h {
    bottom: 0;
    left: 0;
    width: 100%;
    transform-origin: left;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  .demo-blueprint__corner--bl .demo-blueprint__corner-v {
    bottom: 0;
    left: 0;
    height: 100%;
    transform-origin: bottom;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 0.7s;
  }

  .demo-blueprint__corner--br .demo-blueprint__corner-h {
    bottom: 0;
    right: 0;
    width: 100%;
    transform-origin: right;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 0.8s;
  }

  .demo-blueprint__corner--br .demo-blueprint__corner-v {
    bottom: 0;
    right: 0;
    height: 100%;
    transform-origin: bottom;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 0.9s;
  }

  /* Page boundary */
  .demo-blueprint__boundary {
    position: absolute;
    background: var(--demo-blueprint-line);
  }

  .demo-blueprint__boundary--top {
    top: 14%;
    left: 14%;
    right: 14%;
    height: 1px;
    transform-origin: left;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 1s;
  }

  .demo-blueprint__boundary--right {
    top: 14%;
    right: 14%;
    bottom: 14%;
    width: 1px;
    transform-origin: top;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  .demo-blueprint__boundary--bottom {
    bottom: 14%;
    left: 14%;
    right: 14%;
    height: 1px;
    transform-origin: right;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 1.4s;
  }

  .demo-blueprint__boundary--left {
    top: 14%;
    left: 14%;
    bottom: 14%;
    width: 1px;
    transform-origin: bottom;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 1.6s;
  }

  /* Layout elements */
  .demo-blueprint__header {
    position: absolute;
    top: 14%;
    left: 14%;
    right: 14%;
    height: 10%;
    background: var(--demo-blueprint-block);
    border: 1px solid var(--demo-blueprint-line);
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: scale(0.92);
    animation: demo-blueprint__appear 8s ease-in-out infinite;
    animation-delay: 1.8s;
  }

  .demo-blueprint__sidebar {
    position: absolute;
    top: 26%;
    left: 14%;
    bottom: 18%;
    width: 16%;
    background: var(--demo-blueprint-block);
    border: 1px solid var(--demo-blueprint-line);
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: scale(0.92);
    animation: demo-blueprint__appear 8s ease-in-out infinite;
    animation-delay: 2.1s;
  }

  .demo-blueprint__main {
    position: absolute;
    top: 26%;
    left: 32%;
    right: 14%;
    bottom: 18%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    padding: var(--space-sm-x1);
    background: var(--demo-blueprint-block);
    border: 1px solid var(--demo-blueprint-line);
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: scale(0.92);
    animation: demo-blueprint__appear 8s ease-in-out infinite;
    animation-delay: 2.4s;
  }

  .demo-blueprint__block {
    flex: 1;
    background: var(--demo-blueprint-bg);
    border: 1px solid var(--demo-blueprint-block-border);
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: scale(0.92);
    animation: demo-blueprint__appear 8s ease-in-out infinite;
  }

  .demo-blueprint__block:nth-child(1) {
    animation-delay: 2.7s;
  }

  .demo-blueprint__block:nth-child(2) {
    animation-delay: 3s;
  }

  .demo-blueprint__block:nth-child(3) {
    animation-delay: 3.3s;
  }

  /* Dimension line */
  .demo-blueprint__dimension {
    position: absolute;
    bottom: 7%;
    left: 14%;
    right: 14%;
    height: 1px;
  }

  .demo-blueprint__dimension-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--demo-blueprint-accent);
    transform-origin: left;
    animation: demo-blueprint__draw-h 8s ease-in-out infinite;
    animation-delay: 3.6s;
  }

  .demo-blueprint__dimension-tick {
    position: absolute;
    top: -3px;
    width: 1px;
    height: 7px;
    background: var(--demo-blueprint-accent);
  }

  .demo-blueprint__dimension-tick--start {
    left: 0;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 3.7s;
  }

  .demo-blueprint__dimension-tick--end {
    right: 0;
    animation: demo-blueprint__draw-v 8s ease-in-out infinite;
    animation-delay: 3.8s;
  }

  /* Animations */
  @keyframes demo-blueprint__draw-h {
    0% {
      transform: scaleX(0);
      opacity: 0;
    }

    8% {
      transform: scaleX(1);
      opacity: 1;
    }

    80% {
      transform: scaleX(1);
      opacity: 1;
    }

    90% {
      transform: scaleX(0);
      opacity: 0;
    }

    100% {
      transform: scaleX(0);
      opacity: 0;
    }
  }

  @keyframes demo-blueprint__draw-v {
    0% {
      transform: scaleY(0);
      opacity: 0;
    }

    8% {
      transform: scaleY(1);
      opacity: 1;
    }

    80% {
      transform: scaleY(1);
      opacity: 1;
    }

    90% {
      transform: scaleY(0);
      opacity: 0;
    }

    100% {
      transform: scaleY(0);
      opacity: 0;
    }
  }

  @keyframes demo-blueprint__appear {
    0% {
      opacity: 0;
      transform: scale(0.92);
    }

    8% {
      opacity: 1;
      transform: scale(1);
    }

    80% {
      opacity: 1;
      transform: scale(1);
    }

    90% {
      opacity: 0;
      transform: scale(0.92);
    }

    100% {
      opacity: 0;
      transform: scale(0.92);
    }
  }

  @keyframes demo-blueprint__grid-fade {
    0% {
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    80% {
      opacity: 1;
    }

    90% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }
}
@layer components {
  .demo-code-editor {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-code-editor__frame {
    --demo-code-editor-bg: var(--color-neutral-1);
    --demo-code-editor-panel: var(--color-neutral-0);
    --demo-code-editor-sidebar: var(--color-neutral-2);
    --demo-code-editor-text: var(--color-neutral-5);
    --demo-code-editor-accent: var(--color-primary-5);
    --demo-code-editor-accent-soft: var(--color-primary-1);
    --demo-code-editor-green: #86efac;
    --demo-code-editor-amber: #fcd34d;

    width: 100%;
    height: 100%;
    background: var(--demo-code-editor-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Title bar */
  .demo-code-editor__titlebar {
    height: 8%;
    min-height: 1.4rem;
    background: var(--demo-code-editor-panel);
    border-bottom: 1px solid var(--demo-code-editor-sidebar);
    display: flex;
    align-items: flex-end;
    padding: 0 var(--space-sm-x1);
    gap: var(--space-sm-x2);
    flex-shrink: 0;
  }

  .demo-code-editor__tab {
    width: 2rem;
    height: 60%;
    background: var(--demo-code-editor-sidebar);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
  }

  .demo-code-editor__tab:nth-child(1) {
    width: 2.2rem;
  }

  .demo-code-editor__tab:nth-child(2) {
    width: 1.8rem;
  }

  .demo-code-editor__tab:nth-child(3) {
    width: 2.4rem;
  }

  .demo-code-editor__tab--active {
    background: var(--demo-code-editor-bg);
    position: relative;
  }

  .demo-code-editor__tab--active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--demo-code-editor-accent);
  }

  /* Body */
  .demo-code-editor__body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* Sidebar */
  .demo-code-editor__sidebar {
    width: 18%;
    min-width: 2.2rem;
    background: var(--demo-code-editor-panel);
    border-right: 1px solid var(--demo-code-editor-sidebar);
    display: flex;
    flex-direction: column;
    padding: var(--space-sm-x1);
    gap: var(--space-sm-x2);
    flex-shrink: 0;
  }

  .demo-code-editor__file {
    height: 0.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--demo-code-editor-sidebar);
  }

  .demo-code-editor__file:nth-child(1) {
    width: 80%;
  }

  .demo-code-editor__file:nth-child(2) {
    width: 65%;
  }

  .demo-code-editor__file:nth-child(3) {
    width: 75%;
  }

  .demo-code-editor__file:nth-child(4) {
    width: 55%;
  }

  .demo-code-editor__file--active {
    background: var(--demo-code-editor-accent-soft);
    border-left: 2px solid var(--demo-code-editor-accent);
  }

  /* Code area */
  .demo-code-editor__code {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-sm-x1);
    gap: var(--space-sm-x3);
    overflow: hidden;
  }

  .demo-code-editor__line {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
    height: 0.55rem;
  }

  .demo-code-editor__line--indent {
    padding-left: var(--space-sm-x1);
  }

  .demo-code-editor__token {
    height: 0.4rem;
    border-radius: var(--border-radius-sm);
    background: var(--demo-code-editor-text);
    flex: 1;
    transform-origin: left;
    animation: demo-code-editor__type 10s ease-in-out infinite;
    animation-delay: calc(1s + (0.28s * var(--i)));
  }

  .demo-code-editor__token--short {
    width: 22%;
    flex: none;
  }

  .demo-code-editor__token--medium {
    width: 50%;
    flex: none;
  }

  .demo-code-editor__token--keyword {
    background: var(--demo-code-editor-accent);
  }

  .demo-code-editor__token--string {
    background: var(--demo-code-editor-green);
  }

  .demo-code-editor__token--comment {
    background: var(--demo-code-editor-sidebar);
  }

  /* Cursor */
  .demo-code-editor__cursor {
    width: 0.2rem;
    height: 0.5rem;
    background: var(--demo-code-editor-accent);
    animation:
      demo-code-editor__cursor-blink 1s step-end infinite,
      demo-code-editor__cursor-show 10s ease-in-out infinite;
  }

  /* Status bar */
  .demo-code-editor__status {
    height: 10%;
    min-height: 1.4rem;
    background: var(--demo-code-editor-panel);
    border-top: 1px solid var(--demo-code-editor-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  .demo-code-editor__status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-sm-x1);
    flex: 1;
  }

  .demo-code-editor__status-text {
    width: 3.5rem;
    height: 0.4rem;
    background: var(--demo-code-editor-text);
    border-radius: var(--border-radius-sm);
    opacity: 0.4;
  }

  .demo-code-editor__status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--border-radius-round);
    animation: demo-code-editor__status-dot 10s ease-in-out infinite;
  }

  .demo-code-editor__progress {
    height: 2px;
    background: var(--demo-code-editor-accent);
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    animation: demo-code-editor__progress 10s ease-in-out infinite;
  }

  /* Animations */
  @keyframes demo-code-editor__type {
    0% {
      transform: scaleX(0);
      opacity: 0;
    }

    5% {
      opacity: 1;
    }

    15% {
      transform: scaleX(1);
      opacity: 1;
    }

    85% {
      transform: scaleX(1);
      opacity: 1;
    }

    90% {
      transform: scaleX(0);
      opacity: 0;
    }

    100% {
      transform: scaleX(0);
      opacity: 0;
    }
  }

  @keyframes demo-code-editor__cursor-blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  @keyframes demo-code-editor__cursor-show {
    0%,
    44% {
      opacity: 0;
    }

    45%,
    85% {
      opacity: 1;
    }

    86%,
    100% {
      opacity: 0;
    }
  }

  @keyframes demo-code-editor__progress {
    0% {
      transform: scaleX(0);
    }

    45% {
      transform: scaleX(1);
    }

    85% {
      transform: scaleX(1);
    }

    90% {
      transform: scaleX(0);
    }

    100% {
      transform: scaleX(0);
    }
  }

  @keyframes demo-code-editor__status-dot {
    0%,
    44% {
      background: var(--demo-code-editor-amber);
      opacity: 1;
    }

    45%,
    85% {
      background: var(--demo-code-editor-green);
      opacity: 1;
    }

    86%,
    100% {
      opacity: 0;
    }
  }
}
@layer components {
  .demo-dashboard {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-dashboard__frame {
    --demo-dashboard-bg: var(--color-neutral-1);
    --demo-dashboard-panel: var(--color-white);
    --demo-dashboard-sidebar: var(--color-neutral-0);
    --demo-dashboard-border: var(--color-neutral-2);
    --demo-dashboard-text: var(--color-neutral-3);
    --demo-dashboard-text-dark: var(--color-neutral-5);
    --demo-dashboard-accent: var(--color-primary-5);
    --demo-dashboard-accent-soft: var(--color-primary-1);
    --demo-dashboard-green: #86efac;
    --demo-dashboard-amber: #fcd34d;
    --demo-dashboard-blue: #93c5fd;

    width: 100%;
    height: 100%;
    background: var(--demo-dashboard-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Navbar */
  .demo-dashboard__navbar {
    height: 12%;
    min-height: 2.5rem;
    background: var(--demo-dashboard-panel);
    border-bottom: 1px solid var(--demo-dashboard-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-sm-x1);
    gap: var(--space-sm-x1);
    flex-shrink: 0;
  }

  .demo-dashboard__nav-logo {
    width: 2rem;
    height: 0.9rem;
    background: var(--demo-dashboard-accent);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
  }

  .demo-dashboard__nav-items {
    display: flex;
    gap: var(--space-sm-x2);
    margin-left: auto;
  }

  .demo-dashboard__nav-item {
    width: 2.5rem;
    height: 0.6rem;
    background: var(--demo-dashboard-text);
    border-radius: var(--border-radius-sm);
  }

  .demo-dashboard__nav-avatar {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-dashboard-text-dark);
    flex-shrink: 0;
  }

  /* Body */
  .demo-dashboard__body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  /* Sidebar */
  .demo-dashboard__sidebar {
    width: 14%;
    min-width: 2.5rem;
    background: var(--demo-dashboard-sidebar);
    border-right: 1px solid var(--demo-dashboard-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-sm-x1);
    gap: var(--space-sm-x1);
    flex-shrink: 0;
  }

  .demo-dashboard__sidebar-item {
    width: 55%;
    aspect-ratio: 1;
    border-radius: var(--border-radius-sm);
    background: var(--demo-dashboard-text);
  }

  .demo-dashboard__sidebar-item--active {
    background: var(--demo-dashboard-accent-soft);
    border: 1px solid var(--demo-dashboard-accent);
    animation: demo-dashboard__sidebar-glow 3s ease-in-out infinite;
  }

  /* Main */
  .demo-dashboard__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-sm-x1);
    gap: var(--space-sm-x1);
    overflow: hidden;
  }

  /* Header */
  .demo-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .demo-dashboard__title-bar {
    width: 35%;
    height: 0.8rem;
    background: var(--demo-dashboard-text-dark);
    border-radius: var(--border-radius-sm);
  }

  .demo-dashboard__action-btn {
    width: 3rem;
    height: 1rem;
    background: var(--demo-dashboard-accent);
    border-radius: var(--border-radius-md);
    animation: demo-dashboard__btn-pulse 3s ease-in-out infinite;
  }

  /* Table */
  .demo-dashboard__table {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--demo-dashboard-panel);
    border: 1px solid var(--demo-dashboard-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
  }

  .demo-dashboard__table-header {
    display: flex;
    align-items: center;
    padding: var(--space-sm-x2) var(--space-sm-x1);
    gap: var(--space-sm-x1);
    border-bottom: 1px solid var(--demo-dashboard-border);
    flex-shrink: 0;
  }

  .demo-dashboard__th {
    height: 0.5rem;
    background: var(--demo-dashboard-text);
    border-radius: var(--border-radius-sm);
    flex: 1;
  }

  .demo-dashboard__th--wide {
    flex: 2;
  }

  .demo-dashboard__th--narrow {
    flex: 0.6;
  }

  .demo-dashboard__table-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .demo-dashboard__row {
    display: flex;
    align-items: center;
    padding: var(--space-sm-x2) var(--space-sm-x1);
    gap: var(--space-sm-x1);
    border-bottom: 1px solid var(--demo-dashboard-border);
    animation: demo-dashboard__row-wave 5s ease-in-out infinite;
    animation-delay: calc(440ms * var(--i));
  }

  .demo-dashboard__row:last-child {
    border-bottom: none;
  }

  .demo-dashboard__cell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
  }

  .demo-dashboard__cell--wide {
    flex: 2;
  }

  .demo-dashboard__cell--narrow {
    flex: 0.6;
    justify-content: flex-end;
  }

  .demo-dashboard__avatar {
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-dashboard-text-dark);
    flex-shrink: 0;
  }

  .demo-dashboard__text-bar {
    height: 0.5rem;
    background: var(--demo-dashboard-text);
    border-radius: var(--border-radius-sm);
    flex: 1;
    min-width: 0;
  }

  .demo-dashboard__text-bar--short {
    width: 60%;
    flex: none;
  }

  .demo-dashboard__text-bar--medium {
    width: 80%;
    flex: none;
  }

  .demo-dashboard__pill {
    width: 1.8rem;
    height: 0.5rem;
    border-radius: var(--border-radius-lg);
    background: var(--demo-dashboard-green);
  }

  .demo-dashboard__pill--amber {
    background: var(--demo-dashboard-amber);
  }

  .demo-dashboard__pill--blue {
    background: var(--demo-dashboard-blue);
  }

  .demo-dashboard__dots {
    display: flex;
    gap: 2px;
  }

  .demo-dashboard__dot {
    width: 3px;
    height: 3px;
    border-radius: var(--border-radius-round);
    background: var(--demo-dashboard-text-dark);
  }

  /* Animations */
  @keyframes demo-dashboard__row-wave {
    0%,
    100% {
      background-color: transparent;
      transform: translateX(0);
    }

    50% {
      background-color: var(--demo-dashboard-accent-soft);
      transform: translateX(1px);
    }
  }

  @keyframes demo-dashboard__btn-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.72;
    }
  }

  @keyframes demo-dashboard__sidebar-glow {
    0%,
    100% {
      box-shadow: 0 0 0 0 var(--demo-dashboard-accent-soft);
    }

    50% {
      box-shadow: 0 0 6px 1px var(--demo-dashboard-accent-soft);
    }
  }
}
@layer components {
  .demo-graphs {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-graphs__frame {
    --demo-graphs-panel: var(--color-neutral-5);
    --demo-graphs-card: #f8fafc;
    --demo-graphs-line: #cbd5e1;
    --demo-graphs-text: #0f172a;
    --demo-graphs-muted: #64748b;
    --demo-graphs-a: #16a34a;
    --demo-graphs-b: #0284c7;
    --demo-graphs-c: #d97706;
    --demo-graphs-d: #db2777;
    --demo-graphs-e: #7c3aed;

    width: 100%;
    height: 100%;
    background: var(--demo-graphs-panel);
    padding: var(--space-sm-x1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-sm-x1);
  }

  .demo-graphs__card {
    background: var(--demo-graphs-card);
    border: 1px solid rgb(148 163 184 / 22%);
    border-radius: var(--border-radius-3);
    padding: var(--space-sm-x2);
    display: flex;
    overflow: hidden;
  }

  .demo-graphs__card svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .demo-graphs__axis,
  .demo-graphs__grid {
    stroke: var(--demo-graphs-line);
    stroke-width: 1;
  }

  .demo-graphs__grid {
    opacity: 0.8;
  }

  .demo-graphs__label {
    fill: var(--demo-graphs-muted);
    font-size: 10px;
  }

  .demo-graphs__stroke-a {
    stroke: var(--demo-graphs-a);
  }

  .demo-graphs__stroke-b {
    stroke: var(--demo-graphs-b);
  }

  .demo-graphs__stroke-c {
    stroke: var(--demo-graphs-c);
  }

  .demo-graphs__stroke-d {
    stroke: var(--demo-graphs-d);
  }

  .demo-graphs__stroke-e {
    stroke: var(--demo-graphs-e);
  }

  .demo-graphs__fill-a {
    fill: var(--demo-graphs-a);
  }

  .demo-graphs__fill-b {
    fill: var(--demo-graphs-b);
  }

  .demo-graphs__fill-c {
    fill: var(--demo-graphs-c);
  }

  .demo-graphs__fill-d {
    fill: var(--demo-graphs-d);
  }

  .demo-graphs__fill-e {
    fill: var(--demo-graphs-e);
  }

  .demo-graphs__line-chart,
  .demo-graphs__area-chart,
  .demo-graphs__radar-line {
    fill: none;
    stroke-width: 3;
  }

  .demo-graphs__area-fill {
    fill: rgb(2 132 199 / 16%);
  }

  .demo-graphs__bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: demo-graphs__bar-pulse 3s ease-in-out infinite;
    animation-delay: calc(600ms * var(--i));
  }

  @keyframes demo-graphs__bar-pulse {
    0%,
    100% {
      transform: scaleY(1);
    }

    50% {
      transform: scaleY(0.88);
    }
  }

  .demo-graphs__bar:hover,
  .demo-graphs__dot:hover,
  .demo-graphs__slice:hover {
    opacity: 0.85;
  }

  .demo-graphs__line-chart,
  .demo-graphs__area-chart {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: demo-graphs__draw-line 8s ease-in-out infinite alternate;
  }

  @keyframes demo-graphs__draw-line {
    0% {
      stroke-dashoffset: 350;
    }

    70% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  .demo-graphs__radar-line {
    transform-box: fill-box;
    transform-origin: center;
    animation: demo-graphs__radar-pulse 3s ease-in-out infinite;
  }

  @keyframes demo-graphs__radar-pulse {
    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.06);
    }
  }
}
@layer components {
  .demo-tickets {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-tickets__frame {
    --demo-tickets-bg: var(--color-neutral-1);
    --demo-tickets-panel: var(--color-white);
    --demo-tickets-border: var(--color-neutral-2);
    --demo-tickets-text: var(--color-neutral-5);
    --demo-tickets-accent: var(--color-primary-5);
    --demo-tickets-amber: #fcd34d;
    --demo-tickets-blue: #93c5fd;
    --demo-tickets-green: #86efac;

    width: 100%;
    height: 100%;
    background: var(--demo-tickets-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header */
  .demo-tickets__header {
    height: 10%;
    min-height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-sm-x1);
    border-bottom: 1px solid var(--demo-tickets-border);
    flex-shrink: 0;
  }

  .demo-tickets__title {
    width: 35%;
    height: 0.55rem;
    background: var(--demo-tickets-text);
    border-radius: var(--border-radius-sm);
    opacity: 0.6;
  }

  .demo-tickets__btn {
    width: 2.2rem;
    height: 0.7rem;
    background: var(--demo-tickets-accent);
    border-radius: var(--border-radius-md);
    animation: demo-tickets__btn-pulse 3s ease-in-out infinite;
  }

  /* Ticket list */
  .demo-tickets__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Ticket row */
  .demo-tickets__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
    padding: var(--space-sm-x3) var(--space-sm-x1);
    border-bottom: 1px solid var(--demo-tickets-border);
    opacity: 0;
    transform: translateY(-6px);
    animation: demo-tickets__row 10s ease-in-out infinite;
    animation-delay: calc(2s * var(--i));
  }

  .demo-tickets__avatar {
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-tickets-text);
    opacity: 0.3;
    flex-shrink: 0;
  }

  .demo-tickets__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
    min-width: 0;
  }

  .demo-tickets__text {
    height: 0.4rem;
    background: var(--demo-tickets-text);
    border-radius: var(--border-radius-sm);
    width: 65%;
  }

  .demo-tickets__subtext {
    height: 0.28rem;
    background: var(--demo-tickets-text);
    border-radius: var(--border-radius-sm);
    width: 40%;
    opacity: 0.45;
  }

  .demo-tickets__pill {
    width: 2rem;
    height: 0.45rem;
    border-radius: var(--border-radius-lg);
    flex-shrink: 0;
    animation: demo-tickets__status 10s ease-in-out infinite;
    animation-delay: calc(2s * var(--i));
  }

  .demo-tickets__check {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-tickets-green);
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5);
    animation: demo-tickets__check 10s ease-in-out infinite;
    animation-delay: calc(2s * var(--i));
  }

  /* Animations */
  @keyframes demo-tickets__row {
    0% {
      opacity: 0;
      transform: translateY(-6px);
    }

    5% {
      opacity: 1;
      transform: translateY(0);
    }

    75% {
      opacity: 1;
      transform: translateY(0);
    }

    85% {
      opacity: 0;
      transform: translateY(4px);
    }

    100% {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  @keyframes demo-tickets__status {
    0%,
    18% {
      background: var(--demo-tickets-amber);
    }

    18.1%,
    38% {
      background: var(--demo-tickets-blue);
    }

    38.1%,
    90% {
      background: var(--demo-tickets-green);
    }

    90.1%,
    100% {
      background: var(--demo-tickets-amber);
    }
  }

  @keyframes demo-tickets__check {
    0%,
    38% {
      opacity: 0;
      transform: scale(0.5);
    }

    40%,
    75% {
      opacity: 1;
      transform: scale(1);
    }

    80%,
    100% {
      opacity: 0;
      transform: scale(0.5);
    }
  }

  @keyframes demo-tickets__btn-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.75;
    }
  }
}
@layer components {
  .demo-video-call {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-video-call__frame {
    --demo-video-call-bg: var(--color-neutral-1);
    --demo-video-call-panel: var(--color-neutral-2);
    --demo-video-call-dark: var(--color-neutral-3);
    --demo-video-call-text: var(--color-neutral-5);
    --demo-video-call-accent: var(--color-primary-5);
    --demo-video-call-accent-soft: var(--color-primary-2);
    --demo-video-call-danger: #ef4444;
    --demo-video-call-green: #86efac;

    width: 100%;
    height: 100%;
    background: var(--demo-video-call-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header */
  .demo-video-call__header {
    height: 10%;
    min-height: 1.8rem;
    background: var(--demo-video-call-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-sm-x1);
    gap: var(--space-sm-x1);
    flex-shrink: 0;
  }

  .demo-video-call__recording {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
  }

  .demo-video-call__recording-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-video-call-danger);
    animation: demo-video-call__recording-blink 2s ease-in-out infinite;
  }

  .demo-video-call__recording-bar {
    width: 2rem;
    height: 0.4rem;
    background: var(--demo-video-call-text);
    border-radius: var(--border-radius-sm);
    opacity: 0.6;
  }

  .demo-video-call__title-bar {
    width: 30%;
    height: 0.5rem;
    background: var(--demo-video-call-text);
    border-radius: var(--border-radius-sm);
    opacity: 0.5;
  }

  .demo-video-call__status {
    width: 1.5rem;
    height: 0.5rem;
    background: var(--demo-video-call-green);
    border-radius: var(--border-radius-lg);
    opacity: 0.8;
  }

  /* Videos */
  .demo-video-call__videos {
    display: flex;
    flex: 1;
    gap: var(--space-sm-x1);
    padding: 0 var(--space-sm-x1) var(--space-sm-x1);
    overflow: hidden;
  }

  .demo-video-call__video {
    flex: 1;
    position: relative;
    background: var(--demo-video-call-dark);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .demo-video-call__video-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x2);
    z-index: 1;
  }

  .demo-video-call__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-video-call-text);
    opacity: 0.4;
  }

  .demo-video-call__name-tag {
    width: 3rem;
    height: 0.4rem;
    background: var(--demo-video-call-panel);
    border-radius: var(--border-radius-sm);
  }

  .demo-video-call__speaking-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-md);
    border: 2px solid transparent;
    pointer-events: none;
    z-index: 2;
  }

  .demo-video-call__video--primary .demo-video-call__speaking-ring {
    animation: demo-video-call__speak 6s ease-in-out infinite;
  }

  .demo-video-call__video--secondary .demo-video-call__speaking-ring {
    animation: demo-video-call__speak 6s ease-in-out infinite;
    animation-delay: 3s;
  }

  /* Toolbar */
  .demo-video-call__toolbar {
    height: 14%;
    min-height: 2.2rem;
    background: var(--demo-video-call-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x1);
    padding: 0 var(--space-sm-x1);
    flex-shrink: 0;
  }

  .demo-video-call__tool {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-video-call-panel);
  }

  .demo-video-call__tool--active {
    background: var(--demo-video-call-accent);
    animation: demo-video-call__tool-pulse 3s ease-in-out infinite;
  }

  .demo-video-call__tool--danger {
    background: var(--demo-video-call-danger);
  }

  /* Animations */
  @keyframes demo-video-call__speak {
    0%,
    45% {
      border-color: var(--demo-video-call-accent);
      box-shadow: 0 0 8px 1px var(--demo-video-call-accent-soft);
    }

    50%,
    95% {
      border-color: transparent;
      box-shadow: 0 0 0 0 transparent;
    }

    100% {
      border-color: var(--demo-video-call-accent);
      box-shadow: 0 0 8px 1px var(--demo-video-call-accent-soft);
    }
  }

  @keyframes demo-video-call__recording-blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.3;
    }
  }

  @keyframes demo-video-call__tool-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.72;
    }
  }
}
@layer components {
  .demo-wedding-guestbook {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .demo-wedding-guestbook__frame {
    --demo-wedding-bg: oklch(100% 0.1 354deg);
    --demo-wedding-phone: var(--color-white);
    --demo-wedding-screen: var(--color-neutral-2);
    --demo-wedding-viewfinder: var(--color-neutral-4);
    --demo-wedding-accent: var(--color-red-5);
    --demo-wedding-accent-soft: var(--color-red-2);
    --demo-wedding-ui: var(--color-neutral-4);
    --demo-wedding-ui-light: var(--color-neutral-3);
    --demo-wedding-corner: rgb(255 255 255 / 55%);

    width: 100%;
    height: 100%;
    background: var(--demo-wedding-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm-x1);
    overflow: hidden;
  }

  /* Phone body */
  .demo-wedding-guestbook__phone {
    height: 60%;
    aspect-ratio: 9 / 16;
    background: var(--demo-wedding-phone);
    border-radius: var(--border-radius-3);
    border: 2px solid var(--color-neutral-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm-x1);
    box-shadow: var(--shadow-2);
    position: relative;
  }

  .demo-wedding-guestbook__notch {
    width: 26%;
    height: 2.5%;
    background: var(--demo-wedding-screen);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    margin-bottom: var(--space-sm-x2);
  }

  /* Screen */
  .demo-wedding-guestbook__screen {
    flex: 1;
    width: 100%;
    background: var(--demo-wedding-screen);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm-x2);
    gap: var(--space-sm-x2);
    overflow: hidden;
  }

  /* Status bar */
  .demo-wedding-guestbook__status {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
  }

  .demo-wedding-guestbook__rec-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  .demo-wedding-guestbook__rec-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--border-radius-round);
    background: var(--demo-wedding-accent);
    animation: demo-wedding-guestbook__rec-blink 1.2s ease-in-out infinite;
  }

  .demo-wedding-guestbook__rec-bar {
    width: 0.75rem;
    height: 3px;
    border-radius: var(--border-radius-sm);
    background: var(--demo-wedding-accent);
    opacity: 0.7;
  }

  .demo-wedding-guestbook__time-bar {
    flex: 1;
    height: 3px;
    border-radius: var(--border-radius-sm);
    background: var(--demo-wedding-ui-light);
    opacity: 0.5;
    position: relative;
    overflow: hidden;
  }

  .demo-wedding-guestbook__time-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--demo-wedding-ui);
    border-radius: var(--border-radius-sm);
    animation: demo-wedding-guestbook__time-fill 6s linear infinite;
    transform-origin: left;
    transform: scaleX(0);
  }

  /* Viewfinder */
  .demo-wedding-guestbook__viewfinder {
    flex: 1;
    width: 100%;
    background: linear-gradient(
      165deg,
      var(--color-neutral-5) 0%,
      var(--color-neutral-6) 100%
    );
    border-radius: var(--border-radius-sm);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demo-wedding-guestbook__focus-frame {
    width: 56%;
    aspect-ratio: 4 / 3;
    position: relative;
  }

  .demo-wedding-guestbook__corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--demo-wedding-corner);
    border-style: solid;
    animation: demo-wedding-guestbook__corner-fade 3s ease-in-out infinite;
  }

  .demo-wedding-guestbook__corner--tl {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
  }

  .demo-wedding-guestbook__corner--tr {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
  }

  .demo-wedding-guestbook__corner--bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
  }

  .demo-wedding-guestbook__corner--br {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
  }

  /* Record button */
  .demo-wedding-guestbook__controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-block-start: var(--space-sm-x2);
  }

  .demo-wedding-guestbook__record-btn-outer {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demo-wedding-guestbook__record-ring {
    position: absolute;
    inset: -3px;
    border-radius: var(--border-radius-round);
    border: 1.5px solid var(--demo-wedding-accent-soft);
    animation: demo-wedding-guestbook__ring-expand 2.2s ease-out infinite;
  }

  .demo-wedding-guestbook__record-btn {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--border-radius-round);
    background: var(--demo-wedding-accent);
    animation: demo-wedding-guestbook__btn-pulse 2.2s ease-in-out infinite;
  }

  /* Thumbnails */
  .demo-wedding-guestbook__thumbnails {
    display: flex;
    gap: var(--space-sm-x1);
    align-items: center;
    justify-content: center;
  }

  .demo-wedding-guestbook__thumb {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--demo-wedding-ui-light);
    opacity: 0;
    transform: translateY(5px) scale(0.92);
    animation: demo-wedding-guestbook__thumb-appear 6s ease-in-out infinite;
    animation-delay: calc(1.1s * var(--i));
    overflow: hidden;
    position: relative;
  }

  .demo-wedding-guestbook__thumb-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      var(--color-neutral-3) 0%,
      var(--color-neutral-4) 100%
    );
    animation: demo-wedding-guestbook__thumb-shimmer 6s ease-in-out infinite;
    animation-delay: calc(1.1s * var(--i) + 0.4s);
    opacity: 0;
  }

  /* Keyframes */
  @keyframes demo-wedding-guestbook__rec-blink {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.25;
    }
  }

  @keyframes demo-wedding-guestbook__time-fill {
    0% {
      transform: scaleX(0);
    }

    40%,
    70% {
      transform: scaleX(1);
    }

    100% {
      transform: scaleX(1);
    }
  }

  @keyframes demo-wedding-guestbook__ring-expand {
    0% {
      transform: scale(1);
      opacity: 0.5;
    }

    100% {
      transform: scale(1.7);
      opacity: 0;
    }
  }

  @keyframes demo-wedding-guestbook__btn-pulse {
    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(0.9);
    }
  }

  @keyframes demo-wedding-guestbook__corner-fade {
    0%,
    100% {
      opacity: 0.35;
    }

    50% {
      opacity: 0.85;
    }
  }

  @keyframes demo-wedding-guestbook__thumb-appear {
    0% {
      opacity: 0;
      transform: translateY(5px) scale(0.92);
    }

    8% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    70% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    78% {
      opacity: 0;
      transform: translateY(-3px) scale(0.96);
    }

    100% {
      opacity: 0;
      transform: translateY(5px) scale(0.92);
    }
  }

  @keyframes demo-wedding-guestbook__thumb-shimmer {
    0%,
    100% {
      opacity: 0;
    }

    20%,
    60% {
      opacity: 1;
    }

    80% {
      opacity: 0;
    }
  }
}
@layer components {
  .dialog-subscribe {
    max-height: none;
    max-width: none;
    place-items: center;
    background: none;
    border: none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: auto;
    padding: var(--space-md);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition:
      opacity var(--transition-duration-lg-x1) ease-in-out,
      overlay var(--transition-duration-lg-x1) ease-in-out allow-discrete,
      display var(--transition-duration-lg-x1) ease-in-out allow-discrete;
    opacity: 0;

    &::backdrop {
      transition:
        display var(--transition-duration-lg-x1) allow-discrete,
        overlay var(--transition-duration-lg-x1) allow-discrete,
        background-color var(--transition-duration-lg-x1);
      background-color: hsl(0deg 0 0 / 0%);
      backdrop-filter: blur(15px);
    }

    &[open]::backdrop {
      background-color: hsl(0deg 0 0 / 45%);
    }

    &[open] {
      display: grid;
      opacity: 1;
    }

    @starting-style {
      &[open] {
        opacity: 0;
      }

      &[open]::backdrop {
        background-color: hsl(0deg 0 100 / 0%);
      }
    }
  }

  .dialog-subscribe__click-away {
    position: absolute;
    inset: 0;
    z-index: calc(-1 * var(--z-5));
  }

  .dialog-subscribe__container {
    position: relative;
    z-index: 1;
    max-width: var(--max-reach-md);
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    padding: var(--space-lg-x2);
    box-shadow: var(--shadow-4);
    display: grid;
    gap: var(--space-lg-x1);
  }

  .dialog-subscribe__text {
    color: var(--color-neutral-8);
    font-size: var(--font-size-md);
    text-align: center;
    line-height: var(--line-height-normal);
  }

  .dialog-subscribe__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .dialog-subscribe__input {
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    padding: var(--space-sm-x2) var(--space-md);
    box-shadow: var(--shadow-2);
    outline: solid var(--border-width-2) var(--color-primary-8);
    transition: all 200ms ease-in-out;
    width: 100%;
    font-size: var(--font-size-md);

    &:focus {
      outline: solid var(--border-width-2) var(--color-primary-6);
    }

    &::placeholder {
      color: var(--color-neutral-4);
    }
  }

  .dialog-subscribe__form .button {
    width: 100%;
    justify-content: center;
  }
}
@layer components {
  .faqs {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .faqs__details {
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    box-shadow: var(--shadow-2);
    transition: all 300ms ease-in-out;
  }

  .faqs__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    cursor: pointer;
    font-weight: var(--font-weight-bold);

    svg {
      display: inline-block;
      flex-shrink: 0;
      transition: all 200ms ease-in-out;
      color: var(--color-primary-5);
    }
  }

  .faqs__details[open] {
    svg {
      rotate: 90deg;
    }
  }

  .faqs__summary-question {
    max-width: var(--max-reach-lg-x5);
  }

  .faqs__answer {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }

  @media (any-hover: hover) {
    .faqs__details {
      &[open] {
        scale: 100%;
      }

      &:hover:not(&:open) {
        scale: 95%;
      }

      &:active:not(&:open) {
        scale: 90%;
        box-shadow: var(--shadow-1);
      }
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .footer {
    background-image: linear-gradient(
      to top left,
      var(--color-primary-9),
      var(--color-primary-7)
    );
    color: var(--color-white);
  }

  .footer__image-container {
    width: 100%;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }

  .footer__image {
    width: 100%;
    height: var(--length-40);
    object-fit: cover;
    object-position: 55% 30%;
  }

  .footer__container {
    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding-block-end: 75px;
    display: grid;
  }

  .footer__text-container {
    width: 100%;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .footer__info-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: var(--max-reach-lg-x2);
  }

  .footer__logo {
    display: block;
    width: var(--length-52);
    margin-inline-start: var(--space-sm-x4);
  }

  .footer__info-text {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm-x1);
  }

  .footer__links-container {
    display: grid;
    row-gap: var(--space-lg-x1);
    column-gap: var(--space-lg-x2);
    margin-block-end: var(--space-lg-x1);
  }

  .footer__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }

  .footer__link-title-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);

    svg {
      width: var(--length-6);
      height: var(--length-6);
    }
  }

  .footer__link-title {
    font-weight: var(--font-weight-bold);
  }

  .footer__link-sublist {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    font-size: var(--font-size-sm-x1);
  }

  .footer__partnerships {
    display: flex;
    gap: var(--space-sm-x2);
    flex-wrap: wrap;
  }

  .footer__partnership {
    --partnership-height: var(--length-16);

    border-radius: var(--border-radius-2);
    outline: var(--border-width-2) solid var(--color-neutral-6);
    overflow: clip;
    width: auto;
    height: var(--partnership-height);
    background-color: var(--color-white);
    padding: var(--space-sm-x2);

    img,
    svg {
      width: 100%;
      max-width: calc(1.6 * var(--partnership-height));
      height: 100%;
      object-fit: contain;
    }
  }

  .footer__partnership--dark-background {
    background-color: var(--color-black);
  }

  .footer__copyright {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-light);
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .footer__links-container {
      grid-template-columns: repeat(2, fit-content(50%));
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .footer__container {
      padding-block-end: 0;
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "text image";
    }

    .footer__image-container {
      height: 100%;
      width: 100%;
      grid-area: image;
      overflow: clip;
      mask-image: linear-gradient(to left, black 50%, transparent 100%);
    }

    .footer__image {
      height: 100%;
      object-position: 57% 30%;
    }

    .footer__text-container {
      grid-area: text;
      padding: var(--space-lg-x2) var(--space-md);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .footer__logo {
      width: var(--length-64);
    }

    .footer__image {
      object-position: 57% 30%;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .footer__image-container {
      mask-image: linear-gradient(
        to left,
        transparent 0%,
        black 10%,
        black 50%,
        transparent 100%
      );
    }
  }
}
@layer components {
  .header {
    color: var(--header-text-color);
    width: 100%;
    max-width: var(--max-reach-lg-x5);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .header[ns-theme="light"] {
    --header-text-color: var(--color-white);
    --header-text-color-highlight: var(--color-primary-2);
  }

  .header[ns-theme="dark"] {
    --header-text-color: var(--color-black);
    --header-text-color-highlight: var(--color-primary-5);
  }

  .header--center {
    margin-inline: auto;
  }

  .header--dark-green {
    --header-text-color-highlight: var(--color-secondary-5);
  }

  .header__title {
    overflow-y: clip;
    font-size: var(--font-size-lg-x3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
    padding-block-end: var(--space-sm-x4);
  }

  .header--center .header__title,
  .header--center p {
    text-align: center;
  }

  .header__title-description-container {
    text-wrap: pretty;
  }

  /* Only add a bit more padding if it's the last child */
  .header__title-description-container:last-child {
    margin-block-end: var(--space-sm-x2);
  }

  @keyframes header__slide-in {
    0% {
      opacity: 0;
      translate: 0 150%;
    }

    50% {
      opacity: 1;
      translate: 0 0%;
    }
  }

  .header__fragment {
    display: inline-block;
    animation: header__slide-in linear forwards;
    animation-timeline: view(block auto calc(-2% * var(--i)));

    span {
      color: var(--header-text-color-highlight);
    }
  }

  .header[ns-animation="false"] .header__fragment {
    animation: none;
  }
}
@layer components {
  .heaps-of-websites {
    background-color: var(--color-white);
    padding-block-end: var(--space-lg-x4);
  }

  .heaps-of-websites__marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-start: var(--space-lg-x1);
  }

  .heaps-of-websites__track {
    display: grid;
    width: fit-content;
    grid-auto-columns: max-content;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm-x1);
    padding-block: var(--space-sm-x1);
    pointer-events: none;
    animation: heaps-of-websites__marquee 35s linear infinite;

    &:hover {
      animation-play-state: paused;
    }
  }

  .heaps-of-websites__image {
    width: 100%;
    object-fit: cover;
    height: auto;
  }

  .heaps-of-websites__overlay {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: oklch(from var(--color-primary-7) l c h / 80%);
    backdrop-filter: blur(2px);
    padding-inline: var(--space-sm-x1);
    text-align: center;
    opacity: 0;
    transition: all var(--transition-duration-md) ease;
  }

  .heaps-of-websites__item {
    position: relative;
    flex-shrink: 0;
    box-shadow: var(--shadow-3);
    width: var(--length-72);
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-2);
    border: var(--border-width-2) solid var(--color-neutral-1);
    overflow: clip;

    &:nth-of-type(4n + 1) {
      translate: 0 var(--space-sm-x1);
    }

    &:nth-of-type(4n + 2) {
      margin-block-start: var(--space-sm-x2);
    }

    &:nth-of-type(4n + 4) {
      margin-block-start: var(--space-sm-x2);
      translate: 0 calc(-1 * var(--space-sm-x1));
    }
  }

  .heaps-of-websites__item:hover .heaps-of-websites__overlay {
    opacity: 1;
  }

  .heaps-of-websites__company {
    /* font-size: var(--font-size-); */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-0);
  }

  .heaps-of-websites__link {
    font-size: var(--font-size-sm-x1);
    color: var(--color-primary-0);
    text-decoration: underline;
  }

  .heaps-of-websites__note {
    text-align: center;
    font-size: var(--font-size-lg-x1);
    color: var(--color-neutral-7);
    font-weight: var(--font-weight-semi-bold);
    margin-inline: auto;
  }

  @keyframes heaps-of-websites__marquee {
    0% {
      translate: 0 0;
    }

    100% {
      translate: -50% 0;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .heaps-of-websites__image {
      width: var(--length-64);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .heaps-of-websites__track {
      pointer-events: auto;
      animation-duration: 65s;
    }

    .heaps-of-websites__image {
      width: var(--length-96);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .hero-blog-post {
    --hero-blog-post-facade-background: transparent;

    position: relative;
    translate: 0 calc(var(--length-32) * -1);
    margin-block-end: calc(var(--length-32) * -1);
    background: var(--hero-blog-post-facade-background);
  }

  .hero-blog-post[ns-theme="light"] {
    --hero-blog-post-facade-background: var(--color-white);
  }

  .hero-blog-post__inner {
    width: 100%;
    background-image: var(--color-dark-gradient-secondary);
    color: var(--color-white);
    overflow: clip;
    clip-path: ellipse(100% 60% at 50% 40%);
  }

  .hero-blog-post__decoration {
    max-width: 2750px;
    margin-inline: auto;
    width: 100%;
    height: calc(var(--length-32) + var(--length-24));
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 200%;
      background-image: linear-gradient(
        to bottom,
        oklch(from var(--color-secondary-3) l c h / 30%) 0%,
        oklch(from var(--color-secondary-1) l c h / 0%) 100%
      );
      background-repeat: repeat-x;
      background-position: bottom;
      mask-image: var(--lazy-mask-image);
      mask-repeat: repeat-x;
    }
  }

  /* Blog post header */
  .hero-blog-post__header {
    position: relative;
    max-width: var(--max-reach-lg-x7);
    margin-inline: auto;
    padding: var(--space-lg-x3) var(--space-md) var(--space-lg-x5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Author meta — side-by-side row like blog-list__meta */
  .hero-blog-post__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x2);
    font-size: var(--font-size-sm-x2);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }

  .hero-blog-post__avatar-image {
    width: var(--length-16);
    height: var(--length-16);
    border-radius: 100em;
    object-fit: cover;
    border: var(--border-width-2) solid var(--color-secondary-3);
    transition: inherit;
  }

  .hero-blog-post__avatar {
    transition: all 200ms ease-in-out;

    @media (any-hover: hover) {
      &:hover {
        scale: 95%;

        .hero-blog-post__avatar-image {
          border-color: var(--color-secondary-2);
          filter: brightness(105%);
        }
      }
    }

    &:active {
      scale: 90%;

      .hero-blog-post__avatar-image {
        border-color: var(--color-secondary-4);
        filter: brightness(95%);
      }
    }
  }

  .hero-blog-post__byline {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);
    color: var(--color-neutral-1);
  }

  .hero-blog-post__author {
    font-weight: var(--font-weight-bold);
  }

  .hero-blog-post__title {
    margin-block-start: var(--space-md);
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
    text-align: center;
    max-width: var(--max-reach-lg-x5);
  }

  /* Cover image */
  .hero-blog-post__cover {
    margin-block-start: var(--space-lg-x2);
    width: 100%;
    max-width: var(--max-reach-lg-x5);
  }

  .hero-blog-post__cover-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--border-radius-2);
    display: block;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-blog-post__decoration::after {
      animation: hero-blog-post__marquee var(--blog-page-marquee-duration, 40s)
        linear infinite;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-blog-post__meta {
      flex-direction: row;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-blog-post__decoration {
      height: calc(var(--length-32) + var(--length-32));
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .hero-blog-post__decoration::after {
      animation: hero-blog-post__marquee var(--blog-page-marquee-duration, 60s)
        linear infinite;
    }
  }

  /* Marquee animation — fragments scroll left-to-right */
  @keyframes hero-blog-post__marquee {
    0% {
      translate: -50% 0;
    }

    100% {
      translate: 0 0;
    }
  }
}
@layer components {
  .hero-blog {
    background: white;
  }

  .hero-blog__section {
    width: 100%;
    background-image: var(--color-dark-gradient-secondary);
    color: var(--color-white);
    margin-block-end: calc(var(--length-32) * -1);
    translate: 0 calc(var(--length-32) * -1);
    padding-block-start: var(--length-32);
    overflow: clip;
    clip-path: ellipse(100% 60% at 50% 40%);
  }

  .hero-blog__container {
    position: relative;
    max-width: var(--max-reach-lg-x7);
    margin-inline: auto;
    padding: var(--space-lg-x5) var(--space-md) var(--space-lg-x3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-blog__logo {
    width: var(--length-32);
    height: auto;
    color: var(--color-primary-2);
  }

  .hero-blog__logo-svg {
    width: 100%;
    height: auto;
  }

  .hero-blog__title {
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
    letter-spacing: var(--letter-spacing-wide);

    span {
      color: var(--color-primary-2);
    }
  }

  .hero-blog__subtitle {
    font-size: var(--font-size-lg-x1);
    color: var(--color-secondary-2);
  }

  .hero-blog__description {
    margin-block-start: var(--space-md);
    font-size: var(--font-size-sm-x1);
    color: var(--color-neutral-0);
    width: min(90%, 65ch);
  }

  .hero-blog__buttons {
    margin-block-start: var(--space-lg-x2);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }

  /* Glassmorphism effect for RSS button on dark gradient */
  .hero-blog__buttons .hero-blog__button.button--secondary {
    background: oklch(from var(--color-white) l c h / 10%);
    border: var(--border-width-2) solid
      oklch(from var(--color-white) l c h / 25%);
    backdrop-filter: blur(8px);
  }

  @media (any-hover: hover) {
    .hero-blog__buttons .hero-blog__button.button--secondary:hover {
      background: oklch(from var(--color-white) l c h / 18%);
      border: var(--border-width-2) solid
        oklch(from var(--color-white) l c h / 45%);
      box-shadow: 0 0 24px oklch(from var(--color-white) l c h / 12%);
      scale: 0.95;
    }
  }

  /* Soft glow for primary Subscribe button */
  .hero-blog__buttons .hero-blog__button.button--primary {
    box-shadow: 0 4px 24px oklch(from var(--color-white) l c h / 12%);
  }

  @media (any-hover: hover) {
    .hero-blog__buttons .hero-blog__button.button--primary:hover {
      box-shadow: 0 4px 32px oklch(from var(--color-white) l c h / 22%);
      scale: 0.95;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-blog__logo {
      width: var(--length-40);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-blog__title {
      font-size: 300%;
    }
  }
}
@layer components {
  .hero-empty {
    --hero-empty-overlap: var(--length-32);
    --hero-empty-height-mobile: calc(var(--length-32) + var(--length-24));
    --hero-empty-height-desktop: calc(var(--length-32) + var(--length-32));
    --hero-empty-background: var(--color-dark-gradient);
    --hero-empty-clip-path: ellipse(100% 60% at 50% 40%);
    --hero-empty-facade-background: transparent;

    position: relative;
    margin-block-end: calc(var(--hero-empty-overlap) * -1);
    translate: 0 calc(var(--hero-empty-overlap) * -1);
    width: 100%;
    height: var(--hero-empty-height-mobile);
    background: var(--hero-empty-facade-background);
  }

  .hero-empty[ns-theme="light"] {
    --hero-empty-facade-background: var(--color-white);
  }

  .hero-empty__inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: var(--hero-empty-background);
    clip-path: var(--hero-empty-clip-path);
  }

  .hero-empty__inner .decoration-fragment {
    inset: 0;
    width: 100%;
    height: 100%;
    left: unset;
    right: unset;
    bottom: unset;
    mask-repeat: repeat-x;
    mask-position: center left;
    background-repeat: repeat-x;
    background-position: bottom;
    background-image: linear-gradient(
      to bottom,
      oklch(from var(--color-primary-3) l c h / 30%) 0%,
      oklch(from var(--color-primary-1) l c h / 0%) 100%
    );
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-empty {
      height: var(--hero-empty-height-desktop);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .hero-empty__inner .decoration-fragment {
      width: 100%;
      left: unset;
      right: unset;
      mask-position: center left;
    }
  }
}
@layer components {
  .hero-short-base {
    --hero-short-image-height: var(--length-40);
    --hero-short-facade-background: transparent;

    width: 100%;
    margin-block-end: calc(var(--length-32) * -1);
    translate: 0 calc(var(--length-32) * -1);
    background: var(--hero-short-facade-background);
  }

  .hero-short-base__inner {
    width: 100%;
    background-image: var(--color-dark-gradient);
    color: var(--color-white);
    padding-block-start: var(--length-32);
    overflow: clip;
    clip-path: ellipse(100% 60% at 50% 40%);
  }

  .hero-short-base[ns-theme="light"] {
    --hero-short-facade-background: var(--color-white);
  }

  .hero-short-base__container {
    --hero-short__container-padding: var(--space-lg-x3) var(--space-md)
      calc(var(--space-md) + var(--hero-short-image-height));

    position: relative;
    width: 100%;
    max-width: var(--max-reach-lg-x7);
    margin-inline: auto;
    padding: var(--hero-short__container-padding);
  }

  .hero-short-base__container[ns-name-tags="true"] {
    --hero-short__container-padding: var(--space-lg-x3) var(--space-md)
      calc(var(--space-lg-x5) + var(--hero-short-image-height));
  }

  .hero-short-base__text-container {
    position: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: var(--max-reach-lg-x2);
    text-wrap: pretty;
  }

  .hero-short-base__title {
    font-size: 275%;
    line-height: var(--line-height-tightest);
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);

    span {
      color: var(--color-primary-2);
    }
  }

  .hero-short-base__content-container {
    --hero-short-base__content-container-top: calc(
      100% - var(--hero-short-image-height)
    );

    width: 100%;
    max-width: var(--max-reach-sm-x2);
    overflow: visible;
    position: absolute;
    top: var(--hero-short-base__content-container-top);
    height: calc(100% - var(--hero-short-base__content-container-top));
    left: 50%;
    translate: -50%;
  }

  .hero-short-base__overlay {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    font-size: var(--font-size-sm-x3);
  }

  .hero-short-base__name {
    font-weight: var(--font-weight-bolder);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-short-base {
      --hero-short-image-height: var(--length-52);
    }

    .hero-short-base__content-container {
      max-width: var(--max-reach-sm-x1);
      left: unset;
      translate: 0;
      right: var(--space-md);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-short-base {
      --hero-short-image-height: 100%;
    }

    .hero-short-base__container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: calc(var(--space-lg-x5)) var(--space-md)
        calc(var(--space-lg-x5) + var(--space-lg-x2));
    }

    .hero-short-base__text-container {
      padding-inline: var(--space-md);
    }

    .hero-short-base__content-container {
      --hero-short-base__content-container-top: var(--space-lg-x1);

      width: calc(50% - var(--space-md));
      max-width: var(--max-reach-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .hero-short-base__title {
      font-size: 300%;
    }
  }
}
@layer components {
  .hero-short-business-software-apps {
    padding-block-start: var(--space-md);
    height: 100%;
    position: relative;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-short-business-software-apps {
      --hero-short-business-software-apps__spacing-block-end: var(
        --space-lg-x4
      );
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .hero-short-ecommerce {
    display: contents;
  }

  @keyframes hero-short-ecommerce__animation {
    0%,
    100% {
      translate: 0 0;
    }

    50% {
      translate: 0 var(--hero-short-ecommerce__animation-translation);
    }
  }

  /* Note: all these containers required because many of these elements are centred using the standard absolute position method of top: 50% and translate: 0 -50%, which is in conflict with the animations. Therefore the wrapper is used to position the element, while the element itself is animated from its original position. */

  .hero-short-ecommerce__card-container {
    position: absolute;
  }

  .hero-short-ecommerce__card {
    --hero-short-ecommerce__animation-translation: var(--space-sm-x3);

    animation: hero-short-ecommerce__animation 5s var(--ease-in-out-3) infinite;
  }

  .hero-short-ecommerce__card-container--middle {
    left: var(--space-md);

    /* So it'ss off-sync with the other card */
    animation-delay: 2s;
  }

  .hero-short-ecommerce__card-container--bottom {
    display: none;
  }

  .hero-short-ecommerce__logos {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 100%;
  }

  .hero-short-ecommerce__logo-container {
    --hero-short-ecommerce__logo-size: var(--length-16);

    position: absolute;
    width: var(--hero-short-ecommerce__logo-size);
    height: var(--hero-short-ecommerce__logo-size);
  }

  .hero-short-ecommerce__logo {
    --hero-short-ecommerce__animation-translation: var(--space-sm-x4);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-sm-x1);
    border-radius: var(--border-radius-3);
    background-color: var(--color-white);
    box-shadow: var(--shadow-3);
    border: var(--border-width-2) solid var(--color-primary-1);
    animation: hero-short-ecommerce__animation 3s var(--ease-in-out-3) infinite;
    animation-delay: calc(var(--i) * 0.5s);

    svg {
      width: 100%;
      height: auto;
    }
  }

  .hero-short-ecommerce__logo-container--1 {
    right: 40%;
    top: 0;
    z-index: var(--z-2);
  }

  .hero-short-ecommerce__logo-container--2 {
    right: var(--space-md);
    top: 50%;
    translate: 0 -50%;
    z-index: var(--z-1);
  }

  .hero-short-ecommerce__logo-container--3 {
    left: calc(var(--space-md) + 10%);
    bottom: 0;
    z-index: var(--z-0);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-short-ecommerce__card-container--middle {
      top: var(--space-lg-x1);
    }

    .hero-short-ecommerce__logo-container {
      --hero-short-ecommerce__logo-size: var(--length-20);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-short-ecommerce__card-container--middle {
      left: 0;
      top: 50%;
      translate: 0 -50%;
    }

    .hero-short-ecommerce__logos {
      top: var(--space-lg-x1);
      bottom: unset;
      height: calc(30% + 5vw);
    }

    .hero-short-ecommerce__logo-container {
      --hero-short-ecommerce__logo-size: 10vw;
    }

    .hero-short-ecommerce__card-container--bottom {
      display: block;
      bottom: 0;
      right: var(--space-md);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .hero-short-ecommerce__card-container--middle {
      top: 40%;
      translate: 0;
    }

    .hero-short-ecommerce__logos {
      height: 35%;
      width: 80%;
    }

    .hero-short-ecommerce__logo-container {
      --hero-short-ecommerce__logo-size: var(--length-32);
    }

    .hero-short-ecommerce__logo {
      padding: var(--space-md);
    }

    .hero-short-ecommerce__logo-container--1 {
      top: 0;
      left: var(--space-md);
    }

    .hero-short-ecommerce__logo-container--2 {
      top: 50%;
      left: 50%;
      translate: -50% -50%;
    }

    .hero-short-ecommerce__logo-container--3 {
      right: var(--space-md);
      bottom: 0;
      left: unset;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .hero-short-ecommerce__logos {
      width: 85%;

      /* height: 20%; */
    }

    .hero-short-ecommerce__logo-container {
      --hero-short-ecommerce__logo-size: var(--length-36);
    }

    .hero-short-ecommerce__logo {
      padding: var(--space-lg-x1);
    }
  }
}
@layer components {
  .hero-short-websites {
    --hero-short-websites__background-color: var(--color-primary-1);
    --hero-short-websites__border-width: var(--border-width-3);
    --hero-short-websites__animation-translation: var(--space-sm-x4);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--hero-short-websites__background-color);
    gap: var(--hero-short-websites__border-width);
    border: var(--hero-short-websites__background-color) solid
      var(--hero-short-websites__border-width);
    border-radius: var(--border-radius-2);
    margin-inline: var(--space-md);
    mask-image: radial-gradient(black 0%, black 60%, transparent 100%);
    animation: hero-short-websites__animation 5s var(--ease-in-out-3) infinite;
  }

  @keyframes hero-short-websites__animation {
    0%,
    100% {
      translate: 0;
    }

    50% {
      translate: 0 var(--hero-short-websites__animation-translation);
    }
  }

  .hero-short-websites__image-container {
    /* So that the images don't go on top of each other */
    --hero-short-websites__animation-translation: calc(
      0.5 * var(--hero-short-websites__border-width)
    );

    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    animation: hero-short-websites__animation 5s var(--ease-in-out-3) infinite;
    animation-delay: calc(var(--i) * 0.5s);
  }

  .hero-short-websites__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-short-websites {
      --hero-short-websites__animation-translation: var(--space-sm-x2);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-short-websites__image-container {
      aspect-ratio: 3 / 4;
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .hero-short-websites__image-container {
      aspect-ratio: 1 / 1;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .hero-short-websites {
      margin-inline: var(--space-lg-x1);
      margin-block-start: min(1.5vw, var(--space-lg-x2));
    }

    .hero-short-websites__image-container {
      aspect-ratio: 3 / 4;
    }
  }
}
@layer components {
  .hero-short {
    position: relative;
  }

  .hero-short__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
  }

  .hero-short[ns-fade-image="true"] .hero-short__image {
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 20%,
      black 80%,
      transparent 100%
    );
  }

  .hero-short__overlay {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    font-size: var(--font-size-sm-x3);
  }

  .hero-short__name {
    font-weight: var(--font-weight-bolder);
  }

  .hero-short__name-card {
    position: absolute;
    width: max-content;
  }

  .hero-short__name-card--left {
    left: var(--space-md);
    top: calc(-1 * var(--space-lg-x3));
  }

  .hero-short__name-card--right {
    right: var(--space-md);
    top: calc(-1 * var(--space-lg-x5));
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-short__image {
      object-position: right;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-short__image {
      object-position: center bottom;
      object-fit: contain;
    }

    .hero-short__name-card {
      max-width: 11ch;
    }

    .hero-short__name-card--left {
      left: calc(-1 * var(--space-lg-x5) + 12%);
      top: var(--space-lg-x3);
    }

    .hero-short__name-card--right {
      right: calc(-1 * var(--space-lg-x3) + 10%);
      top: 0;
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .hero-short__name-card {
      max-width: unset;
    }

    .hero-short__name-card--left {
      left: calc(-1.5 * var(--space-lg-x5) + 12%);
    }

    .hero-short__name-card--right {
      right: calc(-1.2 * var(--space-lg-x5) + 10%);
    }
  }
}
@layer components {
  .hero-team-member {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
    padding-block-start: var(--space-md);
  }

  .hero-team-member__key-info {
    display: flex;
    gap: var(--space-md);
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: var(--max-reach-lg-x5);
    margin-inline: auto;
  }

  .hero-team-member__image-container {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: var(--length-40);
  }

  .hero-team-member__mask-container {
    position: relative;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 489'%3E%3Cg transform='translate(0 192)'%3E%3Ccircle cx='105' cy='192' r='105'/%3E%3Cpath d='M0-192h210v384H0z'/%3E%3C/g%3E%3C/svg%3E");
    mask-position: bottom;
    mask-size: 100%;
    width: 100%;
    height: 100%;
  }

  .hero-team-member__image-background {
    position: absolute;
    inset: 0;
    top: unset;
    background-image: var(--color-dark-gradient);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    z-index: calc(-1 * var(--z-1));
    border-radius: var(--border-radius-round);
  }

  .hero-team-member__image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .hero-team-member__key-info-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
  }

  .hero-team-member__name {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tightest);
  }

  .hero-team-member__credentials {
    font-size: var(--font-size-sm-x1);
    color: var(--color-neutral-5);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .hero-team-member__key-info {
      flex-direction: row;
      text-align: left;
    }

    .hero-team-member__credentials {
      margin-block-start: var(--space-md);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .hero-team-member__key-info {
      gap: var(--space-lg-x2);
    }

    .hero-team-member__image-container {
      max-width: var(--length-52);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .hero-team-member {
      padding-block-start: var(--space-lg-x2);
    }

    .hero-team-member__image-container {
      max-width: var(--max-reach-sm-x4);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .hero {
    clip-path: ellipse(100% 60% at 50% 40%);
    margin-block-end: calc(var(--length-32) * -1);
    translate: 0 calc(var(--length-32) * -1);
    overflow: hidden;
    background: var(--color-dark-gradient);
    padding-block-start: var(--length-36);
    color: var(--color-white);
  }

  .hero__container {
    position: relative;
  }

  .hero__grid {
    margin-inline: auto;
    display: grid;
    padding-block-end: var(--length-96);
  }

  .hero__content {
    display: grid;
    gap: var(--space-sm-x1);
    align-self: center;
    padding-inline: var(--space-sm-x1);
    padding-block-start: var(--space-md);
  }

  .hero__title {
    text-align: center;
    margin-inline: auto;
    font-size: 275%;
    line-height: var(--line-height-tightest);
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);
    text-wrap: pretty;
    width: min(100%, var(--max-reach-lg-x2));
  }

  .hero__subtitle {
    text-align: center;
    margin-inline: auto;
    color: var(--color-neutral-1);
    font-size: var(--font-size-lg-x1);
    margin-block-end: var(--space-sm-x3);
    line-height: var(--line-height-tight);
    width: min(100%, var(--max-reach-sm-x1));
  }

  .hero__cta-group {
    display: flex;
    justify-content: center;
    gap: var(--space-sm-x1);
  }

  .hero__reviews {
    margin-block-start: var(--space-sm-x3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--length-5);
    row-gap: var(--space-sm-x3);
  }

  .hero__review {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-size-sm-x2);
  }

  .hero__stars {
    display: flex;
  }

  .hero__star-icon {
    margin: -1px;
    height: var(--length-6);
    width: var(--length-6);
    color: var(--color-yellow-2);
  }

  .hero__image-wrapper {
    position: absolute;
    bottom: calc(var(--length-72) * -1);
    right: 50%;
    width: max-content;
    translate: 50%;
  }

  .hero__image {
    width: var(--length-96);
    height: auto;
    object-fit: contain;
  }

  .hero__overlay {
    position: absolute;
    top: 0;
    width: 100%;
    fill: var(--color-white);
    text-align: center;
  }

  .hero__label {
    position: absolute;
  }

  .hero__label--left {
    left: 0;
    top: var(--space-md);
  }

  .hero__label--right {
    right: var(--space-sm-x2);
    top: calc(-1 * var(--space-sm-x3));
  }

  .hero__scribble {
    width: var(--length-20);
    height: var(--length-20);
  }

  .hero__scribble--left {
    rotate: 24deg;
    margin-inline-start: calc(var(--space-sm-x4) * -1);
  }

  .hero__scribble--right {
    rotate: -24deg;
    scale: -1 1;
  }

  .hero__name-card {
    position: absolute;
    top: calc(var(--length-16) * -1);
    width: max-content;
  }

  .hero__name-card--left {
    left: var(--length-14);
  }

  .hero__name-card--right {
    right: var(--length-14);
  }

  .hero__name {
    font-size: var(--font-size-sm-x1);
    font-weight: var(--font-weight-bold);
  }

  .hero__role {
    font-size: var(--font-size-sm-x2);
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48em) {
    .hero {
      clip-path: ellipse(100% 80% at 50% 20%);
    }

    .hero__grid {
      margin-block-start: calc(var(--space-md) * -1);
      min-height: 45rem;
      max-width: var(--max-reach-lg-x5);
      grid-template-columns: 1fr min-content;
      align-items: end;
      gap: var(--space-lg-x3);
      padding-block-end: 0;
    }

    .hero__content {
      height: fit-content;
      padding-block-end: var(--space-lg-x5);
      padding-inline-start: var(--space-lg-x1);
      padding-inline-end: 0;
    }

    .hero__reviews {
      width: 100%;
    }

    .hero__image-wrapper {
      position: static;
      margin-inline-end: var(--space-sm-x1);
      translate: 0 var(--length-12);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64em) {
    .hero {
      padding-block-start: var(--length-32);
    }

    .hero__grid {
      max-width: var(--max-reach-lg-x8);
      margin-inline: auto;
      gap: var(--length-24);
    }

    .hero__content {
      margin-block: auto;
      gap: var(--space-sm-x2);
      padding-inline-start: var(--space-md);
    }

    .hero__name-card--left {
      left: calc(var(--length-10) * -1);
      top: calc(-1 * var(--length-20));
    }

    .hero__name-card--right {
      right: calc(var(--length-14) * -1);
      top: var(--length-20);
    }

    .hero__image-wrapper {
      margin-inline-end: var(--length-20);
    }

    .hero__image {
      width: 28rem;
    }

    .hero__label--left {
      left: calc(var(--space-sm-x1) * -1);
      top: var(--length-32);
    }

    .hero__scribble--left {
      rotate: 6deg;
    }

    .hero__scribble--right {
      scale: 1 1;
      rotate: 180deg;
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80em) {
    .hero {
      padding-block-start: var(--length-40);
    }

    .hero__container {
      margin-inline: auto;
    }

    .hero__title {
      font-size: 300%;
      width: 100%;
    }

    .hero__subtitle {
      width: min(100%, var(--max-reach-lg-x1));
    }

    .hero__grid {
      max-width: calc(var(--max-reach-lg-x8) + 10rem);
      min-height: auto;
      gap: var(--length-32);
    }

    .hero__content {
      padding-inline-start: var(--space-sm-x1);
    }

    .hero__image-wrapper {
      margin-inline-end: var(--length-24);
    }

    .hero__image {
      width: 32rem;
    }

    .hero__name-card--left {
      left: calc(var(--length-14) * -1);
      top: calc(-1 * var(--length-28));
    }

    .hero__name-card--right {
      right: calc(var(--length-24) * -1);
      top: var(--length-20);
    }
  }
}
@layer components {
  .label-input {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
    width: 100%;
  }

  .label-input__label {
    &:has(+ [required])::after {
      content: "*";
      color: var(--color-red-5);
      margin-inline-start: var(--space-sm-x4);
    }
  }

  .label-input__input,
  .label-input__textarea {
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    padding: var(--space-sm-x2) var(--space-md);
    box-shadow: var(--shadow-2);
    outline: solid var(--border-width-2) transparent;
    transition: all 200ms ease-in-out;
  }

  .label-input__input:focus,
  .label-input__textarea:focus {
    outline: solid var(--border-width-2) var(--color-primary-6);
  }

  .label-input__input:user-invalid,
  .label-input__textarea:user-invalid {
    outline: solid var(--border-width-2) var(--color-red-4);
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .label-input {
      gap: var(--space-sm-x3);
    }
  }
}
@layer components {
  .navbar-desktop-inner {
    position: absolute;
    left: 50%;
    translate: -50%;
    z-index: var(--z-5);
    margin-top: var(--space-lg-x1);
  }

  .navbar-desktop-inner__container {
    position: relative;
    width: 100vw;
    max-width: var(--max-reach-md);
    flex: 1 1 auto;
    font-size: var(--font-size-sm-x2);
  }

  .navbar-desktop-inner__arrow {
    position: absolute;
    top: calc(-1 * var(--space-sm-x1));
    left: 50%;
    z-index: calc(-1 * var(--z-5));
    width: var(--length-8);
    height: var(--length-8);
    translate: -50%;
    rotate: -45deg;
    border-top-right-radius: var(--border-radius-2);
    border: var(--border-width-1) solid var(--color-neutral-2);
    background-color: var(--color-white);
  }

  .navbar-desktop-inner__arrow--transitions {
    transition-property: scale;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-md);
  }

  .navbar-desktop-inner__arrow--visible {
    scale: 1;
  }

  .navbar-desktop-inner__arrow--invisible {
    scale: 0;
  }

  .navbar-desktop-inner__menu-item-list {
    border-radius: var(--border-radius-3);
    background-color: var(--color-white);
    padding: var(--space-md);
    border: var(--border-width-1) solid var(--color-neutral-2);
    box-shadow: var(--shadow-3);
  }

  .navbar-desktop-inner__menu-item {
    position: relative;
    display: flex;
    column-gap: var(--space-lg-x1);
    padding: var(--space-md);
    border-radius: var(--border-radius-2);
    transition-property: background;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-sm-x1);

    &:hover {
      background-color: oklch(from var(--color-primary-5) l c h / 10%);
    }

    &:active {
      background-color: oklch(from var(--color-primary-5) l c h / 20%);
    }
  }

  .navbar-desktop-inner__menu-item--transition {
    transition-property: opacity, translate;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-lg-x1);
    transition-delay: calc(var(--i, 0) * 50ms);
  }

  .navbar-desktop-inner__menu-item--visible {
    opacity: 1;
    translate: 0 0;
  }

  .navbar-desktop-inner__menu-item--invisible {
    opacity: 0;
    translate: 0 calc(-1 * var(--space-sm-x2));
  }

  .navbar-desktop-inner__menu-item--link {
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-9);
    align-items: center;
    column-gap: var(--space-sm-x1);

    svg {
      width: var(--length-4);
      height: var(--length-4);
    }
  }

  .navbar-desktop-inner__menu-item--link--invisible {
    opacity: 0;
    translate: 0 var(--space-sm-x2);
  }

  .navbar-desktop-inner__menu-item-icon {
    /* margin-block-start: var(--space-sm-x4); */
    margin-block: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    height: var(--length-11);
    width: var(--length-11);
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);

    div {
      height: var(--length-6);
      width: var(--length-6);
      color: var(--color-primary-5);
    }
  }

  .navbar-desktop-inner__menu-item-title {
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-neutral-9);

    span {
      position: absolute;
      inset: 0;
    }
  }

  .navbar-desktop-inner__menu-item-description {
    margin-block-start: var(--space-sm-x4);
    color: var(--color-neutral-6);
  }
}
@layer components {
  .navbar-desktop {
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 20;
  }

  .navbar-desktop__logo {
    position: relative;
    display: flex;

    svg {
      height: var(--length-12);
      color: var(--color-white);
    }
  }

  .navbar-desktop__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .navbar-desktop__background-container {
    display: flex;
    position: relative;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-lg-x1);
    height: 70px;
    transition: all;
    transition-duration: var(--transition-duration-md);
  }

  .navbar-desktop__click-away-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }

  .navbar-desktop__menu-container {
    display: none;
  }

  .navbar-desktop__menu {
    margin-inline: auto;
    display: flex;
    width: 100%;
    height: 100%;
    gap: var(--space-sm-x2);
  }

  .navbar-desktop__menu-item {
    position: relative;
    z-index: var(--z-5);
  }

  .navbar-desktop__menu-item[data-animator-open-value="true"]
    .navbar-desktop__menu-item-button--button {
    background-color: var(--color-white);
    color: var(--color-primary-5);
  }

  .navbar[data-colour="opaque"]
    .navbar-desktop__menu-item[data-animator-open-value="true"]
    .navbar-desktop__menu-item-button--button {
    background-color: oklch(from var(--color-primary-5) l c h / 10%);
  }

  .navbar-desktop__menu-item-button {
    display: grid;
    place-items: center;
    border-radius: var(--border-radius-2);
    padding: var(--space-sm-x2) var(--space-md);
    height: 100%;
    width: var(--length-24);
    transition: all;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-sm-x1);
    text-align: center;
    color: var(--color-white);
    cursor: pointer;

    span {
      width: var(--length-5);
      height: var(--length-5);
    }

    p {
      font-size: var(--font-size-sm-x1);
    }

    &:hover {
      background-color: oklch(from var(--color-white) l c h / 10%);
    }

    &:active {
      background-color: oklch(from var(--color-white) l c h / 20%);
    }
  }

  .navbar[data-transitions="false"] .navbar-desktop__menu-item-button {
    transition: background;
  }

  .navbar-desktop[data-colour="opaque"] {
    .navbar-desktop__logo {
      svg {
        color: var(--color-primary-6);
      }
    }

    .navbar-desktop__background-container {
      background-color: oklch(from var(--color-white) l c h / 90%);
      padding-block: var(--space-sm-x3);
      box-shadow: var(--shadow-2);
      backdrop-filter: blur(var(--length-3));
      align-items: center;
    }

    .navbar-desktop__menu-item-button {
      color: var(--color-primary-5);

      &:hover {
        background-color: oklch(from var(--color-primary-5) l c h / 10%);
      }

      &:active {
        background-color: oklch(from var(--color-primary-5) l c h / 20%);
      }
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .navbar-desktop__logo {
      svg {
        height: var(--length-14);
      }
    }

    .navbar-desktop__background-container {
      height: 80px;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .navbar-desktop__logo {
      padding-left: var(--space-md);
    }

    .navbar-desktop__menu-container {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
    }

    .navbar-desktop__background-container {
      height: 100px;
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .navbar-desktop__menu {
      gap: var(--space-lg-x2);
    }

    .navbar-desktop__menu-item-button {
      p {
        font-size: var(--font-size-md);
      }

      span {
        width: var(--length-6);
        height: var(--length-6);
      }
    }

    .navbar-desktop__container {
      max-width: var(--max-reach-lg-x8);
      margin-inline: auto;
    }
  }
}
@layer components {
  .navbar-dialog {
    max-height: none;
    max-width: none;
    align-items: center;
    background: none;
    border: none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: auto;
    padding: var(--space-md);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition:
      opacity 0.5s ease-in-out,
      transform 0.5s ease-in-out,
      overlay 0.5s ease-in-out allow-discrete,
      display 0.5s ease-in-out allow-discrete;
    opacity: 0;
    transform: translateY(1em);

    &::backdrop {
      transition:
        display 0.5s allow-discrete,
        overlay 0.5s allow-discrete,
        background-color 0.5s;
      background-color: hsl(0deg 0 0 / 0%);
      backdrop-filter: blur(15px);
    }

    &[open]::backdrop {
      background-color: hsl(0deg 0 0 / 45%);
    }

    &[open] {
      display: grid;
      opacity: 1;
      transform: translateY(0);
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: translateY(80vh);
      }

      &[open]::backdrop {
        background-color: hsl(0deg 0 100 / 0%);
      }
    }
  }

  .navbar-dialog__click-away-box {
    position: absolute;
    inset: 0;
    z-index: calc(-1 * var(--z-5));
  }

  .navbar-dialog__container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .navbar-dialog__content-container {
    display: grid;
    align-content: flex-start;
    gap: var(--space-lg-x2);
    width: 100%;
    height: 50vh;
    overflow-y: scroll;
    border-top-left-radius: var(--border-radius-2);
    border-top-right-radius: var(--border-radius-2);
    background-color: var(--color-primary-0);
    padding: var(--space-lg-x1)
      calc(env(safe-area-inset-right) + var(--space-lg-x1))
      env(safe-area-inset-bottom)
      calc(env(safe-area-inset-left) + var(--space-lg-x1));
  }

  .navbar-dialog__menu {
    display: grid;
    gap: var(--space-md);
  }

  .navbar-dialog__menu-item-button-arrow {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  }

  .navbar-dialog__menu-item-button-arrow-icon {
    transition-property: rotate;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-sm-x1);
  }

  .navbar-dialog__menu-item-button {
    transition-property: background;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-sm-x1);
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
    width: 100%;
    height: fit-content;
    padding: var(--space-md);
    border-top-right-radius: var(--border-radius-2);
    border-top-left-radius: var(--border-radius-2);
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--color-primary-5);
  }

  .navbar-dialog__menu-item-button-icon {
    display: flex;
    align-items: center;
    width: var(--length-5);
    height: var(--length-5);
  }

  .navbar-dialog__menu-item {
    border-radius: var(--border-radius-2);
    font-size: var(--font-size-sm-x1);

    &::details-content {
      transform-origin: top;
      opacity: 0;
      transform: scaleY(0);
      transition:
        opacity 400ms,
        transform 400ms,
        content-visibility 275ms allow-discrete;
    }

    &[open]::details-content {
      transform: scaleY(1);
      opacity: 1;
    }

    &[open] .navbar-dialog__menu-item-button {
      background-color: var(--color-primary-5);
      border: var(--border-width-1) solid var(--color-primary-6);
      color: var(--color-primary-0);
    }

    &[open] .navbar-dialog__menu-item-button-arrow-icon {
      rotate: 90deg;
    }
  }

  .navbar-dialog__menu-item-content {
    overflow: hidden;
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);
    box-shadow:
      0 -3px 5px -2px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-4))
        inset,
      0 -7px 14px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6))
        inset;
  }

  .navbar-dialog__menu-item-content-container {
    padding: var(--space-sm-x2);
  }

  .navbar-dialog__menu-item-content-item {
    display: flex;
    align-items: center;
    column-gap: var(--space-sm-x2);
    padding: var(--space-sm-x2);
    border-radius: var(--border-radius-2);
    transition-property: background;
    transition-timing-function: ease-in-out;
    transition-duration: var(--transition-duration-sm-x1);

    &:active {
      background-color: oklch(from var(--color-primary-5) l c h / 20%);
    }
  }

  .navbar-dialog__menu-item-content-item--link {
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-9);

    svg {
      width: var(--length-4);
      height: var(--length-4);
    }
  }

  .navbar-dialog__menu-item-content-item-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    width: var(--length-11);
    height: var(--length-11);
    background-color: var(--color-white);

    div {
      display: flex;
      align-items: center;
      width: var(--length-5);
      height: var(--length-5);
      color: var(--color-primary-5);
    }
  }

  .navbar-dialog__menu-item-content-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm-x4);

    a {
      font-weight: var(--font-weight-semi-bold);
      color: var(--color-neutral-9);
    }

    p {
      color: var(--color-neutral-6);
    }
  }
}
@layer components {
  .navbar-mobile {
    position: fixed;
    bottom: 0;
    z-index: 20;
    width: 100%;
    padding: var(--space-sm-x4) env(safe-area-inset-right)
      calc(env(safe-area-inset-bottom) + var(--space-sm-x4))
      env(safe-area-inset-left);
    background-color: oklch(from var(--color-white) l c h / 90%);

    /* Upwards shadow; default in nativestartCSS is downwards
      this is based on var(--shadow-3) */
    box-shadow:
      0 1px 3px 0
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 -1px 2px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-3)),
      0 -2px 5px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-5)),
      0 -4px 12px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-6)),
      0 -12px 15px -5px
        oklch(var(--default-lch-shadow) / var(--default-shadow-strength-8));
    backdrop-filter: blur(var(--length-3));
  }

  .navbar-mobile__container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-inline: var(--space-sm-x3);
  }

  .navbar-mobile__menu {
    margin-inline: auto;
    width: 100%;
    height: 100%;
    max-width: var(--max-reach-md);
    padding-block-start: var(--space-sm-x4);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    place-items: center;
    gap: var(--space-sm-x3);
  }

  .navbar-mobile__menu-item {
    width: 100%;
    height: 100%;
  }

  .navbar-mobile__menu-item--last {
    order: 4; /* last */
  }

  .navbar-mobile__menu-item-button {
    width: 100%;
    height: 100%;
    padding: var(--space-sm-x2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    text-align: center;
    font-size: var(--font-size-sm-x1);
    color: var(--color-primary-5);
    transition-property: background;
    transition-timing-function: ease-in-out;

    &:hover {
      background-color: oklch(from var(--color-primary-5) l c h / 10%);
    }

    &:active {
      background-color: oklch(from var(--color-primary-5) l c h / 20%);
    }

    div {
      width: var(--length-5);
      height: var(--length-5);
    }
  }

  .navbar-mobile__menu-item-button--menu {
    padding-inline: var(--space-sm-x3);
    padding-block: var(--space-sm-x2);
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .navbar-mobile {
      display: none;
    }
  }
}
@layer components {
  .our-story {
    background-color: var(--color-white);
    timeline-scope: --our-story-timeline-scope;
  }

  .our-story__container {
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding: var(--space-lg-x3) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: clip;
  }

  .our-story__film-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg-x2);
    margin-block: var(--space-lg-x1);
    animation: our-story__fade-in linear both;
    animation-timeline: view();
    animation-range: entry;
    view-timeline: --our-story-timeline-scope;
  }

  @keyframes our-story__fade-in {
    0% {
      opacity: 0.3;
    }

    75% {
      opacity: 1;
    }
  }

  .our-story__film-image-container {
    padding: var(--space-md);
    padding-block-end: 0;
    background-color: var(--color-neutral-1);
    box-shadow: var(--shadow-2);
    width: 100%;
    max-width: var(--max-reach-md);

    /* 85% is arbitrary; adjust to manipulate how "stacked" the film cards are */
    --our-story__film-image-container-translate: calc(var(--i) * -85%);

    z-index: calc(var(--num-film) - var(--i));
    animation:
      our-story__slide-in ease-in-out both,
      our-story__rotate ease-in-out both;
    animation-timeline: --our-story-timeline-scope;

    &:nth-child(2n) {
      --our-story__film-image-container-rotate: 3deg;
    }

    &:nth-child(2n + 1) {
      --our-story__film-image-container-rotate: -3deg;
    }
  }

  @keyframes our-story__slide-in {
    0% {
      translate: 0 var(--our-story__film-image-container-translate);
    }

    70% {
      translate: 0 0;
    }
  }

  @keyframes our-story__rotate {
    0% {
      rotate: calc(-1.5 * var(--our-story__film-image-container-rotate));
    }

    70% {
      rotate: var(--our-story__film-image-container-rotate);
    }
  }

  .our-story__film-image {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
  }

  .our-story__film-image-description {
    font-family: var(--font-family-code);
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
    text-align: center;
    padding-block: var(--space-lg-x1);

    span {
      font-weight: var(--font-weight-bold);
      color: var(--color-black);
    }
  }

  @keyframes our-story__signature-slide-in {
    0% {
      opacity: 0;
      translate: 0 150%;
    }

    50% {
      opacity: 1;
    }

    60% {
      translate: 0 0%;
    }
  }

  .our-story__signatures {
    display: flex;
    margin-inline: auto;
    gap: var(--space-lg-x1);
  }

  .our-story__signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x1);

    > * {
      animation: our-story__signature-slide-in ease-out both;
      animation-timeline: view();
    }
  }

  .our-story__signature-name-container {
    display: flex;
    gap: var(--space-sm-x1);
    align-items: center;
  }

  .our-story__signature-name {
    font-weight: var(--font-weight-boldest);
  }

  .our-story__signature-image {
    width: var(--length-72);
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: contain;
  }

  .our-story__profile-image {
    width: var(--length-14);
    height: var(--length-14);
    border: var(--border-width-2) solid var(--color-neutral-2);
    object-fit: cover;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .our-story__film-strip {
      flex-direction: row;
    }

    .our-story__film-image-container {
      padding: var(--space-sm-x1);
      padding-block-end: 0;
    }

    @keyframes our-story__fade-in {
      0% {
        opacity: 0.3;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes our-story__slide-in {
      0% {
        translate: var(--our-story__film-image-container-translate) 0;
      }

      50% {
        translate: 0 0;
      }
    }

    @keyframes our-story__rotate {
      0% {
        rotate: calc(-1 * var(--our-story__film-image-container-rotate));
      }

      50% {
        rotate: var(--our-story__film-image-container-rotate);
      }
    }

    @keyframes our-story__signature-slide-in {
      0% {
        opacity: 0;
        translate: 0 50%;
      }

      30% {
        opacity: 1;
      }

      50% {
        translate: 0 0%;
      }
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .our-story__film-strip {
      flex-direction: row;
      margin-block: var(--space-lg-x3);
    }

    .our-story__film-image-container {
      padding: var(--space-md);
      padding-block-end: 0;
    }

    .our-story__signatures {
      gap: var(--space-lg-x3);
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}
@layer components {
  .our-team {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x2);
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    padding: var(--space-md);
    padding-block-end: var(--space-lg-x2);
    transition: all 200ms ease-in-out;
  }

  .our-team__person {
    width: 100%;
    transition: inherit;
  }

  .our-team__person-link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    transition: inherit;
  }

  .our-team__image-container {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: var(--length-40);
    transition: inherit;
    transform-origin: bottom;
  }

  .our-team__mask-container {
    position: relative;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 489'%3E%3Cg transform='translate(0 192)'%3E%3Ccircle cx='105' cy='192' r='105'/%3E%3Cpath d='M0-192h210v384H0z'/%3E%3C/g%3E%3C/svg%3E");
    mask-position: bottom;
    mask-size: 100%;
    width: 100%;
    height: 100%;
    transition: inherit;
  }

  .our-team__image-background {
    position: absolute;
    inset: 0;
    top: unset;
    background-image: var(--color-dark-gradient);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    z-index: calc(-1 * var(--z-1));
    border-radius: var(--border-radius-round);
  }

  .our-team__image {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: calc(-1 * var(--length-4));
    object-fit: cover;
    object-position: top;
    transition: inherit;
  }

  .our-team__text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x1);
    text-align: center;
    max-width: var(--max-reach-md);
    text-wrap: pretty;
    transition: inherit;
  }

  .our-team__text-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
    transition: inherit;
  }

  .our-team__name {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tightest);
    transition: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--length-0-5);
    text-underline-offset: var(--underline-offset-3);
  }

  .our-team__person-description {
    font-size: var(--font-size-sm-x1);
    font-style: italic;
    color: var(--color-neutral-5);
    margin-block-end: var(--space-sm-x3);
  }

  @media (any-hover: hover) {
    .our-team__person:hover {
      .our-team__image-container {
        scale: 103%;

        /* from drop-shadow-md mappings in token-mapping.md */
        filter: drop-shadow(0 4px 3px rgb(0 0 0 / 7%))
          drop-shadow(0 2px 2px rgb(0 0 0 / 6%));
      }

      .our-team__image {
        bottom: calc(-1 * var(--length-2));
      }

      .our-team__name {
        color: var(--color-primary-7);
        text-decoration-color: oklch(from var(--color-primary-8) l c h / 75%);
        scale: 0.95;
      }
    }
  }

  .our-team__person:active {
    .our-team__image-container {
      scale: 100%;

      /* based on drop-shadow-md mappings in token-mapping.md */
      filter: drop-shadow(0 2px 2px rgb(0 0 0 / 6%));
    }

    .our-team__image {
      bottom: calc(-1 * var(--length-4));
    }

    .our-team__name {
      color: var(--color-primary-9);
      text-decoration-color: oklch(from var(--color-primary-8) l c h / 25%);
    }
  }

  .our-team__contractors-note {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .our-team__image-container {
      max-width: var(--length-52);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .our-team {
      flex-direction: row;
      gap: var(--space-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .our-team {
      flex-direction: row;
      padding-inline: var(--space-lg-x2);
      padding-block-start: var(--space-md);
      padding-block-end: var(--space-lg-x2);
    }

    .our-team__image-container {
      max-width: var(--max-reach-sm-x3);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .portfolio-timeline {
    display: contents;
  }

  .portfolio-timeline__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-lg-x4));
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: var(--space-lg-x2);
    margin-block-end: var(--space-lg-x1);
  }

  .portfolio-timeline__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg-x1);
    perspective: 1800px;
  }

  .portfolio-timeline__item:nth-child(odd) {
    .tv-screen__mobile {
      right: unset;
      left: calc(-1 * var(--border-width-4));
    }
  }

  .portfolio-timeline__image-wrapper {
    max-width: var(--max-reach-md);
  }

  .portfolio-timeline__divider {
    display: none;
  }

  .portfolio-timeline__content {
    display: flex;
    flex-direction: column;
  }

  .portfolio-timeline__title {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-7);
  }

  .portfolio-timeline__description {
    color: var(--color-neutral-7);
    line-height: var(--line-height-loose);
    margin-block-start: var(--space-md);
  }

  .portfolio-timeline__location {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x4);

    svg {
      width: 1em;
      height: 1em;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .portfolio-timeline__list {
      gap: calc(var(--space-lg-x5));
      margin-block-start: var(--space-lg-x3);
      margin-block-end: var(--space-lg-x3);
    }

    .portfolio-timeline__item:nth-child(odd) {
      .tv-screen__mobile {
        left: unset;
        bottom: -5%;
        right: -30%;
      }
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .portfolio-timeline__image-wrapper {
      max-width: none;
      grid-area: image;
    }

    .portfolio-timeline__list {
      gap: calc(var(--space-lg-x4) * 1.5);
      margin-block-start: var(--space-lg-x2);
    }

    .portfolio-timeline__item {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--space-lg-x2);
    }

    .portfolio-timeline__item:nth-child(odd) {
      grid-template-areas: "image divider content";

      .portfolio-timeline__image-wrapper {
        --rotation: 26deg;
        --rotation-hover: 5deg;
      }

      .tv-screen__mobile {
        right: unset;
        bottom: -15%;
        left: 2%;
      }
    }

    .portfolio-timeline__item:nth-child(even) {
      grid-template-areas: "content divider image";

      .portfolio-timeline__image-wrapper {
        --rotation: -26deg;
        --rotation-hover: -5deg;
      }
    }

    .portfolio-timeline__divider {
      grid-area: divider;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .portfolio-timeline__content {
      grid-area: content;
    }

    .portfolio-timeline__divider-line {
      width: var(--length-0-5);
      flex-grow: 1;
      background-color: var(--color-neutral-3);
    }

    .portfolio-timeline__divider-dot {
      width: var(--length-3);
      height: var(--length-3);
      border-radius: 50%;
      background-color: var(--color-primary-6);
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .portfolio-timeline__item {
      gap: var(--space-lg-x3);
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}
@layer components {
  .projects {
    display: block;
  }

  .projects__card {
    display: inline-block;
    margin-block-end: var(--space-md);
    width: 100%;
  }

  .projects__note {
    text-align: center;
    font-size: var(--font-size-lg-x1);
    color: var(--color-neutral-7);
    font-weight: var(--font-weight-semi-bold);
    margin-block-start: var(--space-lg-x2);
    margin-inline: auto;
  }

  .projects__pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
    margin-block-end: -10vh;
  }

  .projects__pyramid-row {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
  }

  .projects__pyramid-row--5,
  .projects__pyramid-row--4 {
    display: none;
  }

  .projects__ghost-card {
    flex-shrink: 0;
    width: clamp(80px, 18vw, 180px);
    aspect-ratio: 3 / 2;
    border: var(--border-width-2) dashed var(--color-neutral-3);
    border-radius: var(--border-radius-3);
    background-color: white;
    opacity: 1;
    transform: translateY(10%) rotate(-1deg);

    @supports (animation-timeline: view()) {
      opacity: 0;
      transform: translateY(100%) rotate(3deg);
      animation: projects__ghost-rise linear both;
      animation-timeline: view();
      animation-range: 0 70vh;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .projects {
      columns: 2;
      column-gap: var(--space-md);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .projects {
      columns: 3;
    }

    .projects__pyramid-row--5,
    .projects__pyramid-row--4 {
      display: flex;
    }

    .projects__pyramid-row--2,
    .projects__pyramid-row--1 {
      display: none;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .projects {
      columns: 4;
    }
  }

  @keyframes projects__ghost-rise {
    to {
      transform: translateY(10%) rotate(-1deg);
      opacity: 1;
    }
  }
}
@layer components {
  .prose {
    max-width: var(--max-reach-lg-x5);

    --a-decoration-color: var(--color-primary-8);
    --a-color: var(--color-primary-7);
    --a-color-active: var(--color-primary-9);

    p:not(:first-child),
    ul:not(:first-child) {
      margin-block-start: var(--space-sm-x2);
    }

    p:not(:last-child),
    ul:not(:last-child) {
      margin-block-end: var(--space-sm-x2);
    }

    a {
      transition: all 200ms ease-in-out;
      text-decoration: underline;
      text-decoration-color: oklch(from var(--a-decoration-color) l c h / 50%);
      text-decoration-thickness: var(--length-0-5);
      text-underline-offset: var(--underline-offset-3);
    }

    strong {
      font-weight: var(--font-weight-bolder);
    }
  }

  .prose--center {
    margin-inline: auto;
  }

  .prose--looser {
    line-height: var(--line-height-looser);
  }

  .prose--light {
    --a-decoration-color: var(--color-primary-1);
    --a-color: var(--color-primary-2);
    --a-color-active: var(--color-primary-3);
  }

  .prose--drop-cap > p:first-child::first-letter {
    float: left;
    margin-inline-end: 0.1em;
    font-size: 300%;
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tightest);
  }

  .prose--pretty {
    text-wrap: pretty;
  }

  /* Note that :hover styles must come before :active styles */
  @media (any-hover: hover) {
    .prose a:hover {
      color: var(--a-color);
      text-decoration-color: oklch(from var(--a-decoration-color) l c h / 75%);
      scale: 0.95;
    }
  }

  .prose a:active {
    color: var(--a-color-active);
    text-decoration-color: oklch(from var(--a-decoration-color) l c h / 25%);
    scale: 0.9;
  }
}
@layer components {
  .quick-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .quick-facts__item {
    display: flex;
    gap: var(--space-sm-x3);
  }

  .quick-facts__item-bullet {
    display: block;
    margin-block-start: 0.5ch;
    flex-shrink: 0;
    width: var(--length-4);
    height: var(--length-4);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .quick-facts__item-bullet {
      margin-block-start: 0.3ch;
      width: var(--length-6);
      height: var(--length-6);
    }
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}
@layer components {
  .recent-posts {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .recent-posts__logo-svg {
    height: var(--length-20);
    margin-block-end: var(--space-md);
    width: auto;
    margin-inline: auto;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .reviews-list {
    padding-block: var(--space-lg-x3);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .reviews-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-sm-x3);
    row-gap: var(--space-sm-x4);
    align-items: center;

    > * {
      flex-shrink: 0;
    }
  }

  .reviews-row__reviewers {
    display: flex;
  }

  .reviews-row__reviewer {
    width: var(--length-6);
    height: var(--length-6);
    object-fit: cover;
    border-radius: var(--border-radius-round);
    outline: var(--border-width-2) solid var(--color-neutral-6);

    & + .reviews-row__reviewer {
      margin-inline-start: calc(-1 * var(--space-sm-x3));
    }
  }

  .reviews-row__stars {
    display: flex;

    svg {
      width: var(--length-6);
      height: var(--length-6);
      color: var(--color-yellow-2);
    }
  }

  .reviews-row__google-square-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    border-radius: var(--border-radius-round);
    overflow: clip;
    width: var(--length-6);
    height: var(--length-6);
  }

  .reviews-row__google-square-logo {
    width: var(--length-4);
    height: var(--length-4);
  }
}
@layer components {
  .reviews-ul-li {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(var(--length-64), 1fr));
  }

  .reviews-ul-li__item-wrapper {
    height: 100%;
  }

  .reviews-ul-li--columns {
    display: block;

    .reviews-ul-li__item-wrapper {
      display: inline-block;
      margin-block-end: var(--space-md);
    }
  }

  .reviews-ul-li__item {
    height: 100%;
    background-color: var(--color-white);
    padding: var(--space-md);
    border-radius: var(--border-radius-2);
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
  }

  .reviews-ul-li__stars {
    display: flex;
    gap: var(--space-sm-x4);

    svg {
      width: var(--length-5);
      height: var(--length-5);
      color: var(--color-primary-6);
    }
  }

  .reviews-ul-li__quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
  }

  .reviews-ul-li__text {
    font-size: var(--font-size-sm-x1);
  }

  .reviews-ul-li__cite {
    display: flex;
    gap: var(--space-sm-x2);
  }

  .reviews-ul-li__reviewer-role-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-sm-x4);
  }

  .reviews-ul-li__cite-text {
    font-size: var(--font-size-sm-x2);
  }

  .reviews-ul-li__profile-picture {
    width: var(--length-10);
    height: fit-content;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;

    /* trying to vertically align profile pictures with top of text  */
    margin-block-start: 0.3em;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .reviews-ul-li__reviewer {
    font-weight: var(--font-weight-boldest);
  }

  .reviews-ul-li__organisation-link {
    font-weight: var(--font-weight-normal);
    transform-origin: left;
  }

  .reviews-ul-li__review-link {
    font-size: var(--font-size-sm-x2);
    font-weight: var(--font-weight-normal);
    font-style: italic;
    transform-origin: left;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .reviews-ul-li--columns {
      columns: 2;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .reviews-ul-li--columns {
      columns: 3;
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .reviews-ul-li--columns {
      columns: 4;
    }
  }
}
@layer components {
  .reviews {
    position: relative;
  }

  .reviews__list-container {
    max-height: var(--max-reach-lg-x7);
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 70%,
      transparent 100%
    );
    overflow-y: hidden;
  }

  .reviews__button {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    translate: -50%;
    width: max-content;
    box-shadow: var(--shadow-4);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .reviews__list-container {
      max-height: var(--max-reach-lg-x8);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .reviews__item {
      &:nth-of-type(1) {
        grid-column: 1 / 3;
      }

      &:nth-of-type(2) {
        grid-column: 3 / -1;
      }
    }
  }
}
@layer components {
  .sanico-builds {
    padding-block-start: var(--space-sm-x1);
    padding-block-end: var(--space-lg-x1);
  }

  .sanico-builds__grid {
    display: grid;
    gap: var(--space-lg-x1);
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
  }

  @media (any-hover: hover) {
    .sanico-builds__card:hover {
      background-color: var(--color-primary-0);
    }
  }

  .sanico-builds__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--length-64);
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    border: var(--border-width-2) solid var(--color-neutral-1);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    transition: all 250ms ease-in-out;

    &:active {
      background-color: var(--color-primary-1);
      scale: 98%;
    }
  }

  .sanico-builds__card-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
    padding: var(--space-md);
  }

  .sanico-builds__card-title {
    font-size: var(--font-size-lg-x1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tighter);
  }

  .sanico-builds__card-description {
    font-size: var(--font-size-sm-x2);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-5);
  }

  .sanico-builds__card-animation {
    min-height: var(--length-40);
  }

  .sanico-builds__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .sanico-builds__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .sanico-builds__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .sanico-process {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sanico-process__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-block-start: var(--space-lg-x2);
  }

  .sanico-process__card {
    position: relative;
    width: 100%;
    max-width: var(--max-reach-md);
    padding: var(--space-lg-x1);
    background-color: var(--color-primary-0);
    border: var(--border-width-2) solid var(--color-neutral-1);
    border-radius: var(--border-radius-3);
    overflow: clip;
    box-shadow:
      0 0 0 1px var(--color-primary-2),
      var(--shadow-3);
  }

  .sanico-process__card-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .sanico-process__card-number {
    font-size: var(--font-size-lg-x4);
    font-weight: var(--font-weight-light);
    color: var(--color-primary-5);
    line-height: var(--line-height-tightest);
  }

  .sanico-process__card-title {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-7);
    line-height: var(--line-height-tight);
  }

  .sanico-process__card-description {
    font-size: var(--font-size-sm-x2);
    line-height: var(--line-height-loose);
    color: var(--color-neutral-7);
    margin-block-start: var(--space-sm-x2);
  }

  .sanico-process__screen-wrapper {
    max-width: var(--max-reach-sm-x2);
    margin-inline: auto;
    margin-block-start: var(--space-md);
  }

  .sanico-process__connector {
    position: relative;
    width: var(--border-width-2);
    height: var(--length-32);
    background-color: var(--color-primary-3);
    transform-origin: top;
    animation: sanico-process__connector-fill linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 70%;
  }

  .sanico-process__connector::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 100px;
    background-color: var(--color-primary-2);
    filter: blur(6px);
    opacity: 0;
    z-index: -1;
    animation: sanico-process__connector-glow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 80%;
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .sanico-process__card {
      padding: var(--space-lg-x2);
      max-width: var(--max-reach-lg-x1);
    }

    .sanico-process__card-description {
      font-size: var(--font-size-sm-x1);
      margin-block-start: var(--space-md);
      text-wrap: pretty;
    }

    .sanico-process__screen-wrapper {
      margin-block-start: var(--space-lg-x1);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
    .sanico-process__card {
      max-width: var(--max-reach-lg-x3);
    }
  }

  @keyframes sanico-process__connector-fill {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  @keyframes sanico-process__connector-glow {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.35;
    }
  }
}
@layer components {
  .section {
    width: 100%;
  }

  .section--light {
    background-color: var(--color-white);
  }

  .section--dark {
    background-image: var(--color-dark-gradient);
    color: var(--color-white);
  }

  .section--black {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  .section--relative {
    position: relative;
  }

  .section--overflow-clip {
    overflow: clip;
  }

  .section__container {
    --section-padding-inline: var(--space-md);

    width: 100%;
    max-width: var(--max-reach-lg-x8);
    margin-inline: auto;
    padding: var(--space-lg-x3) var(--section-padding-inline);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .section__container--no-gap {
    gap: 0;
  }

  .section__container--heading-only-padding {
    padding-inline: 0;

    .header {
      padding-inline: var(--section-padding-inline);
    }
  }

  .section__container--no-padding-block-start {
    padding-block-start: 0;
  }

  .section__container--no-padding-block-end {
    padding-block-end: 0;
  }

  .section__container--relative {
    position: relative;
  }
}
@layer components {
  .status-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    /* Should at least fill the page, minus padding-block-start, desktop menu, mobile menu. */

    /* Also add a min() to prevent over-stretching. */
    min-height: min(
      calc(100vh - var(--space-lg-x3) - 70px - 69.5px),
      var(--max-reach-lg-x4)
    );
  }

  .status-page__content-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .status-page__heading {
    font-size: var(--font-size-lg-x5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tightest);
  }

  .status-page__status-code {
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tightest);
    display: inline-block;
    width: fit-content;
    padding: var(--space-sm-x4);
    background-color: var(--color-primary-6);
    color: var(--color-white);
    rotate: 3deg;
    vertical-align: middle;
    margin-block-end: 0.4ch;
    margin-inline-end: var(--space-sm-x4);

    svg {
      width: var(--length-6);
      height: var(--length-6);
    }
  }

  .status-page__status-description {
    span {
      color: var(--color-primary-5);
    }
  }

  .status-page__status-description--error {
    span {
      color: var(--color-red-5);
    }
  }

  .status-page__status-code--success,
  .status-page__status-code--error {
    svg {
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
      stroke-width: var(--border-width-5);
      stroke: var(--color-white);
      fill: var(--color-white);
      fill-opacity: 0;
      animation: status-page__status-code--success-check 1.5s ease-in-out
        forwards;
    }
  }

  .status-page__status-code--success {
    background-color: var(--color-secondary-6);
  }

  .status-page__status-code--error {
    background-color: var(--color-red-6);
  }

  @keyframes status-page__status-code--success-check {
    0% {
      fill-opacity: 0;
    }

    100% {
      stroke-dashoffset: 0;
      fill-opacity: 1;
    }
  }

  .status-page__recovered-message {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);

    blockquote {
      background-color: var(--color-white);
      padding: var(--space-md);
      border-radius: var(--border-radius-3);
      box-shadow: var(--shadow-1);
    }
  }

  .status-page__button-container {
    display: flex;
    gap: var(--space-sm-x2);
  }

  .status-page__image-container,
  .status-page__image {
    min-width: var(--max-reach-lg-x2);
    width: 100%;
    height: auto;
    max-width: var(--max-reach-lg-x5);
    align-self: center;
    margin-block-start: auto;
  }

  .status-page__image-container {
    position: relative;
  }

  .status-page__image--mask-left {
    mask-image: linear-gradient(to right, transparent 0%, black 25%);
  }

  .status-page__message-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
    max-width: var(--max-reach-lg-x2);
  }

  .status-page__animated-paper-plane {
    position: absolute;
    left: 20%;
    bottom: 30%;
    width: var(--length-12);
    height: var(--length-12);
    rotate: 40deg;
    color: var(--color-primary-5);
    animation:
      status-page__animated-paper-plane-scoping 3s alternate infinite,
      status-page__animated-paper-plane-soaring 4s forwards infinite,
      status-page__animated-paper-plane-entering 3s ease-out forwards;
  }

  @keyframes status-page__animated-paper-plane-soaring {
    0% {
      rotate: 40deg;
    }

    40% {
      rotate: 55deg;
    }

    50% {
      rotate: 55deg;
    }

    60% {
      rotate: 30deg;
    }

    70% {
      rotate: 30deg;
    }

    100% {
      rotate: 40deg;
    }
  }

  @keyframes status-page__animated-paper-plane-scoping {
    0% {
      translate: 0 0;
    }

    100% {
      translate: 0 20px;
    }
  }

  @keyframes status-page__animated-paper-plane-entering {
    0% {
      opacity: 0;
      translate: 0 -30vw;
    }

    20% {
      opacity: 1;
    }

    100% {
      translate: 0 0;
    }
  }

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .status-page__image-container,
    .status-page__image {
      align-self: flex-end;
    }

    .status-page__animated-paper-plane {
      left: 7%;
      bottom: 30%;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .status-page {
      gap: 0;

      /* Should at least fill the page, minus padding-block-start, desktop menu. */

      /* Also add a min() to prevent over-stretching. */
      min-height: min(
        calc(100vh - var(--space-lg-x3) - 70px),
        var(--max-reach-lg-x6)
      );
    }

    .status-page__status-code {
      svg {
        width: var(--length-8);
        height: var(--length-8);
      }
    }

    .status-page__animated-paper-plane {
      bottom: 32%;
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .status-page__animated-paper-plane {
      left: -3%;
      bottom: 35%;
    }

    @keyframes status-page__animated-paper-plane-entering {
      0% {
        opacity: 0;
        translate: -30vw;
      }

      20% {
        opacity: 1;
      }

      100% {
        translate: 0;
      }
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .team-member {
    max-width: var(--max-reach-lg-x7);
    margin-inline: auto;

    /* fallback padding-block */
    padding-block: var(--space-md);
    padding-inline: var(--space-md);
    transition: all 300ms ease-in-out;

    /* make it look nicer if browser supports; padding-block-start on first team-member section */
    &:nth-child(1 of .team-member) {
      padding-block-start: var(--space-lg-x3);
    }

    /* make it look nicer if browser supports; padding-block-end on last team-member section */
    &:nth-last-child(1 of .team-member) {
      padding-block-end: var(--space-lg-x3);
    }
  }

  .team-member__container {
    background-color: var(--color-white);
    border-radius: var(--border-radius-3);
    padding: var(--space-md);
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    transition: inherit;
    box-shadow: var(--shadow-2);
  }

  .team-member__image-container {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-width: var(--length-40);
    transition: inherit;
    transform-origin: bottom;
  }

  .team-member__mask-container {
    position: relative;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 489'%3E%3Cg transform='translate(0 192)'%3E%3Ccircle cx='105' cy='192' r='105'/%3E%3Cpath d='M0-192h210v384H0z'/%3E%3C/g%3E%3C/svg%3E");
    mask-position: bottom;
    mask-size: 100%;
    width: 100%;
    height: 100%;
    transition: inherit;
  }

  .team-member__image-background {
    position: absolute;
    inset: 0;
    top: unset;
    background-image: var(--color-dark-gradient);
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    z-index: calc(-1 * var(--z-1));
    border-radius: var(--border-radius-round);
  }

  .team-member__image {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: calc(-1 * var(--length-4));
    object-fit: cover;
    object-position: top;
    transition: inherit;
  }

  .team-member__text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm-x1);
    text-align: center;
    text-wrap: pretty;
    transition: inherit;
  }

  .team-member__text-group {
    transition: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x4);
  }

  .team-member__name {
    font-size: var(--font-size-lg-x2);
    font-weight: var(--font-weight-boldest);
    line-height: var(--line-height-tightest);
    transition: inherit;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--length-0-5);
    text-underline-offset: var(--underline-offset-3);
  }

  .team-member__credentials {
    font-size: var(--font-size-sm-x1);
    color: var(--color-neutral-5);
  }

  @media (any-hover: hover) {
    .team-member__container:hover {
      box-shadow: var(--shadow-3);
      translate: 0 calc(-1 * var(--space-sm-x3));

      .team-member__image-container {
        scale: 103%;

        /* from drop-shadow-md mappings in token-mapping.md */
        filter: drop-shadow(0 4px 3px rgb(0 0 0 / 7%))
          drop-shadow(0 2px 2px rgb(0 0 0 / 6%));
      }

      .team-member__image {
        bottom: calc(-1 * var(--length-2));
      }

      .team-member__name {
        color: var(--color-primary-7);
        text-decoration-color: oklch(from var(--color-primary-8) l c h / 75%);
        scale: 0.95;
      }
    }
  }

  .team-member__container:active {
    box-shadow: var(--shadow-1);
    translate: 0 var(--space-sm-x4);

    .team-member__image-container {
      scale: 100%;

      /* based on drop-shadow-md mappings in token-mapping.md */
      filter: drop-shadow(0 2px 2px rgb(0 0 0 / 6%));
    }

    .team-member__image {
      bottom: calc(-1 * var(--length-4));
    }

    .team-member__name {
      color: var(--color-primary-9);
      text-decoration-color: oklch(from var(--color-primary-8) l c h / 25%);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .team-member__container {
      flex-direction: row;
      gap: var(--space-lg-x1);
      padding: var(--space-lg-x1);
    }

    .team-member__image-container {
      flex-shrink: 0;
    }

    .team-member__text-container {
      align-items: start;
      text-align: left;
    }

    .team-member__name {
      transform-origin: left;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .team-member__container {
      gap: var(--space-lg-x2);
      padding: var(--space-lg-x2);
    }

    .team-member__image-container {
      max-width: var(--length-52);
    }
  }

  /* break-lg-x1: 64rem (1024px)  */
  @media (width >= 64rem) {
    .team-member__container {
      gap: var(--space-lg-x3);
      padding: var(--space-lg-x2);
    }

    .team-member__image-container {
      max-width: var(--max-reach-sm-x4);
    }
  }

  /* break-lg-x2: 80rem (1280px)  */
  @media (width >= 80rem) {
  }
}
@layer components {
  .tv-screen {
    --rotation: 0deg;
    --rotation-hover: 0deg;

    position: relative;
    border: var(--border-width-4) var(--color-neutral-8) solid;
    background: var(--color-neutral-1);
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: var(--border-radius-md);
    transform-style: preserve-3d;
    transition: all ease-in-out 500ms;
  }

  .tv-screen--turn-in {
    transform: rotateY(var(--rotation));
    box-shadow: var(--shadow-4);
    animation: tv-screen__turn-in;
    animation-timeline: view();
    animation-range: entry;

    &:hover {
      transform: rotateY(var(--rotation-hover));
    }
  }

  .tv-screen__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .tv-screen__mobile {
    position: absolute;
    bottom: calc(-1 * var(--border-width-4));
    right: calc(-1 * var(--border-width-4));
    width: 32%;
    aspect-ratio: 9 / 16;
    border: var(--border-width-2) var(--color-neutral-8) solid;
    background: var(--color-neutral-1);
    border-radius: var(--border-radius-lg);
    overflow: clip;
    z-index: 2;
    box-shadow: var(--shadow-3);
  }

  .tv-screen__mobile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  @keyframes tv-screen__turn-in {
    0% {
      transform: rotateY(calc(var(--rotation) * 2));
      scale: 0.5;
    }

    100% {
      transform: rotateY(var(--rotation));
      scale: 1;
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
    .tv-screen__mobile {
      bottom: -5%;
      right: -30%;
    }
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .tv-screen__mobile {
      bottom: -15%;
      right: 2%;
    }
  }
}