/* uk-fintech — the growth-handoff campaign landing (design round 2,
   Ale 2026-08-07 → 2026-08-10, regenerated from the mock). Section shell /
   kicker / titles / buttons / reveal come from base.css; FaqSection,
   TrustBand and CtaSection carry their own component CSS. Every rule
   scoped under .p-uk-fintech per CONVENTIONS.md. */
/* ============================================================
   Mock: the growth landing's 12 modules rebuilt in the
   apps/website language (tokens.css + base.css primitives +
   the unified c-cta aurora card). Copy verbatim from the
   growth handoff kit. Draft artifact.
   ============================================================ */

/* ---------- base (subset of base.css) ---------- */

/* landing sections: full-bleed bands on the grey-50 canvas, generous
   rhythm (the site's section shell — base.css .section/.section-inner) */
.p-uk-fintech .section--white{ background: var(--color-white); }
.p-uk-fintech .section-inner{
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: 64px 20px;
}
@media (min-width: 768px) { .p-uk-fintech .section-inner{ padding: 80px 24px; } }

.p-uk-fintech .section-sub{
  margin-top: 16px;
  max-width: 576px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-uk-fintech .center{ text-align: center; }
.p-uk-fintech .center .section-sub{ margin-inline: auto; }

.p-uk-fintech .link-blue{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--color-blue);
}
.p-uk-fintech .link-blue::after{ content: "→"; transition: transform .2s var(--ease-out-expo); }
.p-uk-fintech .link-blue:hover::after{ transform: translateX(3px); }

.p-uk-fintech .stat-grad{
  background-image: linear-gradient(105deg, var(--color-blue) 12%, var(--color-black) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-uk-fintech .chip{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--color-blue-100);
  color: var(--color-blue);
}

/* ---------- 01 · hero (deck-cover style: dark, centered, full-viewport,
   blue pooling at the bottom — per Ale's Fraud Lab cover reference) ---------- */
.p-uk-fintech .hero{
  background:
    radial-gradient(115% 105% at 90% 115%, rgba(0, 84, 255, 0.92), rgba(0, 84, 255, 0.28) 50%, transparent 76%),
    var(--color-black);
  color: var(--color-white);
}
.p-uk-fintech .hero__inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 128px 96px;
}
.p-uk-fintech .hero__wordmark{
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  height: 22px;
  width: auto;
  opacity: 0.9;
}
.p-uk-fintech .hero__chip{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid rgba(204, 225, 255, 0.28);
  background: rgba(0, 84, 255, 0.10);
  color: var(--color-blue-200);
}
.p-uk-fintech .hero__title{
  margin-top: 28px;
  max-width: 36ch;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.06;
  overflow-wrap: break-word;
  color: var(--color-white);
}
.p-uk-fintech .hero__grid{ display: grid; grid-template-columns: 1fr; gap: 56px; width: 100%; align-items: center; }
@media (min-width: 1024px) { .p-uk-fintech .hero__grid{ grid-template-columns: 1fr 300px; gap: 64px; } .p-uk-fintech .hero__stats{ justify-self: end; width: 100%; } }
.p-uk-fintech .hero__id{ display: flex; align-items: center; gap: 12px; }
.p-uk-fintech .hero__glyph{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in oklab, var(--color-blue) 55%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.04);
  color: var(--color-white);
}
.p-uk-fintech .hero__name{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight, -0.01em);
  font-size: var(--fs-xl);
  color: var(--color-white);
}
.p-uk-fintech .hero__demo{ align-self: flex-start; }
.p-uk-fintech .hero__title-br { display: none; }
@media (min-width: 1024px) { .p-uk-fintech .hero__title-br { display: block; } }
.p-uk-fintech .hero__sub-br{ display: none; }
@media (min-width: 640px) { .p-uk-fintech .hero__sub-br{ display: block; } }
.p-uk-fintech .hero__row{ position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 28px; padding-top: 28px; width: 100%; max-width: 880px; }
.p-uk-fintech .hero__row::before { content: ""; position: absolute; top: 0; left: 0; width: min(560px, 100%); height: 1px; background: rgba(255, 255, 255, 0.12); }
.p-uk-fintech .hero__stats{ display: flex; flex-direction: column; }
.p-uk-fintech .hero-stat{ border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 18px 0; }
.p-uk-fintech .hero-stat__num{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  font-size: 34px;
  line-height: 1.05;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.p-uk-fintech .hero-stat__cap{ margin-top: 6px; font-size: var(--fs-xs); line-height: var(--leading-body); color: rgba(255, 255, 255, 0.6); }
.p-uk-fintech .hero__sub{ max-width: 88ch; font-size: var(--fs-body); line-height: var(--leading-body); color: rgba(255, 255, 255, 0.72); }
.p-uk-fintech .hero__actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }

/* inline email capture (hero + closing CTA carry it in the source markup) */
/* mobile: the combo goes full-width and the input loses its intrinsic
   width (flex-basis 0), so the column never inherits a min-content wider
   than the viewport */
.p-uk-fintech @media (max-width: 639px){
  .p-uk-fintech .hero__actions{ width: 100%; }
  .p-uk-fintech .hero__actions > *{ width: 100%; min-width: 0; }
  .p-uk-fintech .email-combo input{ min-width: 0; width: 0; flex: 1 1 0; }
  .p-uk-fintech .c-cta__actions .email-combo{ width: 100%; min-width: 0; }
}

/* ---------- 03 · credibility band ---------- */
.p-uk-fintech .cred__grid{ display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .p-uk-fintech .cred__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .p-uk-fintech .cred__grid{ grid-template-columns: repeat(4, 1fr); } }
.p-uk-fintech .cred__cell{ padding: 32px 24px; text-align: center; border-bottom: 1px solid var(--color-grey-100); }
@media (min-width: 1024px) {
  .p-uk-fintech .cred__cell{ border-bottom: 0; border-right: 1px solid var(--color-grey-100); }
  .p-uk-fintech .cred__cell:last-child{ border-right: 0; }
}
.p-uk-fintech .cred__num{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  font-size: 36px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-uk-fintech .cred__num{ font-size: 40px; } }
.p-uk-fintech .cred__cap{ margin: 8px auto 0; max-width: 30ch; font-size: var(--fs-sm); line-height: var(--leading-body); color: var(--color-grey-on-white); }

/* ---------- 04 · threats ---------- */
.p-uk-fintech .threats-dark{
  background:
    radial-gradient(85% 90% at 88% -10%, rgba(255, 90, 95, 0.30), transparent 62%),
    var(--color-black);
  color: var(--color-white);
}
.p-uk-fintech .threats-dark .kicker{ color: var(--color-red-brand); }
.p-uk-fintech .threats-dark .section-title{ color: var(--color-white); }
.p-uk-fintech .threats-dark .threat-card{
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  transition: transform .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}
.p-uk-fintech .threats-dark .threat-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 90, 95, 0.18), rgba(255, 90, 95, 0.04));
  opacity: 0;
  transition: opacity .3s var(--ease-out-expo);
  pointer-events: none;
}
.p-uk-fintech .threats-dark .threat-card > *{ position: relative; }
.p-uk-fintech .threats-dark .threat-card:hover{ border-color: rgba(255, 90, 95, 0.28); }
.p-uk-fintech .threats-dark .threat-card:hover::before{ opacity: 1; }
.p-uk-fintech .threats-dark .threat-card__label{ color: rgba(255, 255, 255, 0.6); }
.p-uk-fintech .threats-dark .threat-card__num.stat-grad{ background-image: none; color: var(--color-white); -webkit-text-fill-color: var(--color-white); }
.p-uk-fintech .threats-dark .threat-card__cap{ color: rgba(255, 255, 255, 0.6); }
.p-uk-fintech .threats-dark .threat-card__list{ border-top-color: rgba(255, 255, 255, 0.12); }
.p-uk-fintech .threats-dark .threat-card__list li{ color: rgba(255, 255, 255, 0.75); }
.p-uk-fintech .threats-dark .threat-card__list li::before{ color: rgba(255, 255, 255, 0.5); }
.p-uk-fintech .threats__grid{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 1024px) { .p-uk-fintech .threats__grid{ grid-template-columns: repeat(3, 1fr); } }
.p-uk-fintech .threat-card{
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
  border-radius: 24px;
  padding: 32px 28px;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.p-uk-fintech .threat-card:hover{ transform: translateY(-2px); box-shadow: none; }
.p-uk-fintech .threat-card__label{ font-size: var(--fs-kicker); letter-spacing: var(--track-wide); color: var(--color-kicker-on-white); }
.p-uk-fintech .threat-card__num{
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  font-size: 44px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.p-uk-fintech .threat-card__cap{ margin-top: 6px; font-size: var(--fs-sm); color: var(--color-grey-on-white); }
.p-uk-fintech .threat-card__list{ margin-top: 22px; border-top: 1px solid var(--color-grey-100); padding-top: 20px; display: grid; gap: 20px; }
.p-uk-fintech .threat-card__list li{ position: relative; padding-left: 24px; font-size: var(--fs-sm); line-height: var(--leading-body); color: var(--color-grey-500); }
.p-uk-fintech .threat-card__list li::before{ content: "→"; position: absolute; left: 0; top: 0; color: var(--color-blue); font-weight: 500; }

/* ---------- 05 · tension ---------- */
.p-uk-fintech .tension__body{ font-size: var(--fs-body); line-height: var(--leading-body); color: var(--color-grey-on-white); max-width: 62ch; }
/* the three stats as one horizontal row (Ale 2026-08-07) */
.p-uk-fintech .tension__ledger{ margin-top: 40px; display: grid; gap: 24px; }
@media (min-width: 768px) { .p-uk-fintech .tension__ledger{ grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.p-uk-fintech .tension__row{
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--color-grey-100);
}
.p-uk-fintech .tension__num{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-uk-fintech .tension__num{ font-size: 44px; } }
.p-uk-fintech .tension__cap{ display: block; margin-top: 10px; max-width: 28ch; font-size: var(--fs-sm); line-height: var(--leading-body); color: var(--color-grey-on-white); }

/* ---------- 07 · approach — 4-quadrant cards, chevron unfolds (Ale 2026-08-07) ---------- */
.p-uk-fintech .sol-intro{ margin-top: 16px; max-width: 60ch; font-size: var(--fs-body); line-height: var(--leading-body); color: var(--color-grey-on-white); }
/* 4-quadrant modular cards — chevron unfolds the description (Ale 2026-08-07) */
.p-uk-fintech .quad__grid{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 768px) { .p-uk-fintech .quad__grid{ grid-template-columns: repeat(2, 1fr); } }
.p-uk-fintech .quad-card{
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
  border-radius: 24px;
  padding: 28px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), border-color .3s var(--ease-out-expo);
}
.p-uk-fintech .quad-card:hover{ transform: translateY(-2px); box-shadow: none; }
.p-uk-fintech .quad-card.is-open{ border-color: rgba(0, 84, 255, 0.4); }
.p-uk-fintech .quad-card__head{ display: flex; align-items: center; justify-content: space-between; width: 100%; }
.p-uk-fintech .quad-card__icon{ display: inline-flex; color: var(--color-blue); }
.p-uk-fintech .quad-card__icon svg{ display: block; }
.p-uk-fintech .quad-card__chev{ color: var(--color-grey-400); transition: transform .3s var(--ease-out-expo), color .3s ease; }
.p-uk-fintech .quad-card:hover .quad-card__chev{ color: var(--color-grey-500); }
.p-uk-fintech .quad-card.is-open .quad-card__chev{ transform: rotate(180deg); color: var(--color-blue); }
.p-uk-fintech .quad-card__name{
  display: block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--color-black);
}
.p-uk-fintech .quad-card__reveal{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-uk-fintech .quad-card.is-open .quad-card__reveal{ grid-template-rows: 1fr; }
.p-uk-fintech .quad-card__line{
  display: block;
  overflow: hidden;
  min-height: 0;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
  opacity: 0;
  transition: opacity 0.45s ease 0.1s;
}
.p-uk-fintech .quad-card.is-open .quad-card__line{ opacity: 1; padding-top: 12px; }

/* ---------- 08 · primary asset (dark) ---------- */
/* split conversion panel — inset aurora card (the closing-CTA silhouette) */
.p-uk-fintech .asset-panel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  border-radius: 24px;
  padding: 48px 28px;
  color: var(--color-white);
  background-color: var(--color-black);
  background-image:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-blue) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-blue) 65%, transparent), transparent 65%);
}
@media (min-width: 768px) { .p-uk-fintech .asset-panel{ padding: 64px 48px; } }
@media (min-width: 1024px) { .p-uk-fintech .asset-panel{ grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 72px 64px; } }
.p-uk-fintech .asset-panel__copy{ display: flex; flex-direction: column; align-items: flex-start; }
.p-uk-fintech .asset-panel__title{
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 26px;
  line-height: 1.1;
  color: var(--color-white);
}
@media (min-width: 640px) { .p-uk-fintech .asset-panel__title{ font-size: 32px; } }
@media (min-width: 768px) { .p-uk-fintech .asset-panel__title{ font-size: 36px; } }
.p-uk-fintech .asset-panel__sub{
  margin-top: 14px;
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.7);
}
.p-uk-fintech .asset-panel__list{ margin-top: 28px; display: grid; gap: 14px; }
.p-uk-fintech .asset-panel__row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.8);
}
.p-uk-fintech .asset-panel__row-icon{ display: inline-flex; flex-shrink: 0; margin-top: 2px; color: var(--color-blue-200); }
.p-uk-fintech .asset-panel__actions{ margin-top: 32px; }
.p-uk-fintech .asset-panel__actions .btn{ display: inline-flex; align-items: center; gap: 8px; }
/* the ebook cover slot — placeholder until the library's real cover art
   lands (Ale 2026-08-07: no distraer) */
.p-uk-fintech .asset-panel__stage{ display: flex; justify-content: center; }
.p-uk-fintech .asset-panel__scene{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: none;
}

/* ---------- 09 · resources grid ---------- */
.p-uk-fintech .res__head{ text-align: center; }
.p-uk-fintech .res__head .section-sub{ margin-inline: auto; }
.p-uk-fintech .res__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-grey-100);
  background: var(--color-white);
  color: var(--color-grey-500);
  font-size: var(--fs-body);
  transition: border-color .2s, color .2s, opacity .2s;
}
.p-uk-fintech .res__arrow--prev{ left: 0; }
.p-uk-fintech .res__arrow--next{ right: 0; }
.p-uk-fintech .res__arrow:hover{ border-color: rgba(0, 84, 255, 0.4); color: var(--color-blue); }
.p-uk-fintech .res__arrow:disabled{ opacity: 0.3; pointer-events: none; }
.p-uk-fintech .res__arrow--prev{ transform: translateY(-50%) scaleX(-1); }
.p-uk-fintech section[data-module="09 resources grid"]{ overflow-x: clip; }
.p-uk-fintech section[data-module="09 resources grid"] .section-inner{ padding-block: 56px; position: relative; }
.p-uk-fintech .res-fan{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  height: clamp(200px, 26vw, 300px);
}
.p-uk-fintech .res-fan__card{
  position: absolute;
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 16 / 11;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-white);
  background:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-blue) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-blue) 65%, transparent), transparent 65%),
    var(--color-black);
  box-shadow: none;
  transition: transform .35s var(--ease-out-expo);
}
.p-uk-fintech .res-fan__card svg{ width: 44px; height: 44px; color: var(--color-white); opacity: 0.95; }
.p-uk-fintech .res-fan__tag{
  position: absolute;
  top: 14px;
  left: 16px;
  border: 1px solid rgba(204, 225, 255, 0.28);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-blue-200);
}
.p-uk-fintech .res-fan__card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-white);
  opacity: 0;
  transition: opacity .5s var(--ease-out-expo);
  pointer-events: none;
}
.p-uk-fintech .res-fan__card[data-off="0"]{ transform: none; z-index: 5; }
.p-uk-fintech .res-fan__card[data-off="1"]{ transform: translateX(66%) scale(0.9); z-index: 4; }
.p-uk-fintech .res-fan__card[data-off="-1"]{ transform: translateX(-66%) scale(0.9); z-index: 4; }
.p-uk-fintech .res-fan__card[data-off="1"]::after, .p-uk-fintech .res-fan__card[data-off="-1"]::after{ opacity: 0.7; }
.p-uk-fintech .res-fan__card[data-off="2"]{ transform: translateX(124%) scale(0.8); z-index: 3; }
.p-uk-fintech .res-fan__card[data-off="-2"]{ transform: translateX(-124%) scale(0.8); z-index: 3; }
.p-uk-fintech .res-fan__card[data-off="2"]::after, .p-uk-fintech .res-fan__card[data-off="-2"]::after{ opacity: 0.88; }
/* hover: the card lifts a touch (composes with each slot's transform) */
.p-uk-fintech .res-fan__card[data-off="0"]:hover{ transform: translateY(-8px); }
.p-uk-fintech .res-fan__card[data-off="1"]:hover{ transform: translateX(66%) scale(0.9) translateY(-9px); }
.p-uk-fintech .res-fan__card[data-off="-1"]:hover{ transform: translateX(-66%) scale(0.9) translateY(-9px); }
.p-uk-fintech .res-fan__card[data-off="2"]:hover{ transform: translateX(124%) scale(0.8) translateY(-10px); }
.p-uk-fintech .res-fan__card[data-off="-2"]:hover{ transform: translateX(-124%) scale(0.8) translateY(-10px); }
.p-uk-fintech .res-details{ position: relative; margin-top: 28px; text-align: center; }
.p-uk-fintech .res-detail{ display: none; max-width: 640px; margin-inline: auto; }
.p-uk-fintech .res-detail.is-active{ display: block; animation: fadeIn .3s var(--ease-out-expo); }
.p-uk-fintech .res-detail .res-card__title{ margin-top: 14px; font-size: 24px; }
.p-uk-fintech .res-detail .res-card__body{ margin-top: 10px; }
.p-uk-fintech .res-detail .link-blue{ margin-top: 16px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.p-uk-fintech .res-card{
  display: flex; flex-direction: column;
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-100);
  border-radius: 24px;
  overflow: clip;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
/* aurora icon panel: deep-blue gradient plate with a white line icon */
.p-uk-fintech .res-card__cover{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-blue) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-blue) 65%, transparent), transparent 65%),
    linear-gradient(
      color-mix(in oklab, var(--color-blue) 14%, transparent),
      color-mix(in oklab, var(--color-blue) 14%, transparent)
    );
  background-color: var(--color-black);
  color: var(--color-white);
}
.p-uk-fintech .res-card__cover svg{
  width: 44px;
  height: 44px;
  opacity: 0.95;
  transition: transform .35s var(--ease-out-expo);
}
@media (hover: hover) { .p-uk-fintech .res-card:hover .res-card__cover svg{ transform: scale(1.12); } }
.p-uk-fintech .res-card__content{ flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 24px; }
.p-uk-fintech .res-card:hover{ transform: translateY(-2px); box-shadow: none; }
.p-uk-fintech .res-card__title{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: var(--fs-2xl);
  line-height: 1.3;
  color: var(--color-black);
}
.p-uk-fintech .res-card__body{ font-size: var(--fs-sm); line-height: var(--leading-body); color: var(--color-grey-on-white); }
.p-uk-fintech .res-card__foot{ margin-top: auto; padding-top: 6px; }

/* ---------- 11 · social proof ---------- */
.p-uk-fintech .proof-dark{ background: var(--color-black); color: var(--color-white); }
.p-uk-fintech .proof-dark .kicker{ color: rgba(255, 255, 255, 0.5); }
.p-uk-fintech .qwall__kicker{ text-align: center; }
.p-uk-fintech .qwall__grid{ display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .p-uk-fintech .qwall__grid{ grid-template-columns: repeat(2, 1fr); max-width: 1080px; margin-inline: auto; } }
.p-uk-fintech .qwall-card{
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-grey-100);
  border-radius: 16px;
  padding: 32px 28px;
}
.p-uk-fintech .qwall-card__logo{ display: flex; align-items: center; height: 32px; }
.p-uk-fintech .qwall-card__logo img{ height: 28px; width: auto; }
.p-uk-fintech .qwall-card__logo--incode svg{ display: block; }
.p-uk-fintech .qwall-card__text{
  margin-top: 20px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-600);
}
.p-uk-fintech .qwall-card__attr{ margin-top: auto; padding-top: 20px; font-size: var(--fs-sm); color: var(--color-grey-400); }
.p-uk-fintech .outcome__src{ margin-top: 28px; font-size: var(--fs-sm); color: var(--color-grey-400); }


/* ============ closing CTA: copy left · the /contact/ 3-step demo card (Ale 2026-08-10;
   demo-* recipe verbatim from pages/contact.css, stepper via behaviors/demo-form.js) ============ */
.p-uk-fintech .ukf-cta { position: relative; background: var(--color-background); }
.p-uk-fintech .ukf-cta__inner { margin-inline: auto; max-width: none; padding: 0; }
.p-uk-fintech .ukf-cta__card {
  position: relative; z-index: 1;
  padding: var(--space-section-sm) var(--space-inline-md);
  text-align: center;
  color: var(--color-white);
  /* aurora recipe per the 2026-08-05 a11y fix: FLAT background-color under
     gradient layers, so contrast checkers resolve the white type */
  background-color: var(--color-black);
  background-image:
    radial-gradient(120% 95% at 12% 0%, color-mix(in oklab, var(--color-blue) 80%, transparent), transparent 62%),
    radial-gradient(110% 100% at 92% 100%, color-mix(in oklab, var(--color-blue) 65%, transparent), transparent 65%),
    linear-gradient(
      color-mix(in oklab, var(--color-blue) 14%, transparent),
      color-mix(in oklab, var(--color-blue) 14%, transparent)
    );
}
@media (min-width: 768px) { .p-uk-fintech .ukf-cta__card { padding: 96px 48px; } }
.p-uk-fintech .ukf-cta__label { font-size: var(--fs-xs); letter-spacing: var(--track-wide); color: rgba(255, 255, 255, 0.55); }
.p-uk-fintech .ukf-cta__title {
  margin: 16px auto 0;
  max-width: 768px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 32px;
  line-height: 1.05;
  color: var(--color-white);
}
@media (min-width: 640px) { .p-uk-fintech .ukf-cta__title { font-size: 40px; } }
@media (min-width: 768px) { .p-uk-fintech .ukf-cta__title { font-size: 48px; } }
.p-uk-fintech .ukf-cta__sub { margin: 14px auto 0; max-width: 64ch; font-size: var(--fs-body); line-height: var(--leading-body); color: rgba(255, 255, 255, 0.7); }
.p-uk-fintech .ukf-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 32px; }




/* ============ closing CTA: copy left · contact form right (Ale 2026-08-10,
   the /contact/ recipe verbatim) ============ */
.p-uk-fintech .ukf-cta__grid { display: grid; gap: 40px; text-align: left; max-width: 1344px; margin-inline: auto; }
.p-uk-fintech .ukf-cta__sub-br { display: none; }
@media (min-width: 640px) { .p-uk-fintech .ukf-cta__sub-br { display: block; } }
@media (min-width: 1024px) { .p-uk-fintech .ukf-cta__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; } }
.p-uk-fintech .ukf-cta__copy .ukf-cta__title { margin-inline: 0; text-align: left; }
.p-uk-fintech .ukf-cta__copy .ukf-cta__sub { margin-inline: 0; text-align: left; }
.p-uk-fintech .ukf-cta__copy .ukf-cta__label { text-align: left; }

.p-uk-fintech .ukf-cta__grid { display: grid; gap: 40px; text-align: left; }
@media (min-width: 1024px) { .p-uk-fintech .ukf-cta__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; } }
.p-uk-fintech .ukf-cta__copy .ukf-cta__title { margin-inline: 0; text-align: left; }
.p-uk-fintech .ukf-cta__copy .ukf-cta__sub { margin-inline: 0; text-align: left; }
.p-uk-fintech .ukf-cta__copy .ukf-cta__label { text-align: left; }

.p-uk-fintech .demo-card {
  position: relative;
  background: var(--color-background);
  color: var(--color-foreground);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: none;
}
@media (min-width: 768px) { .p-uk-fintech .demo-card { padding: 36px 40px; } }

/* progress */
.p-uk-fintech .demo-progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.p-uk-fintech .demo-progress__step {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-300);
}
.p-uk-fintech .demo-progress__step [data-demo-stepnum] { color: var(--color-blue); }
.p-uk-fintech .demo-progress__label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-grey-500);
}
.p-uk-fintech .demo-progress__track {
  margin-top: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-grey-100);
  overflow: hidden;
}
.p-uk-fintech .demo-progress__fill {
  display: block;
  height: 100%;
  width: 33.34%;
  border-radius: 999px;
  background: var(--color-blue);
  transition: width 0.45s var(--ease-out-expo);
}

/* panels — one focused step at a time */
.p-uk-fintech .demo-panel {
  display: none;
  margin-top: 26px;
}
.p-uk-fintech .demo-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: demo-panel-in 0.4s var(--ease-out-expo);
}
@keyframes demo-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* fields */
.p-uk-fintech .demo-row { display: grid; gap: 16px; }
@media (min-width: 640px) {
  .p-uk-fintech .demo-row { grid-template-columns: 1fr 1fr; }
}
.p-uk-fintech .demo-field { display: block; }
.p-uk-fintech .demo-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-grey-500);
  margin-bottom: 6px;
}
.p-uk-fintech .demo-req { color: var(--color-blue); }
.p-uk-fintech .demo-input,
.p-uk-fintech .demo-textarea {
  width: 100%;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  font-size: var(--fs-body);
  color: var(--color-grey-600);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.p-uk-fintech .demo-input { height: 48px; padding-inline: 14px; }
.p-uk-fintech .demo-textarea { padding: 12px 14px; resize: vertical; }
.p-uk-fintech .demo-input:focus,
.p-uk-fintech .demo-textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-100);
}
/* inline validation (demo-form.js): the field goes red with the message
   underneath — the browser's native bubble is suppressed via novalidate */
.p-uk-fintech .demo-input.is-invalid,
.p-uk-fintech .demo-textarea.is-invalid {
  border-color: var(--color-red-600);
}
.p-uk-fintech .demo-input.is-invalid:focus,
.p-uk-fintech .demo-textarea.is-invalid:focus {
  border-color: var(--color-red-600);
  box-shadow: 0 0 0 3px var(--color-red-200);
}
.p-uk-fintech .demo-error {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--color-red-600);
}
/* the free-text industry line the Other pill reveals */
.p-uk-fintech .demo-other {
  display: block;
  margin-top: 14px;
}
.p-uk-fintech .demo-other[hidden] { display: none; }

/* pills (radio / checkbox chips) */
.p-uk-fintech .demo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.p-uk-fintech .demo-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-white);
  font-size: var(--fs-sm);
  color: var(--color-grey-500);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.p-uk-fintech .demo-pill:hover { border-color: var(--color-grey-300); }
.p-uk-fintech .demo-pill:has(input:checked) {
  border-color: var(--color-blue);
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.p-uk-fintech .demo-pill:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-blue-100);
}

/* nav */
.p-uk-fintech .demo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.p-uk-fintech .demo-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--color-grey-400);
  cursor: pointer;
  transition: color 0.2s ease;
}
.p-uk-fintech .demo-back:hover { color: var(--color-grey-600); }
.p-uk-fintech .demo-back[hidden] { display: none; }
.p-uk-fintech .demo-nav .demo-advance { margin-left: auto; }
.p-uk-fintech .demo-nav .demo-advance[hidden] { display: none; }

/* submit pending swap (site.js sets .is-pending on the form) */
/* the label span is a flex row like the .btn itself, so the arrow rides
   beside the text instead of wrapping under it */
.p-uk-fintech .demo-submit__idle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.p-uk-fintech .demo-submit__pending { display: none; }
.p-uk-fintech .demo-form.is-pending .demo-submit__idle { display: none; }
.p-uk-fintech .demo-form.is-pending .demo-submit__pending { display: inline; }

.p-uk-fintech .demo-fine {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--color-grey-400);
}

/* success state */
.p-uk-fintech .demo-success {
  text-align: center;
  padding: 28px 8px;
}
.p-uk-fintech .demo-success__icon {
  display: inline-flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-blue-100);
  color: var(--color-blue);
}
.p-uk-fintech .demo-success__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 24px;
  color: var(--color-grey-600);
}
.p-uk-fintech .demo-success__body {
  margin: 8px auto 0;
  max-width: 340px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-grey-400);
}