/* ==========================================================================
   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: #222222;
  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);
}
/* ==========================================================================
   ==========================================================================
   VARA LICENSE CONSULTANT PAGE (vara-licensing-compliance.php) — additions
   --------------------------------------------------------------------------
   Everything below is ADDITIVE: new inpg- classes, or overrides scoped to a
   new inpg- section class. No rule above this line was changed, so
   uae-crypto-license.php (and any other inner page) renders exactly as
   before. Components reused as-is from finjuris-home.css on this page:
   .fj-home-stats-bar, .fj-home-regulators, .fj-home-svc-head,
   .table-dossier, .case-study, .related-service-card, .faq-accordion,
   .cta-banner-inner, .btn-outline-custom (green WhatsApp button).
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb inside the inner-page hero (sits above the badge). Plain
   Bootstrap 5 .breadcrumb markup, restyled small and muted here.
   -------------------------------------------------------------------------- */
.inpg-breadcrumb {
  margin-bottom: 1.25rem;
}

.inpg-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.inpg-breadcrumb .breadcrumb-item,
.inpg-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: var(--muted);
}

.inpg-breadcrumb .breadcrumb-item a {
  color: var(--ink);
  font-weight: 600;
}

.inpg-breadcrumb .breadcrumb-item a:hover {
  color: var(--red);
}

.inpg-breadcrumb .breadcrumb-item.active {
  color: var(--red);
  font-weight: 600;
}

/* Author / reviewer / last-updated line under the hero intro (E-E-A-T). */
.inpg-byline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--muted);
  margin: -0.75rem 0 1.75rem;
}

.inpg-byline i {
  color: var(--red);
  font-style: normal;
  margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Split intro: left section head + right 2x2 .inpg-card grid. Only adds an
   icon badge to the existing .inpg-card — the card itself is unchanged.
   -------------------------------------------------------------------------- */
.inpg-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #ffffff;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  box-shadow: 0 8px 16px rgba(200, 30, 58, 0.22);
}

.inpg-card-icon--blue {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
  box-shadow: 0 8px 16px rgba(29, 78, 216, 0.22);
}

.inpg-card-icon--ink {
  background: linear-gradient(135deg, #3a4552 0%, var(--ink) 100%);
  box-shadow: 0 8px 16px rgba(11, 15, 20, 0.22);
}

.inpg-card-icon--amber {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  box-shadow: 0 8px 16px rgba(180, 83, 9, 0.22);
}

.inpg-consultant-split .inpg-card {
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.inpg-consultant-split .inpg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(11, 15, 20, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.inpg-consultant-split .inpg-section-head {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}

.inpg-consultant-split .inpg-section-head p+p {
  margin-top: 1rem;
}

.inpg-inline-link {
  color: var(--red);
  font-weight: 700;
  border-bottom: 1px solid rgba(220, 38, 38, 0.35);
}

.inpg-inline-link:hover {
  color: var(--red-dark);
  border-bottom-color: var(--red-dark);
}

@media (max-width: 991.98px) {
  .inpg-consultant-split .inpg-section-head {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Outlined-text values band — scrolling ribbon of big outlined words with
   one solid red word per set (idea from the Finspire "values" strip).
   Pure CSS loop: the track holds TWO identical sets and moves -50%.
   -------------------------------------------------------------------------- */
.inpg-values-band {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inpg-values-track {
  display: flex;
  width: max-content;
  animation: inpgValuesScroll 40s linear infinite;
}

.inpg-values-band:hover .inpg-values-track {
  animation-play-state: paused;
}

.inpg-values-set {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

.inpg-values-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.45);
}

.inpg-values-word.is-solid {
  color: var(--red);
  -webkit-text-stroke: 0;
}

.inpg-values-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

@keyframes inpgValuesScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .inpg-values-track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Stage tabs — vertical tab list on the left, one detail panel on the
   right (idea from the Finspire side-tab panel). ALL panels are in the
   HTML on load (SEO). Desktop: JS toggles .is-active. Mobile (<768px):
   tab list hidden and every panel shown stacked, so nothing depends on
   JS or a tap to be readable.
   -------------------------------------------------------------------------- */
.inpg-tabs {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.inpg-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inpg-tab-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.inpg-tab-btn:hover {
  border-color: rgba(220, 38, 38, 0.35);
  transform: translateX(3px);
}

.inpg-tab-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--red);
  background: rgba(220, 38, 38, 0.1);
  transition: background 0.25s ease, color 0.25s ease;
}

.inpg-tab-label {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}

.inpg-tab-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

.inpg-tab-btn.is-active {
  background: radial-gradient(800px 400px at 20% 0%, #a10208 0%, #8b0107 70%);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(139, 1, 7, 0.28);
  transform: none;
}

.inpg-tab-btn.is-active .inpg-tab-num {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.inpg-tab-btn.is-active .inpg-tab-label {
  color: #ffffff;
}

.inpg-tab-btn.is-active .inpg-tab-sub {
  color: rgba(255, 255, 255, 0.75);
}

.inpg-tab-panels {
  position: relative;
}

.inpg-tab-panel {
  display: none;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 20px 44px rgba(11, 15, 20, 0.08);
}

.inpg-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  animation: inpgTabFade 0.35s ease;
}

@keyframes inpgTabFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.inpg-tab-panel-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.inpg-tab-panel h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.inpg-tab-panel .inpg-check-list {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

/* Deliverable chip at the foot of each stage panel */
.inpg-tab-deliverable {
  margin-top: auto;
  padding-top: 1.75rem;
}

.inpg-tab-deliverable-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface-alt);
  border: 1px dashed rgba(220, 38, 38, 0.35);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

.inpg-tab-deliverable-inner i {
  font-size: 1.5rem;
  color: var(--red);
  flex-shrink: 0;
}

.inpg-tab-deliverable-inner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.inpg-tab-deliverable-inner span {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}

@media (max-width: 991.98px) {
  .inpg-tabs {
    grid-template-columns: 280px 1fr;
  }

  .inpg-tab-panel {
    padding: 2rem;
  }
}

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

  .inpg-tabs-nav {
    display: none;
  }

  .inpg-tab-panel,
  .inpg-tab-panel.is-active {
    display: flex;
    flex-direction: column;
    height: auto;
    animation: none;
    padding: 1.6rem;
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Fees + timeline section. Reuses .table-dossier / .table-responsive-dossier
   from finjuris-home.css; the only change is the header row colour, scoped
   to .inpg-fees so other pages' tables keep their blue header.
   -------------------------------------------------------------------------- */
.inpg-fees .table-dossier thead th {
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
}

.inpg-fees .table-dossier tbody td {
  vertical-align: middle;
}

.inpg-fees .table-dossier tbody td:not(:first-child) {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.inpg-fees .inpg-note a {
  color: var(--red);
  font-weight: 700;
}

/* Timeline card beside the fee table — big range + swing factors */
.inpg-timeline-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 20px;
  padding: 2.25rem;
  color: #ffffff;
  background: radial-gradient(700px 400px at 90% 0%, rgba(255, 95, 95, 0.32), transparent 60%),
    linear-gradient(160deg, #0b0f14 0%, #1e2732 100%);
  box-shadow: 0 20px 44px rgba(11, 15, 20, 0.18);
  display: flex;
  flex-direction: column;
}

.inpg-timeline-card-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8a8a;
}

.inpg-timeline-card-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  margin: 0.75rem 0 0.4rem;
}

.inpg-timeline-card-num small {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 6px;
}

.inpg-timeline-card>p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.inpg-timeline-card h3 {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.inpg-timeline-factors {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.inpg-timeline-factors li {
  display: flex;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.inpg-timeline-factors i {
  color: #ff8a8a;
  margin-top: 3px;
  flex-shrink: 0;
}

.inpg-timeline-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}

.inpg-timeline-card-link:hover {
  color: #ff8a8a;
}

/* --------------------------------------------------------------------------
   "Why applications stall" — reuses .inpg-license-dark + .inpg-license-card
   in a 2-column grid. Only the centered .fj-home-svc-head needs white text
   here (the existing dark override only targets .inpg-license-intro h2).
   -------------------------------------------------------------------------- */
.inpg-license-dark .fj-home-svc-head h2 {
  color: #ffffff !important;
}

.inpg-license-dark .fj-home-svc-head p {
  color: #c9d0d9;
}

.inpg-license-dark .fj-home-svc-head .eyebrow {
  color: #ff8a8a;
}

.inpg-stall-grid .inpg-license-card {
  height: 100%;
}

.inpg-stall-fix i {
  margin-top: 2px;
  flex-shrink: 0;
}

.inpg-stall-fix {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: #6fcf97;
}

/* --------------------------------------------------------------------------
   "How to choose" — reuses .inpg-process-grid / .inpg-process-step; the
   step holds a single question, so a slightly larger h3 and a closing
   callout are all that's added.
   -------------------------------------------------------------------------- */
.inpg-questions .inpg-process-step {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.inpg-questions .inpg-process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(11, 15, 20, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}

.inpg-questions .inpg-process-step h3 {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}

.inpg-questions .inpg-note {
  max-width: 900px;
  margin: 2.5rem auto 0;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Engagement tiers — three cards, middle one featured (dark), inspired by
   the Finspire pricing row but with no prices: "Best for" + "Pricing
   model" instead.
   -------------------------------------------------------------------------- */
.inpg-tier-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inpg-tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11, 15, 20, 0.12);
}

.inpg-tier-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.inpg-tier-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.inpg-tier-row {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.inpg-tier-row strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.inpg-tier-row p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
}

.inpg-tier-card .btn-primary-custom,
.inpg-tier-card .fj-home-btn-secondary {
  margin-top: auto;
  justify-content: center;
  padding: 0.85rem 1.25rem;
}

.inpg-tier-card .inpg-tier-row:last-of-type {
  margin-bottom: 1.75rem;
}

/* Featured (middle) tier */
.inpg-tier-card--featured {
  background: radial-gradient(700px 400px at 80% 0%, rgba(255, 95, 95, 0.3), transparent 60%),
    linear-gradient(160deg, #0b0f14 0%, #1e2732 100%);
  border-color: transparent;
  box-shadow: 0 24px 50px rgba(11, 15, 20, 0.28);
}

.inpg-tier-card--featured .inpg-tier-tag {
  background: var(--red);
  color: #ffffff;
}

.inpg-tier-card--featured h3 {
  color: #ffffff;
}

.inpg-tier-card--featured .inpg-tier-row {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.inpg-tier-card--featured .inpg-tier-row strong {
  color: rgba(255, 255, 255, 0.6);
}

.inpg-tier-card--featured .inpg-tier-row p {
  color: #ffffff;
}

@media (min-width: 992px) {
  .inpg-tier-card--featured {
    transform: translateY(-14px);
  }

  .inpg-tier-card--featured:hover {
    transform: translateY(-18px);
  }
}

/* --------------------------------------------------------------------------
   Case studies — reuses .case-study from finjuris-home.css; only gives it
   full height inside the grid.
   -------------------------------------------------------------------------- */
.inpg-cases .case-study {
  height: 100%;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
}

.inpg-cases .case-study h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Team cards — photo (or initials fallback), name, role, credentials,
   LinkedIn. Photo is a background-image layer over a gradient, so a
   missing file shows the gradient + initials instead of a broken image.
   -------------------------------------------------------------------------- */
.inpg-team-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inpg-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(11, 15, 20, 0.12);
}

.inpg-team-photo {
  position: relative;
  aspect-ratio: 3 / 2.2;
  background-size: cover;
  background-position: center top;
  background-color: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inpg-team-photo span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: rgba(255, 255, 255, 0.9);
}

.inpg-team-body {
  padding: 1.4rem 1.5rem 1.6rem;
}

.inpg-team-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.inpg-team-role {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 0.75rem;
}

.inpg-team-body p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.inpg-team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Closing CTA — reuses .cta-banner-inner; this just adds the WhatsApp
   button colour variant (cta-banner-btn has no green-WhatsApp variant).
   -------------------------------------------------------------------------- */
.inpg-cta-btn-whatsapp {
  background: #25d366;
  color: #ffffff;
}

.inpg-cta-btn-whatsapp:hover {
  background: #18bb54;
  color: #ffffff;
}

/* WhatsApp button in the hero — .btn-outline-custom is reused for its
   green look; this only restores inline-flex on mobile, where the shared
   stylesheet switches it to display:block. Scoped to the hero CTA row. */
.inpg-hero-cta .btn-outline-custom {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Related guides + sources
   -------------------------------------------------------------------------- */
.inpg-related .related-service-card {
  font-size: 0.92rem;
  line-height: 1.4;
}

.inpg-sources {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.inpg-sources h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.inpg-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}

.inpg-sources a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.inpg-sources a:hover {
  color: var(--red);
}

/* Byline when it sits at the foot of the page (inside .inpg-sources)
   rather than in the hero — resets the hero's negative top margin. */
.inpg-sources .inpg-byline {
  margin: 1.75rem 0 0;
}

/* --------------------------------------------------------------------------
   IMAGES — VARA page. Every photo below is set as a multi-layer inline
   background-image on the element: new photo first, then an existing site
   image, then a brand gradient. A missing file paints nothing, so the next
   layer shows through and nothing ever renders as a broken image.
   -------------------------------------------------------------------------- */

/* 1. Photo card with a floating "matter status" panel, under the sticky
      heading in "What a VARA license consultant does for you". */
.inpg-media-card {
  position: relative;
  margin-top: 2rem;
  min-height: 340px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  box-shadow: 0 20px 44px rgba(11, 15, 20, 0.16);
  overflow: hidden;
}

.inpg-media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 15, 20, 0.55) 0%, rgba(11, 15, 20, 0) 55%);
}

.inpg-media-status {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: 0 12px 28px rgba(11, 15, 20, 0.18);
}

.inpg-media-status-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.inpg-media-status-title i {
  color: var(--red);
  font-size: 0.9rem;
}

.inpg-media-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.3rem 0;
}

.inpg-media-status-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
}

.inpg-media-status-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--border);
}

.inpg-media-status-row.is-done .dot {
  background: #1f7a3d;
}

.inpg-media-status-row.is-done em {
  color: #1f7a3d;
}

.inpg-media-status-row.is-active .dot {
  background: #ef9c1f;
  box-shadow: 0 0 0 4px rgba(239, 156, 31, 0.18);
}

.inpg-media-status-row.is-active em {
  color: #b45309;
}

.inpg-media-status-row.is-next {
  color: var(--muted);
}

/* 2. Image banner at the top of each stage panel. */
.inpg-tab-panel-media {
  position: relative;
  height: 210px;
  margin: -1rem -1rem 1.75rem;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-alt);
  overflow: hidden;
}

.inpg-tab-panel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 15, 20, 0.55) 0%, rgba(11, 15, 20, 0) 60%);
}

.inpg-tab-panel-media .inpg-tab-panel-chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
}

.inpg-tab-panel-media .inpg-tab-panel-chip i {
  color: var(--red);
}

@media (max-width: 767.98px) {
  .inpg-tab-panel-media {
    height: 160px;
    margin: -0.5rem -0.5rem 1.25rem;
  }
}

/* 3. "How to choose" — photo column (reuses .approach-photo from
      finjuris-home.css, incl. its hover shine) beside a 2-column question
      grid; plus a small floating badge on the photo. */
.inpg-questions .approach-photo {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  height: 100%;
  min-height: 520px;
}

.inpg-photo-badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 12px 28px rgba(11, 15, 20, 0.2);
  max-width: calc(100% - 2.5rem);
}

.inpg-photo-badge-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--red);
}

.inpg-photo-badge span:last-child {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

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

@media (max-width: 991.98px) {
  .inpg-questions .approach-photo {
    position: relative;
    top: auto;
    min-height: 320px;
  }
}

/* 4. Case studies — image strip on top of each .case-study card. */
.inpg-cases .case-study {
  padding: 0;
  overflow: hidden;
}

.inpg-case-media {
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-alt);
}

.inpg-case-body {
  padding: 1.75rem 2rem;
}

/* --------------------------------------------------------------------------
   Hero image card (right column) — replaces the lead form in the hero on
   the VARA page. Same multi-layer background fallback as the other photos.
   -------------------------------------------------------------------------- */
.inpg-hero-media {
  position: relative;
  min-height: 560px;
  height: 100%;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  box-shadow: 0 24px 56px rgba(11, 15, 20, 0.18);
  overflow: hidden;
}

.inpg-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 15, 20, 0.6) 0%, rgba(11, 15, 20, 0) 50%);
}

.inpg-hero-media-chip {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(11, 15, 20, 0.16);
}

.inpg-hero-media-chip i {
  color: var(--red);
}

.inpg-hero-media-card {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 14px 32px rgba(11, 15, 20, 0.2);
}

.inpg-hero-media-logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inpg-hero-media-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inpg-hero-media-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.inpg-hero-media-card span {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 991.98px) {
  .inpg-hero-media {
    min-height: 380px;
  }
}

@media (max-width: 575.98px) {
  .inpg-hero-media {
    min-height: 320px;
  }

  .inpg-hero-media-chip {
    top: 1rem;
    right: 1rem;
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------------------------
   Closing section with the lead form (dark split). The form card keeps its
   .inpg-hero-form-card styles; only its sticky positioning is switched off
   here, since it no longer sits in the hero.
   -------------------------------------------------------------------------- */
.inpg-closing .inpg-hero-form-card {
  position: static;
}

.inpg-closing .inpg-hero-cta {
  margin-bottom: 1.75rem;
}

.inpg-closing .inpg-hero-cta .btn-outline-custom {
  display: inline-flex;
}

.inpg-closing-trust {
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.6rem;
}

.inpg-closing-trust span {
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Dark hero variant — .inpg-hero--dark on the <section>. Background layers
   (red glows + near-black wash over the photo) are set inline on the
   section, same pattern as the light hero. This only recolours the text,
   so the default light .inpg-hero on other pages is unaffected.
   -------------------------------------------------------------------------- */
.inpg-hero--dark {
  background-color: var(--ink);
  border-bottom: 0;
}

.inpg-hero--dark::after {
  /* faint grid texture, fading down the hero */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.inpg-hero--dark .inpg-hero-left h1 {
  color: #ffffff;
}

.inpg-hero--dark .inpg-hero-left h1 .is-red-text {
  color: #ff5f5f;
}

.inpg-hero--dark .inpg-hero-sub {
  color: #c9d0d9;
}

.inpg-hero--dark .inpg-hero-points li {
  color: #ffffff;
}

.inpg-hero--dark .inpg-hero-points i {
  color: #ff5f5f;
}

.inpg-hero--dark .inpg-breadcrumb .breadcrumb-item,
.inpg-hero--dark .inpg-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.55);
}

.inpg-hero--dark .inpg-breadcrumb .breadcrumb-item a {
  color: #ffffff;
}

.inpg-hero--dark .inpg-breadcrumb .breadcrumb-item a:hover,
.inpg-hero--dark .inpg-breadcrumb .breadcrumb-item.active {
  color: #ff8a8a;
}

.inpg-hero--dark .fj-home-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
}

.inpg-hero--dark .fj-home-badge i {
  color: #ff5f5f;
}

.inpg-hero--dark .inpg-hero-media {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Photo hero — .inpg-hero--photo (used together with .inpg-hero--dark).
   The photo is set inline on the <section>; this adds the overlay as a
   ::before layer so it can change per breakpoint: dark behind the text on
   the left, fading out so the photo shows clearly on the right. On tablet/
   mobile the text spans the full width, so the overlay covers everything.
   -------------------------------------------------------------------------- */
.inpg-hero--photo {
  min-height: 750px;
  background: url(./images/vara-license-dubai/banner-bg.jpg);
  background-size: cover;
  /* background-position: center right; */
  background-repeat: no-repeat;
  padding: 8rem 0 6rem;
  overflow: hidden;
}

.inpg-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 520px at 8% 25%, rgba(200, 30, 30, 0.32) 0%, transparent 65%),
    linear-gradient(90deg,
      rgba(11, 15, 20, 0.96) 0%,
      rgba(11, 15, 20, 0.9) 35%,
      rgba(11, 15, 20, 0.6) 55%,
      rgba(11, 15, 20, 0.15) 80%,
      rgba(11, 15, 20, 0.05) 100%);
}

/* Grid texture only over the dark (text) side, not the photo */
.inpg-hero--photo::after {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 65%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 65%);
}

@media (max-width: 991.98px) {
  .inpg-hero--photo::before {
    background:
      radial-gradient(500px 420px at 10% 15%, rgba(200, 30, 30, 0.3) 0%, transparent 65%),
      linear-gradient(180deg, rgba(11, 15, 20, 0.9) 0%, rgba(11, 15, 20, 0.85) 60%, rgba(11, 15, 20, 0.7) 100%);
  }

  .inpg-hero--photo::after {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  }
}

/* "How a matter moves" — numbered steps joined by a vertical line, inside
   .inpg-media-status (replaces the Done / In progress / Next rows). */
.inpg-media-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inpg-media-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.5rem 0;
}

/* connector line from this step's circle down to the next one */
.inpg-media-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: calc(50% + 12px);
  height: calc(100% - 24px);
  width: 2px;
  background: linear-gradient(180deg, var(--red) 0%, rgba(220, 38, 38, 0.25) 100%);
  border-radius: 1px;
}

.inpg-media-step-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(200, 30, 58, 0.3);
}

.inpg-media-steps li:last-child .inpg-media-step-num {
  background: var(--ink);
  box-shadow: 0 3px 8px rgba(11, 15, 20, 0.3);
}

/* ==========================================================================
   ==========================================================================
   VARA LICENSE PROCESS PAGE (vara-license-process-dubai.php) — additions
   Additive only. Reuses from this file: .inpg-hero--dark/--photo,
   .inpg-hero-media, .inpg-card(+icon), .inpg-license-dark/-card,
   .inpg-fees (table header), .inpg-media-card, .inpg-closing, .inpg-sources,
   .inpg-values-band. New below: answer box, process diagram, step list.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   "At a glance" answer box — in the dark hero, under the intro.
   -------------------------------------------------------------------------- */
.inpg-glance {
  margin: 0 0 2.25rem;
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  background: #1a1a1ac9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 640px;
}

.inpg-glance-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8a8a;
  margin-bottom: 0.75rem;
}

.inpg-glance dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.1rem;
}

.inpg-glance dt {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
}

.inpg-glance dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #c9d0d9;
}

@media (max-width: 575.98px) {
  .inpg-glance dl {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .inpg-glance dd {
    margin-bottom: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Two-stage process diagram — HTML (not an image) so every step name stays
   crawlable. Desktop: Stage 1 card → build band → Stage 2 card in one row.
   Below 992px it stacks vertically with downward connectors.
   -------------------------------------------------------------------------- */
.inpg-flow {
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  gap: 0;
  align-items: stretch;
}

.inpg-flow-stage {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 14px 34px rgba(11, 15, 20, 0.07);
}

.inpg-flow-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.inpg-flow-stage-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--red);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inpg-flow-stage--two .inpg-flow-stage-tag {
  background: rgba(29, 78, 216, 0.1);
  color: var(--blue);
}

.inpg-flow-stage-end {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
}

.inpg-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.inpg-flow-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--surface-alt);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.inpg-flow-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
}

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

/* Milestone rows: ATI (end of Stage 1) and the licence (step 8) */
.inpg-flow-steps li.is-milestone {
  background: var(--ink);
  color: #ffffff;
}

.inpg-flow-steps li.is-milestone small {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.inpg-flow-stage--two .inpg-flow-steps li.is-milestone {
  background: radial-gradient(500px 300px at 20% 0%, #a10208 0%, #8b0107 70%);
}

.inpg-flow-stage--two .inpg-flow-steps li.is-milestone .inpg-flow-num {
  background: #ffffff;
  color: var(--red);
}

/* Build phase between the stages — a band with arrows on both sides */
.inpg-flow-build {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 1.1rem;
}

.inpg-flow-build::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(220, 38, 38, 0.35);
  z-index: 0;
}

.inpg-flow-build-inner {
  position: relative;
  z-index: 1;
  background: #fffaf0;
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 16px;
  padding: 1rem 0.9rem;
  box-shadow: 0 10px 24px rgba(180, 83, 9, 0.1);
}

.inpg-flow-build-inner i {
  display: block;
  font-size: 1.4rem;
  color: #b45309;
  margin-bottom: 0.35rem;
}

.inpg-flow-build-inner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.inpg-flow-build-inner span {
  display: block;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted);
}

.inpg-flow-caption {
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 70ch;
}

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

  .inpg-flow-build {
    padding: 1.25rem 0;
  }

  .inpg-flow-build::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    border-top: 0;
    border-left: 2px dashed rgba(220, 38, 38, 0.35);
  }

  .inpg-flow-build-inner {
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   Stage detail: sticky head + photo on one side, vertical numbered steps on
   the other. Photo reuses .inpg-media-card; only a label chip is added.
   -------------------------------------------------------------------------- */
.inpg-stage-split .inpg-section-head {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}

.inpg-media-card--plain {
  min-height: 300px;
}

.inpg-media-label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

.inpg-media-label i {
  color: var(--red);
}

.inpg-vsteps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inpg-vstep {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.25rem;
  padding-bottom: 2rem;
}

.inpg-vstep:last-child {
  padding-bottom: 0;
}

/* connector line between step numbers */
.inpg-vstep:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 56px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.45) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.inpg-vstep-num {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  box-shadow: 0 10px 20px rgba(200, 30, 58, 0.25);
}

.inpg-vsteps--blue .inpg-vstep-num {
  background: linear-gradient(135deg, #3b82f6 0%, var(--blue-dark) 100%);
  box-shadow: 0 10px 20px rgba(29, 78, 216, 0.22);
}

.inpg-vsteps--blue .inpg-vstep:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(29, 78, 216, 0.4) 0%, rgba(29, 78, 216, 0.08) 100%);
}

.inpg-vstep-body {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 4px 16px rgba(11, 15, 20, 0.04);
}

.inpg-vstep-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.inpg-vstep-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.inpg-vstep-body p+p,
.inpg-vstep-body .inpg-note {
  margin-top: 0.85rem;
}

.inpg-vstep-body a {
  color: var(--red);
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .inpg-stage-split .inpg-section-head {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .inpg-vstep {
    grid-template-columns: 40px 1fr;
    gap: 0.85rem;
  }

  .inpg-vstep-num {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 0.95rem;
  }

  .inpg-vstep:not(:last-child)::before {
    left: 19px;
    top: 44px;
  }

  .inpg-vstep-body {
    padding: 1.15rem 1.2rem;
  }
}

/* "Between the stages" and "Common mistakes" grids reuse .inpg-license-card;
   on a light section the cards need no override. Closing note line: */
.inpg-section-foot {
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 70ch;
}

.inpg-license-dark .inpg-section-foot {
  color: #ffffff;
}

/* Legacy-operator callout — a wide .inpg-note with a heading */
.inpg-callout {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fffaf0;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-left: 4px solid #b45309;
  border-radius: 16px;
  padding: 1.75rem 2rem;
}

.inpg-callout>i {
  font-size: 1.6rem;
  color: #b45309;
  flex-shrink: 0;
}

.inpg-callout h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-bottom: 0.5rem;
}

.inpg-callout p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 575.98px) {
  .inpg-callout {
    flex-direction: column;
    padding: 1.5rem;
  }
}

/* Text tables (timeline, documents) — same ink header as .inpg-fees, but
   cells wrap normally, since .inpg-fees keeps its AED amounts on one line. */
.inpg-table-ink .table-dossier thead th {
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
}

.inpg-table-ink .table-dossier tbody td {
  vertical-align: top;
  line-height: 1.5;
}

.inpg-table-ink .table-dossier tbody td:first-child {
  white-space: normal;
  min-width: 140px;
}

.inpg-table-ink .table-responsive-dossier+.inpg-note {
  margin-top: 1.25rem;
}

@media (max-width: 767.98px) {
  .inpg-table-ink .table-dossier {
    min-width: 640px;
  }
}

/* --------------------------------------------------------------------------
   Light photo hero — .inpg-hero--photo.inpg-hero--light (instead of
   --dark). White overlay behind the text on the left, fading out so the
   photo shows on the right; full-width wash on tablet/mobile. Text keeps
   the default dark .inpg-hero colours; only the answer box is restyled.
   -------------------------------------------------------------------------- */
.inpg-hero--photo.inpg-hero--light {
  background-color: var(--surface-alt);
}

.inpg-hero--photo.inpg-hero--light::before {
  background:
    radial-gradient(600px 480px at 6% 20%, rgba(220, 38, 38, 0.07) 0%, transparent 65%),
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.93) 38%,
      rgba(255, 255, 255, 0.7) 56%,
      rgba(255, 255, 255, 0.2) 80%,
      rgba(255, 255, 255, 0.05) 100%);
}

.inpg-hero--light .inpg-glance {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--border);
  box-shadow: 0 10px 28px rgba(11, 15, 20, 0.07);
}

.inpg-hero--light .inpg-glance-title {
  color: var(--red);
}

.inpg-hero--light .inpg-glance dt {
  color: var(--ink);
}

.inpg-hero--light .inpg-glance dd {
  color: #414c5a;
}

@media (max-width: 991.98px) {
  .inpg-hero--photo.inpg-hero--light::before {
    background:
      radial-gradient(500px 420px at 10% 15%, rgba(220, 38, 38, 0.06) 0%, transparent 65%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.82) 100%);
  }
}

/* Red keyword in the light hero's H1 — the shared .is-red-text rule is
   scoped to .fj-home-hero only, so it needs restating here. */
.inpg-hero--light .inpg-hero-left h1 .is-red-text {
  color: var(--red);
}

/* ==========================================================================
   ==========================================================================
   VARA LICENSE DUBAI HUB PAGE (vara-license-dubai.php) — additions
   Additive only. Mostly reuses earlier inpg- components; the few rules
   below cover a sub-heading style, a one-column checklist, a date chip
   and a two-table cost layout.
   ==========================================================================
   ========================================================================== */

/* H3 sub-heading inside a section (e.g. "VARA fees by activity") */
.inpg-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.inpg-subhead i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #ffffff;
  background: linear-gradient(135deg, #ff5f5f 0%, #c81e3a 100%);
  flex-shrink: 0;
}

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

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

.inpg-block+.inpg-block {
  margin-top: 3.5rem;
}

/* One-column checklist with a bold lead-in on each item */
.inpg-check-list--single {
  grid-template-columns: 1fr;
  gap: 0.95rem;
}

.inpg-check-list--single li {
  font-size: 0.95rem;
  line-height: 1.6;
}

.inpg-check-list li strong {
  color: var(--ink);
}

/* Paragraph text blocks in a section head that runs long (What is VARA?) */
.inpg-prose p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.inpg-prose p:last-child {
  margin-bottom: 0;
}

.inpg-prose a {
  color: var(--red);
  font-weight: 600;
}

/* Small date chip on update cards ("What changed in 2025–26") */
.inpg-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ff8a8a;
  margin-bottom: 0.6rem;
}

/* Build-phase box inside .inpg-flow when it is a numbered step */
.inpg-flow-build-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 0.4rem;
  border-radius: 50%;
  background: #b45309;
  color: #ffffff !important;
  font-family: var(--font-display);
  font-size: 0.78rem !important;
  font-weight: 800;
}

/* Text column beside the dark timeline card */
.inpg-timeline-split .inpg-section-head {
  margin-bottom: 0;
}

.inpg-timeline-split .inpg-timeline-card {
  height: auto;
}

/* 4-per-row card grids (licensed activities, 2025–26 updates): icon sits
   above the text instead of beside it, so narrow cards don't squeeze. */
.inpg-stack-grid .inpg-license-card {
  flex-direction: column;
  gap: 0.9rem;
}

/* "In short" answer box used as the hero's right column (instead of the
   image card) — larger card, vertically centred against the text. */
.inpg-glance--side {
  max-width: none;
  margin: 0;
  padding: 2rem 2.1rem;
  border-radius: 20px;
  align-self: center;
}

.inpg-hero--light .inpg-glance--side {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--border);
  box-shadow: 0 24px 56px rgba(11, 15, 20, 0.12);
}

.inpg-glance--side .inpg-glance-title {
  font-size: 0.8rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.inpg-glance--side dl {
  gap: 0 1.25rem;
}

.inpg-glance--side dt,
.inpg-glance--side dd {
  font-size: 0.92rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.inpg-glance--side dt:last-of-type,
.inpg-glance--side dd:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 575.98px) {
  .inpg-glance--side {
    padding: 1.5rem 1.4rem;
  }

  .inpg-glance--side dt {
    padding-bottom: 0.15rem;
    border-bottom: 0;
  }

  .inpg-glance--side dd {
    padding-top: 0;
  }
}

/* Timeline card — red version (all pages). Same deep-red gradient as the
   bento stat cards; accent text switches from pink to white/peach so it
   stays readable on red. */
.inpg-timeline-card {
  background: radial-gradient(700px 420px at 85% 0%, rgba(255, 120, 120, 0.35), transparent 60%),
    radial-gradient(1000px 600px at 40% 20%, #a10208 0%, #8b0107 70%);
  box-shadow: 0 20px 44px rgba(139, 1, 7, 0.3);
}

.inpg-timeline-card-label {
  color: rgba(255, 255, 255, 0.85);
}

.inpg-timeline-card>p,
.inpg-timeline-card-num small {
  color: rgba(255, 255, 255, 0.82);
}

.inpg-timeline-factors li {
  color: #ffffff;
}

.inpg-timeline-factors i {
  color: #ffd2d2;
}

.inpg-timeline-card-link:hover {
  color: #ffd2d2;
}

/* WhatsApp buttons on the VARA pages — transparent with a red border
   instead of the shared green .btn-outline-custom. Scoped to the inpg CTA
   rows only, so green buttons elsewhere on the site are unchanged. */
.inpg-hero-cta .btn-outline-custom {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  box-shadow: none;
}

.inpg-hero-cta .btn-outline-custom:hover,
.inpg-hero-cta .btn-outline-custom:focus-visible {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

/* On the dark closing section red text would be hard to read, so the
   label is white there; the border stays red. */
.inpg-license-dark .inpg-hero-cta .btn-outline-custom {
  color: #ffffff;
  border-color: #ff5f5f;
}

.inpg-license-dark .inpg-hero-cta .btn-outline-custom:hover,
.inpg-license-dark .inpg-hero-cta .btn-outline-custom:focus-visible {
  background: var(--red);
  border-color: var(--red);
}

/* WhatsApp button in the dark form section — solid white with red text
   and border (not transparent). Hover still fills red. */
.inpg-license-dark .inpg-hero-cta .btn-outline-custom {
  background: #ffffff;
  color: var(--red);
  border-color: var(--red);
}

.inpg-license-dark .inpg-hero-cta .btn-outline-custom:hover,
.inpg-license-dark .inpg-hero-cta .btn-outline-custom:focus-visible {
  background: var(--red);
  border-color: #ffffff;
  color: #ffffff;
}

/* Licensed-activity cards (VARA License Dubai) — each card gets a light
   tint matching its icon colour, scoped to .inpg-tint-grid only. */
.inpg-tint-grid .inpg-license-card {
  box-shadow: none;
}

.inpg-tint-grid .inpg-tint--red {
  background: #fff4f4;
  border-color: rgba(220, 38, 38, 0.18);
}

.inpg-tint-grid .inpg-tint--blue {
  background: #f2f6ff;
  border-color: rgba(59, 130, 246, 0.2);
}

.inpg-tint-grid .inpg-tint--ink {
  background: #f3f5f8;
  border-color: rgba(11, 15, 20, 0.12);
}

.inpg-tint-grid .inpg-tint--amber {
  background: #fff8ec;
  border-color: rgba(180, 83, 9, 0.2);
}

.inpg-tint-grid .inpg-license-card:hover {
  box-shadow: 0 12px 28px rgba(11, 15, 20, 0.08);
}