/* ==========================================================================
   /ultimateupi – DCS Ultimate Platinum UnionPay Card landing page.
   Page-specific styles only; layout leans on Bootstrap utilities in main.css.
   Palette from Figma #746_Web page - Mastercard Platinum UnionPay (node 2:464).
   Three bands: hero photo, .upi-midzone gradient, .wo-applyzone photo.
   ========================================================================== */
:root {
  --wo-bg: #ffffff;
  --wo-ink: #02388B;          /* UnionPay blue (headings) */
  --wo-accent: #02388B;
  --wo-accent-soft: #4e586e;  /* slate body copy */
  --wo-muted: #4e586e;
  --wo-dark: #4e586e;
  --wo-pink: #ffffff;         /* CTA button is a white pill on this page */
  --wo-pink-hover: #eef3fb;
  --wo-card-radius: 28px;
  --wo-title-color: #02388B;
  --wo-step-text: #02388B;
  --wo-on-dark: #E9E9E9;      /* body copy on the navy FAQ/apply band */
}

.wo-title-color {
  color: var(--wo-title-color);
}

.wo-body {
  background: var(--wo-bg);
  color: var(--wo-ink);
}
.wo-body main {
  overflow-x: hidden;
}

/* ------------------------------- shared ---------------------------------- */
.wo-section {
  padding: 3.5rem 0;
}
/* benefits → unleash: the unleash band fades in from the page background, so
   the section's own bottom padding stays short to keep the two close */
#benefits.wo-section {
  padding-bottom: 1.5rem;
}
/* Card Benefits → Unleash → Perks → Eligibility/Fees → Apply share one gradient.
   Figma exports this fill as 180deg, but on the artboard the white sits at the top
   and the blue at the bottom, so it is applied bottom-up (0deg) to match. */
.upi-midzone {
  /* Figma: linear-gradient(180deg, #02388B -11%, #AFBBCC 25.88%, #DBDCDC 55.06%, #FFF 99.1%) */
  background: linear-gradient(0deg, #02388B -11%, #AFBBCC 25.88%, #DBDCDC 55.06%, #FFF 99.1%);
}

/* page-scoped narrow container — caps content at ~1000px on all viewports */
.wo-narrow {
  max-width: 1140px;
}
.wo-section__title {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--wo-ink);
  margin: 0 0 2.5rem;
  text-align: center;
}
.wo-section__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* buttons ----------------------------------------------------------------- */
.wo-btn {
  background: #fff;
  color: var(--wo-ink);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: .55rem 2.4rem;
  transition: filter .2s ease, transform .2s ease;
  box-shadow: 0 10px 30px rgba(2, 56, 139, .18);
}
.wo-btn:hover,
.wo-btn:focus {
  background: var(--wo-pink-hover);
  color: var(--wo-ink);
  filter: brightness(.96);
  transform: translateY(-1px);
}
.wo-btn--lg {
  font-size: 1.05rem;
  padding: .7rem 2.8rem;
}
.wo-btn__arrow {
  margin-left: .5rem;
  font-weight: 700;
}
/* the hero CTA and the app-card CTA carry the blue-to-white gradient; the
   mid-page apply CTA stays a flat white pill (hover/focus repeat it so they
   don't fall back) */
.wo-hero__cta .wo-btn,
.wo-hero__cta .wo-btn:hover,
.wo-hero__cta .wo-btn:focus,
.wo-appcard__cta .wo-btn,
.wo-appcard__cta .wo-btn:hover,
.wo-appcard__cta .wo-btn:focus {
  background: linear-gradient(180deg, #9CCDFF 0%, #FFF 127.6%);
}

/* --------------------------------- hero ---------------------------------- */
/* same treatment as the /flex hero: on desktop the section takes the KV's own
   aspect ratio so the whole picture shows uncropped; a left-to-right navy scrim
   (::before, desktop only) sits between the KV and the copy so the white text
   stays legible over the pale sky / sea on the KV's left half */
.wo-hero {
  position: relative;
  aspect-ratio: 3840 / 1740;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b2d6b;
}
.wo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 992px) {
  .wo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;               /* above the KV, below .wo-hero__inner */
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3, 27, 66, .35) 0%, rgba(3, 27, 66, 0) 70%);
  }
}
.wo-hero__inner {
  position: relative;
  z-index: 2;                 /* copy sits on top of the scrim */
  width: 100%;
}
.wo-hero__content {
  max-width: 70%;
  min-width: 500px;
  color: #fff;
  padding: 2rem 0;
}
@media (min-width: 992px) {
  .wo-hero__content { padding: 2rem 1rem; }
}
/* the hero grows with the viewport (aspect-ratio box), so the copy keeps
   scaling with it on large screens instead of capping at ~1300px */
.wo-hero__title {
  font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.6rem);
  line-height: 1.22;
  color: #fff;
  margin-bottom: 1.1rem;
}
.wo-hero__title sup { font-size: .55em; top: -.7em; }
.wo-hero__subtitle {
  font-weight: 500;
  font-size: clamp(1rem, 1.45vw, 1.4rem);
  line-height: 1.5;
  color: #E9E9E9;
  margin-bottom: 2.4rem;
}
.wo-hero__cta .wo-btn--lg {
  font-size: clamp(1.05rem, 1.15vw, 1.3rem);
}
.wo-hero__subtitle sup { font-size: .6em; top: -.6em; }
/* button + T&Cs grouped; the group shrinks to the button so the button shares
   the left baseline of the title / subtitle, and the T&Cs centre under it */
.wo-hero__cta {
  display: inline-block;
}
.wo-hero__tnc {
  margin: 1rem 0 0;
  font-size: clamp(.8rem, .7vw, .95rem);
  color: rgba(255, 255, 255, .85);
  text-align: center;
}

/* ----------------------------- benefit cards ----------------------------- */
.wo-card {
  background: transparent;
  padding: 1rem .75rem;
  height: 100%;
}
/* the PNGs are trimmed to their visible content, so anchoring them to the
   bottom of the 160px box lines up the four icons' bases across the row */
.wo-card__img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  object-position: bottom;
  margin: 0 auto 1.2rem;
  display: block;
}
.wo-card__title {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--wo-ink);
  margin-bottom: 0;   /* no body copy under the titles in this design */
}


/* --------------------------------- unleash ------------------------------- */
/* Full-bleed band (Figma 326:36). The ice-horizon photo covers the whole
   section; two edge gradients (the designer's Rectangle 9352 / 9353) blend its
   top and bottom into the surrounding .upi-midzone. Copy sits centred in the
   left column, the card + phone cutout with its ring glow in the right. */
.wo-unleash {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* artboard band is 1920x971 (50.57vw); trimmed to 44vw so the band sits
     closer under the benefits grid. The two edge gradients are scaled down
     with it (see ::before / ::after) so the horizon stays visible between them */
  min-height: 44vw;
  padding: clamp(2rem, 4vw, 4.5rem) 0 clamp(2.5rem, 6vw, 6rem);
  color: var(--wo-ink);
}
.wo-unleash__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;   /* keep the horizon line just below centre */
}
.wo-unleash::before,
.wo-unleash::after {
  content: "";
  position: absolute;
  z-index: 1;          /* above the bg <img>, below .wo-unleash__inner (z-index 2) */
  left: 0;
  right: 0;
  pointer-events: none;
}
/* Rectangle 9352 — 1920x438, anchored to the top edge of the band */
.wo-unleash::before {
  top: 0;
  height: 19.8vw;          /* 438 / 1920 = 22.8vw, scaled to the 44vw band */
  background: linear-gradient(180deg, #f3f4f4 -10.5%, #d8e7f7 30.81%, rgba(210, 224, 242, 0) 80.5%);
}
/* Rectangle 9353 — 1920x470, anchored to the bottom edge. The layer is rotated
   180° in Figma, so its 180deg fill reads bottom-up here (0deg). */
.wo-unleash::after {
  bottom: 0;
  height: 21.3vw;          /* 470 / 1920 = 24.5vw, scaled to the 44vw band */
  background: linear-gradient(0deg, #d2d6d9 -10.5%, #d4dde7 30.81%, rgba(210, 224, 242, 0) 80.5%);
}
.wo-unleash__inner {
  position: relative;
  z-index: 2;          /* copy + card sit above both edge gradients, as in Figma */
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: 1140px;          /* same as .container-xl.wo-narrow so copy lines up with the benefits grid */
  margin: 0 auto;
  padding: 0 .75rem;          /* bootstrap container gutter */
}
.wo-unleash__copy {
  flex: 1 1 0;
  text-align: center;
}
.wo-unleash__title {
  font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 3.125rem);   /* 50px at 1920 */
  line-height: 1.2;
  color: var(--wo-ink);       /* #02388B */
  margin: 0 0 clamp(.9rem, 1.5vw, 1.5rem);
}
.wo-unleash__text {
  /* Figma uses Inter Medium; the page font only ships 400/700, and 500 snaps
     to bold there, which flattens the emphasis — so body stays regular */
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.6rem);       /* ~27px at 1920 */
  line-height: 1.45;                            /* ≈ 40px / 28px */
  color: #6c717d;
  margin: 0 auto;
  max-width: 30em;
}
.wo-unleash__text strong { font-weight: 700; color: inherit; }
.wo-unleash__em { font-weight: 800; }
/* right column: card cutout with the glow ring sitting behind its top edge */
.wo-unleash__visual {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 420px);            /* 420px at 1920 */
  aspect-ratio: 677 / 925;
}
.wo-unleash__card {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 1536x1024 glow on a black base — screen-blend so only the light survives;
   sized 611px wide and anchored to the card's top edge as in the design */
.wo-unleash__glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 146%;
  height: auto;
  transform: translateX(-52%);
  mix-blend-mode: screen;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  /* stacked layout is taller than the artboard ratio — size the gradients to
     the band instead of the viewport */
  .wo-unleash { min-height: 0; }
  .wo-unleash::before { height: 42%; }
  .wo-unleash::after { height: 45%; }
  .wo-unleash__inner { flex-direction: column; }
  /* stacked under align-items:center the copy would shrink to its max-content
     width (the 30em paragraph) and overflow the viewport; keep it full width */
  .wo-unleash__copy { flex: 0 0 auto; width: 100%; }
  .wo-unleash__text { font-size: clamp(1rem, 2.4vw, 1.25rem); }
  .wo-unleash__visual { width: clamp(220px, 46vw, 340px); }
  .wo-unleash__bg { object-position: 55% 60%; }
}

/* ---------------------------------- perks -------------------------------- */
.wo-perks {
  padding: 1rem 0 3.5rem;   /* transparent — sits on the shared .upi-midzone gradient */
}
/* The heading and every perk carry the same insets as .wo-info below, so the
   perk icons land on the Eligibility / Fees tick column and the copy shares its
   measure. Both grids use gx-lg-5, so the right column lines up too.
   Keep these in sync with .wo-info (incl. the lg+ block). */
.wo-perks__heading,
.wo-perk {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.wo-perks__heading {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--wo-ink);
  text-align: center;
  margin-bottom: 2.6rem;
}
/* more breathing room between perk rows than the gy-4 default */
.wo-perks .row {
  --dcscc-gutter-y: 3.4rem;
}
.wo-perk {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}
.wo-perk__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 42px;   /* Figma hexagon aspect 58×64 */
  object-fit: contain;
  transform: translateY(-4px);
}
.wo-perk__title {
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: .6rem;
  color: var(--wo-ink);
}
.wo-perk__text {
  color: var(--wo-accent-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}
.wo-perk__text a {
  color: var(--wo-ink);
  text-decoration: underline;
  word-break: break-word;
}

/* --------------------------- eligibility / fees -------------------------- */
.wo-info {
  position: relative;
  padding: 3.4rem 1.25rem 1rem 2rem;   /* transparent — sits directly on the dark gradient */
  margin-top: 1.6rem;
  height: 100%;
}
/* Two-column layout (Figma): symmetric 2.5rem outer inset, 1rem inner inset,
   so the middle gutter is 1rem + 3rem grid gutter + 1rem = 80px and the two
   columns come out equal. Perks above use the same insets. */
@media (min-width: 992px) {
  #eligibility.wo-info { padding-left: 2.5rem; padding-right: 1rem; }
  #fees.wo-info { padding-left: 1rem; padding-right: 2.5rem; }
  #eligibility .wo-info__pill { left: 2.5rem; right: 1rem; }
  #fees .wo-info__pill { left: 1rem; right: 2.5rem; }
  .wo-perks__heading { padding-left: 2.5rem; padding-right: 2.5rem; }
  /* the perks DOM is left column first (items 1-3), then right column (4-6);
     order-lg-* interleaves them on lg+, so pick the column by DOM index */
  .wo-perks .col:nth-child(-n+3) .wo-perk { padding-left: 2.5rem; padding-right: 1rem; }
  .wo-perks .col:nth-child(n+4) .wo-perk { padding-left: 1rem; padding-right: 2.5rem; }

  /* faint divider between the Eligibility and Fees columns */
  #fees.wo-info::after {
    content: "";
    position: absolute;
    left: -1.5rem;
    top: 3.4rem;
    bottom: 10rem;
    width: 1px;
    background: rgba(255, 255, 255, .35);
  }
}
/* spans its column (left/right follow .wo-info's insets), text centred */
.wo-info__pill {
  position: absolute;
  top: -1.6rem;
  left: 1.25rem;
  right: 1.25rem;
  text-align: center;
  background: #fff;
  color: var(--wo-ink);
  font-weight: 400;
  font-size: 1.15rem;
  padding: 1.1rem 1.5rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(2, 56, 139, .15);
}
.wo-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}
.wo-info__list li {
  position: relative;
  padding-left: 4rem;
  margin-bottom: 2.2rem;
  line-height: 1.85;
  color: var(--wo-on-dark);
}
.wo-info__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask: no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
/* GST note under the fees list — aligns with the list copy, not the ticks */
.wo-info__footnote {
  padding-left: 4rem;
  margin: -.6rem 0 1.2rem;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.wo-info__link {
  padding-left: 4rem;   /* align with the list text, not the checkmark */
}
/* the shared partial has no trailing chevron — the Fees link carries one inline */
#eligibility .wo-info__link a::after { content: "\00a0\00a0\203A"; }
.wo-info__link a {
  color: #fff;
  font-weight: 600;
  font-size: .9rem;   /* a notch under the list copy, both columns alike */
  text-decoration: underline;
}
/* keep the required-documents modal on the site's default body colour */
#docs_required_reg { color: #212529; }
.wo-footnote {
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: .82rem;
  margin-top: 1.4rem;
}
.wo-apply-cta {
  text-align: center;
  margin-top: 2.6rem;
}

/* ---- shared apply zone: FAQs + app card sit on one background image ---- */
.wo-applyzone {
  color: #fff;
  /* the artwork is 1915x2934; it covers the FAQ block and fades into the flat
     navy below, which the fallback colour continues if the band runs taller */
  background: #091950 url("/dcscc/v2/images/ultimateupi/faq-apply-bg.png") no-repeat center top / 100% auto;
}

/* --------------------------------- faqs ---------------------------------- */
.wo-faq {
  padding: 4rem 0 1rem;
}
.wo-faq__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  margin: 0 0 2.6rem;
}
.wo-faq__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex: 0 0 auto;
  transform: translate(1rem, -0.5rem);
}
.wo-faq__list {
  max-width: 940px;
  margin: 0 auto;
}
.wo-faq__item {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(3, 16, 44, .28);
  overflow: hidden;
}
.wo-faq__item + .wo-faq__item {
  margin-top: 1.1rem;
}
/* the whole header row is the toggle — reset the button chrome */
.wo-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  width: 100%;
  padding: 1.5rem 2rem;
  background: none;
  border: 0;
  text-align: left;
  color: var(--wo-ink);
}
.wo-faq__q:focus { outline: none; }
.wo-faq__num {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
}
.wo-faq__text {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}
/* chevron drawn from two borders so it can rotate with the panel state */
.wo-faq__chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: .3rem;
  border-right: 2.5px solid var(--wo-ink);
  border-bottom: 2.5px solid var(--wo-ink);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.wo-faq__q[aria-expanded="true"] .wo-faq__chev {
  transform: rotate(-135deg);
  margin-top: .6rem;
}
/* answer copy lines up with the question text, not the number */
.wo-faq__a {
  padding: 0 2rem 1.5rem;
  margin-left: calc(1.4rem + 1ch);
}
.wo-faq__a p {
  margin: 0 0 .8rem;
  color: var(--wo-accent-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.wo-faq__a p:last-child { margin-bottom: 0; }
.wo-faq__a a {
  color: inherit;
  text-decoration: underline;
}
.wo-faq .wo-tnc {
  margin: 3rem auto 1rem;
}

/* ------------------------- app download card ----------------------------- */
.wo-steps {
  position: relative;
  padding: 4rem 0 4.5rem;   /* background comes from .wo-applyzone */
}
/* the card shares the FAQ list width (940px) and rounder corners, as designed */
.wo-appcard {
  max-width: 940px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 36px;
  padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.4rem, 3.5vw, 3.2rem);
  box-shadow: 0 18px 40px rgba(3, 16, 44, .28);
}
.wo-appcard__eyebrow {
  color: #A8C6FF;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  margin-bottom: .6rem;
}
.wo-appcard__title {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.3rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.wo-appcard__text {
  color: #fff;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  max-width: 30rem;
  margin-bottom: 1.6rem;
}
/* badges + apply CTA share one column: each badge takes half of it, so the pair
   spans exactly the button width (both badge PNGs are ~3.2:1, so they stay the
   same height) */
.wo-appcard__actions {
  max-width: 480px;
}
.wo-appcard__badges {
  display: flex;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}
.wo-appcard__badges a { flex: 1 1 0; display: block; }
.wo-appcard__badges img { display: block; width: 100%; height: auto; }
/* shares the hero's blue-to-white gradient (see .wo-hero__cta .wo-btn above) */
.wo-appcard__cta .wo-btn {
  display: block;
  width: 100%;
  padding-left: 1.2rem;     /* narrower than the pill default so the label stays on one line */
  padding-right: 1.2rem;
}
.wo-appcard__phone {
  max-width: 190px;
  width: 100%;
  height: auto;
}

/* full T&C link — understated, on-brand (replaces the old blue/orange button) */
.wo-tnc {
  max-width: 880px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  text-align: center;
}
.wo-tnc a {
  color: #A8C6FF;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.wo-tnc a:hover,
.wo-tnc a:focus { color: #fff; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 991.98px) {
  /* hero: fixed 450px minimum (taller than the KV is at any width below 992px,
     so cover only ever crops it at the sides and the bottom is never cut), copy
     stays vertically centred. The navy gradient fills the whole band so the
     white copy reads over both the sky and the deck. */
  .wo-hero {
    aspect-ratio: auto;
    min-height: 450px;
  }
  .wo-hero__img { object-position: 70% center; }
  .wo-hero__inner {
    align-self: stretch;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(3, 27, 66, .35) 0%, rgba(3, 27, 66, .5) 50%, rgba(3, 27, 66, .6) 100%);
  }
  .wo-hero__content {
    max-width: 100%;
    min-width: 0;
  }
  /* perks and eligibility stack here; their paddings would otherwise add up to 7rem */
  .wo-perks { padding-bottom: 1rem; }
}
@media (max-width: 575.98px) {
  .wo-info { padding: 3.4rem 1.25rem 1rem; }
  .wo-info__pill { padding: .75rem 1.5rem; font-size: 1rem; }
  .wo-info__list li { padding-left: 3rem; margin-bottom: 1.6rem; line-height: 1.7; }
  .wo-info__list li::before { width: 22px; height: 22px; }
  .wo-info__link { padding-left: 3rem; }
  .wo-faq__q { padding: 1.2rem 1.25rem; gap: .9rem; }
  .wo-faq__text { font-size: .98rem; }
  .wo-faq__a { padding: 0 1.25rem 1.25rem; margin-left: 0; }
}