/**
 * File: css/faqs-support.css
 *
 * Support Center (faqs.html). Companion to js/faqs-support.js, which owns the
 * search filter and the keyboard affordances; opening an answer is still
 * js/custom.js's `.accordion > .accordion-item` handler, so the markup keeps
 * that exact nesting.
 *
 * The page is authored mobile-first from the 390px reference: a photographic
 * hero that runs flush under the fixed header and dissolves into near-black,
 * one white search pill, chips, then white sections of hairline-bordered rows.
 * Desktop (>= 992px) is the same system laid out in two columns inside a
 * bounded container — not the phone composition stretched wide.
 *
 * Every selector is scoped under `.fq`, the page's own root, so the shared
 * header, footer, language modal and theme CSS are untouched. (`body.faqs-page`
 * exists in the markup as a hook, the way `body.press-page` does, but nothing
 * here needs it yet.)
 *
 * One thing this file cannot use: `position: sticky`. The shared template puts
 * `overflow: hidden` on `.page` and `.wsmenucontainer`, which disables sticky
 * everywhere inside the page — see the desktop questions layout below.
 */

.fq {
  --fq-ink: #0C0B2B;          /* headlines */
  --fq-ink-2: #45445F;        /* body copy */
  --fq-ink-3: #8A8A9E;        /* labels, meta */
  --fq-coral: #FF3B61;
  --fq-coral-soft: #FFEDF0;
  --fq-line: rgba(12, 11, 43, .085);
  --fq-line-2: rgba(12, 11, 43, .055);
  --fq-night: #030610;        /* the hero photograph's own bottom colour */
  --fq-night-2: #060c18;      /* the CTA card's flat upper field */
  --fq-radius: 18px;
  --fq-radius-2: 16px;
  --fq-ease: cubic-bezier(.22, .61, .36, 1);

  background: #fff;
  color: var(--fq-ink);
}

/* Bootstrap's container/row grid is not used on this page; the sections own
   their own measure so the rhythm is the reference's, not the template's. */
.fq-inner {
  width: min(100% - 40px, 470px);
  margin-inline: auto;
}

.fq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared type ------------------------------------------------------------- */

.fq-eyebrow {
  margin: 0;
  color: var(--fq-coral);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}

.fq-title {
  margin: 14px 0 0;
  color: var(--fq-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(30px, 8.6vw, 38px);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.08;
}

/* The full stop is the one coral accent in a headline — the markup wraps it in
   its own <span> so translations that drop the stop simply drop the accent. */
.fq-title > span,
.fq-hero__title > span { color: var(--fq-coral); }

.fq-lede {
  margin: 14px 0 0;
  color: var(--fq-ink-2);
  font-size: 15px;
  line-height: 1.6;
}

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

.fq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Exactly the fixed mobile header's height, so the photograph opens flush
     under it with no sliver of white — the value css/press-mobile.css and
     css/creators-pages.css use for their phone heroes. */
  padding-top: 80px;
  /* images/faqs/support-hero-v2.png fades to this colour on its own last row, so
     the picture and the section below it are one continuous surface and the
     photograph needs no scrim, no gradient overlay and no hard edge. */
  background-color: var(--fq-night);
  color: #fff;
}

/* The column that owns both the picture and the copy. Every percentage below
   is measured against this box, so "start the copy 55% down the photograph"
   stays true at any width instead of drifting once the art stops growing. */
.fq-hero__stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.fq-hero__art {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;               /* behind the copy, above the section's own fill */
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 54.9% of the picture's height (aspect 941:1672, so 0.549 x 1.7768 of the
   width). The girl ends around 48% and the handwritten line sits at 36-47%,
   so the copy lands on flat near-black and covers neither. Should the copy
   ever be shorter than the remaining picture, `overflow: hidden` on .fq-hero
   trims the excess — which is uniform #030610 on a #030610 ground. */
.fq-hero__copy {
  position: relative;
  padding: 97.5% clamp(20px, 6vw, 28px) clamp(44px, 12vw, 60px);
}

.fq-hero__eyebrow {
  margin: 0;
  color: var(--fq-coral);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1;
  text-transform: uppercase;
}

.fq-hero__title {
  margin: 14px 0 0;
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(33px, 9.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.06;
}

.fq-hero__lede {
  max-width: 21em;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(14.5px, 4vw, 16px);
  line-height: 1.55;
}

/* Search ------------------------------------------------------------------ */

.fq-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  margin-top: clamp(24px, 7vw, 30px);
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.fq-search__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--fq-coral);
}

.fq-search__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fq-ink);
  font-family: inherit;
  /* 16px, not the 15px the rest of this scale would suggest: iOS Safari zooms
     the page in on focus for anything smaller, and the zoom does not come back
     out when the field is blurred. */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.fq-search__input::placeholder { color: #9A9AAC; font-weight: 400; }
.fq-search__input:focus { outline: none; }

/* Safari paints its own inset shadow and clear button on type="search". */
.fq-search__input::-webkit-search-decoration,
.fq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.fq-search__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fq-coral);
  color: #fff;
  cursor: pointer;
  transition: transform .18s var(--fq-ease), background-color .18s var(--fq-ease);
}

.fq-search__btn:hover { background: #F62A53; }
.fq-search__btn:active { transform: scale(.94); }

.fq-search:focus-within { box-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 0 0 3px rgba(255, 59, 97, .35); }

/* Popular searches -------------------------------------------------------- */

.fq-hero__popular {
  margin: clamp(20px, 6vw, 26px) 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.fq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fq-chip {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .92);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s var(--fq-ease), border-color .18s var(--fq-ease), color .18s var(--fq-ease);
}

.fq-chip:hover {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .13);
}

.fq-chip.is-active {
  border-color: var(--fq-coral);
  background: var(--fq-coral);
  color: #fff;
}

/* =========================================================================
   BANNERS
   The three supplied pictures already carry their own rounded corners and a
   white surround, so they sit on the white page with no card, no shadow and
   no border-radius of our own — anything we added would either do nothing or
   clip into the artwork.
   ========================================================================= */

.fq-banner {
  margin: 0;
  line-height: 0;
}

.fq-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================================
   MOST COMMON QUESTIONS
   ========================================================================= */

.fq-questions { padding: clamp(30px, 9vw, 44px) 0 clamp(44px, 12vw, 60px); }

.fq-questions .fq-eyebrow { margin-top: clamp(26px, 8vw, 34px); }

.fq-accordion {
  margin: clamp(26px, 8vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

/* Category label. The page has always grouped its questions; the reference's
   flat list is the same content without the signposts, and at sixteen rows the
   signposts earn their space. */
.fq-accordion .faqs-category {
  margin: clamp(26px, 8vw, 32px) 0 12px;
  padding: 0 4px;
  color: var(--fq-ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.fq-accordion .faqs-category:first-child { margin-top: 0; }

.fq-accordion .accordion-item {
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--fq-line);
  border-radius: var(--fq-radius-2);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s var(--fq-ease), box-shadow .2s var(--fq-ease);
}

.fq-accordion .accordion-item:hover { border-color: rgba(12, 11, 43, .16); }

.fq-accordion .accordion-item.is-active {
  border-color: rgba(255, 59, 97, .3);
  box-shadow: 0 8px 26px rgba(12, 11, 43, .07);
}

.fq-accordion .accordion-item:focus-visible {
  outline: 2px solid var(--fq-coral);
  outline-offset: 2px;
}

.fq-accordion .accordion-thumb {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 20px;
}

.fq-q {
  flex: 1 1 auto;
  margin: 0;
  color: var(--fq-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.38;
}

/* Coral plus, drawn rather than borrowed from the Flaticon font: the icon set
   has no thin plus at this weight, and one span keeps the minus state a single
   rotation instead of a glyph swap. */
.fq-plus {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform .25s var(--fq-ease);
}

.fq-plus::before,
.fq-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: var(--fq-coral);
  transform: translate(-50%, -50%);
}

.fq-plus::before { width: 16px; height: 2px; }
.fq-plus::after  { width: 2px; height: 16px; transition: opacity .2s var(--fq-ease); }

.accordion-item.is-active .fq-plus { transform: rotate(180deg); }
.accordion-item.is-active .fq-plus::after { opacity: 0; }

.fq-accordion .accordion-panel {
  display: none;
  padding: 0 20px 20px;
}

.fq-a {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--fq-line-2);
  color: var(--fq-ink-2);
  font-size: 14.5px;
  line-height: 1.62;
}

/* Search feedback --------------------------------------------------------- */

.fq-noresults {
  margin: 26px 0 0;
  padding: 26px 20px;
  border: 1px dashed var(--fq-line);
  border-radius: var(--fq-radius-2);
  color: var(--fq-ink-3);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.fq-hidden { display: none !important; }

/* =========================================================================
   NEED MORE HELP
   ========================================================================= */

.fq-help { padding: 0 0 clamp(44px, 12vw, 60px); }

.fq-help .fq-title { margin-top: clamp(26px, 8vw, 34px); }

.fq-actions {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 7vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.fq-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--fq-line);
  border-radius: var(--fq-radius-2);
  background: #fff;
  color: var(--fq-ink);
  text-decoration: none;
  transition: border-color .2s var(--fq-ease), box-shadow .2s var(--fq-ease), transform .2s var(--fq-ease);
}

.fq-action:hover {
  border-color: rgba(255, 59, 97, .32);
  box-shadow: 0 10px 26px rgba(12, 11, 43, .08);
  color: var(--fq-ink);
  text-decoration: none;
}

.fq-action__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--fq-coral-soft);
  color: var(--fq-coral);
}

.fq-action__label {
  flex: 1 1 auto;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.fq-action--accent .fq-action__label { color: var(--fq-coral); }

.fq-action__arrow {
  flex: 0 0 auto;
  color: var(--fq-coral);
  transition: transform .2s var(--fq-ease);
}

.fq-action:hover .fq-action__arrow { transform: translateX(3px); }

/* =========================================================================
   STILL NEED HELP — the closing CTA
   ========================================================================= */

.fq-still-wrap { padding: 0 0 clamp(56px, 14vw, 76px); }

.fq-still {
  overflow: hidden;
  border-radius: clamp(22px, 6vw, 28px);
  /* The flat field the picture's own upper third already is, so the copy above
     the artwork and the artwork itself read as one card. */
  background: var(--fq-night-2);
  color: #fff;
}

.fq-still__copy { padding: clamp(28px, 8vw, 36px) clamp(24px, 7vw, 32px) 0; }

.fq-still__title {
  margin: 0;
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 7.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.1;
}

.fq-still__text {
  max-width: 24em;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
  line-height: 1.6;
}

.fq-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 6vw, 26px);
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--fq-coral);
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s var(--fq-ease), transform .2s var(--fq-ease);
}

.fq-cta:hover { background: #F62A53; color: #fff; text-decoration: none; }
.fq-cta:active { transform: scale(.985); }
.fq-cta__arrow { transition: transform .2s var(--fq-ease); }
.fq-cta:hover .fq-cta__arrow { transform: translateX(3px); }

/* The picture carries its own rounded corners on a white surround; inside a
   dark card those corners would show as white notches. The wrapper crops the
   top 30% (flat dark, nothing but ground) and the bottom 7% (below the
   handwritten line), which removes every baked corner and lets this card's own
   radius rule. Percentage margins resolve against the wrapper's width, and the
   picture is 941x1672, so one image height is 177.68% of the width. */
.fq-still__art {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.fq-still__art img {
  display: block;
  width: 100%;
  height: auto;
  /* Percentage margins resolve against the wrapper's width, and the picture is
     936x1560, so one image height is 166.67% of the width. Its content — the
     three portraits and the handwritten line — sits between 33% and 88% of the
     frame; the two crops centre that band and leave the same visible height
     the previous file did (111.9% of the width), so the card does not move. */
  margin-top: -44.86%;     /* 0.269 x 166.67% */
  margin-bottom: -9.86%;   /* 0.059 x 166.67% */
}

/* Dissolves the seam between the card's flat fill and the picture's first
   visible row — the two differ by at most a few units of 255, but the join is
   a straight line and a straight line is what the eye finds. */
.fq-still__art::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 90px;
  z-index: 1;
  background: linear-gradient(180deg, var(--fq-night-2) 0%, rgba(6, 12, 24, 0) 100%);
  pointer-events: none;
}

/* =========================================================================
   TABLET — the phone composition stops growing and centres
   ========================================================================= */

@media (min-width: 560px) and (max-width: 991.98px) {
  .fq-inner { width: min(100% - 56px, 560px); }
}

/* =========================================================================
   DESKTOP — the reference layout
   From KakaoTalk_20260905_133949091.png at 1440: a thin white header, a wide
   cinematic hero, then a near-white canvas carrying four category cards, one
   white questions card and one pink closing card about 16px apart, over a dark
   footer. Nothing below 992px is touched: every rule in this section lives in
   the media query, and the markup this layout adds carries `.fq-d`, which is
   `display: none` until 992px.
   ========================================================================= */

/* Desktop-only nodes. Hidden by default so the phone layout — approved and
   frozen — renders exactly the DOM it rendered before. */
.fq-d { display: none; }

/* The "Q." every dictionary already prefixes its questions with. On desktop
   js/faqs-support.js lifts it into its own span so it can recede the way the
   reference's does; on the phone the prefix stays plain text in the sentence
   and this class never appears in the document. */
.fq-q__mark { color: var(--fq-ink-3); font-weight: 600; }

@media (min-width: 992px) {

  body.faqs-page {
    /* One measure for the hero copy, the cards, the questions card, the CTA
       and the footer, so every left edge on the page is the same left edge.
       1328px at 1440 — the reference's own container — and capped rather than
       percentage-based so 1920 stays a page and not a stretched one. */
    --fq-wrap: min(100% - 112px, 1400px);
    --fq-canvas: #F5F7FA;
    /* The bar this page trims the shared header down to. */
    --fq-headh: 64px;
    /* What the hero has to clear. Normally the same number, but the shared
       navigation wraps to a second line on narrow desktops and in the longer
       locales, and the header is position: fixed — so js/faqs-support.js
       measures the bar and writes the real height here. This declaration is
       the value used until it does, and the one used if it never runs. */
    --fq-heropad: 64px;
  }

  /* --- shared header, page-scoped --------------------------------------- */

  /* The site header is transparent over the hero on every other page. Here the
     reference wants it opaque and thin from the first pixel, so this page — and
     only this page — pins it to the look the shared CSS otherwise only gives it
     after a scroll. Same markup, same navigation, same language button. */
  body.faqs-page .header-wrapper .wsmainfull,
  body.faqs-page .header-wrapper .wsmainfull.scroll {
    padding: 0;
    background-color: #fff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(12, 11, 43, .07);
  }

  body.faqs-page #header .desktoplogo { line-height: var(--fq-headh); }

  body.faqs-page #header .wsmenu > .wsmenu-list > li > a.h-link {
    line-height: calc(var(--fq-headh) - 20px);
  }

  /* The language button is 50px inside a list item that adds 10px above and
     below it — 70px, seven more than everything else in the bar. */
  /* Eight navigation items, a Download button and the language button need
     1224px at the shared header's default spacing — more than a 1280px window
     has once the logo and the bar's own gutters are counted, so the bar wraps
     to two lines and stops being the thin white strip the reference asks for.
     At 12px the row measures about what it does in the reference and fits from
     1100 up. css/language-modal.css pins the default with !important, and
     css/lang-switcher-2.css already drops to 10px for the locales with the
     longest labels — so this is the header's own narrow setting, not a new
     one, and it is set here only for this page. */
  body.faqs-page #header .wsmenu > .wsmenu-list > li > a.h-link {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.faqs-page #header .wsmenu > .wsmenu-list > li.lang-switcher-desktop {
    /* 10px of padding above and below a 50px button is what makes this item
       70px while everything else in the trimmed bar is 64. `line-height: 0`
       drops the descent the item's own line box would otherwise add under the
       inline-flex button. */
    /* css/language-modal.css sets this padding with !important, hence the
       counter-!important rather than a specificity race. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 7px;
    margin-bottom: 7px;
    line-height: 0;
  }

  /* --- page shell -------------------------------------------------------- */

  .fq {
    /* The light field the three cards sit on, not white: the questions card and
       the category cards are white and need something to sit on. */
    background: var(--fq-canvas);
  }

  .fq-inner { width: var(--fq-wrap); }

  .fq-d { display: block; }

  .fq-eyebrow { font-size: 11.5px; letter-spacing: .14em; }

  .fq-title {
    margin-top: 12px;
    font-size: clamp(30px, 2.95vw, 43px);
    letter-spacing: -.03em;
    line-height: 1.04;
  }

  .fq-lede { font-size: 16px; }

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

  .fq-hero {
    /* The header is fixed and now opaque, so the section simply starts under
       it — no extra air, exactly as in the reference. */
    padding: var(--fq-heropad) 0 0;
    background: #020612;              /* the desktop photograph's own left edge */
  }

  .fq-hero__stage {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    max-width: none;
    /* 22.3vw is the reference's hero band (321px at 1440). Tying the height to
       the width keeps the crop of the photograph identical at every size
       instead of showing a different slice of it on each monitor. min-height,
       not height: a locale whose chips need a second row grows the band rather
       than spilling out of it. */
    min-height: clamp(300px, 22.3vw, 452px);
    margin: 0;
    overflow: hidden;
  }

  /* The phone photograph is a different crop of a different picture; the
     desktop one is a background so it is never fetched on a phone. */
  .fq-hero__art { display: none; }

  .fq-hero__stage::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* Beyond 1520px the picture stops widening and stays anchored to the right
       edge, so the handwritten line inside it never drifts under the copy on a
       very wide monitor. What it leaves bare on the left is the section's own
       fill, which is that picture's own left-edge colour. */
    width: min(100%, 1520px);
    background: url(../images/faqs/support-hero-desktop-v2.png) center 18% / cover no-repeat;
  }

  /* Keeps the copy on flat near-black at every width and dissolves the seam
     where the picture's box ends. It is fully transparent by 44%, and the
     handwritten "Real People / Real Answers" starts at 42.2% of the picture —
     so the line is at most grazed by the last few per cent of the fade, and
     the copy never reaches it at all. */
  .fq-hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #020612 0%, #020612 24%, rgba(2, 6, 18, 0) 44%);
    pointer-events: none;
  }

  .fq-hero__copy {
    position: relative;
    z-index: 1;
    width: var(--fq-wrap);
    margin-inline: auto;
    padding: 26px 0;
  }

  .fq-hero__eyebrow { font-size: 11.5px; letter-spacing: .16em; }

  /* Everything in the copy stops short of 42% of the viewport — where the
     handwriting inside the photograph begins. */
  .fq-hero__title {
    max-width: min(560px, 35vw);
    margin-top: 13px;
    font-size: clamp(31px, 3.2vw, 46px);
    letter-spacing: -.032em;
    line-height: 1.05;
  }

  .fq-hero__lede {
    max-width: min(470px, 33vw);
    margin-top: 13px;
    color: rgba(255, 255, 255, .7);
    font-size: 15.5px;
    line-height: 1.45;
  }

  .fq-search {
    max-width: min(520px, 35vw);
    height: 46px;
    margin-top: 21px;
    padding: 0 5px 0 17px;
    gap: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  }

  .fq-search__input { font-size: 15px; }
  .fq-search__btn { width: 36px; height: 36px; }
  .fq-search__btn svg { width: 16px; height: 16px; }

  /* The reference sets the label and the chips on one line. `.fq-hero__popular`
     and `.fq-chips` are siblings, not a pair inside a wrapper, so they are set
     inline-block rather than given a flex parent that does not exist. */
  .fq-hero__popular {
    display: inline-block;
    vertical-align: top;
    margin: 20px 11px 0 0;
    color: rgba(255, 255, 255, .58);
    font-size: 13px;
    font-weight: 500;
    line-height: 29px;
  }

  /* Wide enough for all six chips on one line — a second row would push the
     band past the reference's 321px. The nearest thing inside the photograph at
     this height is the small heart at 50% of its width, so the row has room. */
  .fq-chips {
    display: inline-flex;
    vertical-align: top;
    max-width: min(460px, 32vw);
    gap: 6px;
    margin-top: 20px;
  }

  .fq-chip {
    padding: 5px 12px;
    font-size: 12px;
    line-height: 16px;
  }

  /* The coral pill over the phone. Anchored to the right edge because the phone
     is at the picture's right edge at every width; at 3.6% in it clears the
     screen's own bezel and stops a long way short of her face, which ends
     around 78% of the picture. */
  .fq-hero__bubble {
    position: absolute;
    top: 52%;
    right: 3.6%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--fq-coral);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.004em;
    line-height: 1.2;
    white-space: nowrap;
    transform: translateY(-50%);
  }

  .fq-hero__bubble-icon {
    display: inline-flex;
    color: rgba(255, 255, 255, .9);
  }

  /* =======================================================================
     BROWSE BY CATEGORY
     ======================================================================= */

  .fq-cats { padding-top: 16px; }

  .fq-cats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fq-cats__grid > li { display: flex; }

  .fq-cat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 22px 24px 24px;
    border: 1px solid #E7EBF1;
    border-radius: 15px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s var(--fq-ease), box-shadow .2s var(--fq-ease), transform .2s var(--fq-ease);
  }

  .fq-cat:hover {
    border-color: rgba(255, 59, 97, .3);
    box-shadow: 0 10px 24px rgba(12, 11, 43, .055);
    transform: translateY(-2px);
  }

  .fq-cat:focus-visible { outline: 2px solid var(--fq-coral); outline-offset: 3px; }
  .fq-cat.is-active { border-color: var(--fq-coral); }

  .fq-cat__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .fq-cat__icon svg { width: 30px; height: 30px; }

  .fq-cat__icon--rose   { background: #FFECF1; color: #FF3B61; }
  .fq-cat__icon--amber  { background: #FFF3E1; color: #EF8B12; }
  .fq-cat__icon--blue   { background: #E8F0FF; color: #3B6CF6; }
  .fq-cat__icon--violet { background: #F1ECFE; color: #7C5CF0; }

  .fq-cat__body { display: block; padding-right: 30px; }

  .fq-cat__title {
    display: block;
    color: var(--fq-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.014em;
    line-height: 1.25;
  }

  .fq-cat__text {
    display: block;
    margin-top: 7px;
    color: var(--fq-ink-2);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .fq-cat__arrow {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fq-coral-soft);
    color: var(--fq-coral);
    transition: background-color .2s var(--fq-ease), color .2s var(--fq-ease);
  }

  .fq-cat:hover .fq-cat__arrow,
  .fq-cat.is-active .fq-cat__arrow { background: var(--fq-coral); color: #fff; }

  /* =======================================================================
     MOST COMMON QUESTIONS
     ======================================================================= */

  .fq-questions { padding: 16px 0 0; }

  /* The measure and the card are the same box: one white surface holding the
     heading and both columns of rows, as in the reference. No picture here —
     the section is typography and rows. */
  .fq-questions .fq-inner {
    padding: 30px 30px 28px;
    border: 1px solid #EDF0F5;
    border-radius: 20px;
    background: #fff;
  }

  .fq-questions .fq-banner { display: none; }

  .fq-questions__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .fq-questions__head-copy { min-width: 0; }
  .fq-questions .fq-eyebrow { margin-top: 0; }
  .fq-questions .fq-title { margin-top: 11px; }

  .fq-seeall {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fq-coral);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s var(--fq-ease);
  }

  .fq-seeall:hover { color: #F62A53; }
  .fq-seeall__arrow { display: inline-flex; transition: transform .2s var(--fq-ease); }
  .fq-seeall:hover .fq-seeall__arrow { transform: translateX(3px); }
  .fq-seeall:focus-visible { outline: 2px solid var(--fq-coral); outline-offset: 4px; }

  /* Two equal columns of compact rows. `align-items: start` is what lets one
     row open without dragging its neighbour's height with it, and row order is
     left-to-right so a filtered list closes its gaps instead of leaving holes
     down one column. */
  .fq-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 24px;
    row-gap: 9px;
    margin-top: 26px;
  }

  /* The four category signposts are the four cards above this section now. */
  .fq-accordion .faqs-category { display: none; }

  .fq-accordion .accordion-item {
    margin-bottom: 0;
    border-color: #EEF0F5;
    border-radius: 11px;
    background: #FAFBFD;
  }

  .fq-accordion .accordion-item:hover { border-color: #DFE3EB; background: #F7F8FB; }

  .fq-accordion .accordion-item.is-active {
    border-color: rgba(255, 59, 97, .3);
    background: #fff;
    box-shadow: 0 8px 24px rgba(12, 11, 43, .06);
  }

  .fq-accordion .accordion-thumb { gap: 12px; padding: 11px 11px 11px 17px; }

  .fq-q {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.008em;
    line-height: 1.4;
  }

  .fq-q__mark { margin-right: 3px; }

  /* On the phone the plus is the page's coral accent. Here there are sixteen of
     them at once, so they recede to a neutral tile and only the open row's
     turns coral. */
  .fq-plus {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #EFF1F5;
  }

  .fq-plus::before,
  .fq-plus::after { background: #40454F; }
  .fq-plus::before { width: 11px; height: 1.8px; }
  .fq-plus::after  { width: 1.8px; height: 11px; }

  .accordion-item.is-active .fq-plus { background: var(--fq-coral-soft); }
  .accordion-item.is-active .fq-plus::before { background: var(--fq-coral); }

  .fq-accordion .accordion-panel { padding: 0 17px 15px; }
  .fq-a { padding-top: 13px; font-size: 14.5px; line-height: 1.6; }

  .fq-noresults { grid-column: 1 / -1; margin-top: 22px; }

  /* =======================================================================
     NEED MORE HELP — not part of the desktop reference
     The reference goes straight from the questions card to the closing pink
     card. The section stays in the document for the phone layout, where it is
     approved, and its two destinations both survive on desktop: the guides are
     the "Story" item in the header, and Contact Support is the CTA below.
     ======================================================================= */

  .fq-help { display: none; }

  /* =======================================================================
     STILL NEED HELP — the closing pink banner
     ======================================================================= */

  .fq-still-wrap { padding: 16px 0; }

  .fq-still {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
    align-items: center;
    gap: 0;
    /* The supplied picture is 3:1 with the four portraits filling 43% of its
       width and 60% of its height, so how large they read is set by how tall
       this card is: at 380 they come out about the width the reference gives
       them. The padding lives on the copy, not here, so the picture can reach
       the card's own top, bottom and right edges and the banner stays one
       surface with no inner frame. */
    min-height: 380px;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(104deg, #FEF6F9 0%, #FDF0F6 48%, #FDECF3 100%);
    color: var(--fq-ink);
  }

  .fq-still__copy { position: relative; z-index: 2; padding: 44px 0 44px 44px; }

  .fq-still__eyebrow {
    margin: 0;
    color: var(--fq-coral);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
  }

  /* The phone headline and its desktop counterpart are two nodes, one hidden at
     each width, so neither layout has to compromise on wording. */
  .fq-still__title { display: none; }

  .fq-still__title--d {
    display: block;
    margin: 12px 0 0;
    color: var(--fq-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(29px, 2.85vw, 41px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.04;
  }

  .fq-still__text { display: none; }

  .fq-still__text--d {
    display: block;
    max-width: 27em;
    margin: 13px 0 0;
    color: var(--fq-ink-2);
    font-size: 15.5px;
    line-height: 1.55;
  }

  .fq-cta {
    margin-top: 24px;
    padding: 15px 26px;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(255, 59, 97, .22);
  }

  /* The picture is a background on the column, not the phone layout's <img>:
     nothing about it is fetched below 992px, and the right inset keeps the
     handwritten line clear of the card's own edge. */
  .fq-still__art {
    position: relative;
    align-self: stretch;
    display: block;
    margin: 0;
    border-radius: 0;
  }

  .fq-still__art img { display: none; }

  .fq-still__art::before {
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: 0;
    background: url(../images/faqs/support-team-desktop.png) right center / cover no-repeat;
    /* Both vertical edges are dissolved rather than trusted: the picture's own
       blush and the card's gradient are within a few units of each other, which
       is exactly close enough for a straight join to read as a fault. The left
       fade clears the picture's empty third; the right one is 2% wide, just
       past where the handwritten line ends. */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 8%, #000 98%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 8%, #000 98%, rgba(0, 0, 0, 0) 100%);
  }

  /* =======================================================================
     FOOTER — appearance only, and only on this page
     ======================================================================= */

  body.faqs-page .divider { display: none; }

  body.faqs-page footer.footer {
    padding: 34px 0 32px;
    background: #11141C;
    color: rgba(255, 255, 255, .58);
  }

  body.faqs-page footer.footer > .container {
    width: var(--fq-wrap);
    max-width: var(--fq-wrap);
    padding-left: 0;
    padding-right: 0;
  }

  /* images/logo.png is the dark mark; the reference footer wants it white and
     swapping the file is a change to the shared footer, which this page may
     not make. */
  body.faqs-page footer .footer-logo {
    max-height: 27px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  body.faqs-page footer .footer-qr-code,
  body.faqs-page footer .d-title,
  body.faqs-page footer .m-title,
  body.faqs-page footer .footer-connect > h6 { display: none; }

  body.faqs-page footer .footer-info { margin-bottom: 0; }
  body.faqs-page footer .footer-logo { margin-bottom: 0; }

  /* The shared grid gives the last column two of twelve, which is not enough
     for a copyright line. Re-weighted here only: 25 / 46 / 29. */
  body.faqs-page footer .col-md-9.col-lg-6.col-xl-7 { flex: 0 0 46%; max-width: 46%; }
  body.faqs-page footer .col-md-3.col-lg-3.col-xl-2 { flex: 0 0 29%; max-width: 29%; }
  body.faqs-page footer .col-lg-3:first-child { flex: 0 0 25%; max-width: 25%; }
  body.faqs-page footer .row.footer-links { margin-bottom: 0; }

  /* Scoped through the footer: the template's own `footer p` rules are more
     specific than a bare class and would set the size back. */
  body.faqs-page footer .fq-foot-tagline {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: 13.5px;
    line-height: 1.4;
  }

  body.faqs-page footer .foo-links li p { margin-bottom: 4px; line-height: 1.55; }

  body.faqs-page footer .foo-links a,
  body.faqs-page footer .foo-links a span {
    color: rgba(255, 255, 255, .74);
    font-size: 13.5px;
  }

  body.faqs-page footer .foo-links a:hover,
  body.faqs-page footer .foo-links a:hover span { color: #fff; }

  body.faqs-page footer .footer-connect { text-align: right; }

  body.faqs-page footer .footer-socials { justify-content: flex-end; margin: 0; }
  body.faqs-page footer .footer-socials li { margin: 0 0 0 16px; }
  body.faqs-page footer .footer-socials a { color: rgba(255, 255, 255, .9); }
  body.faqs-page footer .footer-socials a:hover { color: #fff; }

  body.faqs-page footer .fq-foot-copy {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .42);
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* -------------------------------------------------------------------------
   1280px and up: the bar takes the page's own measure, so the logo sits on the
   same left edge as the hero copy, the cards and the footer. Not below that:
   there the navigation needs every pixel the shared container gives it, and
   the alternative is a header that wraps to two lines.
   ------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  body.faqs-page #header .wsmainwp {
    width: var(--fq-wrap);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* -------------------------------------------------------------------------
   1280px and down: the closing banner stacks
   The supplied picture is 3:1 with the four portraits filling 43% of its
   width, so a side column narrower than about 700px could only show them by
   cutting into the first portrait. Below that the copy sits above the picture
   and the picture runs the full width of the card, where 3:1 fits whole.
   ------------------------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1279.98px) {
  /* The copyright needs about 290px on one line; give the column the room. */
  body.faqs-page footer .col-md-9.col-lg-6.col-xl-7 { flex: 0 0 42%; max-width: 42%; }
  body.faqs-page footer .col-md-3.col-lg-3.col-xl-2 { flex: 0 0 33%; max-width: 33%; }

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

  .fq-still {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .fq-still__copy { padding: 38px 34px 0; }

  .fq-still__art {
    margin-top: 22px;
    aspect-ratio: 2172 / 700;
  }

  .fq-still__art::before {
    right: 0;
    background-position: center center;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .fq-plus,
  .fq-search__btn,
  .fq-action,
  .fq-action__arrow,
  .fq-cta,
  .fq-cta__arrow,
  .fq-chip { transition: none; }
}