/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* 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;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Enforce a measure for all elements, with a few exceptions */
* {
  max-inline-size: var(--measure, 60ch);
}
html,
body,
div,
header,
nav,
main,
footer {
  max-inline-size: none;
}
/* Base styles */
body {
  font-family: var(--font-base);
  color: var(--color-dark);
  font-size: var(--step-0);
  background: var(--bg-gradient);
  padding: var(--space-xl) var(--space-l);

  /* Center the content when there's a lot of screen real estate */
  display: grid;
}
body > main {
    margin-block: auto;
  }
/* Remove the left padding on ul elements with a list role */
ul[role='list'] {
  padding-left: 0;
}
/* Update focus-visible styles on all interactive elements */
:focus-visible {
  outline: 0.25em dotted var(--color-primary);
  outline-offset: 1px;
}
/* Reset margins */
h1,
ul {
  margin: 0;
}
/* Set heading styles */
h1 {
  font-size: var(--step-4);
  font-weight: var(--weight-bold);
}
/* @link https://utopia.fyi/space/calculator?c=320,12,1.2,1000,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,l-2xl|3xs-s&g=s,l,xl,12 */
:root {
  --space-3xs: clamp(0.19rem, calc(0.16rem + 0.15vw), 0.25rem);
  --space-2xs: clamp(0.38rem, calc(0.32rem + 0.29vw), 0.5rem);
  --space-xs: clamp(0.56rem, calc(0.47rem + 0.44vw), 0.75rem);
  --space-s: clamp(0.75rem, calc(0.63rem + 0.59vw), 1rem);
  --space-m: clamp(1.13rem, calc(0.95rem + 0.88vw), 1.5rem);
  --space-l: clamp(1.5rem, calc(1.26rem + 1.18vw), 2rem);
  --space-xl: clamp(2.25rem, calc(1.9rem + 1.76vw), 3rem);
  --space-2xl: clamp(3rem, calc(2.53rem + 2.35vw), 4rem);
  --space-3xl: clamp(4.5rem, calc(3.79rem + 3.53vw), 6rem);
  --space-4xl: clamp(5.25rem, calc(4.43rem + 4.12vw), 7rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.19rem, calc(0.04rem + 0.74vw), 0.5rem);
  --space-2xs-xs: clamp(0.38rem, calc(0.2rem + 0.88vw), 0.75rem);
  --space-xs-s: clamp(0.56rem, calc(0.36rem + 1.03vw), 1rem);
  --space-s-m: clamp(0.75rem, calc(0.4rem + 1.76vw), 1.5rem);
  --space-m-l: clamp(1.13rem, calc(0.71rem + 2.06vw), 2rem);
  --space-l-xl: clamp(1.5rem, calc(0.79rem + 3.53vw), 3rem);
  --space-xl-2xl: clamp(2.25rem, calc(1.43rem + 4.12vw), 4rem);
  --space-2xl-3xl: clamp(3rem, calc(1.59rem + 7.06vw), 6rem);
  --space-3xl-4xl: clamp(4.5rem, calc(3.32rem + 5.88vw), 7rem);

  /* Custom pairs */
  --space-l-2xl: clamp(1.5rem, calc(0.32rem + 5.88vw), 4rem);
  --space-3xs-s: clamp(0.19rem, calc(-0.19rem + 1.91vw), 1rem);
}
/* @link https://utopia.fyi/type/calculator?c=320,12,1.2,1000,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.52rem, calc(0.46rem + 0.28vw), 0.64rem);
  --step--1: clamp(0.63rem, calc(0.54rem + 0.41vw), 0.8rem);
  --step-0: clamp(0.75rem, calc(0.63rem + 0.59vw), 1rem);
  --step-1: clamp(0.9rem, calc(0.74rem + 0.82vw), 1.25rem);
  --step-2: clamp(1.08rem, calc(0.85rem + 1.14vw), 1.56rem);
  --step-3: clamp(1.3rem, calc(0.99rem + 1.55vw), 1.95rem);
  --step-4: clamp(1.56rem, calc(1.14rem + 2.09vw), 2.44rem);
  --step-5: clamp(1.87rem, calc(1.31rem + 2.79vw), 3.05rem);
}
:root {
  --color-dark: hsl(238 29% 16%);
  --color-dark-glare: hsl(237 12% 33%);
  --color-light: hsl(240 5% 91%);
  --color-light-shade: hsl(240 6% 50%);
  --color-light-glare: hsl(0 0% 100%);
  --color-primary: hsl(14 88% 65%);
  --color-secondary: hsl(240 73% 65%);
  --color-tertiary: hsl(273 75% 66%);

  --text-body: 12px;
  --font-base: 'Kumbh Sans', sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;

  --measure: 60ch;

  --bg-gradient: linear-gradient(
    0deg,
    hsl(240deg 73% 65%) 0%,
    hsl(251deg 74% 65%) 39%,
    hsl(262deg 74% 65%) 61%,
    hsl(273deg 75% 66%) 100%
  );

  --shadow-color: 240deg 56% 40%;
  --shadow-elevation-low: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.34),
    0px 0.7px 0.8px -1.2px hsl(var(--shadow-color) / 0.34),
    0px 1.8px 2px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.36),
    0px 1.5px 1.7px -0.8px hsl(var(--shadow-color) / 0.36),
    0px 3.7px 4.2px -1.7px hsl(var(--shadow-color) / 0.36),
    0px 8.9px 10px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high: 0px 0.4px 0.5px hsl(var(--shadow-color) / 0.34),
    0px 2.6px 2.9px -0.4px hsl(var(--shadow-color) / 0.34),
    0px 4.9px 5.5px -0.7px hsl(var(--shadow-color) / 0.34),
    0px 8px 9px -1.1px hsl(var(--shadow-color) / 0.34),
    -0.1px 12.8px 14.4px -1.4px hsl(var(--shadow-color) / 0.34),
    -0.1px 20px 22.5px -1.8px hsl(var(--shadow-color) / 0.34),
    -0.1px 30.3px 34.1px -2.1px hsl(var(--shadow-color) / 0.34),
    -0.2px 44.7px 50.3px -2.5px hsl(var(--shadow-color) / 0.34);
}
/* Flow CSS Utility */
/* Info: https://piccalil.li/quick-tip/flow-utility/ */
.flow > * + * {
  margin-top: var(--flow-space, 1em);
}
.accordion {
  --border-color: var(--color-light);
  --padding: var(--space-s);

  /* Add top and bottom borders */
  border-top: 1px solid var(--border-color);
}
.accordion:last-child {
    border-bottom: 1px solid var(--border-color);
  }
.accordion-header {
    font-size: var(--step-1);
    font-weight: var(--weight-regular);
    line-height: 1.2;
  }
.accordion-header-button {
      color: var(--color-dark-glare);
      border: none;
      width: 100%;
      padding-block: var(--padding);
      background: none;
      text-align: left;
      padding-inline: 0;
      display: flex;
      gap: 1em;
    }
/* Clicks should always register on the button, not on child elements */
.accordion-header-button > * {
        pointer-events: none;
      }
.accordion-header-button img {
        width: 0.7em;
        height: 100%;
        margin-block: auto;
        margin-inline: auto var(--space-3xs-s);
        transition: 200ms;
      }
.accordion-header-button[aria-expanded='true'] {
        font-weight: var(--weight-bold);
        color: var(--color-dark);
      }
.accordion-header-button[aria-expanded='true'] img {
          transform: rotateX(180deg);
        }
.accordion-header-button:hover {
        color: var(--color-primary);
        cursor: pointer;
      }
.accordion-panel {
    color: var(--color-light-shade);

    /* Add simple animation to show/hide panels */
    /* https://www.youtube.com/watch?v=B_n4YONte5A */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms;
  }
.accordion-panel:not([aria-hidden='true']) {
      grid-template-rows: 1fr;
    }
.accordion-panel-wrapper {
      overflow: hidden;
    }
.accordion-panel p:last-child {
      padding-bottom: var(--padding);
    }
.faq {
  background: var(--color-light-glare);
  padding: var(--space-xl-2xl) var(--space-l-2xl);
  max-width: 70em;
  margin-inline: auto;
  border-radius: 2em;
  box-shadow: var(--shadow-elevation-high);

  /* Serve as anchor for the hero image */
  position: relative;

  /* Add hefty top margin to prevent the hero image from getting cut */
  margin-top: 15vmax;
}
/* Keep the stack centered if container gets wider than the measure  */
.faq-content ul {
    margin-inline: auto;
  }
/* Center heading */
.faq h1 {
    text-align: center;

    /* Add hefty spacing at the top to offset the absolute-positioned image */
    margin-block: var(--space-3xl) var(--space-l);
  }
.faq-image {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -60%);
    width: min(20em, 70%);
  }
.faq-image::after {
      content: '';
      background-image: url('../images/bg-pattern-mobile.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: bottom;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 20%;
      z-index: -1;
    }
@media (min-width: 60em) {
.faq {
    /* Switch to two-column layout */
    display: grid;
    grid-template-columns: var(--space-l-2xl) 1fr 1fr var(--space-l-2xl);
    grid-template-rows: var(--space-xl-2xl) 1fr var(--space-xl-2xl);
    column-gap: 1em;

    /* Paddings will be expressed in grids, for easier positioning of elements to the edge of the card */
    padding: 0

    /* Remove the extra top margin */

    /* Left-align the heading */

    /* Content should flush right */

    /* Image container will be repositioned to follow the grid layout */
}
    .faq,
    .faq h1 {
      margin-top: 0;
    }
    .faq h1 {
      text-align: left;
    }
    .faq-content {
      grid-column: 3 / 4;
      grid-row: 2 / 3;
    }
    .faq-image {
      grid-column: 1 / 3;
      grid-row: 1 / 4;
      width: unset;
      position: unset;
      transform: unset;

      /* Center the image vertically in the card */
      display: flex;
    }
      .faq-image picture {
        margin-block: auto;
      }
      .faq-image {
      overflow: hidden;
  }

      /* Trim parts of images that extend beyond the card */

      /* Make the image bigger and position it just beyond the left edge */
      .faq-image img {
        width: 32em;
        transform: translateX(-5em);
      }

      /* Remove the shadow pseudo-element and express it as a background of .faq-image */
      .faq-image::after {
        content: none;
      }
      .faq-image {
      background-image: url('../images/bg-pattern-desktop.svg');
      background-repeat: no-repeat;
      background-position: top 67% right 7.3em;
      background-size: 240%;
  }

      /* Add the floating box just beyond the left edge of the card */
      .faq-image::before {
        content: url('../images/illustration-box-desktop.svg');
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -25%);
        z-index: 10;
      }
  }