/*
  Discretionary Mutual Funds - page stylesheet.

  Composed by tools/wordpress/compose-dmf-css.ts from the /underwriters/ stylesheet, so this
  page renders in the same design system as the other solution pages rather than in the
  thinner ubind-lp- landing vocabulary it used to carry.

  Every selector is scoped under .ubind-elementor-page, a class the page markup puts on its
  wrapper div. Design tokens are NOT declared here - they come from the uBind Design Tokens
  plugin, and nothing else may declare them.

  Three blocks were lifted with their class prefixes renamed:
    claims-life -> lifecycle
    .cl- -> .mlc-
    complex-rating -> contributions
    .cr- -> .cb-
    network-mgmt -> oversight
    .nw- -> .ov-
*/

  /* ---- base · reset, container, eyebrow, display type, buttons ---- */
/* ============================================================
DESIGN TOKENS - shared across all ubind pages
============================================================ */

  

  

  

  

  

  

  

  

  



  

  



  

  

  /* BUTTONS */

  

  

  

  

  

  

  

  

  

  

  

  /* ---- hero shell + section base and reveal ---- */
/* ============================================================
HERO - dark, UW rule engine workspace.
The band itself is now shared: see shared-platform.css. The workspace below is page-specific.
============================================================ */

  /* SECTION BASE + REVEAL */

  



  

  

  

  



  

  

  

  

  

  

  

  

  

  

  

  /* ---- pillars ---- */
/* ============================================================
FOUR PILLARS - Launch fast / Broker network / Direct & WL / Affinity
============================================================ */

  

  





  

  

  

  

  

  

  

  



  

  

  

  

  

  

  /* ---- shift · before/after ---- */
/* ============================================================
CONTROL SHIFT - Manual vs. automated MGA workflow
============================================================ */

























  















  

  /* ---- lifecycle stepper (renamed from claims-life) ---- */
/* ============================================================
CLAIMS LIFECYCLE - animated 5-stage flow
============================================================ */

  .ubind-elementor-page .lifecycle {
    background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
    color: white;
    position: relative;
    overflow: hidden;
  }

  .ubind-elementor-page .lifecycle::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(50% 40% at 20% 30%, rgba(31, 166, 122, .15) 0%, transparent 60%),
      radial-gradient(40% 50% at 80% 70%, rgba(105, 224, 176, .1) 0%, transparent 60%);
    pointer-events: none;
  }

  .ubind-elementor-page .lifecycle>.container {
    position: relative;
    z-index: 1;
  }

  .ubind-elementor-page .lifecycle .eyebrow {
    color: var(--emerald-400);
  }

  .ubind-elementor-page .lifecycle .section-head h2 {
    color: white;
  }

  .ubind-elementor-page .lifecycle .section-head p {
    color: rgba(255, 255, 255, .65);
  }

  .ubind-elementor-page .mlc-track {
    position: relative;
    padding-top: 24px;
  }

  .ubind-elementor-page .mlc-track::before {
    content: "";
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--emerald-400) 20%, var(--emerald-300) 50%, var(--emerald-400) 80%, transparent 100%);
    z-index: 0;
  }

  .ubind-elementor-page .mlc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
  }

  @media (max-width: 1100px) {
    .ubind-elementor-page .mlc-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 540px) {
    .ubind-elementor-page .mlc-grid {
      grid-template-columns: 1fr;
    }
  }

  .ubind-elementor-page .mlc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ubind-elementor-page .mlc-step .stage-no {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--emerald-300);
    letter-spacing: 0.14em;
    margin-bottom: 14px;
  }

  .ubind-elementor-page .mlc-step .ring {
    width: 56px;
    height: 56px;
    background: var(--ink-900);
    border: 2px solid var(--emerald-400);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--emerald-300);
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    transition: transform .3s var(--ease-spring), box-shadow .3s;
    box-shadow: 0 0 0 6px rgba(11, 17, 15, 1), 0 0 0 7px rgba(31, 166, 122, .3);
  }

  .ubind-elementor-page .mlc-step:hover .ring {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(11, 17, 15, 1), 0 0 0 7px var(--emerald-400), 0 0 24px var(--emerald-400);
  }

  .ubind-elementor-page .mlc-step .ring::after {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px dashed rgba(105, 224, 176, .4);
    border-radius: 50%;
    animation: mlc-ring-spin 12s linear infinite;
    pointer-events: none;
  }

  @keyframes mlc-ring-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .ubind-elementor-page .mlc-step .card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-md);
    padding: 18px 16px;
    width: 100%;
    text-align: left;
    transition: border-color .3s, transform .3s, background .3s;
  }

  .ubind-elementor-page .mlc-step:hover .card {
    background: rgba(31, 166, 122, .06);
    border-color: rgba(31, 166, 122, .35);
    transform: translateY(-4px);
  }

  .ubind-elementor-page .mlc-step .card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 6px;
    line-height: 1.2;
  }

  

  .ubind-elementor-page .mlc-step .card p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.5;
  }

  .ubind-elementor-page .mlc-step .card .meta {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--emerald-300);
    background: rgba(31, 166, 122, .12);
    border: 1px solid rgba(31, 166, 122, .25);
    padding: 3px 8px;
    border-radius: 999px;
  }

  /* Optional claims status banner under the track */

  .ubind-elementor-page .mlc-status {
    margin-top: 48px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-lg);
    padding: 22px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
  }

  @media (max-width: 720px) {
    .ubind-elementor-page .mlc-status {
      grid-template-columns: 1fr;
      text-align: center;
    }
  }

  .ubind-elementor-page .mlc-status .icn-big {
    width: 48px;
    height: 48px;
    background: rgba(31, 166, 122, .18);
    border: 1px solid rgba(31, 166, 122, .35);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--emerald-300);
  }

  .ubind-elementor-page .mlc-status .info {
    font-family: var(--font-display);
    font-size: 17px;
    color: white;
    letter-spacing: -0.01em;
  }

  .ubind-elementor-page .mlc-status .info small {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: 0.05em;
    margin-top: 4px;
  }

  .ubind-elementor-page .mlc-status .pill {
    font-family: var(--mono);
    font-size: 11px;
    background: rgba(31, 166, 122, .18);
    border: 1px solid rgba(31, 166, 122, .35);
    color: var(--emerald-300);
    padding: 6px 14px;
    border-radius: 999px;
    letter-spacing: 0.06em;
  }

  

  /* ---- contributions panel (renamed from complex-rating) ---- */
/* ============================================================
COMPLEX RATING - ISR, business packs, peril data
============================================================ */

  .ubind-elementor-page .contributions {
    background: var(--paper);
    position: relative;
    overflow: hidden;
  }

  .ubind-elementor-page .contributions::before {
    content: "";
    position: absolute;
    top: -150px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(31, 166, 122, .08) 0%, transparent 60%);
    filter: blur(50px);
    z-index: 0;
  }

  .ubind-elementor-page .contributions>.container {
    position: relative;
    z-index: 1;
  }

  .ubind-elementor-page .cb-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
  }

  @media (max-width: 1024px) {
    .ubind-elementor-page .cb-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }
  }

  .ubind-elementor-page .cb-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
  }

  @media (max-width: 540px) {
    .ubind-elementor-page .cb-feat-grid {
      grid-template-columns: 1fr;
    }
  }

  .ubind-elementor-page .cb-feat {
    padding: 18px;
    background: white;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    transition: border-color .25s, transform .25s, box-shadow .25s;
  }

  .ubind-elementor-page .cb-feat:hover {
    border-color: var(--emerald-300);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -16px rgba(31, 166, 122, .2);
  }

  .ubind-elementor-page .cb-feat .ic-c {
    width: 36px;
    height: 36px;
    background: var(--emerald-50);
    border: 1px solid var(--emerald-200);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--emerald-700);
    margin-bottom: 10px;
  }

  .ubind-elementor-page .cb-feat .t {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink-1000);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .ubind-elementor-page .cb-feat .d {
    font-size: 12.5px;
    color: var(--ink-500);
    line-height: 1.45;
  }

  /* Complex rate calculator */

  .ubind-elementor-page .cb-calc {
    background: linear-gradient(180deg, var(--ink-1000), var(--emerald-950));
    border: 1px solid rgba(31, 166, 122, .2);
    border-radius: var(--r-xl);
    padding: 28px;
    color: white;
    box-shadow: 0 30px 60px -20px rgba(6, 26, 20, .4);
    position: relative;
    overflow: hidden;
  }

  .ubind-elementor-page .cb-calc::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(50% 40% at 100% 0%, rgba(31, 166, 122, .2) 0%, transparent 60%),
      radial-gradient(40% 40% at 0% 100%, rgba(105, 224, 176, .15) 0%, transparent 60%);
    pointer-events: none;
  }

  .ubind-elementor-page .cb-calc>* {
    position: relative;
    z-index: 1;
  }

  .ubind-elementor-page .cb-calc .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
  }

  .ubind-elementor-page .cb-calc .head .ttl {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: white;
  }

  .ubind-elementor-page .cb-calc .head .sub {
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    letter-spacing: 0.06em;
    margin-top: 2px;
  }

  .ubind-elementor-page .cb-calc .head .pill {
    font-family: var(--mono);
    font-size: 10px;
    background: rgba(31, 166, 122, .18);
    border: 1px solid rgba(31, 166, 122, .35);
    color: var(--emerald-300);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.08em;
  }

  .ubind-elementor-page .cb-sections {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
  }

  .ubind-elementor-page .cb-section {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 10px 14px;
  }

  .ubind-elementor-page .cb-section .sec-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .ubind-elementor-page .cb-section .sec-head span:last-child {
    color: var(--emerald-300);
    font-family: var(--mono);
  }

  .ubind-elementor-page .cb-section .sec-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
  }

  .ubind-elementor-page .cb-section .sec-detail .factors {
    color: rgba(255, 255, 255, .55);
    font-family: var(--mono);
    font-size: 11px;
  }

  .ubind-elementor-page .cb-section .sec-detail .amt {
    font-family: var(--mono);
    font-size: 11.5px;
    color: white;
  }

  /* Final premium banner */

  .ubind-elementor-page .cb-final {
    background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
    border-radius: 10px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ubind-elementor-page .cb-final .lbl {
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, .85);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .ubind-elementor-page .cb-final .total {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .ubind-elementor-page .cb-final .total small {
    font-size: 18px;
    opacity: .85;
    margin-left: 4px;
  }

  .ubind-elementor-page .cb-final .meta {
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, .85);
    margin-top: 6px;
  }

  .ubind-elementor-page .cb-final .commit-btn {
    background: rgba(255, 255, 255, .18);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    color: white;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  

  /* ---- oversight (renamed from network-mgmt) ---- */
/* ============================================================
BROKER NETWORK DASHBOARD - central command for distribution
============================================================ */

  .ubind-elementor-page .oversight {
    background: var(--ink-1000);
    color: white;
    position: relative;
    overflow: hidden;
  }

  .ubind-elementor-page .oversight::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 50% at 80% 30%, rgba(31, 166, 122, .18) 0%, transparent 60%),
      radial-gradient(40% 40% at 20% 70%, rgba(105, 224, 176, .1) 0%, transparent 60%);
    pointer-events: none;
  }

  .ubind-elementor-page .oversight>.container {
    position: relative;
    z-index: 1;
  }

  .ubind-elementor-page .oversight .eyebrow {
    color: var(--emerald-400);
  }

  .ubind-elementor-page .oversight .section-head h2 {
    color: white;
  }

  .ubind-elementor-page .oversight .section-head p {
    color: rgba(255, 255, 255, .65);
  }

  .ubind-elementor-page .ov-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: flex-start;
  }

  @media (max-width: 1024px) {
    .ubind-elementor-page .ov-grid {
      /* minmax(0, ...), not a bare 1fr: an fr track's automatic minimum is its item's
         min-content, and the mockup's four-across KPI row makes that 473px. Below about
         513px that floor, not the container, was sizing both children - which is why the
         feature cards were clipped as well as the dashboard. */
      grid-template-columns: minmax(0, 1fr);
      gap: 48px;
    }
  }

  .ubind-elementor-page .ov-feats {
    display: grid;
    gap: 14px;
  }

  .ubind-elementor-page .ov-feat {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-md);
    transition: border-color .3s, transform .3s, background .3s;
  }

  .ubind-elementor-page .ov-feat:hover {
    border-color: rgba(31, 166, 122, .4);
    background: rgba(31, 166, 122, .06);
    transform: translateX(4px);
  }

  .ubind-elementor-page .ov-feat .ic {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: rgba(31, 166, 122, .15);
    border: 1px solid rgba(31, 166, 122, .3);
    color: var(--emerald-300);
    border-radius: 10px;
    display: grid;
    place-items: center;
  }

  .ubind-elementor-page .ov-feat .t {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: white;
    margin-bottom: 4px;
  }

  .ubind-elementor-page .ov-feat .d {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.5;
  }

  /* Network dashboard mockup */

  .ubind-elementor-page .ov-mockup {
    background: linear-gradient(180deg, rgba(15, 28, 23, .96), rgba(8, 17, 14, .96));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow:
      0 50px 100px -30px rgba(0, 0, 0, .6),
      inset 0 1px 0 rgba(255, 255, 255, .05);
  }

  .ubind-elementor-page .ov-mock-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    margin-bottom: 16px;
  }

  .ubind-elementor-page .ov-mock-bar .dots {
    display: flex;
    gap: 6px;
  }

  .ubind-elementor-page .ov-mock-bar .dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
  }

  .ubind-elementor-page .ov-mock-bar .url {
    flex: 1;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
  }

  .ubind-elementor-page .ov-mock-bar .who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: rgba(255, 255, 255, .6);
  }

  .ubind-elementor-page .ov-mock-bar .who .av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--emerald-400), var(--emerald-700));
    display: grid;
    place-items: center;
    color: white;
    font-family: var(--font-display);
    font-size: 10px;
  }

  .ubind-elementor-page .ov-mock-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 4px 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 14px;
  }

  .ubind-elementor-page .ov-mock-head .ttl {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: white;
    letter-spacing: -0.015em;
  }

  .ubind-elementor-page .ov-mock-head .sub {
    font-family: var(--mono);
    font-size: 10.5px;
    color: rgba(255, 255, 255, .5);
    margin-top: 4px;
    letter-spacing: 0.06em;
  }

  .ubind-elementor-page .ov-mock-head .filter {
    display: flex;
    gap: 4px;
  }

  .ubind-elementor-page .ov-mock-head .filter .mock-btn {
    font-family: var(--mono);
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .7);
    letter-spacing: 0.08em;
  }

  .ubind-elementor-page .ov-mock-head .filter .mock-btn.on {
    background: rgba(31, 166, 122, .18);
    border-color: rgba(31, 166, 122, .4);
    color: var(--emerald-300);
  }

  /* KPI row */

  .ubind-elementor-page .ov-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }

  .ubind-elementor-page .ov-kpi {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
  }

  .ubind-elementor-page .ov-kpi .lbl {
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .ubind-elementor-page .ov-kpi .val {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .ubind-elementor-page .ov-kpi .delta {
    font-family: var(--mono);
    font-size: 10px;
    margin-top: 5px;
    color: var(--emerald-300);
  }

  .ubind-elementor-page .ov-kpi .spark {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 50px;
    height: 18px;
  }

  .ubind-elementor-page .ov-kpi .spark path {
    fill: none;
    stroke: var(--emerald-400);
    stroke-width: 1.5;
    opacity: .8;
  }

  /* Broker performance table */

  .ubind-elementor-page .ov-table {
    background: rgba(255, 255, 255, .02);
    border-radius: 10px;
    overflow: hidden;
  }

  .ubind-elementor-page .ov-thead {
    display: grid;
    grid-template-columns: 1.6fr 80px 90px 110px 90px;
    gap: 8px;
    padding: 11px 14px;
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255, 255, 255, .4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }

  .ubind-elementor-page .ov-trow {
    display: grid;
    grid-template-columns: 1.6fr 80px 90px 110px 90px;
    gap: 8px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: 12px;
    transition: background .2s;
  }

  .ubind-elementor-page .ov-trow:last-child {
    border-bottom: none;
  }

  .ubind-elementor-page .ov-trow:hover {
    background: rgba(255, 255, 255, .03);
  }

  .ubind-elementor-page .ov-trow .broker-c {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: white;
    flex-shrink: 0;
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b.b1 {
    background: linear-gradient(135deg, #61c5ff, #4fa3d8);
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b.b2 {
    background: linear-gradient(135deg, #f5a524, #d68f1c);
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b.b3 {
    background: linear-gradient(135deg, #e879f9, #b85ec9);
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b.b4 {
    background: linear-gradient(135deg, var(--emerald-400), var(--emerald-700));
  }

  .ubind-elementor-page .ov-trow .broker-c .av-b.b5 {
    background: linear-gradient(135deg, #8b5cf6, #6d3fce);
  }

  .ubind-elementor-page .ov-trow .broker-c .name {
    font-weight: 500;
  }

  .ubind-elementor-page .ov-trow .broker-c .sub-line {
    font-family: var(--mono);
    font-size: 9.5px;
    color: rgba(255, 255, 255, .45);
    margin-top: 2px;
    letter-spacing: 0.04em;
  }

  .ubind-elementor-page .ov-trow .quotes {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
  }

  .ubind-elementor-page .ov-trow .bind-rate {
    position: relative;
    font-family: var(--mono);
    font-size: 11px;
    color: white;
    text-align: center;
  }

  .ubind-elementor-page .ov-trow .bind-bar {
    position: relative;
    height: 5px;
    background: rgba(255, 255, 255, .08);
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
  }

  .ubind-elementor-page .ov-trow .bind-bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--emerald-500), var(--emerald-400));
    border-radius: 4px;
  }

  .ubind-elementor-page .ov-trow.r1 .bind-bar::after {
    width: 62%;
  }

  .ubind-elementor-page .ov-trow.r2 .bind-bar::after {
    width: 48%;
  }

  .ubind-elementor-page .ov-trow.r3 .bind-bar::after {
    width: 71%;
  }

  .ubind-elementor-page .ov-trow.r4 .bind-bar::after {
    width: 39%;
  }

  .ubind-elementor-page .ov-trow.r5 .bind-bar::after {
    width: 55%;
  }

  .ubind-elementor-page .ov-trow .gwp {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--emerald-300);
    text-align: right;
  }

  .ubind-elementor-page .ov-trow .badge {
    font-family: var(--mono);
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ubind-elementor-page .ov-trow .badge.tier-a {
    background: rgba(31, 166, 122, .2);
    color: var(--emerald-300);
    border: 1px solid rgba(31, 166, 122, .4);
  }

  .ubind-elementor-page .ov-trow .badge.tier-b {
    background: rgba(97, 197, 255, .18);
    color: var(--sky);
    border: 1px solid rgba(97, 197, 255, .3);
  }

  .ubind-elementor-page .ov-trow .badge.tier-c {
    background: rgba(245, 165, 36, .18);
    color: var(--amber);
    border: 1px solid rgba(245, 165, 36, .3);
  }

  @media (max-width: 720px) {

    .ubind-elementor-page .ov-thead,
    .ubind-elementor-page .ov-trow {
      grid-template-columns: minmax(0, 1.6fr) 80px 90px;
      gap: 6px;
      padding: 10px;
    }

    .ubind-elementor-page .ov-thead .col-gwp,
    .ubind-elementor-page .ov-trow .gwp,
    .ubind-elementor-page .ov-thead .col-tier,
    .ubind-elementor-page .ov-trow .badge {
      display: none;
    }
  }

  /* Phone widths. Freeing the outer track is not enough on its own: the mockup's own
     contents are still laid out for a desktop screen, and would spill out of the card
     instead of past the viewport. Each of these removes one min-content floor. */

  @media (max-width: 540px) {

    .ubind-elementor-page .ov-mockup {
      padding: 16px;
    }

    .ubind-elementor-page .ov-mock-bar {
      gap: 10px;
      padding: 9px 12px;
    }

    /* flex: 1 still floors at "fund.ubind.io"; let the address truncate instead. */
    .ubind-elementor-page .ov-mock-bar .url {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ubind-elementor-page .ov-mock-head {
      flex-wrap: wrap;
      gap: 10px;
    }

    .ubind-elementor-page .ov-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .ubind-elementor-page .ov-kpi {
      padding: 10px 12px;
    }

    .ubind-elementor-page .ov-kpi .val {
      font-size: 20px;
    }

    .ubind-elementor-page .ov-thead {
      font-size: 8.5px;
      letter-spacing: 0.05em;
    }

    .ubind-elementor-page .ov-thead,
    .ubind-elementor-page .ov-trow {
      grid-template-columns: minmax(0, 1fr) 50px 58px;
      gap: 6px;
      padding: 10px 8px;
    }

    .ubind-elementor-page .ov-trow .broker-c {
      gap: 8px;
      min-width: 0;
    }

    .ubind-elementor-page .ov-trow .broker-c .av-b {
      width: 26px;
      height: 26px;
      font-size: 10px;
    }

    /* The name and its sub-line sit in a wrapper span, which is a flex item of
       .broker-c and carries the same automatic minimum. */
    .ubind-elementor-page .ov-trow .broker-c > span:not(.av-b) {
      display: block;
      min-width: 0;
      overflow-wrap: anywhere;
    }
  }

  

  /* ---- stats, testimonial, FAQ base, lead wizard, final CTA, reduced motion ---- */
/* ============================================================
STATS - big counters
============================================================ */

  

  





  

  

  

  

  

  

  /* TESTIMONIAL */

  

  

  

  

  

  

  

  

  

  /* FAQ */

  

  

  



  

  

  

  

  

  

  /* LEAD FORM */



  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  



  

  

  /* FINAL CTA */

  

  

  

  

  

  

  




  /* Elementor wrapper helpers: moved from inline styles in the original file. */






  .ubind-elementor-page .cb-intro {
    font-size: 16px;
    color: var(--ink-500);
    line-height: 1.6;
    margin-bottom: 16px;
  }

  



  /* ---- hero visual: member contribution ring (this page only) ---- */

  /*
    The sibling solution pages each draw their own animated hero graphic in the right-hand
    grid cell. This one shows what a discretionary mutual actually is: members contributing
    into a shared pool, and protection flowing back out. Everything is inline SVG, so there
    is no asset to host and nothing to load.
  */

  .ubind-elementor-page .fund-ring {
    position: relative;
    aspect-ratio: 1;
    max-width: 500px;
    width: 100%;
    margin-inline: auto;
    opacity: 0;
    animation: fadeUp 1.1s .35s var(--ease-out) forwards;
  }

  .ubind-elementor-page .fund-ring .ring-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ubind-elementor-page .fund-ring .orbit {
    fill: none;
    stroke: rgba(255, 255, 255, .1);
    stroke-width: 1;
  }

  .ubind-elementor-page .fund-ring .orbit.spin {
    stroke: rgba(31, 166, 122, .35);
    stroke-dasharray: 5 9;
    transform-origin: 250px 250px;
    animation: fundSpin 46s linear infinite;
  }

  @keyframes fundSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .ubind-elementor-page .fund-ring .spoke {
    stroke: rgba(255, 255, 255, .14);
    stroke-width: 1;
    fill: none;
  }

  /* Contributions travelling inward along each spoke. */
  .ubind-elementor-page .fund-ring .flow {
    fill: var(--emerald-400);
    opacity: .9;
  }

  .ubind-elementor-page .fund-ring .pool {
    fill: url(#fundPool);
    stroke: rgba(31, 166, 122, .5);
    stroke-width: 1.5;
  }

  .ubind-elementor-page .fund-ring .pool-pulse {
    fill: none;
    stroke: rgba(31, 166, 122, .55);
    stroke-width: 1.5;
    transform-origin: 250px 250px;
    animation: poolPulse 3.6s var(--ease-out) infinite;
  }

  @keyframes poolPulse {
    0% {
      transform: scale(1);
      opacity: .55;
    }

    70% {
      transform: scale(1.42);
      opacity: 0;
    }

    100% {
      transform: scale(1.42);
      opacity: 0;
    }
  }

  .ubind-elementor-page .fund-ring .fund-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 168px;
    text-align: center;
    background: linear-gradient(160deg, rgba(15, 28, 23, .97), rgba(8, 17, 14, .97));
    border: 1px solid rgba(31, 166, 122, .38);
    border-radius: 18px;
    padding: 18px 14px;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75);
  }

  .ubind-elementor-page .fund-ring .fund-core .label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    color: var(--emerald-300);
    text-transform: uppercase;
  }

  .ubind-elementor-page .fund-ring .fund-core .ttl {
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    line-height: 1.05;
    margin: 6px 0 4px;
    letter-spacing: -.02em;
  }

  .ubind-elementor-page .fund-ring .fund-core .meta {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
  }

  /* Member nodes pinned around the ring. */
  .ubind-elementor-page .fund-ring .member {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding: 7px 14px 7px 8px;
    backdrop-filter: blur(6px);
    white-space: nowrap;
  }

  .ubind-elementor-page .fund-ring .member .ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(31, 166, 122, .18);
    color: var(--emerald-300);
    flex-shrink: 0;
  }

  .ubind-elementor-page .fund-ring .member .n {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: #fff;
    text-transform: uppercase;
  }

  .ubind-elementor-page .fund-ring .member .v {
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255, 255, 255, .5);
    display: block;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: .04em;
  }

  .ubind-elementor-page .fund-ring .member.m1 {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
  }

  .ubind-elementor-page .fund-ring .member.m2 {
    top: 40%;
    right: -6%;
  }

  .ubind-elementor-page .fund-ring .member.m3 {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
  }

  .ubind-elementor-page .fund-ring .member.m4 {
    top: 40%;
    left: -6%;
  }

  @media (max-width: 1100px) {
    .ubind-elementor-page .fund-ring {
      max-width: 420px;
    }
  }

  @media (max-width: 760px) {

    /* Between tablet and phone the sub-labels are the first thing that has to go. */
    .ubind-elementor-page .fund-ring .member .v {
      display: none;
    }

    .ubind-elementor-page .fund-ring .member {
      padding: 5px 12px 5px 6px;
    }

    .ubind-elementor-page .fund-ring .member.m2 {
      right: -2%;
    }

    .ubind-elementor-page .fund-ring .member.m4 {
      left: -2%;
    }
  }

  @media (max-width: 540px) {

    /*
      The two side pills cannot fit here at any offset. A 320px ring leaves ~130px each side
      of the core, and the shortest label pill is wider than that, so pulling them outward
      clips them against the viewport (measured: 11px off both edges at 375px) and pulling
      them inward puts them on top of the core.

      They are dropped rather than shrunk. Every one of the four - applications,
      contributions, protection, oversight - is already named in the hero tag row directly
      below, so nothing is lost, and the ring reads better as a clean graphic than as four
      colliding labels.
    */
    .ubind-elementor-page .fund-ring {
      max-width: 300px;
    }

    .ubind-elementor-page .fund-ring .member {
      display: none;
    }

    .ubind-elementor-page .fund-ring .fund-core {
      width: 152px;
      padding: 16px 12px;
    }

    .ubind-elementor-page .fund-ring .fund-core .ttl {
      font-size: 23px;
    }
  }

  /* The mock panels are illustrations of a configuration, not reported results. */
  .ubind-elementor-page .mock-note {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-450, rgba(0, 0, 0, .55));
  }

  /* The note exists so nobody reads the mock's sample figures as quoted ones, which makes it
     the one line in these panels that has to survive being quiet. It was rgba(0, 0, 0, .42)
     on both, which is 3.02:1 on the cream contributions panel and 1.07:1 on the near-black
     oversight card - invisible. --ink-450 is the token for any surface that is not pure white;
     on dark the note takes .5 white, the same weight the card already gives "CURRENT PERIOD".
     5.22:1 and 5.29:1, so the same disclaimer reads the same on both. */
  .ubind-elementor-page .contributions .mock-note {
    color: var(--ink-450, #5d6d68);
  }

  .ubind-elementor-page .oversight .mock-note {
    color: rgba(255, 255, 255, .5);
  }