/* ==========================================================================
   finjuris-inpg.css
   Inner-page stylesheet — loaded AFTER finjuris-home.css and footer.css.

   Contains ONLY what inner pages need that the shared home stylesheet
   doesn't already provide:
     1. A split hero (left content / right lead form) as an alternative to
        .fj-home-hero, which is built around a centered layout + services
        marquee that inner pages don't use.
     2. A couple of small content primitives (definition cards, numbered
        process steps) for structuring long-form regulatory content.

   Everything else on inner pages — badges, buttons, eyebrows, service
   cards, stats bar, tables, FAQ accordion, CTA banner, footer — is reused
   directly from finjuris-home.css / footer.css with no overrides, so the
   look and feel stays identical to the home page.

   Every new class in this file is prefixed "inpg-" so it can never
   collide with finjuris-home.css or any other page's stylesheet.
   ========================================================================== */

/* h2 color/weight override for this page. Several section-specific rules
   above set h2 to red and 800 weight (.fj-home-svc-head h2, the bento
   heading, etc.) — rather than hunt down and edit each one individually,
   !important here reliably wins over all of them regardless of their own
   specificity, since none of them use !important themselves. */
h2 {
  color: #071A31 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   Inner-page hero — left content, right lead-capture form card.
   Same tokens, texture motif and badge/heading treatment as .fj-home-hero,
   just laid out in two columns instead of centered, and with no marquee.
   ========================================================================== */
.inpg-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 2.75rem) 0 4rem;
  color: var(--muted);
  /* Background photo + light gradient wash (for text contrast) is set inline
     on the <section> tag in the HTML, same pattern as .fj-home-hero — swap
     the url() there when the asset changes, no CSS edit needed. The values
     below are just the fallback if the inline style is ever removed. */
  background-color: var(--surface-alt);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

/* Faint grid texture, echoing .fj-home-hero::before, masked toward the
   right/lower edge so it sits behind the form card rather than the copy. */
.inpg-hero .container {
  position: relative;
  z-index: 1;
}

.inpg-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: start;
}

.inpg-hero-left h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.14;
  font-weight: 800;
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}

.inpg-hero-sub {
  font-family: "Inter", sans-serif !important;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: #414c5a;
  max-width: 56ch;
  margin: 0 0 2rem;
  font-weight: 400;
}

.inpg-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Reassurance checklist under the CTAs — same visual language as
   .fj-home-consult-checklist (icon + bold label) but for a light surface. */
.inpg-hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.inpg-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.inpg-hero-points i {
  color: var(--red);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Right-side lead form card */
.inpg-hero-form-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 24px 56px rgba(11, 15, 20, 0.14);
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  /* So an in-page anchor jump (e.g. "Get Started" links elsewhere on the
     page) doesn't land the card's top edge underneath the sticky nav —
     leaves room equal to the nav height plus the same breathing room as
     the sticky "top" offset above. */
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.inpg-hero-form-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.inpg-hero-form-card>p.inpg-hero-form-lede {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
  .inpg-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .inpg-hero-left h1 {
    max-width: 100%;
  }

  .inpg-hero-form-card {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .inpg-hero {
    padding: calc(var(--nav-h) + 1rem) 0 2.5rem;
  }

  .inpg-hero-form-card {
    padding: 1.75rem;
  }
}

/* ==========================================================================
   Definition / info cards — for structuring regulatory definitions
   (VASP, DAE, DAC, virtual asset criteria, etc.) that don't fit the
   icon+link shape of .fj-home-svc-card.
   ========================================================================== */
.inpg-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.inpg-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
}

.inpg-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.inpg-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
  line-height: 1.6;
}

.inpg-card p+p {
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  .inpg-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Numbered process steps — application process walkthrough.
   ========================================================================== */
.inpg-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.inpg-process-step {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
}

.inpg-process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

.inpg-process-step h3 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.inpg-process-step p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .inpg-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .inpg-process-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Section heads reused across inner-page content sections — same shape as
   .fj-home-svc-head (eyebrow + h2 + short lede) but left-aligned and not
   tied to the services block specifically.
   ========================================================================== */
.inpg-section-head {
  max-width: 720px;
  margin-bottom: 2.5rem;
}

.inpg-section-head .eyebrow {
  margin-bottom: 0.9rem;
}

.inpg-section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.9rem;
}

.inpg-section-head p {
  font-size: 1rem;
  margin-bottom: 0;
}

.inpg-section-alt {
  background: var(--surface-alt);
}

/* Intro section — widens the description under the centered heading beyond
   .fj-home-svc-head's default 54ch, scoped here only so the home page's
   services heading (which reuses the same base class) is untouched. */
.inpg-intro .fj-home-svc-head {
  max-width: 860px;
}

.inpg-intro {
  background: url(../assets/images/uae-crypto-license/colleagues-working-project-discussing-details.png)bottom center no-repeat;
  padding-bottom: 40% !important;
  background-size: 80%;
}

.inpg-intro .fj-home-svc-head p {
  max-width: 76ch;
}

/* Bento section heading — widen just the h2 so "Licensing, Handled With
   Complete Peace of Mind" sits on fewer lines, without touching the
   shared .fj-home-svc-head used elsewhere (e.g. the home page's services
   heading, which keeps its narrower default). */
.inpg-bento-section .fj-home-svc-head {
  max-width: 780px;
}

.inpg-bento-section .fj-home-svc-head h2 {
  max-width: none;
}

/* Simple checked list used for plain bullet content (e.g. "questions to
   ask", "key requirements") that doesn't need a full card treatment. */
.inpg-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 2rem;
}

.inpg-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--muted);
}

.inpg-check-list i {
  color: var(--red);
  margin-top: 4px;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .inpg-check-list {
    grid-template-columns: 1fr;
  }
}

/* Note / callout strip under tables (capital calc note, disclaimers, etc.) */
.inpg-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.inpg-note i {
  color: var(--red);
  margin-top: 2px;
}

/* ==========================================================================
   "Peace of mind" bento grid — a photo card, two stat cards and two
   feature cards arranged in an asymmetric grid. New pattern (nothing in
   finjuris-home.css does this layout), but every color, radius and shadow
   below reuses existing tokens (--red/--ink/--border, the .fj-home-svc-*
   spacing scale) so it reads as the same design system, not a new one.
   ========================================================================== */
.inpg-bento-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.3fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "photo stat1 feature feature"
    "photo wide   wide   stat2";
  gap: 1.25rem;
}

.inpg-bento-card {
  border-radius: 18px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.inpg-bento-card:hover {
  transform: translateY(-4px);
}

/* Photo card — real image, dark-to-transparent gradient overlay (set inline
   on the element since it's a background-image, same pattern as the hero)
   so the stat text at the bottom stays legible. */
.inpg-bento-photo {
  grid-area: photo;
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
  min-height: 100%;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.08);
}

.inpg-bento-photo:hover {
  box-shadow: 0 16px 36px rgba(11, 15, 20, 0.22);
}

.inpg-bento-photo-text {
  color: #ffffff;
}

.inpg-bento-photo-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
}

.inpg-bento-photo-text p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 26ch;
}

/* Stat cards — same red gradient already used for .fj-home-consult-panel,
   reused here for visual consistency rather than inventing a new palette. */
.inpg-bento-stat {
  grid-area: stat1;
  background: radial-gradient(1000px 600px at 40% 20%, #a10208 0%, #8b0107 70%);
  color: #ffffff;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(139, 1, 7, 0.18);
}

.inpg-bento-stat:hover {
  box-shadow: 0 16px 36px rgba(139, 1, 7, 0.34);
}

.inpg-bento-stat--tall {
  grid-area: stat2;
}

.inpg-bento-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.inpg-bento-stat p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 20ch;
}

/* Feature card — white surface, same icon-circle language as
   .fj-home-service-icon. Now spans two columns (feature feature), so the
   icon sits left and the text block sits right instead of stacking, the
   same horizontal arrangement the reference used for its wide box. */
.inpg-bento-feature {
  grid-area: feature;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
}

.inpg-bento-feature:hover {
  box-shadow: 0 16px 36px rgba(11, 15, 20, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
}

.inpg-bento-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.inpg-bento-feature-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.inpg-bento-feature-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  max-width: 42ch;
}

/* Wide card — soft brand-tinted surface (red-to-blue wash at low opacity),
   the bento's "hero" tile, spans two columns on row 2. */
.inpg-bento-wide {
  grid-area: wide;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.07) 0%, rgba(29, 78, 216, 0.07) 100%);
  border: 1px solid var(--border);
  justify-content: center;
}

.inpg-bento-wide:hover {
  box-shadow: 0 16px 36px rgba(11, 15, 20, 0.1);
  border-color: rgba(29, 78, 216, 0.3);
}

.inpg-bento-wide h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.inpg-bento-wide>p {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  max-width: 52ch;
}

.inpg-bento-wide-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.inpg-bento-wide-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.inpg-bento-wide-item span {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(11, 15, 20, 0.08);
}

.inpg-bento-wide-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.inpg-bento-wide-item p {
  font-size: 0.82rem;
  margin: 0;
  max-width: 22ch;
}

@media (max-width: 991.98px) {
  .inpg-bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo photo"
      "stat1 feature"
      "wide  wide"
      "stat2 stat2";
  }

  .inpg-bento-photo {
    min-height: 260px;
  }
}

@media (max-width: 575.98px) {
  .inpg-bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "stat1"
      "feature"
      "wide"
      "stat2";
  }
}

/* ==========================================================================
   License list — compact horizontal cards for the right column of the
   "Licenses We Help You Obtain" split section (left: heading/copy, right:
   stacked cards). Icon-circle palette matches .fj-home-svc-card's four
   color variants so it reads as the same rotation used elsewhere.
   ========================================================================== */
.inpg-license-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  .inpg-license-list {
    max-width: 100%;
    margin: 0;
  }
}

.inpg-license-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.inpg-license-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(11, 15, 20, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.inpg-license-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  color: #ffffff;
}

.inpg-license-icon--red {
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
}

.inpg-license-icon--blue {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
}

.inpg-license-icon--ink {
  background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
}

.inpg-license-icon--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
}

.inpg-license-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.inpg-license-body p {
  font-size: 0.87rem;
  line-height: 1.55;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .inpg-license-card {
    flex-direction: column;
  }
}

/* Left-column intro next to the license cards — eyebrow/h2/lede/button had
   no defined rhythm between them on their own (each relies on context-
   specific margins elsewhere on the site), so it's set explicitly here. */
.inpg-license-intro .eyebrow {
  margin-bottom: 1rem;
}

.inpg-license-intro h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 1.1rem;
}

.inpg-license-intro .lede {
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   Dark treatment for "Licenses We Help You Obtain" — same near-black,
   red-tinted gradient + film-grain texture already used for the home
   page's .fj-home-global section, reused here for consistency rather
   than inventing a new dark palette. Scoped to .inpg-license-dark so
   nothing else on the page is affected.
   ========================================================================== */
.inpg-license-dark {
  position: relative;
  overflow: hidden;
  background: radial-gradient(650px 650px at 8% 45%, rgba(200, 30, 30, 0.4) 0%, transparent 62%),
    radial-gradient(650px 650px at 92% 55%, rgba(200, 30, 30, 0.34) 0%, transparent 62%),
    linear-gradient(180deg, #241010 0%, #3a1414 50%, #241010 100%);
}

.inpg-license-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

.inpg-license-dark .container {
  position: relative;
  z-index: 1;
}

.inpg-license-dark .inpg-license-intro h2 {
  /* !important needed to beat the page-wide h2 navy override above —
     white text is a hard requirement here since the background is dark,
     not a style preference. */
  color: #ffffff !important;
}

/* Same issue, same fix — the final CTA banner reuses the dark
   .cta-banner-inner component from the home page, whose h2 is white by
   design (dark background). Without this it inherits the page-wide navy
   override and becomes nearly illegible. */
.cta-banner-inner h2 {
  color: #ffffff !important;
}

.inpg-license-dark .inpg-license-intro .lede {
  color: #c9d0d9;
}

/* License cards go from white to a translucent dark "glass" surface;
   icon-circle gradients stay the same so the color coding is unchanged. */
.inpg-license-dark .inpg-license-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.inpg-license-dark .inpg-license-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.inpg-license-dark .inpg-license-body h3 {
  color: #ffffff;
}

.inpg-license-dark .inpg-license-body p {
  color: #b7bec7;
}

/* Section vertical rhythm — .lp-section's 3.5rem padding is a lighter
   funnel-page default; the site's actual content sections (.fj-home-svc,
   etc.) use 5.5rem. Applied alongside lp-section on this page's sections
   so the gap between them matches the rest of the site instead of feeling
   compressed. */
.inpg-section-gap {
  padding: 5.5rem 0;
}

@media (max-width: 767.98px) {
  .inpg-section-gap {
    padding: 3.5rem 0;
  }
}

/* Narrows the "Licenses We Help You Obtain" left/right columns together
   (same 5/7 split, smaller overall row) instead of widening to the full
   container like the rest of the page's sections. Applied to a wrapper
   DIV around the row rather than the .row element itself — .row already
   carries Bootstrap's own negative gutter margins, and stacking max-width
   + margin:auto directly on top of those fought the grid math and left it
   off-center. A plain wrapper sidesteps that entirely. */
.inpg-license-row-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* Widens the gap between the left text column and right card column.
   Direct padding on each column instead of relying on the row's
   --bs-gutter-x variable, so the effect is unambiguous regardless of
   how Bootstrap's own gutter math resolves. Only at the lg breakpoint
   and up, where the two columns actually sit side by side. */
@media (min-width: 992px) {
  .inpg-license-col-left {
    padding-right: 6rem;
  }

  .inpg-license-col-right {
    padding-left: 6rem;
  }
}

/* ==========================================================================
   Jurisdiction flip cards — front shows a logo circle + short summary,
   back reveals a blurred background photo with the full description.
   Flips on hover (desktop) or on tap via the .is-flipped class toggled
   by a small script — see the script block near the page's other inline
   scripts. New interactive pattern, nothing like it exists elsewhere in
   finjuris-home.css, so everything here is new/prefixed.
   ========================================================================== */
.inpg-flip-card {
  -webkit-perspective: 1600px;
  perspective: 1600px;
  height: 540px;
  cursor: pointer;
}

.inpg-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Firefox has a long-standing bug (Mozilla bugzilla #1201471) where
     backface-visibility: hidden on the front/back faces alone isn't
     reliably respected when they're absolutely-positioned children of a
     preserve-3d element — the established workaround is to also set it
     on this container. Harmless in Chrome/Safari since it's already
     correct there either way. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.inpg-flip-card:hover .inpg-flip-inner,
.inpg-flip-card.is-flipped .inpg-flip-inner {
  transform: rotateY(180deg);
}

/* backface-visibility + overflow:hidden + border-radius on the SAME
   element is a known Chromium bug that silently breaks the flip (the
   hidden face keeps rendering, mirrored, behind the visible one — the
   "ghosting" seen earlier). Fix: this element only handles the 3D
   flip/positioning; the rounded-corner clipping moves to a plain inner
   wrapper (.inpg-flip-face-clip) instead. */
.inpg-flip-front,
.inpg-flip-back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Forces each face onto its own hardware-accelerated compositing
     layer — the other half of the standard fix for Gecko's
     backface-visibility bug (translateZ(0) triggers GPU compositing,
     which is what actually makes backface-visibility get honored
     correctly in Firefox for this kind of nested-absolute-positioning
     setup). */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.inpg-flip-face-clip {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Front face — full-bleed colored card per jurisdiction, decorative blob
   shapes, tag + flip-hint top row, and a left-aligned, bottom-weighted
   text block (name + small mark, subtitle, divider, description) — same
   composition as the reference: small label top-left, big name low on
   the card, supporting text beneath a thin rule. */
.inpg-flip-front .inpg-flip-face-clip {
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  padding: 2.25rem 2.25rem 2.5rem;
  color: #ffffff;
}

.inpg-flip-front--red {
  background: radial-gradient(140% 100% at 15% 0%, #ff5f5f 0%, #c81e3a 55%, #8b0107 100%);
}

.inpg-flip-front--blue {
  background: radial-gradient(140% 100% at 15% 0%, #3b82f6 0%, var(--blue-dark) 55%, #14265c 100%);
}

.inpg-flip-front--ink {
  background: radial-gradient(140% 100% at 15% 0%, #4a5563 0%, var(--ink) 60%, #05070a 100%);
}

/* Layered translucent circles, purely decorative, behind the text */
.inpg-flip-front-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 60% 55%, rgba(255, 255, 255, 0.14) 0%, transparent 46%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
}

.inpg-flip-front-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.inpg-flip-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

.inpg-flip-hint-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.inpg-flip-card:hover .inpg-flip-hint-btn {
  background: rgba(255, 255, 255, 0.32);
  transform: rotate(180deg);
}

.inpg-flip-front-bottom {
  position: relative;
  z-index: 1;
}

.inpg-flip-front-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.inpg-flip-front-name-row h3 {
  font-size: 2.3rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}

.inpg-flip-logo-mark {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #ffffff;
  overflow: hidden;
}

/* If a logo <img> is placed inside .inpg-flip-logo-mark instead of an
   <i> icon, size it to sit cleanly within the circle — swap the icon for
   e.g. <img src="..." alt="ADGM logo"> and this takes over automatically. */
.inpg-flip-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inpg-flip-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.inpg-flip-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0.9rem 0;
}

.inpg-flip-front p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: none;
  margin: 0;
}

/* Back face — image slot on top (client drops their own photo in later),
   text panel below. Wrapped in .inpg-flip-face-clip (see shared rule
   above) for the backface-visibility fix. */
.inpg-flip-back {
  /* Combined into one transform (not a separate declaration) since the
     translateZ(0) from the shared front/back rule above would otherwise
     get fully overwritten rather than merged — CSS transform values
     don't combine across rules, the last one wins outright. */
  transform: rotateY(180deg) translateZ(0);
}

.inpg-flip-back-media {
  position: relative;
  flex: 0 0 42%;
  overflow: hidden;
}

.inpg-flip-back-media--red {
  background: radial-gradient(140% 100% at 15% 0%, #ff5f5f 0%, #c81e3a 55%, #8b0107 100%);
}

.inpg-flip-back-media--blue {
  background: radial-gradient(140% 100% at 15% 0%, #3b82f6 0%, var(--blue-dark) 55%, #14265c 100%);
}

.inpg-flip-back-media--ink {
  background: radial-gradient(140% 100% at 15% 0%, #4a5563 0%, var(--ink) 60%, #05070a 100%);
}

/* If a real <img> is placed inside .inpg-flip-back-media, have it fill
   the slot and this placeholder block simply won't be there any more. */
.inpg-flip-back-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inpg-flip-back-media-placeholder {
  position: absolute;
  inset: 18px;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
}

.inpg-flip-back-media-placeholder i {
  font-size: 1.4rem;
}

.inpg-flip-back-media-placeholder span {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.inpg-flip-back-text {
  flex: 1 1 auto;
  background: linear-gradient(180deg, #1a1f27 0%, var(--ink) 100%);
  padding: 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
}

.inpg-flip-back-text h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.inpg-flip-back-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.inpg-flip-back-text .inpg-flip-divider {
  margin: 0.6rem 0;
}

.inpg-flip-back-text p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

@media (max-width: 767.98px) {
  .inpg-flip-card {
    height: 480px;
  }
}

/* Supporting CTA line under the jurisdiction cards */
.inpg-jurisdiction-cta {
  text-align: center;
  margin-top: 2.75rem;
}

.inpg-jurisdiction-cta p {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--ink);
  margin-bottom: 2.25rem;
}

/* ==========================================================================
   Process stepper — 5 numbered steps on a horizontal track, connected by
   a line that fills red as the active step advances. Auto-advances on a
   timer via the script near the page's other inline scripts (search
   "inpgStepper"). New pattern, nothing like it in finjuris-home.css.
   ========================================================================== */
.inpg-stepper {
  width: 100%;
}

/* Card frame around the whole stepper, matching the reference's white
   rounded card. */
.inpg-stepper-card {
  max-width: 1220px;
  margin: 6.5rem auto 0;
  background: #ffffff;
  padding: 9rem 2.5rem 2.5rem;
}

.inpg-stepper-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 76px;
  padding: 0 14px;
}

/* Separate clipping layer for the capsule background + fill, so the
   overflow:hidden needed to keep the fill's rounded pill shape doesn't
   also clip the step bubbles (which sit as siblings, not descendants,
   of this layer, and need to extend upward past the track). */
.inpg-stepper-track-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}

.inpg-stepper-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a1f27 0%, var(--red) 100%);
  transition: width 0.6s ease;
}

.inpg-stepper-step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inpg-stepper-circle {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(11, 15, 20, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--muted);
  transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease, color 0.4s ease,
    box-shadow 0.4s ease, margin 0.4s ease;
}

.inpg-stepper-circle i {
  display: none;
  font-size: 1.1rem;
}

/* Completed step: solid white circle sitting on the dark fill, red
   checkmark instead of number */
.inpg-stepper-step.is-done .inpg-stepper-circle {
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(11, 15, 20, 0.2);
}

/* Per-step accent colors, cycling through the site's brand palette
   (red/blue/ink/amber) via each step's data-color attribute. */
.inpg-stepper-step[data-color="blue"].is-done .inpg-stepper-circle {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
}

.inpg-stepper-step[data-color="ink"].is-done .inpg-stepper-circle {
  background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
}

.inpg-stepper-step[data-color="amber"].is-done .inpg-stepper-circle {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
}

.inpg-stepper-step.is-done .inpg-stepper-num {
  display: none;
}

.inpg-stepper-step.is-done .inpg-stepper-circle i {
  display: block;
}

/* Active step: pops up larger, elevated above the capsule edge, pure
   white with a red ring — the "current stage" marker from the reference. */
.inpg-stepper-step.is-active .inpg-stepper-circle {
  transform: scale(1.45);
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  border: 3px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(11, 15, 20, 0.3);
}

.inpg-stepper-step[data-color="blue"].is-active .inpg-stepper-circle {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
}

.inpg-stepper-step[data-color="ink"].is-active .inpg-stepper-circle {
  background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
}

.inpg-stepper-step[data-color="amber"].is-active .inpg-stepper-circle {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
}

.inpg-stepper-labels {
  display: flex;
  margin-top: 1rem;
}

.inpg-stepper-label {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.inpg-stepper-label.is-active,
.inpg-stepper-label.is-done {
  opacity: 1;
}

.inpg-stepper-label-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* Speech bubble that pops up above the active step, showing what that
   stage covers — visible only on the current step, fading in/out and
   sliding down slightly as it appears (see JS toggling .is-active on
   .inpg-stepper-step). */
.inpg-stepper-bubble {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 0;
  transform: translateX(-50%);
  width: 280px;
  background: #fff6f6;
  border: 1px solid rgba(220, 38, 38, 0.18);
  box-shadow: 0 14px 32px rgba(11, 15, 20, 0.16);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-align: left;
  opacity: 1;
  z-index: 5;
  /* Slides smoothly to the newly active circle's measured position (set
     via inline style by the stepper script) instead of jumping; content
     swap is instant since the movement itself already reads as progress. */
  transition: left 0.5s ease;
}

.inpg-stepper-bubble-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 8px 16px rgba(11, 15, 20, 0.16);
  margin-bottom: 0.6rem;
}

.inpg-stepper-bubble strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.inpg-stepper-bubble p {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.inpg-stepper-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff6f6;
  filter: drop-shadow(0 3px 2px rgba(11, 15, 20, 0.06));
}

/* Bubble color variants — matches whichever step's color is active
   (class set by the stepper script from that step's data-color). Red is
   the default above; these three cover blue/ink/amber. */
.inpg-stepper-bubble.is-color-blue {
  background: #f2f6ff;
  border-color: rgba(59, 130, 246, 0.22);
}

.inpg-stepper-bubble.is-color-blue::after {
  border-top-color: #f2f6ff;
}

.inpg-stepper-bubble.is-color-blue .inpg-stepper-bubble-icon {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
}

.inpg-stepper-bubble.is-color-ink {
  background: #f4f5f6;
  border-color: rgba(11, 15, 20, 0.16);
}

.inpg-stepper-bubble.is-color-ink::after {
  border-top-color: #f4f5f6;
}

.inpg-stepper-bubble.is-color-ink .inpg-stepper-bubble-icon {
  background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
}

.inpg-stepper-bubble.is-color-amber {
  background: #fffaf0;
  border-color: rgba(180, 83, 9, 0.22);
}

.inpg-stepper-bubble.is-color-amber::after {
  border-top-color: #fffaf0;
}

.inpg-stepper-bubble.is-color-amber .inpg-stepper-bubble-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
}

/* Keep the first/last bubbles from overflowing past the card's edge —
   anchor to the circle's edge instead of centering, and shift the
   pointer triangle to match. */
@media (max-width: 767.98px) {
  .inpg-stepper-bubble {
    width: 190px;
    padding: 0.75rem 0.85rem;
    bottom: calc(100% + 10px);
  }

  .inpg-stepper-bubble-icon {
    width: 26px;
    height: 26px;
    font-size: 0.76rem;
    margin-bottom: 0.4rem;
  }

  .inpg-stepper-bubble strong {
    font-size: 0.8rem;
  }

  .inpg-stepper-bubble p {
    font-size: 0.7rem;
  }
}

@media (max-width: 767.98px) {

  /* Hide the entire horizontal stepper card on mobile — the vertical
     timeline below takes over completely rather than trying to force
     7 steps into a horizontal strip via scrolling or squeezing. */
  .inpg-stepper-card {
    display: none;
  }
}

/* Vertical timeline — mobile only (hidden by default here, shown in the
   mobile media query below). Circle + connecting line on the left,
   title + description always visible on the right, so there's no
   floating bubble or horizontal scroll to fight on a small screen. */
.inpg-stepper-vertical {
  display: none;
}

@media (max-width: 767.98px) {
  .inpg-stepper-vertical {
    display: block;
    max-width: 480px;
    margin: 2rem auto 0;
  }

  .inpg-stepper-v-step {
    display: flex;
    gap: 1rem;
  }

  .inpg-stepper-v-marker {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inpg-stepper-v-circle {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  }

  .inpg-stepper-v-circle i {
    display: none;
    font-size: 0.95rem;
  }

  .inpg-stepper-v-connector {
    position: relative;
    width: 2px;
    flex: 1;
    min-height: 28px;
    background: var(--border);
    margin: 2px 0;
    overflow: hidden;
    border-radius: 1px;
  }

  /* The actual fill — grows from 0 to 100% height rather than the whole
     connector instantly swapping color. Timed to 2.2s (matching the
     stepper's auto-advance interval) while a step is active, so the line
     visibly fills over the same span of time the step is "in progress";
     already-completed connectors (is-done without is-active, e.g. on
     first render if a later step were ever pre-selected) fill quickly
     instead since there's no "in progress" moment to animate. */
  .inpg-stepper-v-connector::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: var(--red);
    transition: height 0.3s ease;
  }

  .inpg-stepper-v-step.is-active .inpg-stepper-v-connector::after {
    height: 100%;
    transition: height 2.2s linear;
  }

  .inpg-stepper-v-step.is-done .inpg-stepper-v-connector::after {
    height: 100%;
  }

  .inpg-stepper-v-step[data-color="blue"] .inpg-stepper-v-connector::after {
    background: var(--blue);
  }

  .inpg-stepper-v-step[data-color="ink"] .inpg-stepper-v-connector::after {
    background: var(--ink);
  }

  .inpg-stepper-v-step[data-color="amber"] .inpg-stepper-v-connector::after {
    background: #b45309;
  }

  .inpg-stepper-v-body {
    padding-bottom: 1.75rem;
  }

  .inpg-stepper-v-body h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    margin: 0 0 0.3rem;
  }

  .inpg-stepper-v-body p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
  }

  /* Done: filled color, checkmark, connector below turns solid too */
  .inpg-stepper-v-step.is-done .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
    border-color: transparent;
    color: #ffffff;
  }

  .inpg-stepper-v-step.is-done .inpg-stepper-v-num {
    display: none;
  }

  .inpg-stepper-v-step.is-done .inpg-stepper-v-circle i {
    display: block;
  }

  .inpg-stepper-v-step[data-color="blue"].is-done .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
  }

  .inpg-stepper-v-step[data-color="ink"].is-done .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
  }

  .inpg-stepper-v-step[data-color="amber"].is-done .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  }

  /* Active: same filled color, scaled up slightly, white ring */
  .inpg-stepper-v-step.is-active .inpg-stepper-v-circle {
    transform: scale(1.25);
    background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
    border: 2px solid #ffffff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(11, 15, 20, 0.25);
  }

  .inpg-stepper-v-step[data-color="blue"].is-active .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
  }

  .inpg-stepper-v-step[data-color="ink"].is-active .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
  }

  .inpg-stepper-v-step[data-color="amber"].is-active .inpg-stepper-v-circle {
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  }

  .inpg-stepper-v-step.is-active .inpg-stepper-v-body h4 {
    color: var(--red);
  }
}

/* Widen the description under this section's h2 beyond the shared
   .fj-home-svc-head's default 54ch, scoped to this section only. */
.inpg-jurisdictions .fj-home-svc-head {
  max-width: 820px;
}

.inpg-jurisdictions .fj-home-svc-head p {
  max-width: 74ch;
}

/* Back-to-top tooltip centering — the shared version centers correctly
   in principle (left:50% + transform:translateX(-50%) on both the
   bubble and its pointer triangle, same reference point), but reported
   as visibly off-center in practice — re-declared explicitly here with
   right/margin reset in case something in the cascade was interfering,
   and to have one clear place to nudge further if it's still off. */
.back-to-top-btn::after,
.back-to-top-btn::before {
  left: 50%;
  right: auto;
  margin: 0;
  text-align: center;
  transform-origin: center;
  /* Forced pure white — something in the cascade was tinting these
     slightly gray. */
  background-color: #ffffff !important;
}

.back-to-top-btn::after {
  transform: translateX(-50%) translateY(4px);
}

.back-to-top-btn:hover::after {
  transform: translateX(-50%) translateY(0);
}

.back-to-top-btn::before {
  transform: translateX(-50%) translateY(12px) rotate(45deg);
}

.back-to-top-btn:hover::before {
  transform: translateX(-50%) translateY(0) rotate(45deg);
}