.elementor-1377 .elementor-element.elementor-element-aa5f8ff{--display:flex;}/* Start custom CSS */<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Inter+Tight:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  /* Zero the Elementor section/column/widget wrappers around THIS block only,
     so the navy hero sits flush under the header with no white gap or side gutters.
     Scoped via :has() so it won't touch the rest of the page. */
  .elementor-widget-html:has(.cpartner) .elementor-widget-container,
  .elementor-element:has(> .elementor-widget-container > .cpartner),
  .elementor-element:has(.cpartner) > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  .e-con:has(.cpartner),
  .elementor-section:has(.cpartner),
  .elementor-section:has(.cpartner) > .elementor-container,
  .elementor-section:has(.cpartner) .elementor-column-wrap,
  .elementor-section:has(.cpartner) .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }

  .cpartner {
    --navy: #1E3A8A;
    --navy-deep: #15296B;
    --navy-ink: #0F1E47;
    --sky: #93C5FD;
    --sky-bright: #60A5FA;
    --sky-soft: #DBEAFE;
    --sky-pale: #EFF6FF;
    --ink: #0F1E47;
    --muted: #56648A;
    --line: rgba(30, 58, 138, 0.12);
    --line-strong: rgba(30, 58, 138, 0.20);
    --font-display: 'Fraunces', 'Times New Roman', serif;
    --font-body: 'Inter Tight', system-ui, sans-serif;

    font-family: var(--font-body);
    color: var(--ink);
    position: relative;
    /* Bulletproof full-bleed: break out of any boxed Elementor/theme container */
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    overflow-x: clip;
  }
  .cpartner *, .cpartner *::before, .cpartner *::after { margin: 0; padding: 0; box-sizing: border-box; }

  /* shared inner */
  .cp-wrap { max-width: 1180px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }

  /* shared eyebrow */
  .cp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
  .cp-eyebrow .cp-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
  .cp-eyebrow .cp-rule { width: 40px; height: 1px; flex: none; }
  .cp-sun { width: 26px; height: 18px; flex: none; }

  /* shared buttons — built so the whole surface is always tappable */
  .cp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 30px; border-radius: 100px; text-decoration: none; cursor: pointer;
    font-size: 15px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent;
    position: relative; z-index: 2; -webkit-tap-highlight-color: rgba(147,197,253,0.3);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .cp-btn svg { width: 16px; height: 16px; pointer-events: none; transition: transform 0.3s ease; }
  .cp-btn:hover svg { transform: translateX(3px); }

  /* =====================================================================
     1. HERO  (navy, full-bleed feel via its own dark background)
     ===================================================================== */
  .cp-hero {
    position: relative;
    padding: 104px 32px 92px;
    text-align: center;
    color: #EAF2FF;
    background:
      radial-gradient(ellipse 60% 42% at 75% 30%, rgba(96,165,250,0.24) 0%, transparent 62%),
      radial-gradient(ellipse 58% 40% at 14% 72%, rgba(147,197,253,0.14) 0%, transparent 62%),
      linear-gradient(180deg, #16306e 0%, #102456 52%, #0b1838 100%);
    isolation: isolate;
  }
  .cp-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46.2' viewBox='0 0 40 46.2'%3E%3Cpath d='M20 0L40 11.55L40 34.65L20 46.2L0 34.65L0 11.55Z' fill='none' stroke='%2360a5fa' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 40px 46.2px;
    -webkit-mask-image: radial-gradient(ellipse 88% 60% at 50% 36%, #000 0%, transparent 74%);
            mask-image: radial-gradient(ellipse 88% 60% at 50% 36%, #000 0%, transparent 74%);
  }
  .cp-hero .cp-eyebrow .cp-kicker { color: var(--sky); }
  .cp-hero .cp-eyebrow .cp-rule:first-child { background: linear-gradient(90deg, transparent, rgba(147,197,253,0.5)); }
  .cp-hero .cp-eyebrow .cp-rule:last-child  { background: linear-gradient(90deg, rgba(147,197,253,0.5), transparent); }

  .cp-hero-title {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(42px, 5.6vw, 72px);
    line-height: 1.02; letter-spacing: -0.028em; color: #fff; max-width: 880px; margin: 0 auto 22px;
  }
  .cp-hero-title em {
    font-style: italic; font-weight: 400;
    background: linear-gradient(110deg, var(--sky) 0%, #fff 50%, var(--sky) 100%);
    background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: cp-shimmer 7s ease-in-out infinite;
  }
  .cp-hero-lead { font-size: 18px; line-height: 1.62; color: rgba(214,228,255,0.82); max-width: 620px; margin: 0 auto; }
  .cp-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
  .cp-btn-light { background: #fff; color: var(--navy-deep); box-shadow: 0 16px 36px -14px rgba(0,0,0,0.55); }
  .cp-btn-light:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -16px rgba(0,0,0,0.65); }
  .cp-btn-ghost { background: rgba(255,255,255,0.06); color: #EAF2FF; border-color: rgba(147,197,253,0.4); }
  .cp-btn-ghost:hover { background: rgba(147,197,253,0.14); transform: translateY(-2px); }

  /* value badges */
  .cp-badges {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    max-width: 920px; margin: 56px auto 0;
  }
  .cp-badge {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 22px 16px; border-radius: 18px;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(147,197,253,0.20);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .cp-badge-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(147,197,253,0.22), rgba(96,165,250,0.10)); border: 1px solid rgba(147,197,253,0.28); }
  .cp-badge-ico svg { width: 21px; height: 21px; stroke: var(--sky); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-badge b { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: 0.01em; }

  /* =====================================================================
     2. INTRO  (light)
     ===================================================================== */
  .cp-intro { padding: 92px 32px; background: var(--sky-pale); }
  .cp-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .cp-intro .cp-eyebrow .cp-kicker { color: var(--navy); }
  .cp-intro .cp-eyebrow .cp-rule { background: linear-gradient(90deg, rgba(30,58,138,0.4), transparent); }
  .cp-intro h2 {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.08; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 18px;
  }
  .cp-intro p { font-size: 16.5px; line-height: 1.66; color: var(--muted); max-width: 520px; }
  .cp-intro p + p { margin-top: 16px; }
  .cp-intro-visual {
    position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden;
    background: linear-gradient(135deg, var(--sky-soft), #fff);
    box-shadow: 0 30px 70px -34px rgba(15,30,71,0.4);
    border: 1px solid var(--line);
  }
  .cp-intro-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cp-intro-chip {
    position: absolute; left: 20px; bottom: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line); box-shadow: 0 14px 34px -14px rgba(15,30,71,0.35);
  }
  .cp-intro-chip svg { width: 18px; height: 18px; stroke: var(--navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cp-intro-chip b { font-size: 13.5px; font-weight: 600; color: var(--ink); }

  /* =====================================================================
     3. TWO PATHS  (light)
     ===================================================================== */
  .cp-paths-sec { padding: 96px 32px; background: #fff; }
  .cp-head-center { text-align: center; max-width: 640px; margin: 0 auto 52px; }
  .cp-head-center .cp-eyebrow { justify-content: center; }
  .cp-head-center .cp-eyebrow .cp-kicker { color: var(--navy); }
  .cp-head-center .cp-eyebrow .cp-rule:first-child { background: linear-gradient(90deg, transparent, rgba(30,58,138,0.4)); }
  .cp-head-center .cp-eyebrow .cp-rule:last-child  { background: linear-gradient(90deg, rgba(30,58,138,0.4), transparent); }
  .cp-head-center h2 {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 48px);
    line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 14px;
  }
  .cp-head-center p { font-size: 16.5px; line-height: 1.6; color: var(--muted); }

  .cp-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 960px; margin: 0 auto; }
  .cp-path {
    position: relative; border-radius: 26px; padding: 38px 34px;
    border: 1px solid var(--line-strong); background: #fff;
    display: flex; flex-direction: column;
    box-shadow: 0 18px 50px -34px rgba(15,30,71,0.3);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .cp-path:hover { transform: translateY(-4px); box-shadow: 0 30px 64px -34px rgba(15,30,71,0.42); border-color: var(--sky-bright); }
  .cp-path.is-featured {
    background: linear-gradient(168deg, var(--sky-pale) 0%, #fff 60%);
    border-color: var(--sky-bright);
  }
  .cp-path-tag {
    position: absolute; top: 24px; right: 26px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff; background: var(--navy); padding: 6px 13px; border-radius: 100px;
  }
  .cp-path-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(145deg, var(--sky-pale), #fff); border: 1px solid var(--line); }
  .cp-path-ico svg { width: 27px; height: 27px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-path h3 { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.015em; }
  .cp-path-sub { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
  .cp-path-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .cp-path-price .cp-price-num { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
  .cp-path-price .cp-price-term { font-size: 13px; font-weight: 500; color: var(--muted); }
  .cp-path-list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; flex: 1; }
  .cp-path-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
  .cp-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; margin-top: 1px; }
  .cp-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .cp-path.is-featured .cp-check { background: linear-gradient(145deg, var(--navy), var(--sky-bright)); }
  .cp-path .cp-btn-fill { background: var(--navy); color: #fff; box-shadow: 0 14px 30px -12px rgba(30,58,138,0.5); width: 100%; }
  .cp-path .cp-btn-fill:hover { background: var(--navy-deep); transform: translateY(-2px); }
  .cp-path .cp-btn-outline { background: #fff; color: var(--navy); border-color: var(--line-strong); width: 100%; }
  .cp-path .cp-btn-outline:hover { background: var(--sky-pale); border-color: var(--sky-bright); transform: translateY(-2px); }
  .cp-path-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 14px; text-align: center; }

  /* =====================================================================
     4. PERKS GRID  (navy)
     ===================================================================== */
  .cp-perks { padding: 96px 32px; position: relative; color: #EAF2FF;
    background:
      radial-gradient(ellipse 50% 40% at 82% 20%, rgba(96,165,250,0.18) 0%, transparent 60%),
      linear-gradient(180deg, #0e2050 0%, #0b1838 100%);
  }
  .cp-perks .cp-head-center h2 { color: #fff; }
  .cp-perks .cp-head-center p { color: rgba(214,228,255,0.78); }
  .cp-perks .cp-head-center .cp-eyebrow .cp-kicker { color: var(--sky); }
  .cp-perks .cp-head-center .cp-eyebrow .cp-rule:first-child { background: linear-gradient(90deg, transparent, rgba(147,197,253,0.5)); }
  .cp-perks .cp-head-center .cp-eyebrow .cp-rule:last-child  { background: linear-gradient(90deg, rgba(147,197,253,0.5), transparent); }

  /* Division of labor: two panels with a handoff arrow between them */
  .cp-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; max-width: 1020px; margin: 0 auto 52px; align-items: stretch; }
  .cp-split-panel { border-radius: 22px; padding: 34px 32px; border: 1px solid rgba(147,197,253,0.20); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .cp-split-panel.is-you { background: rgba(255,255,255,0.04); }
  .cp-split-panel.is-celara { background: linear-gradient(165deg, rgba(96,165,250,0.16), rgba(21,41,107,0.28)); border-color: rgba(147,197,253,0.42); }
  .cp-split-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); margin-bottom: 6px; }
  .cp-split-panel h4 { font-family: var(--font-display); font-weight: 500; font-size: 23px; color: #fff; margin-bottom: 20px; letter-spacing: -0.015em; line-height: 1.15; }
  .cp-split-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .cp-split-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #EAF2FF; }
  .cp-split-list .cp-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: rgba(147,197,253,0.18); border: 1px solid rgba(147,197,253,0.35); }
  .cp-split-list .cp-dot svg { width: 11px; height: 11px; stroke: var(--sky); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .cp-split-arrow { display: flex; align-items: center; justify-content: center; padding: 0 22px; }
  .cp-split-arrow span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(147,197,253,0.12); border: 1px solid rgba(147,197,253,0.3); }
  .cp-split-arrow svg { width: 22px; height: 22px; stroke: var(--sky); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* Client-app strip: what the referral actually gets */
  .cp-appstrip { max-width: 1020px; margin: 0 auto; padding: 32px 34px; border-radius: 22px; border: 1px solid rgba(147,197,253,0.22); background: rgba(255,255,255,0.045); }
  .cp-appstrip-head { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: rgba(214,228,255,0.78); margin-bottom: 22px; text-align: center; }
  .cp-appstrip-head b { color: #fff; }
  .cp-appstrip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .cp-appfeat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 12px; border-radius: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(147,197,253,0.14); }
  .cp-appfeat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(147,197,253,0.22), rgba(96,165,250,0.10)); border: 1px solid rgba(147,197,253,0.28); }
  .cp-appfeat-ico svg { width: 20px; height: 20px; stroke: var(--sky); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-appfeat b { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.3; }
  .cp-appfeat span { font-size: 12px; line-height: 1.45; color: rgba(214,228,255,0.7); }
  .cp-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
  .cp-cat { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--sky); padding: 6px 13px; border-radius: 100px; background: rgba(147,197,253,0.10); border: 1px solid rgba(147,197,253,0.24); }

  /* =====================================================================
     5. PROCESS  (light) — a real 4-step sequence, numbering earns its place
     ===================================================================== */
  .cp-process { padding: 96px 32px; background: var(--sky-pale); }
  .cp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
  .cp-step { position: relative; padding: 30px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 44px -34px rgba(15,30,71,0.4); }
  .cp-step-num { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: #fff; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; margin-bottom: 18px; }
  .cp-step:nth-child(4) .cp-step-num { background: linear-gradient(145deg, var(--navy), var(--sky-bright)); }
  .cp-step h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
  .cp-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

  /* =====================================================================
     6. VALUES  (light)
     ===================================================================== */
  .cp-values { padding: 96px 32px 100px; background: #fff; }
  .cp-val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1020px; margin: 0 auto; }
  .cp-val { padding: 34px 30px; border-radius: 22px; background: var(--sky-pale); border: 1px solid var(--line); }
  .cp-val-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: #fff; border: 1px solid var(--line); }
  .cp-val-ico svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cp-val h4 { font-family: var(--font-display); font-weight: 500; font-size: 21px; color: var(--ink); margin-bottom: 9px; letter-spacing: -0.01em; }
  .cp-val p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

  /* =====================================================================
     7. FAQ  (light)
     ===================================================================== */
  .cp-faq { padding: 0 32px 100px; background: #fff; }
  .cp-faq-list { max-width: 780px; margin: 0 auto; }
  .cp-faq-item { border-bottom: 1px solid var(--line); }
  .cp-faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 4px; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink);
  }
  .cp-faq-q .cp-faq-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; }
  .cp-faq-q .cp-faq-icon svg { width: 12px; height: 12px; stroke: var(--navy); fill: none; stroke-width: 2.4; stroke-linecap: round; }
  .cp-faq-item.is-open .cp-faq-icon { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); }
  .cp-faq-item.is-open .cp-faq-icon svg { stroke: #fff; }
  .cp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); }
  .cp-faq-a-inner { padding: 0 4px 24px; font-size: 15px; line-height: 1.65; color: var(--muted); }

  /* =====================================================================
     8. CLOSING CTA  (navy)
     ===================================================================== */
  .cp-close { padding: 96px 32px 104px; text-align: center; position: relative; color: #EAF2FF;
    background:
      radial-gradient(ellipse 56% 50% at 50% 30%, rgba(96,165,250,0.22) 0%, transparent 62%),
      linear-gradient(180deg, #102456 0%, #0b1838 100%);
  }
  .cp-close-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; }
  .cp-close h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 48px); color: #fff; letter-spacing: -0.022em; margin-bottom: 16px; }
  .cp-close p { font-size: 16.5px; line-height: 1.6; color: rgba(214,228,255,0.82); margin-bottom: 30px; }
  .cp-disclaimer { margin-top: 40px; font-size: 12px; line-height: 1.6; color: rgba(214,228,255,0.5); max-width: 660px; margin-left: auto; margin-right: auto; }
  .cp-disclaimer a { color: rgba(147,197,253,0.8); }

  /* =====================================================================
     RESPONSIVE
     ===================================================================== */
  @media (max-width: 960px) {
    .cp-badges { grid-template-columns: repeat(2, 1fr); }
    .cp-split { grid-template-columns: 1fr; gap: 16px; }
    .cp-split-arrow { padding: 4px 0; transform: rotate(90deg); }
    .cp-appstrip-grid { grid-template-columns: repeat(2, 1fr); }
    .cp-val-grid { grid-template-columns: 1fr; max-width: 520px; }
    .cp-steps { grid-template-columns: repeat(2, 1fr); }
    .cp-intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .cp-intro-visual { max-width: 420px; margin: 0 auto; }
  }
  @media (max-width: 720px) {
    .cp-hero { padding: 80px 20px 72px; }
    .cp-intro, .cp-paths-sec, .cp-perks, .cp-process, .cp-values { padding: 68px 20px; }
    .cp-faq { padding: 0 20px 72px; }
    .cp-close { padding: 72px 20px 84px; }
    .cp-paths { grid-template-columns: 1fr; }
    .cp-appstrip-grid { grid-template-columns: 1fr; }
    .cp-appstrip { padding: 26px 20px; }
    .cp-split-panel { padding: 28px 24px; }
    .cp-steps { grid-template-columns: 1fr; }
    .cp-hero-cta { flex-direction: column; }
    .cp-hero-cta .cp-btn { width: 100%; }
  }
  @media (max-width: 440px) {
    .cp-badges { grid-template-columns: 1fr 1fr; }
  }

  @keyframes cp-shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @media (prefers-reduced-motion: reduce) {
    .cpartner *, .cpartner *::before, .cpartner *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
</style>

<div class="cpartner">

  <!-- reusable dawn sun -->
  <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs><linearGradient id="cpDawnL" x1="13" y1="8" x2="13" y2="14" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#DBEAFE"/><stop offset=".55" stop-color="#93C5FD"/><stop offset="1" stop-color="#60A5FA"/></linearGradient></defs></svg>

  <!-- ============ 1. HERO ============ -->
  <section class="cp-hero">
    <div class="cp-wrap">
      <span class="cp-eyebrow">
        <span class="cp-rule"></span>
        <svg class="cp-sun" viewBox="0 0 26 18" fill="none" aria-hidden="true"><path d="M7.5 14C7.5 8 18.5 8 18.5 14Z" fill="url(#cpDawnL)"/><g stroke="#93C5FD" stroke-width="1.5" stroke-linecap="round"><path d="M1 14H7M19 14H25"/><path d="M13 7V2.5M8 8.4 5.8 6.2M18 8.4 20.2 6.2"/></g></svg>
        <span class="cp-kicker">The Celara Partner Program</span>
        <span class="cp-rule"></span>
      </span>
      <h1 class="cp-hero-title">Where purpose meets <em>opportunity.</em></h1>
      <p class="cp-hero-lead">Build something meaningful by connecting people to guided, responsible care — and earn as you grow. No inventory. No kits. No medical license required.</p>
      <div class="cp-hero-cta">
        <a class="cp-btn cp-btn-light" href="#cp-paths">Become a Partner <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        <a class="cp-btn cp-btn-ghost" href="#cp-how">How it works</a>
      </div>

      <div class="cp-badges">
        <div class="cp-badge">
          <span class="cp-badge-ico"><svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h3"/></svg></span>
          <b>Modern telehealth platform</b>
        </div>
        <div class="cp-badge">
          <span class="cp-badge-ico"><svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"/><path d="M15 11a3 3 0 1 0-2-5.2"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5M16 20c0-2-1-3.5-2.5-4.3"/></svg></span>
          <b>Community-powered growth</b>
        </div>
        <div class="cp-badge">
          <span class="cp-badge-ico"><svg viewBox="0 0 24 24"><path d="M4 16l5-5 4 3 7-8"/><path d="M16 6h4v4"/></svg></span>
          <b>Transparent compensation</b>
        </div>
        <div class="cp-badge">
          <span class="cp-badge-ico"><svg viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
          <b>Provider-guided &amp; compliant</b>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 2. INTRO ============ -->
  <section class="cp-intro">
    <div class="cp-wrap">
      <div class="cp-intro-grid">
        <div class="cp-intro-text">
          <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">Built for impact</span></span>
          <h2>Opportunity, rooted in responsible care.</h2>
          <p>Celara partners with individuals and businesses who value clarity, integrity, and long-term health outcomes — not volume or hype. This is a place where growth is supported by community and success is built on trust.</p>
          <p>Whether you're joining as an individual or expanding what you already offer as a practice, Celara gives you a modern platform designed for connection, flexibility, and lasting growth.</p>
        </div>
        <div class="cp-intro-visual">
          <img src="https://celaramed.com/wp-content/uploads/2026/05/DSC0544-scaled.jpeg" alt="A Celara Med partner" loading="lazy">
          <div class="cp-intro-chip">
            <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
            <b>No inventory. No shipping. No headaches.</b>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 3. TWO PATHS ============ -->
  <section class="cp-paths-sec" id="cp-paths">
    <div class="cp-wrap">
      <div class="cp-head-center">
        <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">Two ways to partner</span><span class="cp-rule"></span></span>
        <h2>Choose the path that fits you.</h2>
        <p>Join as an individual brand partner or bring Celara into your business. Both come with the tools, training, and support to grow with confidence.</p>
      </div>

      <div class="cp-paths">
        <!-- Individual -->
        <div class="cp-path">
          <span class="cp-path-ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M5 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
          <h3>Brand Partner</h3>
          <p class="cp-path-sub">For coaches, creators, and individuals who want to share a trusted approach to wellness and earn as they grow.</p>
          <div class="cp-path-price"><span class="cp-price-num">$99</span><span class="cp-price-term">one-time enrollment</span></div>
          <ul class="cp-path-list">
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Earn referral compensation on every order</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Your own personal partner site</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Approved marketing materials &amp; tools</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Onboarding, training &amp; community support</li>
          </ul>
          <a class="cp-btn cp-btn-outline" href="{{ENROLL_URL}}" target="_blank" rel="noopener">Join as an individual <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
          <p class="cp-path-note">Once you earn commissions, you'll be asked to provide your Social Security Number for tax reporting.</p>
        </div>

        <!-- Business -->
        <div class="cp-path is-featured">
          <span class="cp-path-tag">Most popular</span>
          <span class="cp-path-ico"><svg viewBox="0 0 24 24"><path d="M3 21h18M5 21V8l7-4 7 4v13M9 21v-6h6v6"/></svg></span>
          <h3>Business Partner</h3>
          <p class="cp-path-sub">For gyms, med-spas, providers, and wellness businesses ready to add a turnkey telehealth offer to their practice.</p>
          <div class="cp-path-price"><span class="cp-price-num">$99</span><span class="cp-price-term">one-time enrollment</span></div>
          <ul class="cp-path-list">
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Everything in Brand Partner, plus more</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>A turnkey telehealth business, ready to go</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Backed by a physician network &amp; 503A pharmacy</li>
            <li><span class="cp-check"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Structured onboarding for your team</li>
          </ul>
          <a class="cp-btn cp-btn-fill" href="{{ENROLL_URL}}" target="_blank" rel="noopener">Join as a business <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
          <p class="cp-path-note">Once you earn commissions, you'll be asked to provide your business tax identification number.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 4. DIVISION OF LABOR ============ -->
  <section class="cp-perks">
    <div class="cp-wrap">
      <div class="cp-head-center">
        <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">Where you fit in</span><span class="cp-rule"></span></span>
        <h2>You coach. We handle the medicine.</h2>
        <p>The hardest part of any result is what happens between check-ins. You own the relationship and the accountability — Celara brings the providers, the pharmacy, and the platform that keeps clients on track.</p>
      </div>

      <div class="cp-split">
        <div class="cp-split-panel is-you">
          <div class="cp-split-label">You bring</div>
          <h4>The trust you've already earned.</h4>
          <ul class="cp-split-list">
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>The relationship — clients who already listen to you</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Goal-setting and real accountability</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>The day-to-day coaching no clinician has time for</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>A simple referral when a client's ready</li>
          </ul>
        </div>

        <div class="cp-split-arrow"><span><svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7"/></svg></span></div>

        <div class="cp-split-panel is-celara">
          <div class="cp-split-label">Celara brings</div>
          <h4>The clinical engine behind it.</h4>
          <ul class="cp-split-list">
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Provider-reviewed care through a physician network</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Dispensing &amp; delivery from a 503A pharmacy</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>The all-in-one client app that does the in-between work</li>
            <li><span class="cp-dot"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></span>Transparent, tracked payouts on every order</li>
          </ul>
        </div>
      </div>

      <div class="cp-appstrip">
        <div class="cp-appstrip-head">When you refer someone, <b>here's what they actually get</b> — not just a prescription, a whole system:</div>
        <div class="cp-appstrip-grid">
          <div class="cp-appfeat">
            <span class="cp-appfeat-ico"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg></span>
            <b>Live provider care</b>
            <span>On-demand telehealth visits, 7 days a week</span>
          </div>
          <div class="cp-appfeat">
            <span class="cp-appfeat-ico"><svg viewBox="0 0 24 24"><path d="M6 7v10M6 7a3 3 0 0 1 6 0M18 7v10M18 7a3 3 0 0 0-6 0M6 12h12"/></svg></span>
            <b>Built-in workouts</b>
            <span>Structured programming for any goal</span>
          </div>
          <div class="cp-appfeat">
            <span class="cp-appfeat-ico"><svg viewBox="0 0 24 24"><path d="M5 19c8 1 14-5 14-14C10 4 4 10 5 19Z"/><path d="M5 19c3-5 6-7 10-9"/></svg></span>
            <b>Nutrition &amp; meal plans</b>
            <span>Recipes, macros, and habit tracking</span>
          </div>
          <div class="cp-appfeat">
            <span class="cp-appfeat-ico"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg></span>
            <b>Accountability that sticks</b>
            <span>Daily check-ins that keep clients on track</span>
          </div>
        </div>
        <div class="cp-cats">
          <span class="cp-cat">Weight Loss</span>
          <span class="cp-cat">Longevity</span>
          <span class="cp-cat">Hormones / HRT</span>
          <span class="cp-cat">Sexual Health</span>
          <span class="cp-cat">Skin &amp; Hair</span>
          <span class="cp-cat">Microdose</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 5. PROCESS ============ -->
  <section class="cp-process" id="cp-how">
    <div class="cp-wrap">
      <div class="cp-head-center">
        <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">How it works</span><span class="cp-rule"></span></span>
        <h2>From application to earning, simply.</h2>
        <p>A clear, structured path — built on trust and shared responsibility.</p>
      </div>

      <div class="cp-steps">
        <div class="cp-step">
          <span class="cp-step-num">01</span>
          <h4>Apply to partner</h4>
          <p>Submit a brief application so we can understand your background and alignment with Celara's values.</p>
        </div>
        <div class="cp-step">
          <span class="cp-step-num">02</span>
          <h4>Partner review</h4>
          <p>Each application is reviewed to make sure the partnership is a good fit on both sides.</p>
        </div>
        <div class="cp-step">
          <span class="cp-step-num">03</span>
          <h4>Share responsibly</h4>
          <p>Once approved, refer people to Celara using approved materials and clear guidelines.</p>
        </div>
        <div class="cp-step">
          <span class="cp-step-num">04</span>
          <h4>Celara handles the rest</h4>
          <p>Medical intake, provider review, care decisions, fulfillment, and follow-up are all managed by Celara.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 6. VALUES ============ -->
  <section class="cp-values">
    <div class="cp-wrap">
      <div class="cp-head-center">
        <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">What we stand for</span><span class="cp-rule"></span></span>
        <h2>Clarity, rigor, and momentum.</h2>
      </div>

      <div class="cp-val-grid">
        <div class="cp-val">
          <span class="cp-val-ico"><svg viewBox="0 0 24 24"><path d="M7.5 16C7.5 10 16.5 10 16.5 16Z"/><path d="M2 16h4M18 16h4M12 9V5M6.5 10.5 4.5 8.5M17.5 10.5 19.5 8.5"/></svg></span>
          <h4>Clarity</h4>
          <p>No hype, no fine-print games. People always know what they're getting, what it costs, and what comes next.</p>
        </div>
        <div class="cp-val">
          <span class="cp-val-ico"><svg viewBox="0 0 24 24"><path d="M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg></span>
          <h4>Rigor</h4>
          <p>Every plan is provider-reviewed and backed by a physician network and 503A pharmacy — so partners can stand behind what they share.</p>
        </div>
        <div class="cp-val">
          <span class="cp-val-ico"><svg viewBox="0 0 24 24"><path d="M4 16l5-5 4 3 7-8"/><path d="M16 6h4v4"/></svg></span>
          <h4>Momentum</h4>
          <p>Health is built one consistent day at a time. We give partners the tools, training, and accountability to keep people moving forward.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 7. FAQ ============ -->
  <section class="cp-faq">
    <div class="cp-wrap">
      <div class="cp-head-center">
        <span class="cp-eyebrow"><span class="cp-rule"></span><span class="cp-kicker">Questions &amp; answers</span><span class="cp-rule"></span></span>
        <h2>Frequently asked questions</h2>
      </div>

      <div class="cp-faq-list">
        <div class="cp-faq-item">
          <button class="cp-faq-q">Do I need to be a licensed medical provider to join?<span class="cp-faq-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></span></button>
          <div class="cp-faq-a"><div class="cp-faq-a-inner">No. You don't need a medical license to become a Brand Partner or Business Partner. Celara works with a physician network and 503A pharmacy for medical oversight and fulfillment. Partners focus on education, connection, and referral within clear guidelines.</div></div>
        </div>
        <div class="cp-faq-item">
          <button class="cp-faq-q">How do I earn as a partner?<span class="cp-faq-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></span></button>
          <div class="cp-faq-a"><div class="cp-faq-a-inner">Partners earn referral compensation tied to completed purchases, with additional incentives available based on participation and performance. Full details are outlined in the Compensation Plan. Earnings are based on individual effort and are not guaranteed.</div></div>
        </div>
        <div class="cp-faq-item">
          <button class="cp-faq-q">What support will I receive?<span class="cp-faq-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></span></button>
          <div class="cp-faq-a"><div class="cp-faq-a-inner">Structured onboarding, ongoing training, marketing materials, and a personal partner site. Support is built into every stage — whether you're just getting started or expanding your involvement.</div></div>
        </div>
        <div class="cp-faq-item">
          <button class="cp-faq-q">Do I have to handle inventory or shipping?<span class="cp-faq-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></span></button>
          <div class="cp-faq-a"><div class="cp-faq-a-inner">No. There's nothing to buy, store, or ship. Celara handles dispensing, fulfillment, and delivery behind the scenes, so you can focus on connecting with people.</div></div>
        </div>
        <div class="cp-faq-item">
          <button class="cp-faq-q">How does Celara fit into my existing business?<span class="cp-faq-icon"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></span></button>
          <div class="cp-faq-a"><div class="cp-faq-a-inner">Business Partners get a turnkey system with onboarding support and professional materials designed for real practices. You can introduce Celara into your existing services with training and tools that streamline rollout and ongoing engagement.</div></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ 8. CLOSING ============ -->
  <section class="cp-close">
    <div class="cp-close-inner">
      <h2>Ready to begin?</h2>
      <p>Apply in minutes. We'll walk you through setup, training, and your first steps — so you're never doing it alone.</p>
      <a class="cp-btn cp-btn-light" href="{{ENROLL_URL}}" target="_blank" rel="noopener">Apply to become a partner <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
      <p class="cp-disclaimer">Earnings depend on individual effort, skill, and time invested, and are not guaranteed. Becoming a partner is an opportunity, not a promise of income. Please review the full <a href="https://celaramed.com/celara-med-independent-contractor-agreement/">Partner Agreement</a> and Income Disclosure before enrolling.</p>
    </div>
  </section>

</div>

<script>
(function(){
  // FAQ accordion
  document.querySelectorAll('.cpartner .cp-faq-item').forEach(function(item){
    var q = item.querySelector('.cp-faq-q');
    var a = item.querySelector('.cp-faq-a');
    q.addEventListener('click', function(){
      var open = item.classList.contains('is-open');
      // close others
      item.parentElement.querySelectorAll('.cp-faq-item.is-open').forEach(function(other){
        if (other !== item) { other.classList.remove('is-open'); other.querySelector('.cp-faq-a').style.maxHeight = null; }
      });
      if (open) { item.classList.remove('is-open'); a.style.maxHeight = null; }
      else { item.classList.add('is-open'); a.style.maxHeight = a.scrollHeight + 'px'; }
    });
  });

  // Smooth-scroll for in-page anchors
  document.querySelectorAll('.cpartner a[href^="#cp-"]').forEach(function(link){
    link.addEventListener('click', function(e){
      var target = document.querySelector(link.getAttribute('href'));
      if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    });
  });
})();
</script>/* End custom CSS */