/* =========================================================
   Practisi Help Center
========================================================= */


/* =========================================================
   Page variables
========================================================= */

:root {
  --help-blue:
    var(
      --green,
      #20663E
    );

  --help-blue-hover:
    #1A5433;

  --help-terra:
    var(
      --green,
      #20663E
    );

  --help-black:
    #111111;

  --help-text:
    var(
      --light-text,
      #171717
    );

  --help-muted:
    var(
      --light-secondary,
      #6B6B68
    );

  --help-soft:
    var(
      --light-soft,
      #8B8B86
    );

  --help-surface:
    var(
      --light-surface,
      #F7F7F5
    );

  --help-surface-hover:
    var(
      --light-hover,
      #F2F2EF
    );

  --help-white:
    #FFFFFF;

  --help-radius:
    var(
      --radius,
      4px
    );

  --help-max:
    var(
      --max,
      1480px
    );

  --help-gutter:
    var(
      --gutter,
      clamp(
        22px,
        4.4vw,
        72px
      )
    );

  --help-header-h:
    var(
      --header-h,
      76px
    );

  --help-ease:
    var(
      --ease,
      cubic-bezier(
        .22,
        .72,
        .22,
        1
      )
    );
}


/* =========================================================
   Base
========================================================= */

*,
*::before,
*::after {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {
  margin:
    0;

  min-width:
    320px;

  overflow-x:
    hidden;

  background:
    var(--help-white);

  color:
    var(--help-text);

  font-family:
    "Hanken Grotesk",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


.help-main {
  overflow:
    clip;
}


.help-main section {
  scroll-margin-top:
    calc(
      var(--help-header-h)
      +
      20px
    );
}


.help-main h1,
.help-main h2,
.help-main h3,
.help-main p {
  text-wrap:
    pretty;
}


.help-main a {


  text-decoration:
    none;
}


.help-main button:not(.button),
.help-main input {
  font:
    inherit;
}


.help-main img {
  display:
    block;

  max-width:
    100%;
}


::selection {
  background:
    rgba(
      11,
      54,
      154,
      .14
    );

  color:
    var(--help-text);
}


/* =========================================================
   Shared shell
========================================================= */

.help-shell {
  width:
    min(
      100%,
      var(--help-max)
    );

  margin-inline:
    auto;

  padding-inline:
    var(--help-gutter);
}


/* =========================================================
   Accessibility
========================================================= */

.help-visually-hidden {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(
      0,
      0,
      0,
      0
    );

  white-space:
    nowrap;

  border:
    0;
}


/* =========================================================
   Shared Practisi section heading
========================================================= */

.help-main h2 {
  margin:
    0;

  color:
    var(--help-text);

  font-size:
    clamp(
      42px,
      4.7vw,
      68px
    );

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


/* =========================================================
   Hero
========================================================= */

.help-hero {
  position:
    relative;

  z-index:
    40;

  width:
    100vw;

  max-width:
    none;

  margin-left:
    calc(
      50% -
      50vw
    );

  min-height:
    clamp(
      520px,
      52vw,
      650px
    );

  padding:
    calc(
      var(--help-header-h)
      +
      clamp(
        70px,
        7vw,
        104px
      )
    )
    0
    clamp(
      74px,
      7vw,
      100px
    );

  display:
    flex;

  align-items:
    center;

  overflow:
    visible;

  isolation:
    isolate;

  background:
    var(--help-black);

  color:
    #FFFFFF;
}


/* =========================================================
   Hero image
========================================================= */

.help-hero-media {
  position:
    absolute;

  z-index:
    -3;

  inset:
    0;

  overflow:
    hidden;

  background:
    #222222;
}


.help-hero-media img {
  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(
      1.002
    );
}


/* =========================================================
   Hero image shade
========================================================= */

.help-hero-shade {
  position:
    absolute;

  z-index:
    -2;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        .52
      )
      0%,
      rgba(
        0,
        0,
        0,
        .44
      )
      52%,
      rgba(
        0,
        0,
        0,
        .58
      )
      100%
    );
}


/* =========================================================
   Hero inner
========================================================= */

.help-hero-inner {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


/* =========================================================
   Hero copy
========================================================= */

.help-hero-copy {
  width:
    min(
      100%,
      920px
    );

  margin-inline:
    auto;
}


/* =========================================================
   Hero title
========================================================= */

.help-hero h1 {
  margin:
    0
    auto;

  max-width:
    920px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      60px,
      6.3vw,
      96px
    );

  line-height:
    .92;

  letter-spacing:
    -.064em;

  font-weight:
    500;
}



/* =========================================================
   Search
========================================================= */

.help-search {
  position:
    relative;

  z-index:
    20;

  width:
    min(
      100%,
      660px
    );

  margin:
    clamp(
      34px,
      3.8vw,
      46px
    )
    auto
    0;

  text-align:
    left;
}


/* =========================================================
   Search field
========================================================= */

.help-search-form {
  position:
    relative;

  width:
    100%;

  min-height:
    44px;

  display:
    grid;

  grid-template-columns:
    19px
    minmax(
      0,
      1fr
    )
    auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    0
    16px;

  border:
    0;

  border-radius:
    var(--help-radius);

  background:
    #FFFFFF;

  box-shadow:
    0
    14px
    42px
    rgba(
      0,
      0,
      0,
      .12
    );

  transition:
    box-shadow
    180ms
    ease;
}


.help-search-form:hover {
  box-shadow:
    0
    17px
    48px
    rgba(
      0,
      0,
      0,
      .15
    );
}


.help-search-form:focus-within {
  box-shadow:
    0
    0
    0
    2px
    rgba(
      11,
      54,
      154,
      .18
    ),
    0
    18px
    50px
    rgba(
      0,
      0,
      0,
      .15
    );
}


/* =========================================================
   Search icon
========================================================= */

.help-search-icon {
  width:
    19px;

  height:
    19px;

  display:
    grid;

  place-items:
    center;
}


.help-search-icon img {
  width:
    17px;

  height:
    17px;

  object-fit:
    contain;

  opacity:
    .60;
}


/* =========================================================
   Search input
========================================================= */

.help-search-form input {
  width:
    100%;

  min-width:
    0;

  height:
    42px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  appearance:
    none;

  background:
    transparent;

  color:
    var(--help-text);

  font-size:
    14px;

  line-height:
    1;

  font-weight:
    450;

  letter-spacing:
    -.015em;
}


.help-search-form input::placeholder {
  color:
    #858580;

  opacity:
    1;
}


.help-search-form
input::-webkit-search-cancel-button {
  appearance:
    none;
}


/* =========================================================
   Search clear
========================================================= */

.help-search-clear {
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: transparent;
  cursor: pointer;
  opacity: .58;
  transition: opacity 160ms ease;
}

.help-search-clear:hover,
.help-search-clear:focus-visible {
  opacity: .82;
}

.help-search-clear img { width: 17px; height: 17px; object-fit: contain; opacity: .7; }


.help-search-clear[hidden] {
  display:
    none;
}


/* =========================================================
   Search results
========================================================= */

.help-search-results {
  position:
    absolute;

  z-index:
    50;

  top:
    calc(
      100%
      +
      8px
    );

  left:
    0;

  width:
    100%;

  max-height:
    390px;

  padding:
    7px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    none;

  -ms-overflow-style:
    none;

  border:
    0;

  border-radius:
    var(--help-radius);

  background:
    #FFFFFF;

  color:
    var(--help-text);

  box-shadow:
    0
    24px
    62px
    rgba(
      0,
      0,
      0,
      .17
    );
}


.help-search-results::-webkit-scrollbar {
  width:
    0;

  height:
    0;

  display:
    none;
}


.help-search-results[hidden] {
  display:
    none;
}


/* =========================================================
   Search results heading
========================================================= */

.help-search-results-head {
  min-height:
    34px;

  padding:
    0
    10px;

  display:
    flex;

  align-items:
    center;
}


.help-search-results-head span {
  color:
    var(--help-soft);

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    550;
}


/* =========================================================
   Search results list
========================================================= */

.help-search-results-list {
  display:
    grid;

  gap:
    2px;
}


/* =========================================================
   Search result
========================================================= */

.help-search-result {
  width:
    100%;

  min-height:
    52px;

  padding:
    8px
    10px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    17px;

  align-items:
    center;

  gap:
    14px;

  border-radius:
    var(--help-radius);

  background:
    transparent;

  transition:
    background-color
    160ms
    ease;
}


.help-search-result:hover,
.help-search-result:focus-visible,
.help-search-result.is-active {
  background:
    var(--help-surface);

  outline:
    none;
}


.help-search-result-copy {
  min-width:
    0;
}


.help-search-result-copy strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--help-text);

  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    550;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.help-search-result-copy span {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--help-soft);

  font-size:
    9.5px;

  line-height:
    1.3;
}


.help-search-result > img {
  width:
    14px;

  height:
    14px;

  justify-self:
    end;

  object-fit:
    contain;

  opacity:
    .48;

  transition:
    opacity
    160ms
    ease,
    transform
    220ms
    var(--help-ease);
}


.help-search-result:hover > img,
.help-search-result:focus-visible > img,
.help-search-result.is-active > img {
  opacity:
    1;

  transform:
    translateX(
      3px
    );
}


/* =========================================================
   Search empty state
========================================================= */

.help-search-empty {
  padding:
    24px
    10px
    21px;
}


.help-search-empty strong {
  display:
    block;

  color:
    var(--help-text);

  font-size:
    12px;

  font-weight:
    550;
}


.help-search-empty p {
  margin:
    5px
    0
    0;

  color:
    var(--help-muted);

  font-size:
    10px;

  line-height:
    1.5;
}


/* =========================================================
   Browse topics
========================================================= */

.help-library {
  padding:
    clamp(
      108px,
      9vw,
      152px
    )
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   Browse topics heading
========================================================= */

.help-section-head {
  margin-bottom:
    clamp(
      46px,
      5vw,
      68px
    );
}


.help-section-head h2 {
  max-width:
    820px;
}


/* =========================================================
   Topic grid
========================================================= */

.help-card-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  align-items:
    start;
}


/* =========================================================
   Topic card
========================================================= */

.help-card {
  position:
    relative;

  min-height:
    308px;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    var(--help-radius);

  background:
    var(--help-surface);

  color:
    var(--help-text);

  transform:
    translateY(
      0
    );

  transition:
    background-color
    190ms
    ease,
    transform
    230ms
    var(--help-ease);
}


.help-card:hover,
.help-card:focus-within {
  background:
    var(--help-surface-hover);

  transform:
    translateY(
      -2px
    );
}


/* =========================================================
   Card icon
========================================================= */

.help-card-icon,
.help-contact-icon {
  width:
    46px;

  height:
    46px;

  flex:
    0
    0
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #EEF6F0;
}


.help-card-icon img,
.help-contact-icon img {
  width:
    21px;

  height:
    21px;

  object-fit:
    contain;
}


/* =========================================================
   Card heading
========================================================= */

.help-card-heading {
  margin-top:
    19px;
}


.help-card-heading h3 {
  margin:
    0;

  color:
    var(--help-text);

  font-size:
    clamp(
      18px,
      1.45vw,
      22px
    );

  line-height:
    1.08;

  letter-spacing:
    -.035em;

  font-weight:
    500;
}


.help-card-heading p {
  margin:
    10px
    0
    0;

  max-width:
    310px;

  color:
    var(--help-muted);

  font-size:
    11.5px;

  line-height:
    1.55;
}


/* =========================================================
   Card article links
========================================================= */

.help-card-links {
  margin-top:
    20px;

  display:
    grid;

  gap:
    1px;
}


.help-card-link {
  width:
    100%;

  min-height:
    31px;

  padding:
    3px
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    14px;

  align-items:
    center;

  gap:
    10px;

  color:
    #40403D;

  font-size:
    10.5px;

  line-height:
    1.35;

  font-weight:
    450;

  transition:
    color
    160ms
    ease;
}


.help-card-link > span {
  min-width:
    0;
}


.help-card-link > img {
  width:
    13px;

  height:
    13px;

  justify-self:
    end;

  object-fit:
    contain;

  opacity:
    .40;

  transform:
    translateX(
      -2px
    );

  transition:
    opacity
    160ms
    ease,
    transform
    220ms
    var(--help-ease);
}


.help-card-link:hover,
.help-card-link:focus-visible {
  color:
    var(--help-blue);

  outline:
    none;
}


.help-card-link:hover > img,
.help-card-link:focus-visible > img {
  opacity:
    1;

  transform:
    translateX(
      3px
    );
}


/* =========================================================
   View all

   Default behavior is visible for touch devices.

   Mouse and trackpad devices hide the control until the
   user enters the card. The card then grows naturally.
========================================================= */

.help-card-open {
  width:
    max-content;

  max-height:
    28px;

  margin-top:
    16px;

  overflow:
    hidden;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--help-blue);

  font-size:
    10.5px;

  line-height:
    1;

  font-weight:
    600;

  opacity:
    1;

  transform:
    none;

  transition:
    max-height
    280ms
    var(--help-ease),
    margin-top
    280ms
    var(--help-ease),
    opacity
    180ms
    ease,
    transform
    250ms
    var(--help-ease),
    color
    160ms
    ease;
}


.help-card-open img {
  width:
    13px;

  height:
    13px;

  object-fit:
    contain;

  transition:
    transform
    220ms
    var(--help-ease);
}


.help-card-open:hover,
.help-card-open:focus-visible {
  color:
    var(--help-blue-hover);

  outline:
    none;
}


.help-card-open:hover img,
.help-card-open:focus-visible img {
  transform:
    translateX(
      3px
    );
}


/* =========================================================
   Hover-capable devices

   View all occupies no visual space until the card is
   hovered or receives keyboard focus.
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .help-card-open {
    max-height:
      0;

    margin-top:
      0;

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transform:
      translateY(
        5px
      );
  }


  .help-card:hover
  .help-card-open,
  .help-card:focus-within
  .help-card-open {
    max-height:
      28px;

    margin-top:
      16px;

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;

    transform:
      none;
  }

}


/* =========================================================
   Blue support card
========================================================= */

.help-card--support {
  background:
    var(--help-blue);

  color:
    #FFFFFF;
}


.help-card--support:hover,
.help-card--support:focus-within {
  background:
    var(--help-blue);
}


.help-card--support
.help-card-icon--support {
  background:
    #FFFFFF;
}


.help-card--support
.help-card-heading h3 {
  color:
    #FFFFFF;
}


.help-card--support
.help-card-heading p {
  color:
    rgba(
      255,
      255,
      255,
      .68
    );
}


.help-card--support
.help-card-link {
  color:
    rgba(
      255,
      255,
      255,
      .80
    );
}


.help-card--support
.help-card-link:hover,
.help-card--support
.help-card-link:focus-visible {
  color:
    #FFFFFF;
}


.help-card--support
.help-card-link > img,
.help-card--support
.help-card-open img {
  filter:
    brightness(
      0
    )
    invert(
      1
    );
}


.help-card--support
.help-card-link > img {
  opacity:
    .60;
}


.help-card--support
.help-card-link:hover > img,
.help-card--support
.help-card-link:focus-visible > img {
  opacity:
    1;
}


.help-card--support
.help-card-open {
  color:
    #FFFFFF;
}


/* =========================================================
   Popular articles
========================================================= */

.help-popular {
  padding:
    0
    0
    clamp(
      108px,
      9vw,
      152px
    );

  background:
    #FFFFFF;
}


/* =========================================================
   Popular heading
========================================================= */

.help-popular-head {
  margin-bottom:
    clamp(
      46px,
      5vw,
      68px
    );
}


/* =========================================================
   Popular grid
========================================================= */

.help-popular-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


/* =========================================================
   Popular article
========================================================= */

.help-popular-item {
  min-height:
    82px;

  padding:
    20px
    22px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    17px;

  align-items:
    center;

  gap:
    18px;

  border:
    0;

  border-radius:
    var(--help-radius);

  background:
    var(--help-surface);

  color:
    var(--help-text);

  font-size:
    clamp(
      14px,
      1.15vw,
      16px
    );

  line-height:
    1.35;

  letter-spacing:
    -.022em;

  font-weight:
    500;

  transition:
    background-color
    190ms
    ease,
    color
    170ms
    ease,
    transform
    230ms
    var(--help-ease);
}


.help-popular-item:hover,
.help-popular-item:focus-visible {
  background:
    var(--help-surface-hover);

  color:
    var(--help-blue);

  outline:
    none;

  transform:
    translateY(
      -2px
    );
}


.help-popular-item > img {
  width:
    15px;

  height:
    15px;

  justify-self:
    end;

  object-fit:
    contain;

  opacity:
    .46;

  transform:
    translate(
      -1px,
      1px
    );

  transition:
    opacity
    160ms
    ease,
    transform
    230ms
    var(--help-ease);
}


.help-popular-item:hover > img,
.help-popular-item:focus-visible > img {
  opacity:
    1;

  transform:
    translate(
      3px,
      -3px
    );
}


/* =========================================================
   Contact section
========================================================= */

.help-contact {
  padding:
    clamp(
      116px,
      10vw,
      166px
    )
    0;

  background:
    var(--help-surface);
}


/* =========================================================
   Contact inner
========================================================= */

.help-contact-inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


/* =========================================================
   Contact icon
========================================================= */

.help-contact-icon {
  margin-bottom:
    30px;

  background:
    #EEF6F0;
}


/* =========================================================
   Contact copy
========================================================= */

.help-contact-copy {
  width:
    min(
      100%,
      900px
    );

  display:
    grid;

  justify-items:
    center;
}


.help-contact-copy h2 {
  max-width:
    900px;
}


.help-contact-copy p {
  margin:
    22px
    0
    0;

  max-width:
    520px;

  color:
    var(--help-muted);

  font-size:
    clamp(
      15px,
      1.15vw,
      17px
    );

  line-height:
    1.65;
}


/* =========================================================
   Contact button
========================================================= */

.help-contact-button {
  min-height:
    44px;

  margin-top:
    34px;

  padding:
    0
    18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border: 0;

  border-radius:
    var(--help-radius);

  background:
    transparent;

  box-shadow: inset 0 0 0 .5px var(--help-blue);

  color: var(--help-blue);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  transition:
    border-color
    160ms
    ease,
    color
    160ms
    ease,
    transform
    180ms
    var(--help-ease);
}


.help-contact-button:hover,
.help-contact-button:focus-visible {
  box-shadow: inset 0 0 0 .5px var(--help-terra);
  color: var(--help-terra);
  outline: none;
}


.help-contact-button:active {
  transform:
    translateY(
      1px
    );
}


/* =========================================================
   Quiet reveals
========================================================= */

.help-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.help-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   Large tablet
========================================================= */

@media (max-width: 1260px) {

  .help-card-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 940px) {

  .help-card-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* =========================================================
   Small tablet
========================================================= */

@media (max-width: 820px) {

  .help-popular-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 700px) {

  .help-main h2 {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }


  .help-hero {
    min-height:
      520px;

    padding:
      calc(
        var(--help-header-h)
        +
        64px
      )
      0
      72px;
  }


  .help-hero h1 {
    font-size:
      clamp(
        50px,
        13.5vw,
        70px
      );
  }


  .help-hero-copy p {
    margin-top:
      20px;
  }


  .help-search {
    width:
      min(
        100%,
        580px
      );

    margin-top:
      32px;
  }


  .help-search-form {
    min-height:
      44px;

    padding:
      0
      14px;
  }


  .help-search-form input {
    height:
      42px;

    font-size:
      13.5px;
  }


  .help-library {
    padding:
      88px
      0;
  }


  .help-section-head,
  .help-popular-head {
    margin-bottom:
      40px;
  }


  .help-card-grid {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .help-card {
    min-height:
      0;

    padding:
      24px
      22px;
  }


  .help-card-heading p {
    max-width:
      520px;
  }


  .help-popular {
    padding-bottom:
      88px;
  }


  .help-popular-item {
    min-height:
      76px;

    padding:
      18px
      20px;
  }


  .help-contact {
    padding:
      92px
      0;
  }


  .help-contact-button {
    margin-top:
      30px;
  }

}


/* =========================================================
   Small mobile
========================================================= */

@media (max-width: 480px) {

  .help-hero {
    min-height:
      490px;

    padding:
      calc(
        var(--help-header-h)
        +
        56px
      )
      0
      64px;
  }


  .help-hero h1 {
    font-size:
      clamp(
        46px,
        13vw,
        60px
      );
  }


  .help-search-results {
    max-height:
      340px;
  }


  .help-card-heading h3 {
    font-size:
      21px;
  }


  .help-card-icon,
  .help-contact-icon {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;
  }


  .help-card-icon img,
  .help-contact-icon img {
    width:
      20px;

    height:
      20px;
  }


  .help-popular-item {
    min-height:
      72px;
  }

}


/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .help-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .help-search-form,
  .help-search-result,
  .help-search-result img,
  .help-card,
  .help-card-link,
  .help-card-link img,
  .help-card-open,
  .help-card-open img,
  .help-popular-item,
  .help-popular-item img,
  .help-contact-button {
    transition:
      none !important;
  }

}