/* Auto-generated from mockup/pomifera-join.html — do not edit by hand */

/* Join page — scoped under .join to avoid leaking into other pages */
    .join {
      --pom-cream:      #F5F1EA;
      --pom-olive:      #6F7F4F;
      --pom-olive-dark: #5A6A40;
      --pom-deep-green: #2F4A3C;
      --pom-text:       #1A1A1A;
      --pom-muted:      #6D6D6D;
      --pom-yellow:     #C8A95B;
      --pom-border:     #E6DECF;
      color: var(--pom-text);
      font-family: 'Inter', sans-serif;
      background: #f8f6f2;
    }
    .join h1, .join h2, .join h3, .join h4, .join h5, .join h6, .join .serif {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-weight: 400;
      letter-spacing: -0.005em;
    }
    .join .btn-pom {
      background: var(--pom-olive); color: #fff; border: 0; border-radius: 0;
      padding: .95rem 2.2rem; letter-spacing: .18em; font-size: .72rem; font-weight: 500;
      text-transform: uppercase; transition: background .2s;
    }
    .join .btn-pom:hover { background: var(--pom-olive-dark); color: #fff; }
    .join .btn-pom-light {
      background: transparent; color: #fff; border: 2px solid #fff; border-radius: 0;
      padding: .95rem 2.2rem; letter-spacing: .18em; font-size: .72rem; font-weight: 500;
      text-transform: uppercase; transition: background .2s, color .2s;
    }
    .join .btn-pom-light:hover { background: #fff; color: var(--pom-deep-green); }

    /* Section 1 — Hero */
    .j-hero {
      position: relative;
      min-height: clamp(420px, 65vh, 720px);
      background-image: url('/wp-content/uploads/2026/05/pomifera-partner.webp');
      background-size: cover;
      background-position: center;
      display: flex; align-items: center; justify-content: center;
      color: #fff; text-align: center;
    }
    .j-hero::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.55));
    }
    .j-hero .container { position: relative; z-index: 2; padding: 6rem 1rem; }
    .j-hero .eyebrow {
      font-size: .85rem; letter-spacing: .35em; text-transform: uppercase;
      color: rgba(255,255,255,.92); margin-bottom: 1.25rem; font-weight: 500;
    }
    .j-hero h1 {
      font-size: clamp(2.5rem, 6vw, 5.25rem);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin: 0;
      color: #fff;
    }

    /* Section 2 — Intro headline (centered) */
    .j-intro { padding: clamp(4rem, 7vw, 6rem) 0; background: #fff; }
    .j-intro h2 {
      font-size: clamp(2rem, 3.5vw, 3rem);
      color: var(--pom-deep-green);
      line-height: 1.25;
      max-width: 28ch; margin: 0 auto;
    }

    /* Section 2.b — Compensation Plan (copy left, image right) */
    .j-comp { padding: clamp(4rem, 8vw, 7rem) 0; background: #fff; }
    .j-comp h2 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      color: var(--pom-deep-green);
      margin-bottom: 2rem;
      line-height: 1.2;
    }
    .j-comp .perks-list { list-style: none; padding: 0; margin: 0; }
    .j-comp .perks-list li {
      display: flex; align-items: flex-start; gap: .9rem;
      padding: .85rem 0;
      border-bottom: 1px solid var(--pom-border);
      font-size: 1rem; line-height: 1.6;
    }
    .j-comp .perks-list li:last-child { border-bottom: 0; }
    .j-comp .perks-list .bi {
      color: var(--pom-olive); font-size: 1.15rem; flex-shrink: 0; margin-top: .15rem;
    }
    .j-comp .comp-shot {
      width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px;
    }

    /* Section 3 — What's in My Box (US + Canada) */
    .j-box { padding: clamp(4rem, 8vw, 7rem) 0; background: #fff; }
    .j-box .section-title {
      text-align: center; margin-bottom: 2rem;
      font-size: clamp(2rem, 4vw, 3rem); color: var(--pom-deep-green);
    }
    /* CSS-only toggle (no JS): hidden checkbox drives sibling visibility */
    .j-box-toggle-wrap { display: flex; justify-content: center; margin-bottom: 3rem; }
    .j-toggle-input {
      position: absolute; opacity: 0; pointer-events: none;
      width: 0; height: 0;
    }
    .j-toggle {
      display: inline-flex;
      background: var(--pom-cream);
      border-radius: 999px;
      padding: .35rem;
      cursor: pointer;
      user-select: none;
    }
    .j-toggle-option {
      padding: .65rem 1.6rem;
      border-radius: 999px;
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--pom-muted);
      background: transparent;
      transition: background-color .25s ease, color .25s ease;
    }
    /* Active option gets the green pill — width tracks the text length. */
    .j-toggle-input:not(:checked) ~ .j-box-pair .j-box-ca { display: none; }
    .j-toggle-input:not(:checked) ~ .j-box-toggle-wrap .j-toggle-us {
      background: var(--pom-olive); color: #fff;
    }
    .j-toggle-input:checked ~ .j-box-pair .j-box-us { display: none; }
    .j-toggle-input:checked ~ .j-box-toggle-wrap .j-toggle-ca {
      background: var(--pom-olive); color: #fff;
    }
    .j-toggle-input:focus-visible ~ .j-box-toggle-wrap .j-toggle {
      outline: 2px solid var(--pom-olive); outline-offset: 3px;
    }

    .j-box-pair { max-width: 980px; margin: 0 auto; }
    .j-box-card {
      width: 100%;
      background: #fff; border-radius: 2px; overflow: hidden;
      display: flex; align-items: stretch; gap: 2rem;
    }
    .j-box-card .box-img {
      flex: 0 0 50%; width: 50%;
      height: 100%; object-fit: contain; display: block;
    }
    .j-box-card .box-body { flex: 1; padding: 1.5rem 1.75rem; }
    @media (max-width: 767.98px) {
      .j-box-card { flex-direction: column; gap: 0; }
      .j-box-card .box-img { flex: 0 0 auto; width: 100%; height: auto; }
      .j-box-card .box-body { padding: 1.5rem 1.25rem; }
    }
    .j-box-card .box-region {
      font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
      color: var(--pom-olive); font-weight: 500; margin-bottom: .5rem;
    }
    .j-box-card .box-value {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--pom-deep-green);
      margin-bottom: 1.25rem; line-height: 1.2;
    }
    .j-box-card ul {
      list-style: none; padding: 0; margin: 0;
      font-size: .92rem; line-height: 1.65; color: var(--pom-text);
    }
    .j-box-card ul li {
      padding: .35rem 0;
      border-bottom: 1px dashed var(--pom-border);
    }
    .j-box-card ul li:last-child { border-bottom: 0; }

    /* Section 4 — Your Virtual Business */
    .j-virtual { padding: clamp(4rem, 8vw, 7rem) 0; background: #eff0ec; }
    .j-virtual .section-title {
      text-align: center; margin-bottom: 3.5rem;
      font-size: clamp(2rem, 4vw, 3rem); color: var(--pom-deep-green);
    }
    .j-step {
      text-align: center;
      background: #fff;
      padding: 0 1.5rem 2rem;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      overflow: hidden;
    }
    .j-step .step-img {
      max-width: none;
      width: calc(100% + 3rem);
      margin: 0 -1.5rem 1.5rem;
      aspect-ratio: 3/2; object-fit: cover;
      display: block;
    }
    .j-step .step-label {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-size: clamp(1.75rem, 3vw, 2.25rem);
      color: var(--pom-olive); margin-bottom: 1rem;
    }
    .j-step p { line-height: 1.75; color: var(--pom-text); font-size: .98rem; margin: 0; }

    /* Section 5 — Reasons (text left, image right) */
    .j-reasons { padding: clamp(4rem, 8vw, 7rem) 0; background: #fff; }
    .j-reasons h2 {
      color: var(--pom-deep-green);
      font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 2rem;
      line-height: 1.2;
    }
    .j-reasons ul {
      list-style: none; padding: 0; margin: 0 0 2rem;
    }
    .j-reasons ul li {
      display: flex; align-items: flex-start; gap: .85rem;
      padding: .85rem 0; border-bottom: 1px solid var(--pom-border);
      color: var(--pom-text); font-size: 1rem; line-height: 1.6;
    }
    .j-reasons ul li:last-child { border-bottom: 0; }
    .j-reasons ul .bi {
      color: var(--pom-olive); font-size: 1.05rem; flex-shrink: 0; margin-top: .25rem;
    }
    .j-reasons .reasons-shot {
      width: 100%; height: 100%; min-height: 480px;
      object-fit: cover; display: block; border-radius: 2px;
    }

    /* Section 6 — Tagline (background grows on scroll-into-view; JS triggered) */
    .j-tagline {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(4rem, 7vw, 6rem) 0;
      background: #fff;
      text-align: center;
    }
    .j-tagline::before {
      content: "";
      position: absolute; inset: 0;
      background: #e4d4bb;
      z-index: -1;
      clip-path: circle(0% at 50% 50%);
      transition: clip-path 1.1s cubic-bezier(.22,.61,.36,1);
    }
    .j-tagline.is-visible::before {
      clip-path: circle(100% at 50% 50%);
    }
    @media (prefers-reduced-motion: reduce) {
      .j-tagline { background: #e4d4bb; }
      .j-tagline::before { display: none; }
    }
    .j-tagline h2 {
      font-size: clamp(1.75rem, 3vw, 2.75rem);
      max-width: 36ch; margin: 0 auto;
      color: var(--pom-deep-green); line-height: 1.25;
    }