/* Usability Audit landing page, v2 (post slug: usability-audit).
   A redesign of the v1 canvas port (post: ecommerce-usability-audit) in the
   site's own visual language. The container, hero, band, heading and button
   rules below mirror _base.scss / sections/_hero.scss so the page sits inside
   the WD Market system rather than beside it:

     .ua2-shell  == .container            (1470px, 100/80/50/30/20px gutters)
     .ua2-hero   == .hero                 (#042125, 0 0 29.71px radius)
     .ua2-sec    == section.dark-bg/.white-bg
                                          (128px, -40px overlap, 48px top radius)
     .ua2-cat    == .category-label / .category-with-cta
     .ua2-btn    == .btn.btn-primary / .btn-secondary / .btn--call-cta

   STANDALONE — deliberately NOT part of the style.scss sass build, so
   `npm run build` will neither rebuild nor drop it. Paired with
   assets/js/usability-audit-v2.js. Root class: .ua2 */

/* ------------------------------------------------------------------ tokens */
.ua2 {
  --ink: #010708;
  --hero-bg: #042125;
  --band-bg: #052326;
  --teal-700: #023a3f;
  --teal-500: #4c5e59;
  --slate: #4c524b;
  --gray: #868c8c;
  --border: #e6e6e6;
  --border-strong: #cacfce;
  --surface: #f6f6f6;
  --electric: #d3fb52;
  --lime: #a1de3b;
  --cream: #f9ffe6;

  --mint: #daf0de;
  --peach: #fae2d6;
  --lavender: #e5e2f6;
  --butter: #f7eec7;

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

  color: var(--ink);
}

.ua2 *, .ua2 *::before, .ua2 *::after { box-sizing: border-box; }
.ua2 img { max-width: 100%; max-height: none; display: block; }
.ua2 p { margin: 0; }  /* (0,1,1) — outranks any single-class .ua2-x rule on a <p>,
                          so component margins are written .ua2 .ua2-x to win */
.ua2 ul, .ua2 dl { margin: 0; padding: 0; list-style: none; }
.ua2 figure { margin: 0; }  /* UA default is 1em 40px and it knocks the hero cut-outs off the baseline */
.ua2 h1, .ua2 h2, .ua2 h3, .ua2 h4 { margin: 0; }

/* ---------------------------------------------------------- .container */
.ua2-shell { width: 100%; max-width: 1470px; padding: 0 15px; margin: 0 auto; }
@media screen and (max-width: 1599px) { .ua2-shell { max-width: 100%; padding: 0 100px; } }
@media screen and (max-width: 1499px) { .ua2-shell { padding: 0 80px; } }
@media screen and (max-width: 1299px) { .ua2-shell { padding: 0 50px; } }
@media screen and (max-width: 991px)  { .ua2-shell { padding: 0 30px; } }
@media screen and (max-width: 768px)  { .ua2-shell { padding: 0 20px; } }

/* ------------------------------------------------- section.dark-bg/white-bg */
.ua2-sec { position: relative; padding: 128px 0; margin-bottom: -40px; border-radius: 48px 48px 0 0; }
.ua2-sec--light { background: #fff; }
.ua2-sec--dark { background: var(--band-bg); color: #f9ffe6; }
.ua2-sec--dark h2, .ua2-sec--dark h3 { color: #fff; }
@media screen and (max-width: 991px) { .ua2-sec { padding: 100px 0; border-radius: 24px 24px 0 0; } }
@media screen and (max-width: 768px) { .ua2-sec { padding: 64px 0; } }

/* Inner rhythm for the several topics that share one band. */
.ua2-group + .ua2-group { margin-top: 128px; }
@media screen and (max-width: 991px) { .ua2-group + .ua2-group { margin-top: 80px; } }
@media screen and (max-width: 768px) { .ua2-group + .ua2-group { margin-top: 56px; } }

/* ------------------------------------------------------- .category-label */
.ua2-cat {
  display: inline-flex; align-items: center; gap: 0 6px;
  height: 28px; padding: 0 8px; margin: 0 0 32px;
  background-color: var(--teal-500); color: var(--cream);
  line-height: 20px; font-size: 12px; font-weight: 500; border-radius: 35px;
}
.ua2-cat::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; background-color: var(--cream); border-radius: 50%; }
.ua2-sec--dark .ua2-cat, .ua2-hero .ua2-cat { background-color: var(--teal-700); color: #fff; }
.ua2-sec--dark .ua2-cat::before, .ua2-hero .ua2-cat::before { background-color: var(--electric); }
@media screen and (max-width: 768px) { .ua2-cat { margin-bottom: 24px; } }

/* --------------------------------------------------------- .section-heading */
.ua2-h2 { line-height: 56px; font-weight: 700; font-size: 48px; letter-spacing: -0.02em; }
@media screen and (max-width: 1499px) { .ua2-h2 { line-height: normal; font-size: 45px; } }
@media screen and (max-width: 991px)  { .ua2-h2 { line-height: 40px; font-size: 32px; } }

.ua2-head { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 64px; }
.ua2-head .ua2-h2 { margin: 0; max-width: 24ch; }
.ua2-head:has(p) .ua2-h2 { margin: 0 0 24px; }
.ua2-head p { max-width: 72ch; color: var(--slate); font-size: 16px; line-height: 26px; }
.ua2-sec--dark .ua2-head p, .ua2-hero .ua2-head p { color: rgba(249, 255, 230, .7); }
.ua2-head:not(:has(h2)) { margin-bottom: 0; }
.ua2-head:not(:has(h2)) .ua2-cat { margin-bottom: 32px; }
@media screen and (max-width: 991px) { .ua2-head { margin-bottom: 48px; } }

.ua2-kicker { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--gray); font-weight: 500; }
.ua2-sec--dark .ua2-kicker, .ua2-panel .ua2-kicker { color: rgba(249, 255, 230, .5); }

.ua2-tbd {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 35px; background: #fff3c4; color: #6b5200;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle;
}

/* ------------------------------------------------------------------ .btn */
.ua2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0 12px;
  height: 56px; padding: 0 24px; border: 0; border-radius: 35px;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  white-space: nowrap; letter-spacing: 0; text-decoration: none; text-align: center;
  cursor: pointer; transition: all .3s ease-in-out;
}
.ua2-btn--primary { background: var(--electric); }
.ua2-btn--primary:hover { background: var(--lime); color: var(--ink); }
.ua2-btn--secondary { background: var(--cream); }
.ua2-btn--secondary:hover { background: #eaf5c9; color: #000; }
.ua2-btn--outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.ua2-btn--outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ua2-btn--cta::after {
  content: ''; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.2451 0.75C2.2451 0.335786 2.58089 0 2.9951 0H12.5C12.9142 0 13.25 0.335786 13.25 0.75V11.2458C13.25 11.66 12.9142 11.9958 12.5 11.9958C12.0858 11.9958 11.75 11.66 11.75 11.2458V2.56066L1.28033 13.0303C0.987437 13.3232 0.512563 13.3232 0.21967 13.0303C-0.0732233 12.7374 -0.0732233 12.2626 0.21967 11.9697L10.6893 1.5H2.9951C2.58089 1.5 2.2451 1.16421 2.2451 0.75Z' fill='black'/%3E%3C/svg%3E") center center no-repeat;
  transition: all .3s ease-in-out;
}
.ua2-btn--cta:hover::after { transform: rotate(45deg); }
.ua2-btn--outline.ua2-btn--cta::after { filter: invert(1); }

/* ------------------------------------------------------------------ .hero */
.ua2-hero {
  position: relative; overflow: hidden;
  padding: 215px 0 150px;
  background-color: var(--hero-bg);
  border-radius: 0 0 29.71px 29.71px;
  color: var(--cream);
}
.ua2-hero::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 50%; height: 100%;
  background: url('../images/hero-left-dots-image.webp') left bottom no-repeat;
}
.ua2-hero::after {
  content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background: url('../images/hero-right-dots-image.webp') top right no-repeat;
}
@media screen and (max-width: 1599px) { .ua2-hero { padding-bottom: 100px; } }
@media screen and (max-width: 1199px) { .ua2-hero { padding: 150px 0 64px; border-radius: 0 0 24px 24px; } }

.ua2-hero .ua2-shell { position: relative; z-index: 1; }
.ua2-hero-grid { display: flex; align-items: flex-end; gap: 0 60px; }
.ua2-hero-copy { flex: 1 1 0; min-width: 0; }
.ua2-hero-art { flex: 0 0 48%; min-width: 0; }

.ua2-hero h1 {
  margin: 0 0 24px; line-height: 68px; font-weight: 600; font-size: 56px;
  letter-spacing: -0.02em; color: #fff; max-width: 17ch;
}
@media screen and (max-width: 1599px) { .ua2-hero h1 { line-height: 1.12; font-size: 52px; } }
@media screen and (max-width: 1299px) { .ua2-hero h1 { font-size: 48px; } }
@media screen and (max-width: 768px)  { .ua2-hero h1 { font-size: 40px; } }

.ua2-hero-sub { max-width: 56ch; font-size: 16px; line-height: 26px; color: rgba(249, 255, 230, .72); }
.ua2-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
@media screen and (max-width: 768px) { .ua2-hero-cta { flex-direction: column; margin-top: 32px; } }

.ua2-trust { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.ua2-stars { display: inline-flex; gap: 2px; color: var(--electric); }
.ua2-trust-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: rgba(249, 255, 230, .6); }
.ua2-trust-brands b { font-weight: 500; color: rgba(255, 255, 255, .92); }

/* hero cut-outs, bleeding to the right edge like .hero__image on the homepage */
.ua2-stage { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; }
.ua2-stage::before {
  content: ''; position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%);
  width: 118%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(211, 251, 82, .26), rgba(211, 251, 82, .05) 60%, transparent 72%);
}
.ua2-person { position: relative; flex: none; filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .45)); }
.ua2-person img {
  width: 100%; height: auto;
  /* The photos are cropped at the hip. Raised off the hero's bottom edge that
     crop reads as a hard flat line, so dissolve the last few percent. */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.ua2-person--a { z-index: 2; width: 51%; margin-right: -10%; }
.ua2-person--b { z-index: 1; width: 60%; }

@media screen and (max-width: 1199px) {
  .ua2-hero-grid { flex-direction: column; gap: 48px 0; }
  .ua2-hero-copy, .ua2-hero-art { flex: 1 1 auto; width: 100%; }
  .ua2-hero-art { max-width: 520px; margin: 0 auto; }
  .ua2-stage { justify-content: center; }
  .ua2-hero h1, .ua2-hero-sub { max-width: none; }
}

/* --------------------------------------------------------------- reviews
   Card system matches .ua2-member (24px radius, 1px --border, lift on hover);
   the reviewer monogram reuses the four pastel tokens the team cards use.
   Every rating shown here is the real one: the four cards are all 5-star
   (verified at source), the two aggregates are the live platform scores. */
.ua2-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ua2-review {
  border: 1px solid var(--border); border-radius: 24px; padding: 26px 24px 24px; background: #fff;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s var(--ease), box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}
.ua2-review:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 16px 38px rgba(134, 140, 140, .18); }
.ua2-review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ua2-review p { font-size: 15px; line-height: 25px; color: var(--slate); flex: 1; }
.ua2-review footer { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.ua2-review-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua2-review-who b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ua2-review-who span { font-size: 12px; color: var(--gray); }
.ua2-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(1, 7, 8, .55);
}
.ua2-review:nth-child(4n+1) .ua2-avatar { background: var(--mint); }
.ua2-review:nth-child(4n+2) .ua2-avatar { background: var(--lavender); }
.ua2-review:nth-child(4n+3) .ua2-avatar { background: var(--peach); }
.ua2-review:nth-child(4n)   .ua2-avatar { background: var(--butter); }

/* star bar — one SVG of five stars; the aggregates clip it with a hard-stop
   gradient (userSpaceOnUse, or each star would fill to the same fraction). */
.ua2-starbar { flex: none; display: block; width: 74px; height: 13px; }

/* review source badge (links out to the live profile) */
.ua2 .ua2-src {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 26px; padding: 0 11px 0 8px;
  border-radius: 35px; background: var(--surface); color: var(--teal-500);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease);
}
.ua2 .ua2-src svg { flex: none; display: block; width: 13px; height: 13px; }
.ua2 .ua2-src:hover, .ua2 .ua2-src:focus-visible { background: var(--electric); color: var(--ink); }

/* aggregate score chips */
.ua2-rating-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.ua2 .ua2-score {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 12px;
  border: 1px solid var(--border); border-radius: 35px; background: #fff;
  color: var(--ink); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s ease-in-out, border-color .3s ease-in-out;
}
.ua2 .ua2-score:hover, .ua2 .ua2-score:focus-visible { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 12px 28px rgba(134, 140, 140, .16); }
.ua2-score-logo { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.ua2-score-logo svg { display: block; width: 17px; height: 17px; }
.ua2-score-b { display: flex; flex-direction: column; gap: 4px; }
.ua2-score-top { display: flex; align-items: center; gap: 8px; }
.ua2-score-top b { font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ua2-score-meta { font-size: 12px; line-height: 1; color: var(--gray); }

/* aggregate score links in the hero trust strip */

.ua2 .ua2-trust-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13px; }
.ua2 .ua2-trust-score a { color: rgba(249, 255, 230, .6); text-decoration: none; border-bottom: 1px solid rgba(249, 255, 230, .22); }
.ua2 .ua2-trust-score a:hover, .ua2 .ua2-trust-score a:focus-visible { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.ua2 .ua2-trust-score b { color: rgba(255, 255, 255, .92); font-weight: 500; }

/* ------------------------------------------------------------ two columns */
.ua2-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ua2-2col--center { align-items: center; }

.ua2-prose { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 26px; color: var(--slate); }
.ua2-sec--dark .ua2-prose { color: rgba(249, 255, 230, .7); }

/* ------------------------------------------------ headline with a cut-out
   "The problem" head, with Tomass standing at the right pointing back at the
   statement (the webinar-banner cut-out from Figma, node 5232-3480). He is
   decorative company for the display type, so he is dropped below 992 rather
   than stacked - a 300px cut-out under a heading reads as an orphan. */
.ua2-headline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; margin: 0 0 64px; }
.ua2-headline > .ua2-head { margin-bottom: 0; }
/* margin-bottom pulls the cut edge onto the card row's top edge, so he reads as
   standing behind the card rather than sliced off in mid-air; margin-right sets
   him inside the container edge, and shrinks as the gap to the heading closes. */
.ua2 .ua2-headline-art { align-self: end; justify-self: end; margin-bottom: -64px; margin-right: 72px; }
.ua2-headline-art img { width: auto; height: 400px; }
@media screen and (max-width: 1499px) { .ua2 .ua2-headline-art { margin-right: 48px; } }
@media screen and (max-width: 1299px) { .ua2 .ua2-headline-art { margin-right: 24px; } .ua2-headline-art img { height: 350px; } }
@media screen and (max-width: 1199px) { .ua2 .ua2-headline-art { margin-right: 0; } .ua2-headline-art img { height: 300px; } }
/* The h2 is capped at 24ch, so below 992 the two columns still fit and he keeps
   the space that would otherwise be empty beside the heading - stacking him into
   his own row there would open a 660px void on a tablet. Only below 768, where
   24ch fills the container, does he drop under the heading; there he is sized as
   a share of the container so the balance holds on any phone. */
@media screen and (max-width: 991px) {
  .ua2-headline { gap: 24px; margin-bottom: 48px; }
  .ua2 .ua2-headline-art { margin-bottom: -48px; margin-right: 0; }
  .ua2-headline-art img { height: 250px; }
}
/* Below 768 he is dropped. Stacked under the heading he sat in a band of his
   own with ~42% of it empty at 390 and 59% at 768, pointing into white space,
   for ~190-280px of extra scroll and no information - and the floating CTA
   lands in exactly that gap. Two columns is the only layout he earns. */
@media screen and (max-width: 768px) {
  .ua2-headline { grid-template-columns: minmax(0, 1fr); }
  .ua2 .ua2-headline-art { display: none; }
}

/* ------------------------------------------------- problem + situation cards
   Card anatomy from the agency landing's "How We Build It" process row (page
   5214): a 170deg wash fading out at 68%, the icon on top, and the number,
   title and copy pushed to the foot so the baselines stagger. Its five pastel
   tints are NOT used - the palette here is "After Launch" from the same page:
   white cards, one teal card, electric-lime tiles and values. */
.ua2-probcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ua2-sigcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.ua2-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 28px 26px; border-radius: 24px; border: 1px solid var(--border);
  background: linear-gradient(170deg, rgba(211, 251, 82, .22) 0%, rgba(255, 255, 255, 0) 68%), #fff;
  box-shadow: 0 2px 8px rgba(134, 140, 140, .2);
  transition: transform .3s var(--ease), box-shadow .3s ease-in-out;
}
.ua2-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(134, 140, 140, .16); }
.ua2-card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; background: rgba(211, 251, 82, .28); color: var(--teal-700); }
.ua2-card-ico svg { width: 22px; height: 22px; }
.ua2-card-body { display: grid; gap: 10px; }
.ua2-card-n { font-size: 14px; font-weight: 600; color: var(--gray); }
.ua2 .ua2-card h3 { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.ua2 .ua2-card p { font-size: 15px; line-height: 1.65; color: var(--slate); }

/* the teal card, straight from "After Launch": electric tile, lime-tinted body */
.ua2-card--dark { background: var(--teal-700); border-color: var(--teal-700); }
.ua2-card--dark .ua2-card-ico { background: var(--electric); color: var(--teal-900, var(--ink)); }
.ua2 .ua2-card--dark h3 { color: #fff; }
.ua2 .ua2-card--dark p { color: rgba(255, 255, 255, .72); }
.ua2-card--dark .ua2-card-n { color: rgba(255, 255, 255, .5); }

/* The six situation cards take the process row's own tints, straight from page
   5214 - and with them its bare icon (no tile), coloured to match the wash.
   That deck has five colours and this row needs six, so 05 is an indigo mixed
   in the same recipe. The two lede cards stay on the After Launch pairing:
   white beside teal. */
.ua2-sigcards > .ua2-card:nth-child(1) { background: linear-gradient(170deg, rgba(249, 80, 1, .16) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card:nth-child(2) { background: linear-gradient(170deg, rgba(122, 243, 255, .30) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card:nth-child(3) { background: linear-gradient(170deg, rgba(250, 187, 5, .22) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card:nth-child(4) { background: linear-gradient(170deg, rgba(161, 222, 59, .26) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card:nth-child(5) { background: linear-gradient(170deg, rgba(120, 110, 220, .16) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card:nth-child(6) { background: linear-gradient(170deg, rgba(2, 58, 63, .14) 0%, rgba(255, 255, 255, 0) 68%), #fff; }
.ua2-sigcards > .ua2-card .ua2-card-ico { display: flex; width: auto; height: auto; padding: 0; border-radius: 0; background: none; }
.ua2-sigcards > .ua2-card .ua2-card-ico svg { width: 30px; height: 30px; }
.ua2-sigcards > .ua2-card:nth-child(1) .ua2-card-ico { color: rgb(249, 80, 1); }
.ua2-sigcards > .ua2-card:nth-child(2) .ua2-card-ico { color: rgb(35, 178, 200); }
.ua2-sigcards > .ua2-card:nth-child(3) .ua2-card-ico { color: rgb(250, 187, 5); }
.ua2-sigcards > .ua2-card:nth-child(4) .ua2-card-ico { color: rgb(126, 176, 32); }
.ua2-sigcards > .ua2-card:nth-child(5) .ua2-card-ico { color: rgb(97, 88, 190); }
.ua2-sigcards > .ua2-card:nth-child(6) .ua2-card-ico { color: var(--teal-700); }

/* the two lede cards carry more copy than a process card, so they run wider */
.ua2-probcards .ua2-card { padding: 32px; gap: 24px; }
.ua2 .ua2-probcards h3 { font-size: 24px; line-height: 1.25; }
.ua2 .ua2-probcards p { font-size: 16px; line-height: 26px; }

.ua2 .ua2-note { margin-top: 32px; font-size: 16px; line-height: 26px; color: var(--slate); }
.ua2-sec--dark .ua2-note { color: rgba(249, 255, 230, .7); }
.ua2 .ua2-note--flag { display: flex; gap: 16px; align-items: stretch; margin-top: 24px; padding: 18px 22px; border-radius: 20px; background: var(--cream); color: var(--ink); }
.ua2 .ua2-note--flag::before { content: ''; flex: none; width: 4px; border-radius: 4px; background: var(--lime); }
@media screen and (max-width: 1299px) {
  .ua2-sigcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
  .ua2-probcards { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 768px) {
  /* The chips are 190px auto-width pills, so on a phone they wrapped into two
     short rows with 160px of ragged space at the right, aligned to nothing.
     flex: 1 1 190px keeps them side by side while both fit and lets them fill
     the row once they wrap, so their edges line up with the cards below. */
  .ua2 .ua2-score { flex: 1 1 190px; }
  .ua2-rating-row { gap: 10px; }
  .ua2-sigcards { grid-template-columns: minmax(0, 1fr); }
  .ua2-card { gap: 24px; padding: 24px 22px; }
  .ua2-probcards .ua2-card { padding: 24px; }
}

/* --------------------------------------------------------------- delivery */
.ua2-delivery { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 80px; align-items: start; }
.ua2-delivery > .ua2-head { position: sticky; top: 148px; margin-bottom: 0; }  /* clears the 124px on-scroll site header */
.ua2-timeline { position: relative; }
.ua2-tl-rail { position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; }
.ua2-tl-rail i { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--electric); border-radius: 2px; display: block; }
.ua2-step { position: relative; padding: 0 0 32px 48px; }
.ua2-step:last-child { padding-bottom: 0; }
.ua2-step::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--band-bg); border: 2px solid rgba(255, 255, 255, .28);
  transition: all .4s ease-in-out;
}
.ua2-step.is-on::before { background: var(--electric); border-color: var(--electric); box-shadow: 0 0 0 6px rgba(211, 251, 82, .14); }
.ua2-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.ua2-day {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 35px;
  background: rgba(211, 251, 82, .16); color: var(--electric);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ua2-step h3 { font-size: 20px; font-weight: 600; }
.ua2-owner { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(249, 255, 230, .42); font-weight: 500; }
.ua2-step p { margin-top: 10px; font-size: 15px; line-height: 25px; color: rgba(249, 255, 230, .66); }

/* ---------------------------------------------------------- deliverables */
.ua2-deliver li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 16px; line-height: 26px; color: var(--slate); }
.ua2-deliver li:first-child { padding-top: 0; }
.ua2-deliver b { color: var(--ink); font-weight: 600; }
.ua2-check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; margin-top: 2px; }
.ua2-check svg { width: 13px; height: 13px; color: #3f6b0d; }

.ua2-pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ua2-page-ph { aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, #fafafa, #f2f2f2); }
.ua2 .ua2-ph-note { margin-top: 12px; font-size: 13px; color: var(--gray); }
.ua2-ongoing { margin-top: 24px; border-radius: 24px; background: var(--electric); color: var(--ink); padding: 32px; }
.ua2-ongoing h3 { font-size: 24px; font-weight: 600; margin: 12px 0 12px; max-width: 22ch; letter-spacing: -0.02em; }
.ua2-ongoing p { font-size: 15px; line-height: 25px; color: #22320a; }
.ua2-ongoing .ua2-kicker { color: #3f5312; }

/* -------------------------------------------------------------------- team */
.ua2-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ua2-member { border-radius: 24px; overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; background: #fff; transition: transform .3s var(--ease), box-shadow .3s ease-in-out; }
.ua2-member:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(134, 140, 140, .18); }
.ua2-member-photo { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.ua2-member-photo span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(1, 7, 8, .32); }
.ua2-member:nth-child(1) .ua2-member-photo { background: var(--mint); }
.ua2-member:nth-child(2) .ua2-member-photo { background: var(--lavender); }
.ua2-member:nth-child(3) .ua2-member-photo { background: var(--peach); }
.ua2-member:nth-child(4) .ua2-member-photo { background: var(--butter); }
.ua2-member-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ua2-member-body h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ua2-member-body > p { font-size: 15px; line-height: 24px; color: var(--slate); }
.ua2-evidence { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.ua2-evidence p { margin-top: 8px; font-size: 14px; line-height: 23px; color: var(--slate); }

/* -------------------------------------------------------- working together */
.ua2-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ua2-terms li { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; padding: 32px; font-size: 16px; line-height: 26px; color: rgba(249, 255, 230, .78); }
.ua2-terms .ua2-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--electric); margin-bottom: 16px; }

/* ------------------------------------------------------------ case studies */
.ua2-cases { display: flex; flex-direction: column; gap: 24px; }
.ua2-case { border: 1px solid var(--border); border-radius: 32px; padding: 40px; background: #fff; }
.ua2-case-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ua2-case-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.ua2-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 35px; background: var(--surface); color: var(--gray); font-size: 12px; }
.ua2-case h3 { margin: 16px 0 24px; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; max-width: 36ch; }
@media screen and (max-width: 991px) { .ua2-case { padding: 24px; } .ua2-case h3 { font-size: 22px; line-height: 30px; } }

.ua2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ua2-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ua2-stats--1 { grid-template-columns: minmax(0, 1fr); }
.ua2-stat { border-radius: 24px; background: var(--surface); padding: 24px; }
.ua2-stat b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ua2-stat span { display: block; margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--gray); }
.ua2-stat--hi { background: var(--band-bg); }
.ua2-stat--hi b { color: var(--electric); }
.ua2-stat--hi span { color: rgba(249, 255, 230, .6); }

.ua2-panel { margin-top: 16px; border-radius: 24px; background: var(--band-bg); color: var(--cream); padding: 32px; }
.ua2-panel p { font-size: 15px; line-height: 25px; color: rgba(249, 255, 230, .72); }
.ua2-funnel { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.ua2-fr { display: grid; grid-template-columns: 190px minmax(0, 1fr) 70px; align-items: center; gap: 14px; font-size: 14px; }
.ua2-fr > span:first-child { color: rgba(249, 255, 230, .72); }
.ua2-track { height: 8px; border-radius: 35px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ua2-fill { display: block; height: 8px; width: 0; border-radius: 35px; background: var(--electric); transition: width 1.1s var(--ease); }
.ua2-fill--warn { background: #f95001; }
.ua2-fill--band { background: rgba(211, 251, 82, .5); margin-left: 70%; }
.ua2-fr > span:last-child { text-align: right; color: #fff; font-weight: 600; }

.ua2-scrolldepth { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: center; }
.ua2-mock { position: relative; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; aspect-ratio: 3 / 4; }
.ua2-mock i { position: absolute; left: 0; right: 0; top: 0; display: block; height: 0; background: linear-gradient(180deg, rgba(211, 251, 82, .8), rgba(161, 222, 59, .25)); transition: height 1.2s var(--ease); }
.ua2-mock u { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .35); }
.ua2-mock-lbl { position: absolute; left: 12px; right: 12px; font-size: 10px; line-height: 13px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }

.ua2-reasoning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border); }
.ua2-reasoning--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ua2-reasoning p { margin-top: 10px; font-size: 15px; line-height: 25px; color: var(--slate); }
.ua2 .ua2-verdict { margin-top: 24px; padding: 20px 24px; border-radius: 16px; background: var(--cream); font-size: 16px; line-height: 26px; color: #2c3a12; }

/* -------------------------------------------------------------- principles */
.ua2-principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ua2-principle { padding-top: 24px; border-top: 2px solid rgba(211, 251, 82, .35); }
.ua2-principle h3 { margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 600; max-width: 20ch; letter-spacing: -0.02em; }
.ua2-principle p { margin-top: 12px; font-size: 15px; line-height: 25px; color: rgba(249, 255, 230, .64); }
.ua2-principle-n { font-size: 13px; font-weight: 600; color: var(--electric); letter-spacing: .08em; }

/* ----------------------------------------------------------------- qualify */
.ua2-crit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* .ua2 ul, .ua2 dl { margin: 0 } above outranks a bare .ua2-crit/.ua2-spec, so these
   two need the .ua2 prefix to apply at all. */
.ua2 .ua2-crit { margin-bottom: 64px; }
.ua2-crit li { display: flex; gap: 14px; align-items: flex-start; padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: 16px; line-height: 25px; color: rgba(249, 255, 230, .88); }
.ua2-crit .ua2-check { background: rgba(211, 251, 82, .18); }
.ua2-crit .ua2-check svg { color: var(--electric); }

.ua2 .ua2-spec { margin-top: 40px; }
.ua2-spec-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .13); align-items: baseline; }
.ua2-spec-row:first-child { border-top: 1px solid rgba(255, 255, 255, .13); }
.ua2-spec-row dt { font-size: 16px; font-weight: 600; color: #fff; }
.ua2-spec-row dd { margin: 0; font-size: 16px; line-height: 26px; color: rgba(249, 255, 230, .68); }

/* --------------------------------------------------------------- not a fit */
.ua2-notfit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ua2-notfit li { border-radius: 24px; background: var(--surface); padding: 32px; }
.ua2-notfit b { display: block; font-size: 17px; line-height: 26px; color: var(--ink); margin-bottom: 10px; }
.ua2-notfit span { font-size: 15px; line-height: 25px; color: var(--slate); }

/* -------------------------------------------------------------------- form */
.ua2-formwrap { background: #fff; color: var(--ink); border-radius: 32px; padding: 40px; }
@media screen and (max-width: 991px) { .ua2-formwrap { padding: 24px; } }
.ua2 .ua-form-grid { display: grid; gap: 16px; }
.ua2 .ua-field { display: flex; flex-direction: column; gap: 6px; }
.ua2 .ua-field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.ua2 .ua-optional { color: var(--gray); font-weight: 400; }
.ua2 .ua-input, .ua2 .ua-textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
  transition: all .3s ease-in-out;
}
.ua2 .ua-input:focus, .ua2 .ua-textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(211, 251, 82, .3); outline: none; }
.ua2 .ua-textarea { resize: vertical; min-height: 104px; }
.ua2 .ua-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 24px; border-radius: 35px; background: var(--electric);
  color: var(--ink); border: 0; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 600; transition: all .3s ease-in-out;
}
.ua2 .ua-btn:hover { background: var(--lime); }
.ua2 .wpcf7-not-valid-tip { font-size: 13px; color: #d93025; }
.ua2 .wpcf7-response-output { margin: 16px 0 0 !important; padding: 14px 16px !important; border-radius: 12px; font-size: 14px; border-width: 1px !important; }

/* --------------------------------------------------------- floating widgets */
.ua2-depth {
  position: fixed; left: 76px; bottom: 16px; z-index: 70;
  width: min(276px, calc(100vw - 92px)); padding: 14px 16px; border-radius: 20px;
  background: rgba(4, 33, 37, .92); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--cream); pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease-in-out, transform .3s var(--ease);
}
.ua2-depth.is-on { opacity: 1; transform: none; }
.ua2-depth-lbl { display: block; font-size: 10px; letter-spacing: .08em; color: rgba(249, 255, 230, .55); }
.ua2-depth-track { display: block; margin-top: 8px; height: 6px; border-radius: 35px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ua2-depth-bar { display: block; height: 6px; width: 0; background: var(--electric); }
.ua2-depth p { margin-top: 10px; font-size: 13px; line-height: 19px; color: rgba(249, 255, 230, .8); }
/* The accent clause is a whole phrase now ("Only 15% of visitors"), not a bare
   percentage, so it keeps the paragraph size — 16px bold wrapped to three lines
   in a 276px widget and swamped the sentence it introduces. */
.ua2-depth p b { color: var(--electric); font-weight: 700; }

.ua2-sticky { position: fixed; right: 16px; bottom: 96px; z-index: 70; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s ease-in-out, transform .3s var(--ease); }
.ua2-sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ua2-sticky .ua2-btn { height: 48px; padding: 0 20px; font-size: 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }

/* ---------------------------------------------------- scroll reveal (JS) */
@media (prefers-reduced-motion: no-preference) {
  .ua2 [data-r] { opacity: 0; transform: translateY(24px); }
  .ua2 [data-r].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
  .ua2 [data-r="scale"] { transform: translateY(24px) scale(.97); }
  .ua2 [data-r="right"] { transform: translateX(28px); }
  .ua2-hero-art .ua2-person { opacity: 0; transform: translateY(38px); }
  .ua2-hero-art.is-in .ua2-person { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .ua2-hero-art.is-in .ua2-person--b { transition-delay: .14s; }
}

/* ------------------------------------------------------------- responsive
   NOTE: the theme applies body { zoom: .85 } between 992px and 1499px, so the
   effective layout width there is viewport / 0.85 and these breakpoints are in
   those zoomed CSS pixels — the same ones _base.scss uses. */
@media screen and (max-width: 1299px) {
  .ua2-reviews, .ua2-team, .ua2-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua2-2col { gap: 40px; }
}
@media screen and (max-width: 1299px) {
  .ua2-delivery { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; }
}
@media screen and (max-width: 991px) {
  .ua2-delivery { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ua2-delivery > .ua2-head { position: static; margin-bottom: 0; }
  .ua2-2col { grid-template-columns: minmax(0, 1fr); }
  .ua2-terms, .ua2-crit, .ua2-notfit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua2-reasoning, .ua2-reasoning--2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ua2-scrolldepth { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .ua2-panel { padding: 24px; }
  .ua2-fr { grid-template-columns: 130px minmax(0, 1fr) 58px; font-size: 13px; }
  .ua2-spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ua2-depth { display: none; }
  .ua2-step { padding-left: 40px; }
}
@media screen and (max-width: 768px) {
  .ua2-reviews, .ua2-team, .ua2-principles, .ua2-terms, .ua2-crit, .ua2-notfit, .ua2-stats { grid-template-columns: minmax(0, 1fr); }
  .ua2-pages { gap: 10px; }
  .ua2-case { padding: 20px; }
  .ua2-fr { grid-template-columns: 104px minmax(0, 1fr) 50px; }
  .ua2-hero-cta .ua2-btn { width: 100%; }
  .ua2-scrolldepth { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ua2-mock { max-width: 160px; }
  .ua2-person--a { width: 49%; margin-right: -8%; }
  .ua2-person--b { width: 58%; }
}

/* ==========================================================================
   2026-09-07 — sections ported from the two Claude Design source canvases
   ("WD Market Usability Audit" 2-artboard one-pager and "Usability Audit
   Brochure (Standalone)" 4-artboard brochure) whose content had no home on
   this page: recurring pattern, scope boundaries, success framework, FAQ.
   Same tokens and card geometry as the sections above — nothing new invented.
   ========================================================================== */

/* --------------------------------------------- recurring pattern (on dark)
   .ua2-stat is light-band only (background: var(--surface)), so the dark-band
   equivalent reuses the .ua2-crit card treatment with the .ua2-stat type scale. */
.ua2-pattern { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ua2-pattern li { border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); padding: 24px; }
.ua2-pattern b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--electric); }
.ua2-pattern span { display: block; margin-top: 10px; font-size: 13px; line-height: 20px; color: rgba(249, 255, 230, .6); }
.ua2-pattern em { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-style: normal; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(249, 255, 230, .42); }

/* ------------------------------------------------------- scope boundaries */
.ua2-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ua2-scope > li { border-radius: 24px; background: var(--surface); padding: 32px; }
.ua2-scope > li.ua2-scope--out { background: #fff; border: 1px solid var(--border); }
.ua2-scope h3 { font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ua2-scope > li > p { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--gray); }
.ua2-scope ul { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.ua2-scope ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 24px; color: var(--slate); }
.ua2-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: var(--cream); }
.ua2-mark svg { width: 12px; height: 12px; color: #3f6b0d; }
.ua2-mark--opt { background: #eceef0; }
.ua2-mark--opt svg { color: var(--teal-500); }
.ua2-mark--no { background: #fff; border: 1px solid var(--border); }
.ua2-mark--no svg { width: 11px; height: 11px; color: var(--gray); }

/* -------------------------------------------- success framework (on dark) */
.ua2-ongoing--obj { margin-top: 0; }
.ua2-ongoing--obj h3 { max-width: 46ch; margin-bottom: 0; font-size: 26px; line-height: 36px; color: var(--ink); }
/* .ua2-sec--dark h3 { color: #fff } would otherwise win by source order and put
   white type on the electric panel. */
.ua2-measures { margin-top: 48px; }
.ua2-measures > .ua2-kicker { margin-bottom: 20px; }

/* ---------------------------------------------------------------- the FAQ
   Native <details>, so it needs nothing from usability-audit-v2.js and stays
   keyboard- and find-in-page-accessible. */
.ua2-faq { border-top: 1px solid var(--border); }
.ua2-faq details { border-bottom: 1px solid var(--border); }
.ua2-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
}
.ua2-faq summary::-webkit-details-marker { display: none; }
.ua2-faq summary:hover { color: var(--teal-500); }
.ua2-faq-icon { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); margin-top: 2px; transition: background .25s ease-in-out; }
.ua2-faq-icon::before, .ua2-faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink); border-radius: 2px; }
.ua2-faq-icon::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.ua2-faq-icon::after { width: 2px; height: 13px; transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.ua2-faq details[open] .ua2-faq-icon { background: var(--electric); }
.ua2-faq details[open] .ua2-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.ua2-faq-a { max-width: 78ch; padding: 0 56px 30px 0; font-size: 16px; line-height: 26px; color: var(--slate); }

@media screen and (max-width: 1299px) {
  .ua2-pattern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
  .ua2-ongoing--obj h3 { font-size: 22px; line-height: 32px; }
  .ua2-faq summary { font-size: 17px; line-height: 27px; gap: 16px; }
  .ua2-faq-a { padding-right: 0; }
}
@media screen and (max-width: 768px) {
  .ua2-pattern, .ua2-scope { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------- placeholder artwork (2026-09-07)
   Inline SVG, not raster: crisp at any DPI, ~1KB each, uses the tokens above
   and adds no requests. Both sets are DELIBERATELY abstract —

   - .ua2-page-ph illustrates the *structure* of a report page (bars, an
     attention chart, a prioritised list). No readable text, no numbers, no
     findings, no client: an illustration, never a sample of real client work.
   - .ua2-member-photo carries a role monogram, the same device the source
     brochure uses. It stands in for a photograph; it does not depict a person.

   Both keep their "pending" markers — real audit pages and real photographs
   still replace these. */
.ua2-page-ph { overflow: hidden; }
.ua2-page-ph svg { display: block; width: 100%; height: 100%; }
.ua2-page-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ua2-member-photo { position: relative; display: block; }
.ua2-member-photo svg { display: block; width: 100%; height: 100%; }
/* Real team photographs: the theme's wdm-card size is already a 4:3 crop,
   which matches the .ua2-member-photo slot. object-fit is the safety net. */
.ua2-member-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* The four portraits frame their subjects at different heights. These offsets were
   measured from each source file (head top at 20.1 / 24.9 / 20.5 / 18.4% of image
   height) so every head sits ~10% down its card. Re-measure if a photo is swapped. */
.ua2-member:nth-child(1) .ua2-member-photo img { object-position: center 40%; }
.ua2-member:nth-child(2) .ua2-member-photo img { object-position: center 55%; }
.ua2-member:nth-child(3) .ua2-member-photo img { object-position: center 42%; }
.ua2-member:nth-child(4) .ua2-member-photo img { object-position: center 35%; }
.ua2-member-photo span { position: absolute; inset: auto 0 10px; text-align: center; }

/* ==========================================================================
   2026-09-07 — case study media column.
   The four case cards were a stack of prose with no imagery. Each card now
   splits into a media column and a data column at >=992px; the tile frame is
   identical across the four, only its content differs:

     Case 01 Casida        no photograph on file anywhere on this server, so
                           the tile carries the recommendation the case turns
                           on (an authored diagram, dark fill, same frame)
     Case 02 Stoic Beauty  the /our-work/ client photograph, plus the roadmap
                           page from the delivered audit document
     Case 03 TinyWins      the /our-work/ client photograph
     Case 04 JuveNaturals  the /our-work/ client photograph

   Column rules live in a min-width query so the existing max-width:991/768
   .ua2-stats rules (0,1,0) are not outranked by .ua2-case-main .ua2-stats.
   ========================================================================== */
.ua2-case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ua2-case-media { display: flex; flex-direction: column; gap: 14px; }

.ua2 .ua2-shot { margin: 0; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: var(--surface); }
.ua2-shot--sq { aspect-ratio: 1 / 1; }
.ua2-shot--wide { aspect-ratio: 16 / 9; }
.ua2-shot img { width: 100%; height: 100%; object-fit: cover; }
.ua2 .ua2-shot-cap { margin: 0; font-size: 13px; line-height: 20px; color: var(--gray); }

/* Dark variant of the same frame. Trap 4 applies: nothing inherits a colour
   from .ua2-sec--light here, so every level sets its own. */
.ua2 .ua2-shot--data { background: var(--band-bg); border-color: var(--band-bg); color: var(--cream); }  /* .ua2 .ua2-shot sets background at (0,2,0), so the variant needs the same weight */
.ua2-seq { display: flex; flex-direction: column; height: 100%; gap: 24px; padding: 32px; }
.ua2-seq-verdict { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 35px; background: var(--electric); color: #2c3a12; font-size: 13px; font-weight: 600; }
.ua2 .ua2-seq-list { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* every step but the last grows, so its box bottom meets the next step's chip
   and the connecting rail can simply run to bottom:0 without knowing the gap */
.ua2-seq-list li { position: relative; flex: 1 1 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; }  /* the li grows to meet the next chip; its rows must not grow with it */
.ua2-seq-list li:last-child { flex: 0 0 auto; }
.ua2-seq-list li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(211, 251, 82, .45), rgba(211, 251, 82, .06)); }
.ua2-seq-n { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: var(--band-bg); border: 1px solid rgba(211, 251, 82, .45); font-size: 11px; font-weight: 600; color: var(--electric); }
.ua2-seq-list b { font-size: 16px; line-height: 24px; font-weight: 600; color: #fff; }
.ua2-seq-list b + span { margin-top: 4px; font-size: 13px; line-height: 20px; color: rgba(249, 255, 230, .62); }

@media screen and (min-width: 992px) {
  .ua2-case-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 40px; align-items: stretch; }
  .ua2-case-main .ua2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua2-case-main .ua2-stats--1 { grid-template-columns: minmax(0, 1fr); }
  /* the two columns rarely come out the same height (case 02 carries a second
     tile, cases 03/04 carry fewer stats). The dark panel takes up the slack so
     neither column ends in a block of empty white. */
  .ua2-case-main { display: flex; flex-direction: column; }
  .ua2-case-main .ua2-panel { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  /* the scroll-depth mock is the one element that can absorb the slack without
     leaving dead space: dropping its 3/4 aspect lets it run the full height of
     the panel, which reads as the long page it is describing */
  .ua2-case-main .ua2-panel > .ua2-scrolldepth { flex: 1 1 auto; align-items: stretch; }
  .ua2-case-main .ua2-panel .ua2-mock { aspect-ratio: auto; }
  .ua2-case-main .ua2-panel .ua2-scrolldepth > div:not(.ua2-mock) { align-self: center; }
}
@media screen and (max-width: 991px) {
  /* stacked, the tile would otherwise run the full width of the card */
  .ua2-case-media { max-width: 460px; }
  .ua2-seq { padding: 24px; gap: 20px; }
}

/* Scroll-depth labels sit inside the lime fill, whose gradient runs from
   near-opaque at the top to .25 at the bottom — so neither a light nor a dark
   text colour is legible at every position. A plate behind the text is. */
.ua2 .ua2-mock-lbl { left: 10px; right: auto; max-width: calc(100% - 20px); padding: 3px 7px; border-radius: 7px; background: rgba(1, 7, 8, .55); }

/* ---------------------------------------------------- team cards on mobile
   One column below 768px turned .ua2-member-photo into a full-bleed square:
   726x726 at 768px, so the name sat a whole screen below the face. Below that
   breakpoint the photo becomes an avatar on the same row as the name and role,
   and the copy runs the full width of the card underneath.

   display:contents on .ua2-member-body lifts the name/role/copy into the card's
   own grid — they are one level too deep to be placed otherwise. It drops the
   body's box, so the 24px padding moves up to .ua2-member.

   Appended at the end of the file on purpose: .ua2-member-photo is restyled
   again around l.610 and .ua2-member-body/.ua2-evidence carry single-class
   rules, so anything earlier would tie on specificity and lose on source order. */
@media screen and (max-width: 768px) {
  .ua2-member {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
    padding: 20px;
    align-items: start;
  }
  .ua2-member-body { display: contents; }
  /* spans the name row and the role row so both sit against the avatar */
  .ua2-member .ua2-member-photo {
    grid-row: span 2;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
  }
  .ua2-member-body > .ua2-kicker { align-self: end; }
  .ua2-member-body > h3 { align-self: start; }
  /* full width under the avatar: at 390px the indented alternative leaves a
     ~230px measure, which is too narrow for the evidence note */
  .ua2-member-body > p,
  .ua2-member .ua2-evidence { grid-column: 1 / -1; }
  /* margin-top:auto pushed .ua2-evidence to the card foot in the flex layout;
     it has nothing to absorb in an auto-sized grid row, so state the step */
  .ua2-member .ua2-evidence { margin-top: 6px; }
}

/* --------------------------------------------------- stat cards on mobile
   One column below 768px (l.511) gave every stat a full-width card at 24px
   padding and a 32px number — four of them ran 1462px at 390px. A stat is a
   number and a short label, so it does not need the width: 2-up with tighter
   padding and type brings that to ~700px, and 1322 -> 566 at 768.

   The number scales with the viewport because "~€180,000" is the widest value
   on the page and does not fit a half-width card at a fixed 26px on a small
   phone. Below 360px even the fluid size overflows its card, so the grid falls
   back to one column there rather than let a figure spill its rounded corner.

   At the end of the file so the max-width:768 .ua2-stats rule above (0,1,0)
   does not win on source order. */
@media screen and (max-width: 768px) {
  .ua2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ua2-stats--1 { grid-template-columns: minmax(0, 1fr); }
  .ua2-stat { padding: 16px; border-radius: 18px; }
  .ua2-stat b { font-size: clamp(19px, 5.6vw, 26px); }
  .ua2-stat span { margin-top: 6px; font-size: 12.5px; line-height: 18px; }
}
@media screen and (max-width: 480px) {
  .ua2-stat { padding: 14px; }
  .ua2-stat span { font-size: 12px; line-height: 17px; }
}
@media screen and (max-width: 359px) {
  /* ~€180,000 cannot fit a half-width card even at the clamp floor */
  .ua2-stats { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------- situation, team and review cards as a slider
   Stacked one-up, these three groups were the longest runs on the page: the
   six .ua2-sigcards ran ~1750px at 390px, the four .ua2-review cards ~1840px
   and the four .ua2-team members ~1180px, so the reader scrolled past six
   near-identical cards to reach the next section. Below 768px they become a
   horizontal scroll-snap slider instead.

   No JS and no dots: the card is 84% of the shell, so the next one always
   peeks past the right edge, which is the affordance. Keyboard and screen
   readers keep working because it is a real scroll container in DOM order.

   The negative margin-inline cancels the 20px .ua2-shell gutter so a card can
   travel to the screen edge; padding-inline puts the gutter back inside the
   scroller, and scroll-padding-inline makes a snapped card land on that same
   20px line rather than flush left, so card 1 stays aligned with the heading
   above it. Change all three together if the gutter ever changes.

   padding-block leaves room for the -4px hover lift and its shadow, which a
   plain overflow-x container would clip.

   At the end of the file so the max-width:768 one-column rules for
   .ua2-sigcards (l.376) and .ua2-reviews / .ua2-team (l.594) do not win on
   source order. */
@media screen and (max-width: 768px) {
  .ua2-sigcards,
  .ua2-reviews,
  .ua2-team {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
    padding-block: 4px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ua2-sigcards::-webkit-scrollbar,
  .ua2-reviews::-webkit-scrollbar,
  .ua2-team::-webkit-scrollbar { display: none; }

  .ua2-sigcards > .ua2-card,
  .ua2-reviews > .ua2-review,
  .ua2-team > .ua2-member {
    flex: 0 0 auto;
    width: min(84%, 340px);
    scroll-snap-align: start;
  }

  /* The flex row stretches every card to the tallest one (Anush's card is
     505px at 390px, Tomass's content only ~380px), and .ua2-member is itself
     a grid — its auto rows then shared out the surplus, which opened a gap
     between the role and the copy that belongs under it. Packing the rows at
     the top collects the slack at the card foot instead. .ua2-card needs no
     equivalent: its six cards resolve to the same height, so the flex
     space-between distributes identically across all of them, and .ua2-review
     already gives its <p> flex:1, so the surplus lands above the footer rule
     and the four footers line up across the row. */
  .ua2-team > .ua2-member { align-content: start; }

  /* Inside a slider the cards fade in without the vertical travel.
     [data-r] is translateY(24px) until the observer adds .is-in (l.557), and
     cards that start outside the scroller never intersect - so they sat 24px
     below their layout box, and because overflow-x:auto forces overflow-y to
     compute to auto as well, that surplus turned into real vertical scroll on
     the row (24px, less the 12px padding-bottom = the stray 12px you could
     drag). Opacity alone cannot overflow anything, so the fade stays and the
     row is exactly as tall as its cards.

     The reveal stagger is set inline by the JS as --d on each child, so it
     needs !important to be overridden. In a vertical stack the cascade of
     delays reads as one gesture; in the slider each card enters on its own
     swipe, and a 350ms delay on card 6 just looks like a dropped frame. */
  .ua2-sigcards > [data-r],
  .ua2-reviews > [data-r],
  .ua2-team > [data-r] { transform: none; --d: 0ms !important; }

  /* ---------------------------------- reviews: fixed height + read more
     The four reviews run 10-14 lines at 390px, which made the slider card
     533px tall. Clamped to --ua2-review-lines they all land at 331px: the
     min-height pads a shorter review out to the same six lines, so the row
     is one fixed height whatever the copy does, and the footer rules line
     up across the cards exactly as they did before.

     25px is .ua2-review p's line-height from l.211 - change both together.

     .ua2-review--clamp and .is-open are set by the JS, never in the markup;
     the stylesheet alone must not truncate anything, or a no-JS reader
     silently loses half of every review.

     align-items:start overrides the shared stretch above so that opening one
     card grows that card, not all four. */
  .ua2-reviews { align-items: start; }

  .ua2-review--clamp > p {
    --ua2-review-lines: 6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ua2-review-lines);
    line-clamp: var(--ua2-review-lines);
    overflow: hidden;
    min-height: calc(var(--ua2-review-lines) * 25px);
    flex: none;
  }
  .ua2-review--clamp.is-open > p {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    min-height: 0;
  }

  .ua2-review-more {
    align-self: flex-start;
    margin-top: -6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--teal-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .ua2-review-more[hidden] { display: none; }
}