/* =========================================================
  REDOVAR SUPPORT HUB
  Developed by Cavendish Pierre-Louis
  https://cavendishpierrelouis.io
========================================================= */


/* =========================================================
  PAGE VARIABLES
========================================================= */

:root {
  --support-blue: var(--redovar-blue, #0B369A);
  --support-blue-hover: #092F86;

  --support-terra: var(--redovar-terracotta, #C34811);
  --support-terra-hover: #A93D0D;

  --support-black: #111111;

  --support-text: #171717;
  --support-copy: #323230;
  --support-muted: #6B6B68;
  --support-soft: #8B8B86;

  --support-border: #E7E7E3;
  --support-strong: #D9D9D4;

  --support-surface: #F7F7F5;
  --support-surface-hover: #F2F2EF;

  --support-white: #FFFFFF;

  --support-radius: 4px;

  --support-max: 1480px;

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

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

  --support-ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );
}


/* =========================================================
  RESET
========================================================= */

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


html {
  scroll-behavior: smooth;
  background: var(--support-white);
}


body {
  margin: 0;

  min-width: 320px;

  overflow-x: hidden;

  background: var(--support-white);
  color: var(--support-text);

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

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.support-main {
  width: 100%;

  overflow: clip;

  background: var(--support-white);
}


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


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


/*
 IMPORTANT:
 Do not assign color: inherit here.

 The old global anchor color was stronger than the
 button classes and caused dark text inside blue buttons
 and white text inside the white Get a Demo button.
*/

.support-main a {
  text-decoration: none;
}


.support-main button,
.support-main input {
  font: inherit;
}


.support-main img {
  display: block;
  max-width: 100%;
}


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

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


/* =========================================================
  SHARED SHELL
========================================================= */

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

  margin-inline: auto;

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


/* =========================================================
  ACCESSIBILITY
========================================================= */

.support-visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

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

  white-space: nowrap;

  border: 0;
}


/* =========================================================
  SECTION HEADINGS
========================================================= */

.support-section-heading {
  margin-bottom:
    clamp(
      34px,
      4vw,
      52px
    );
}


.support-section-heading h2 {
  margin: 0;

  color: var(--support-text);

  font-size:
    clamp(
      30px,
      3.1vw,
      44px
    );

  line-height: 1.02;

  letter-spacing: -.045em;

  font-weight: 500;
}


/* =========================================================
  HERO
========================================================= */

.support-hero {
  position: relative;

  z-index: 40;

  min-height:
    clamp(
      520px,
      51vw,
      660px
    );

  padding:
    calc(
      var(--support-header-h)
      +
      clamp(
        72px,
        7vw,
        106px
      )
    )
    0
    clamp(
      76px,
      7vw,
      104px
    );

  display: flex;
  align-items: center;

  overflow: visible;

  isolation: isolate;

  background: var(--support-black);

  color: var(--support-white);
}


/* =========================================================
  HERO IMAGE
========================================================= */

.support-hero-media {
  position: absolute;

  z-index: -3;

  inset: 0;

  overflow: hidden;

  background: #222222;
}


.support-hero-media img {
  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  transform:
    scale(
      1.002
    );
}


/* =========================================================
  HERO SHADE
========================================================= */

.support-hero-shade {
  position: absolute;

  z-index: -2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        .40
      )
      0%,
      rgba(
        0,
        0,
        0,
        .45
      )
      48%,
      rgba(
        0,
        0,
        0,
        .60
      )
      100%
    );
}


/* =========================================================
  HERO INNER
========================================================= */

.support-hero-inner {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}


/* =========================================================
  HERO LOGO MARK
========================================================= */

.support-hero-mark {
  width: 48px;
  height: 48px;

  margin-bottom: 22px;

  display: grid;

  place-items: center;
}


.support-hero-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* =========================================================
  HERO COPY
========================================================= */

.support-hero-copy {
  width:
    min(
      100%,
      850px
    );

  margin-inline: auto;
}


.support-hero-copy h1 {
  max-width: 850px;

  margin:
    0
    auto;

  color: #FFFFFF;

  font-size:
    clamp(
      48px,
      5.5vw,
      72px
    );

  line-height: .96;

  letter-spacing: -.058em;

  font-weight: 500;
}


.support-hero-copy p {
  margin:
    18px
    0
    0;

  color:
    rgba(
      255,
      255,
      255,
      .76
    );

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

  line-height: 1.6;

  letter-spacing: -.01em;

  font-weight: 400;
}


/* =========================================================
  HERO SEARCH
========================================================= */

.support-search {
  position: relative;

  z-index: 30;

  width:
    min(
      100%,
      700px
    );

  margin:
    clamp(
      30px,
      3.3vw,
      42px
    )
    auto
    0;

  text-align: left;
}


/* =========================================================
  SEARCH FIELD

  LEFT:
  Search icon

  CENTER:
  Search text

  RIGHT:
  Clear icon when text exists
========================================================= */

.support-search-form {
  position: relative;

  width: 100%;

  min-height: 44px;

  display: grid;

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

  align-items: center;

  gap: 4px;

  padding:
    0
    10px
    0
    8px;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .18
    );

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

  background: #F3F3F1;

  box-shadow:
    0
    18px
    48px
    rgba(
      0,
      0,
      0,
      .16
    );

  transition:
    background-color
    170ms
    ease,
    box-shadow
    170ms
    ease;
}


.support-search-form:hover {
  background: #F7F7F5;

  box-shadow:
    0
    21px
    54px
    rgba(
      0,
      0,
      0,
      .19
    );
}


.support-search-form:focus-within {
  background: #FFFFFF;

  box-shadow:
    0
    0
    0
    2px
    rgba(
      11,
      54,
      154,
      .24
    ),
    0
    22px
    56px
    rgba(
      0,
      0,
      0,
      .18
    );
}


/* =========================================================
  SEARCH INPUT
========================================================= */

.support-search-form input {
  grid-column: 2;
  grid-row: 1;

  width: 100%;

  min-width: 0;

  height: 42px;

  padding: 0;

  border: 0;
  outline: 0;

  appearance: none;

  background: transparent;

  color: var(--support-text);

  font-size: 14px;

  line-height: 1;

  letter-spacing: -.012em;

  font-weight: 450;
}


.support-search-form input::placeholder {
  color: #7D7D78;

  opacity: 1;
}


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


/* =========================================================
  SEARCH BUTTON
  LEFT SIDE
========================================================= */

.support-search-submit {
  grid-column: 1;
  grid-row: 1;

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  align-self: center;
  justify-self: start;

  padding: 0;

  border: 0;

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

  background: transparent;

  color:
    var(--support-text);

  cursor: pointer;

  transition:
    background-color
    150ms
    ease,
    opacity
    150ms
    ease;
}


.support-search-submit:hover,
.support-search-submit:focus-visible {
  background:
    #E9E9E6;

  outline: none;
}


.support-search-submit img {
  width: 18px;
  height: 18px;

  object-fit: contain;

  opacity: .62;
}


/* =========================================================
  CLEAR SEARCH
  RIGHT SIDE

  Uses:
  assets/icons/clear-svgrepo-com.svg
========================================================= */

.support-search-clear {
  grid-column: 3;
  grid-row: 1;

  width: 30px;
  height: 30px;

  padding: 0;

  display: grid;

  place-items: center;

  align-self: center;
  justify-self: end;

  border: 0;

  border-radius: 50%;

  background: transparent;

  cursor: pointer;

  opacity: .56;

  transition:
    opacity
    150ms
    ease,
    transform
    150ms
    ease;
}


.support-search-clear:hover,
.support-search-clear:focus-visible {
  background: transparent;

  opacity: .82;

  outline: none;
}


.support-search-clear:active {
  transform:
    scale(
      .94
    );
}


.support-search-clear img {
  width: 17px;
  height: 17px;

  object-fit: contain;

  opacity: .70;

  filter:
    grayscale(
      1
    );
}


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


/* =========================================================
  SEARCH RESULTS
========================================================= */

.support-search-results {
  position: absolute;

  z-index: 70;

  top:
    calc(
      100%
      +
      8px
    );

  left: 0;

  width: 100%;

  max-height: 390px;

  padding: 7px;

  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: none;

  border:
    1px
    solid
    var(--support-border);

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

  background: #FFFFFF;

  color: var(--support-text);

  box-shadow:
    0
    28px
    68px
    rgba(
      0,
      0,
      0,
      .18
    );
}


.support-search-results::-webkit-scrollbar {
  display: none;
}


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


/* =========================================================
  SEARCH RESULT HEADING
========================================================= */

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

  padding:
    0
    10px;

  display: flex;

  align-items: center;
}


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

  font-size: 10px;

  line-height: 1;

  font-weight: 550;
}


/* =========================================================
  SEARCH RESULT LIST
========================================================= */

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

  gap: 2px;
}


/* =========================================================
  SEARCH RESULT
========================================================= */

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

  min-height: 56px;

  padding:
    9px
    10px;

  display: grid;

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

  align-items: center;

  gap: 16px;

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

  color: var(--support-text);

  background: transparent;

  transition:
    background-color
    150ms
    ease,
    color
    150ms
    ease;
}


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

  color: var(--support-blue);

  outline: none;
}


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


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

  overflow: hidden;

  color: inherit;

  font-size: 12.5px;

  line-height: 1.35;

  letter-spacing: -.01em;

  font-weight: 550;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

  margin-top: 3px;

  color: var(--support-soft);

  font-size: 10px;

  line-height: 1.35;
}


.support-search-result > img {
  width: 13px;
  height: 13px;

  justify-self: end;

  object-fit: contain;

  opacity: .42;

  transition:
    opacity
    150ms
    ease,
    transform
    220ms
    var(--support-ease);
}


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

  transform:
    translateX(
      3px
    );
}


/* =========================================================
  EMPTY SEARCH
========================================================= */

.support-search-empty {
  padding:
    24px
    10px
    20px;
}


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

  color: var(--support-text);

  font-size: 12px;

  font-weight: 550;
}


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

  color: var(--support-muted);

  font-size: 10.5px;

  line-height: 1.5;
}


/* =========================================================
  FAST SUPPORT
========================================================= */

.support-fast {
  padding:
    clamp(
      72px,
      7vw,
      106px
    )
    0
    clamp(
      92px,
      8vw,
      126px
    );

  background: #FFFFFF;
}


/* =========================================================
  FAST SUPPORT PANEL
========================================================= */

.support-fast-panel {
  min-height: 230px;

  padding:
    clamp(
      30px,
      4vw,
      50px
    );

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      390px,
      .86fr
    );

  align-items: center;

  gap:
    clamp(
      52px,
      7vw,
      108px
    );

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

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


/* =========================================================
  FAST SUPPORT COPY
========================================================= */

.support-fast-copy {
  max-width: 650px;
}


.support-fast-copy h2 {
  margin: 0;

  color: var(--support-text);

  font-size:
    clamp(
      28px,
      2.8vw,
      40px
    );

  line-height: 1.04;

  letter-spacing: -.042em;

  font-weight: 500;
}


.support-fast-copy p {
  max-width: 610px;

  margin:
    15px
    0
    0;

  color: var(--support-muted);

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

  line-height: 1.68;

  letter-spacing: -.008em;
}

.support-fast-copy__mobile-break {
  display: none;
}


/* =========================================================
  BUTTONS
========================================================= */

.support-button {
  min-height: 44px;

  margin-top: 25px;

  padding:
    0
    16px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

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

  font-size: 12px;

  line-height: 1;

  font-weight: 600;

  text-decoration: none;

  transition:
    background-color
    160ms
    ease,
    border-color
    160ms
    ease,
    color
    160ms
    ease,
    transform
    160ms
    ease;
}


/* =========================================================
  PRIMARY BLUE BUTTON

  Explicit anchor selector prevents the page-level
  anchor rules from overriding the white text.
========================================================= */

.support-button--primary,
.support-main a.support-button--primary,
.support-main a.support-button--primary:link,
.support-main a.support-button--primary:visited {
  border:
    1px
    solid
    var(--support-blue);

  background:
    var(--support-blue);

  color:
    #FFFFFF;
}


.support-button--primary:hover,
.support-button--primary:focus-visible,
.support-main a.support-button--primary:hover,
.support-main a.support-button--primary:focus-visible {
  border-color:
    var(--support-blue-hover);

  background:
    var(--support-blue-hover);

  color:
    #FFFFFF;

  outline: none;
}


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


/* =========================================================
  SUPPORT SHORTCUTS
========================================================= */

.support-shortcuts {
  min-height: 130px;

  padding: 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  overflow: visible;

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

  background: #FFFFFF;
}


/* =========================================================
  SHORTCUT
========================================================= */

.support-shortcut {
  position: relative;

  width: 48px;
  height: 48px;

  flex:
    0
    0
    48px;

  padding: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border:
    1px
    solid
    var(--support-strong);

  border-radius: 50%;

  background: #FFFFFF;

  color: var(--support-text);

  text-decoration: none;

  cursor: pointer;

  transition:
    border-color
    150ms
    ease,
    background-color
    150ms
    ease,
    transform
    180ms
    var(--support-ease);
}


.support-shortcut:hover,
.support-shortcut:focus-visible {
  border-color: #C8C8C2;

  background:
    var(--support-surface);

  outline: none;

  transform:
    translateY(
      -1px
    );
}


.support-shortcut img {
  width: 19px;
  height: 19px;

  object-fit: contain;
}


/* =========================================================
  MY CASES PILL
========================================================= */

.support-shortcut--cases {
  position: relative;

  width: auto;

  min-width: 124px;

  padding:
    0
    17px;

  flex:
    0
    0
    auto;

  gap: 9px;

  overflow: visible;

  border-radius: 999px;
}


.support-shortcut--cases span:not(.support-case-count) {
  font-size: 12px;

  line-height: 1;

  font-weight: 550;

  white-space: nowrap;
}


/* =========================================================
  MY CASES COUNT BADGE

  Sits across the upper-left portion of the pill,
  matching the reference without making it oversized.
========================================================= */

.support-case-count {
 position: absolute;

 z-index: 3;

 /*
  Lift the badge above the pill.

  Only the very bottom edge overlaps the top
  of the My cases control, so it still reads
  as physically attached without sitting
  too low inside the pill.
 */
 top: -14px;
 left: 17px;

 min-width: 19px;
 height: 19px;

 padding:
  0
  5px;

 display: inline-flex;

 align-items: center;
 justify-content: center;

 border:
    var(
   --support-blue-hover
  );

 border-radius: 999px;

 /*
  No blue.
 */
 background:
  var(
   --support-copy,

  );

 color:
  var(
   --support-white,
   
  );

 font-size: 9px;

 line-height: 1;

 font-weight: 650;

 letter-spacing: 0;

 box-shadow:
  0
  1px
  3px
  rgba(
   0,
   0,
   0,
   .08
  );

 pointer-events: none;
}


/* =========================================================
  ACCOUNT SHORTCUT
========================================================= */

.support-shortcut--account {
  border-color:
    var(--support-terra);

  background:
    var(--support-terra);
}


.support-shortcut--account:hover,
.support-shortcut--account:focus-visible {
  border-color:
    var(--support-terra-hover);

  background:
    var(--support-terra-hover);
}


.support-shortcut--account img {
  filter:
    brightness(
      0
    )
    invert(
      1
    );
}


/* =========================================================
  RESOURCES
========================================================= */

.support-resources {
  padding:
    0
    0
    clamp(
      112px,
      10vw,
      160px
    );

  background: #FFFFFF;
}


/* =========================================================
  RESOURCE GRID
========================================================= */

.support-resource-grid {
  display: grid;

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

  gap: 12px;
}


/* =========================================================
  RESOURCE CARD
========================================================= */

.support-resource-card {
  position: relative;

  min-height:
    clamp(
      210px,
      20vw,
      310px
    );

  overflow: hidden;

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

  background: #2A2A28;

  isolation: isolate;

  transform:
    translateY(
      0
    );

  transition:
    transform
    260ms
    var(--support-ease);
}


.support-resource-card > img {
  position: absolute;

  z-index: -3;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  transform:
    scale(
      1.001
    );

  transition:
    transform
    700ms
    var(--support-ease);
}


/* =========================================================
  RESOURCE OVERLAY
========================================================= */

.support-resource-overlay {
  position: absolute;

  z-index: -2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        .08
      )
      0%,
      rgba(
        0,
        0,
        0,
        .16
      )
      40%,
      rgba(
        0,
        0,
        0,
        .72
      )
      100%
    );
}


/* =========================================================
  RESOURCE TITLE
========================================================= */

.support-resource-title {
  position: absolute;

  z-index: 2;

  left: 22px;
  right: 22px;

  bottom: 20px;

  color: #FFFFFF;

  font-size:
    clamp(
      18px,
      1.7vw,
      24px
    );

  line-height: 1.08;

  letter-spacing: -.035em;

  font-weight: 550;

  text-shadow:
    0
    2px
    14px
    rgba(
      0,
      0,
      0,
      .52
    );
}


.support-resource-card:hover,
.support-resource-card:focus-visible {
  outline: none;

  transform:
    translateY(
      -2px
    );
}


.support-resource-card:hover > img,
.support-resource-card:focus-visible > img {
  transform:
    scale(
      1.025
    );
}


/* =========================================================
  GET HELP
========================================================= */

.support-help {
  padding:
    clamp(
      104px,
      9vw,
      148px
    )
    0
    clamp(
      116px,
      10vw,
      164px
    );

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


/* =========================================================
  HELP GRID
========================================================= */

.support-help-grid {
  display: grid;

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

  gap: 12px;
}


/* =========================================================
  HELP CARD
========================================================= */

.support-help-card {
  position: relative;

  min-height: 340px;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      230px,
      .82fr
    );

  border: 0;

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

  background: #FFFFFF;

  transition:
    transform
    250ms
    var(--support-ease),
    box-shadow
    250ms
    ease;
}


.support-help-card:hover {
  transform:
    translateY(
      -2px
    );

  box-shadow:
    0
    18px
    52px
    rgba(
      0,
      0,
      0,
      .055
    );
}


/* =========================================================
  HELP CARD COPY
========================================================= */

.support-help-card-copy {
  position: relative;

  z-index: 4;

  padding:
    clamp(
      30px,
      3.2vw,
      46px
    )
    12px
    clamp(
      30px,
      3.2vw,
      46px
    )
    clamp(
      30px,
      3.2vw,
      46px
    );

  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: center;
}


.support-help-card-copy h3 {
  max-width:
    400px;

  margin:
    0;

  color:
    var(--support-text);

  font-size:
    clamp(
      20px,
      1.6vw,
      26px
    );

  line-height:
    1.12;

  letter-spacing:
    -.032em;

  font-weight:
    500;

  text-wrap:
    balance;
}


/* =========================================================
  HELP CARD MEDIA
========================================================= */

.support-help-card-media {
  position: relative;

  min-width: 0;

  overflow: hidden;

  align-self: stretch;

  background: #F0F0ED;
}


.support-help-card-media img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  transition:
    transform
    700ms
    var(--support-ease);
}


.support-help-card:hover
.support-help-card-media img {
  transform:
    scale(
      1.018
    );
}


/* =========================================================
  PORTRAIT MEDIA
========================================================= */

.support-help-card-media--portrait img {
  object-position:
    center
    bottom;
}


/* =========================================================
  CLOSING
========================================================= */

.support-closing {
  padding:
    clamp(
      112px,
      10vw,
      164px
    )
    0;

  background:
    var(--support-blue);

  color: #FFFFFF;
}


/* =========================================================
  CLOSING INNER
========================================================= */

.support-closing-inner {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


/* =========================================================
  CLOSING MARK
========================================================= */

.support-closing-mark {
  width: 48px;
  height: 48px;

  margin-bottom: 28px;

  display: grid;

  place-items: center;
}


.support-closing-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* =========================================================
  CLOSING TITLE
========================================================= */

.support-closing h2 {
  width:
    100%;

  max-width:
    900px;

  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      38px,
      4.15vw,
      58px
    );

  line-height:
    .98;

  letter-spacing:
    -.052em;

  font-weight:
    500;

  text-align:
    center;
}


.support-closing h2 span {
  display:
    block;

  width:
    max-content;

  max-width:
    100%;

  margin-inline:
    auto;

  white-space:
    nowrap;
}


/* =========================================================
  CLOSING BUTTON

  WHITE BOX
  BLUE TEXT

  Explicit anchor specificity keeps the label visible.
========================================================= */

.support-closing-button,
.support-main a.support-closing-button,
.support-main a.support-closing-button:link,
.support-main a.support-closing-button:visited {
  min-height: 44px;

  margin-top: 32px;

  padding:
    0
    17px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border:
    1px
    solid
    #FFFFFF;

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

  background: #FFFFFF;

  color:
    var(--support-blue);

  font-size: 12px;

  line-height: 1;

  font-weight: 600;

  text-decoration: none;

  transition:
    background-color
    160ms
    ease,
    border-color
    160ms
    ease,
    color
    160ms
    ease,
    transform
    160ms
    ease;
}


.support-closing-button:hover,
.support-closing-button:focus-visible,
.support-main a.support-closing-button:hover,
.support-main a.support-closing-button:focus-visible {
  border-color: #E6E6E2;

  background: #E6E6E2;

  color:
    var(--support-blue);

  outline: none;
}


.support-closing-button:active {
  transform:
    translateY(
      1px
    );
}


/* =========================================================
  QUIET REVEALS
========================================================= */

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

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


/* =========================================================
  LARGE TABLET
========================================================= */

@media (max-width: 1180px) {

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


  .support-resource-card {
    min-height: 280px;
  }


  .support-help-card {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      220px;
  }

}


/* =========================================================
  TABLET
========================================================= */

@media (max-width: 900px) {

  .support-fast-panel {
    grid-template-columns: 1fr;

    gap: 36px;
  }


  .support-shortcuts {
    justify-content: flex-start;
  }


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


  .support-help-card {
    min-height: 330px;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        250px,
        .72fr
      );
  }

}


/* =========================================================
  MOBILE
========================================================= */

@media (max-width: 700px) {

  .support-fast-copy__mobile-break {
    display: inline;
  }

  .support-fast-copy__desktop-break {
    display: none;
  }

  .support-fast-copy__description {
    white-space: nowrap;
  }

  .support-hero {
    min-height: 510px;

    padding:
      calc(
        var(--support-header-h)
        +
        58px
      )
      0
      70px;
  }


  .support-hero-mark {
    width: 44px;
    height: 44px;

    margin-bottom: 20px;
  }


  .support-hero-copy h1 {
    font-size:
      clamp(
        42px,
        11vw,
        56px
      );
  }


  .support-hero-copy p {
    margin-top: 15px;
  }


  .support-search {
    margin-top: 28px;
  }


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

    padding:
      0
      8px;
  }


  .support-search-form input {
    height: 42px;
  }


  .support-fast {
    padding:
      68px
      0
      88px;
  }


  .support-fast-panel {
    padding:
      28px
      24px;
  }


  .support-shortcuts {
    min-height: 0;

    padding: 20px;

    flex-wrap: wrap;
  }


  .support-resource-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .support-resource-card {
    min-height: 230px;
  }


  .support-help {
    padding:
      88px
      0
      104px;
  }


  .support-help-card {
    min-height: 0;

    grid-template-columns: 1fr;
  }


  .support-help-card-copy {
    min-height: 260px;

    padding:
      30px
      26px;
  }


  .support-help-card-media {
    min-height: 230px;
  }


  .support-closing {
    padding:
      94px
      0;
  }


  .support-closing h2 {
    font-size:
      clamp(
        34px,
        9vw,
        48px
      );
  }


  .support-closing h2 span {
    white-space:
      nowrap;
  }

}


/* =========================================================
  SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

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

    padding:
      calc(
        var(--support-header-h)
        +
        50px
      )
      0
      62px;
  }


  .support-search-form {
    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      )
      32px;
  }


  .support-search-form input {
    font-size: 13.5px;
  }


  .support-search-results {
    max-height: 335px;
  }


  .support-fast-panel {
    padding:
      25px
      20px;
  }


  .support-shortcut {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }


  .support-shortcut--cases {
    width: auto;

    min-width: 116px;

    flex-basis: auto;
  }


  .support-case-count {
    top: -13px;
    left: 15px;

    min-width: 18px;
    height: 18px;

    font-size: 8.5px;
  }


  .support-resource-title {
    left: 18px;
    right: 18px;

    bottom: 17px;
  }


  .support-help-card-copy {
    min-height: 245px;

    padding:
      27px
      22px;
  }


  .support-help-card-copy h3 {
    font-size: 21px;

    line-height: 1.12;

    letter-spacing: -.028em;
  }


  .support-help-card-media {
    min-height: 210px;
  }

}

/* Phone-only support controls and card copy. These dimensions keep the four
   actions on one centered line at a 340px viewport. */
@media (max-width: 700px) {
  .support-shortcuts {
    min-height: 60px;
    padding: 12px;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
  }

  .support-shortcut {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .support-shortcut img {
    width: 16px;
    height: 16px;
  }

  .support-shortcut--cases {
    min-width: 100px;
    padding-inline: 12px;
    flex-basis: 100px;
    gap: 6px;
  }

  .support-shortcut--cases span:not(.support-case-count) {
    font-size: 11px;
  }

  .support-case-count {
    top: -10px;
    left: 12px;
    min-width: 16px;
    height: 16px;
    font-size: 8px;
  }

  .support-help-card-copy {
    align-items: center;
    text-align: center;
  }

  .support-help-card-copy h3 {
    max-width: 100%;
    margin-inline: auto;
  }
}


/* =========================================================
  REDUCED MOTION
========================================================= */

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

  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      .01ms
      !important;
  }


  .support-reveal {
    opacity: 1;

    transform: none;
  }

}