/* ---------------------------------------------------------------------------
   Mekozza · partner.php

   The become-a-partner page. Prefix .mkj so nothing here can reach another
   page, and so styles.css / mobile.css keep their own scope.

   Cartoon-leaning on purpose, to match the direction the home page went in:
   thick ink outlines, hard offset shadows instead of soft blur, and hovers
   that move. The subject is money, though, so it stays legible — the playful
   part is the frame, never the numbers.

   Tokens are the same vocabulary as premium-page.css, so the two pages that
   both talk about money look related.
   --------------------------------------------------------------------------- */

.mkj {
  --ink:#101828; --ink-2:#475467; --ink-3:#98a2b3;
  --line:#eaecf0; --line-2:#d0d5dd;
  --bg:#fbfcfe; --card:#fff;
  --brand:#ff6b35; --brand-2:#ff9350; --brand-soft:#fff2ec; --brand-deep:#e14f14;
  --gold:#b98900; --gold-soft:#fff8e6;
  --ok:#067647; --ok-soft:#ecfdf3;
  --sky:#0079ff; --sky-soft:#eff8ff;
  --grape:#7a5af8; --grape-soft:#f4f3ff;

  --hard:4px 4px 0 var(--ink);
  --hard-sm:3px 3px 0 var(--ink);
  --hard-brand:5px 5px 0 var(--brand-deep);
  --r:18px;

  color:var(--ink);
  background:var(--bg);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .mkj {
    --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
    --line:#1f2937; --line-2:#344054;
    --bg:#0b0f19; --card:#131a29;
    --brand-soft:#2a1710; --gold-soft:#2a2110; --ok-soft:#0d2018;
    --sky-soft:#0d1a2a; --grape-soft:#181530;
    --hard:4px 4px 0 #000; --hard-sm:3px 3px 0 #000;
  }
}
:root[data-theme="dark"] .mkj {
  --ink:#f2f4f7; --ink-2:#98a2b3; --ink-3:#667085;
  --line:#1f2937; --line-2:#344054;
  --bg:#0b0f19; --card:#131a29;
  --brand-soft:#2a1710; --gold-soft:#2a2110; --ok-soft:#0d2018;
  --sky-soft:#0d1a2a; --grape-soft:#181530;
  --hard:4px 4px 0 #000; --hard-sm:3px 3px 0 #000;
}

.mkj *,.mkj *::before,.mkj *::after { box-sizing:border-box; }

.mkj-wrap { max-width:1140px; margin:0 auto; padding:0 16px; }

/* Shared heading rhythm ---------------------------------------------------- */
.mkj-sec { padding:56px 0; }
.mkj-sec--tint { background:var(--card); border-top:2px solid var(--line); border-bottom:2px solid var(--line); }

.mkj-kicker {
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-deep); background:var(--brand-soft);
  border:2px solid var(--brand); border-radius:999px; padding:6px 13px;
  margin-bottom:14px;
}
.mkj-h2 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.5rem,4vw,2.3rem); line-height:1.16; margin:0 0 10px;
  letter-spacing:-.02em;
}
.mkj-lede { color:var(--ink-2); font-size:1.02rem; line-height:1.65; max-width:62ch; margin:0 0 30px; }

/* Hero -------------------------------------------------------------------- */
.mkj-hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,147,80,.30), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(122,90,248,.22), transparent 44%),
    linear-gradient(170deg,#fff4ec 0%,var(--bg) 72%);
  border-bottom:3px solid var(--ink);
  padding:60px 0 66px;
}
:root[data-theme="dark"] .mkj-hero,
.mkj-hero.is-dark {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,107,53,.22), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(122,90,248,.20), transparent 44%),
    linear-gradient(170deg,#16203a 0%,var(--bg) 72%);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .mkj-hero {
    background:
      radial-gradient(circle at 12% 18%, rgba(255,107,53,.22), transparent 42%),
      radial-gradient(circle at 88% 12%, rgba(122,90,248,.20), transparent 44%),
      linear-gradient(170deg,#16203a 0%,var(--bg) 72%);
  }
}

/* Floating paws. Decorative, so they are hidden from assistive tech and stop
   moving entirely when the visitor has asked for less motion. */
.mkj-paw {
  position:absolute; color:var(--brand); opacity:.16; pointer-events:none;
  animation:mkj-float 7s ease-in-out infinite;
}
.mkj-paw:nth-child(1){ top:14%; left:6%;  font-size:2.4rem; animation-delay:0s; }
.mkj-paw:nth-child(2){ top:66%; left:13%; font-size:1.6rem; animation-delay:1.1s; }
.mkj-paw:nth-child(3){ top:22%; right:9%; font-size:2rem;   animation-delay:2.2s; }
.mkj-paw:nth-child(4){ top:72%; right:16%;font-size:2.7rem; animation-delay:.6s; }
@keyframes mkj-float {
  0%,100% { transform:translateY(0) rotate(-8deg); }
  50%     { transform:translateY(-16px) rotate(10deg); }
}

.mkj-hero-grid {
  position:relative; display:grid; gap:38px;
  grid-template-columns:1.08fr .92fr; align-items:center;
}
.mkj-hero h1 {
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:clamp(1.9rem,5.4vw,3.2rem); line-height:1.08;
  letter-spacing:-.03em; margin:0 0 14px;
}
.mkj-hero h1 em {
  font-style:normal; position:relative; white-space:nowrap;
  color:var(--brand-deep);
}
.mkj-hero h1 em::after {
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em;
  background:var(--brand); opacity:.26; border-radius:3px; z-index:-1;
}
.mkj-hero p { color:var(--ink-2); font-size:1.06rem; line-height:1.68; margin:0 0 26px; max-width:52ch; }

.mkj-cta-row { display:flex; flex-wrap:wrap; gap:13px; align-items:center; }

.mkj-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem;
  padding:14px 24px; border-radius:14px; text-decoration:none; cursor:pointer;
  border:3px solid var(--ink); background:var(--card); color:var(--ink);
  box-shadow:var(--hard);
  transition:transform .13s ease, box-shadow .13s ease;
}
.mkj-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.mkj-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.mkj-btn--go {
  background:var(--brand); color:#fff; border-color:var(--ink);
  font-size:1.06rem; padding:15px 28px;
}
.mkj-btn--go:hover { background:var(--brand-2); }

.mkj-reassure {
  margin:16px 0 0; font-size:.88rem; color:var(--ink-2);
  display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; padding:0;
}
.mkj-reassure li { display:flex; align-items:center; gap:6px; }
.mkj-reassure i { color:var(--ok); }

/* The little earnings card in the hero */
.mkj-card-tilt {
  background:var(--card); border:3px solid var(--ink); border-radius:22px;
  box-shadow:8px 8px 0 var(--brand-deep); padding:22px;
  transform:rotate(-1.6deg);
}
.mkj-card-tilt h3 {
  font-family:'Poppins',sans-serif; font-size:1rem; margin:0 0 4px;
  display:flex; align-items:center; gap:8px;
}
.mkj-card-tilt > p { margin:0 0 16px; font-size:.86rem; color:var(--ink-3); }
.mkj-earn { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.mkj-earn li {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; border:2px solid var(--line-2); border-radius:12px;
  background:var(--bg); font-size:.92rem;
}
.mkj-earn b { font-family:'Poppins',sans-serif; font-size:1.02rem; white-space:nowrap; }
.mkj-earn-note {
  margin:14px 0 0; font-size:.76rem; color:var(--ink-3); line-height:1.5;
  padding-top:12px; border-top:2px dashed var(--line-2);
}

/* Steps ------------------------------------------------------------------- */
.mkj-steps { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); counter-reset:mkj; }
.mkj-step {
  position:relative; background:var(--card); border:3px solid var(--ink);
  border-radius:var(--r); padding:26px 20px 22px; box-shadow:var(--hard);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mkj-step:hover { transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.mkj-step::before {
  counter-increment:mkj; content:counter(mkj);
  position:absolute; top:-17px; left:20px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--brand); color:#fff; border:3px solid var(--ink);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1rem;
}
.mkj-step i { font-size:1.5rem; color:var(--brand-deep); margin:6px 0 10px; display:block; }
.mkj-step h3 { font-family:'Poppins',sans-serif; font-size:1.06rem; margin:0 0 7px; }
.mkj-step p { margin:0; color:var(--ink-2); font-size:.93rem; line-height:1.6; }

/* Benefit tiles ----------------------------------------------------------- */
.mkj-tiles { display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
.mkj-tile {
  background:var(--card); border:3px solid var(--ink); border-radius:var(--r);
  padding:22px 18px; text-align:center; box-shadow:var(--hard-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mkj-tile:hover { transform:translateY(-5px) rotate(-1deg); box-shadow:6px 8px 0 var(--ink); }
.mkj-tile-ic {
  width:52px; height:52px; margin:0 auto 13px; border-radius:15px;
  display:grid; place-items:center; font-size:1.4rem;
  border:3px solid var(--ink);
}
.mkj-tile:nth-child(1) .mkj-tile-ic { background:var(--brand-soft); color:var(--brand-deep); }
.mkj-tile:nth-child(2) .mkj-tile-ic { background:var(--ok-soft);    color:var(--ok); }
.mkj-tile:nth-child(3) .mkj-tile-ic { background:var(--sky-soft);   color:var(--sky); }
.mkj-tile:nth-child(4) .mkj-tile-ic { background:var(--grape-soft); color:var(--grape); }
.mkj-tile h3 { font-family:'Poppins',sans-serif; font-size:1rem; margin:0 0 6px; }
.mkj-tile p { margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.58; }

/* What you can list ------------------------------------------------------- */
.mkj-split { display:grid; gap:22px; grid-template-columns:1fr 1fr; align-items:start; }
.mkj-panel {
  background:var(--card); border:3px solid var(--ink); border-radius:var(--r);
  padding:24px; box-shadow:var(--hard);
}
.mkj-panel h3 {
  font-family:'Poppins',sans-serif; font-size:1.1rem; margin:0 0 4px;
  display:flex; align-items:center; gap:9px;
}
.mkj-panel > p { margin:0 0 16px; color:var(--ink-3); font-size:.87rem; }
.mkj-list { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.mkj-list li { display:flex; align-items:flex-start; gap:10px; font-size:.94rem; line-height:1.55; }
.mkj-list i { color:var(--ok); margin-top:.24em; flex:0 0 auto; }

/* Requirements strip ------------------------------------------------------ */
.mkj-need {
  display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-top:8px;
}
.mkj-need div {
  background:var(--card); border:2px dashed var(--line-2); border-radius:14px;
  padding:16px 14px; font-size:.92rem;
}
.mkj-need b { display:block; font-family:'Poppins',sans-serif; margin-bottom:3px; font-size:.97rem; }
.mkj-need span { color:var(--ink-2); font-size:.85rem; }

/* FAQ --------------------------------------------------------------------- */
/* The rows run the full width of the section, like every other block on the
   page — capping the list at 820px left it visibly short of the tiles and
   panels above it. The measure is capped on the answer text instead, which is
   the part that actually becomes hard to read when it gets long. */
.mkj-faq { display:grid; gap:12px; }
.mkj-faq details {
  background:var(--card); border:3px solid var(--ink); border-radius:14px;
  box-shadow:var(--hard-sm); overflow:hidden;
}
.mkj-faq summary {
  cursor:pointer; padding:16px 18px; list-style:none;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.98rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mkj-faq summary::-webkit-details-marker { display:none; }
.mkj-faq summary::after {
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:.74rem; color:var(--brand-deep); transition:transform .18s ease;
  flex:0 0 auto;
}
.mkj-faq details[open] summary::after { transform:rotate(180deg); }
.mkj-faq .mkj-a {
  padding:14px 18px 17px; color:var(--ink-2); font-size:.94rem; line-height:1.68;
  border-top:2px solid var(--line); margin-top:0;
  max-width:78ch;   /* the row is wide; the sentence should not be */
}

/* Closing call ------------------------------------------------------------ */
.mkj-final {
  background:var(--ink); color:#fff; border-radius:24px;
  border:3px solid var(--ink);
  padding:44px 32px; text-align:center; position:relative; overflow:hidden;
  box-shadow:var(--hard);
}
.mkj-final::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,107,53,.42), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(122,90,248,.34), transparent 48%);
}
.mkj-final > * { position:relative; }
.mkj-final h2 {
  font-family:'Poppins',sans-serif; font-weight:700; color:#fff;
  font-size:clamp(1.4rem,4vw,2.1rem); margin:0 0 10px; letter-spacing:-.02em;
}
.mkj-final p { color:#d0d5dd; margin:0 auto 24px; max-width:54ch; line-height:1.65; }
.mkj-final .mkj-btn--go { border-color:#fff; box-shadow:4px 4px 0 rgba(255,255,255,.55); }
.mkj-final .mkj-btn--go:hover { box-shadow:6px 6px 0 rgba(255,255,255,.7); }

/* Notices ----------------------------------------------------------------- */
.mkj-note {
  display:flex; gap:12px; align-items:flex-start;
  border:3px solid var(--ink); border-radius:14px; padding:15px 17px;
  margin:0 0 26px; box-shadow:var(--hard-sm); font-size:.95rem; line-height:1.6;
  background:var(--ok-soft);
}
.mkj-note i { margin-top:.18em; color:var(--ok); font-size:1.05rem; flex:0 0 auto; }
.mkj-note b { font-family:'Poppins',sans-serif; }

/* ---- Tablet ---- */
@media (max-width:991px) {
  .mkj-hero-grid { grid-template-columns:1fr; gap:30px; }
  .mkj-card-tilt { transform:none; }
  .mkj-tiles { grid-template-columns:repeat(2,1fr); }
  .mkj-need  { grid-template-columns:repeat(2,1fr); }
  .mkj-steps { grid-template-columns:1fr; }
  .mkj-split { grid-template-columns:1fr; }
}

/* ---- Phone ----------------------------------------------------------------
   The first pass at this simply stacked every desktop block into one column.
   Measured on a 412x880 screen that came to 6582px — seven and a half screens
   of scrolling, most of it identical outlined cards one after another. It was
   not badly drawn, it was just very long and very samey.

   So on a phone the layout changes shape rather than only narrowing:
   the four benefit tiles pair up, the three steps become a swipeable row
   instead of three more stacked cards, the hero's price card tightens, and
   an Apply button docks to the bottom so the action is never more than a tap
   away no matter how far down the page somebody is.
   --------------------------------------------------------------------------- */
@media (max-width:600px) {
  .mkj-sec { padding:34px 0; }
  .mkj-wrap { padding:0 16px; }

  /* Hero: bigger headline, less air, card pulled in tight ------------------ */
  .mkj-hero { padding:30px 0 34px; }

  /* mobile.css:637 caps every h1 on the site at clamp(22px,6.4vw,28px) with
     !important, which lands this one at 26px. That global cap is right for an
     ordinary page heading and wrong for the one line this page is built
     around, so it is overridden here and only here — the section h2s below
     are left on the site's scale deliberately. Specificity alone loses to an
     !important, hence the !important; without it this rule does nothing. */
  .mkj-hero h1 { font-size:2.05rem !important; line-height:1.1 !important; margin-bottom:10px; }
  .mkj-hero p { font-size:1rem; margin-bottom:20px; }
  .mkj-cta-row { flex-direction:column; align-items:stretch; gap:10px; }
  .mkj-cta-row .mkj-btn { width:100%; }
  .mkj-reassure { gap:5px 13px; font-size:.83rem; margin-top:14px; }
  .mkj-paw { display:none; }   /* four floating icons is a lot on a phone */

  .mkj-card-tilt { padding:17px; border-radius:18px; box-shadow:6px 6px 0 var(--brand-deep); }
  .mkj-card-tilt h3 { font-size:.95rem; }
  .mkj-card-tilt > p { font-size:.8rem; margin-bottom:12px; }
  .mkj-earn { gap:7px; }
  .mkj-earn li { padding:9px 11px; font-size:.87rem; border-radius:10px; }
  .mkj-earn b { font-size:.95rem; }
  .mkj-earn-note { font-size:.72rem; margin-top:11px; padding-top:10px; }

  /* No .mkj-h2 size here on purpose: mobile.css sets the h2 scale globally
     with !important and the section headings should stay on it. */
  .mkj-lede { font-size:.97rem; margin-bottom:22px; }

  /* Steps: one swipeable row instead of three stacked cards ---------------- */
  .mkj-steps {
    grid-template-columns:none;
    grid-auto-flow:column; grid-auto-columns:82%;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:13px; padding:18px 16px 14px;
    margin:0 -16px;                 /* bleed to the screen edge */
    scrollbar-width:none;
  }
  .mkj-steps::-webkit-scrollbar { display:none; }
  .mkj-step { scroll-snap-align:center; padding:22px 17px 18px; }
  .mkj-step:hover { transform:none; box-shadow:var(--hard); }  /* no hover on touch */

  /* A hint that the row moves, for anyone who would not think to swipe. */
  .mkj-swipe {
    display:flex; align-items:center; gap:7px;
    font-size:.78rem; color:var(--ink-3); margin:2px 0 0;
  }
  .mkj-swipe i { animation:mkj-nudge 1.6s ease-in-out infinite; }
  @keyframes mkj-nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

  /* Tiles: two up, so four of them cost two rows instead of four ---------- */
  .mkj-tiles { grid-template-columns:repeat(2,1fr); gap:12px; }
  .mkj-tile { padding:16px 11px; border-radius:15px; }
  .mkj-tile:hover { transform:none; box-shadow:var(--hard-sm); }
  .mkj-tile-ic { width:42px; height:42px; font-size:1.12rem; margin-bottom:10px; border-radius:12px; }
  .mkj-tile h3 { font-size:.9rem; margin-bottom:4px; }
  .mkj-tile p { font-size:.79rem; line-height:1.45; }
  /* A little cartoon wonk so a grid of four does not read as a spreadsheet. */
  .mkj-tile:nth-child(odd)  { transform:rotate(-.9deg); }
  .mkj-tile:nth-child(even) { transform:rotate(.9deg); }

  .mkj-panel { padding:19px; }
  .mkj-panel h3 { font-size:1.04rem; }
  .mkj-list li { font-size:.9rem; }

  .mkj-need { grid-template-columns:repeat(2,1fr); gap:10px; }
  .mkj-need div { padding:13px 11px; border-radius:12px; }
  .mkj-need b { font-size:.89rem; }
  .mkj-need span { font-size:.77rem; }
  .mkj-note { padding:13px 14px; font-size:.88rem; }

  .mkj-faq summary { padding:14px 15px; font-size:.92rem; }
  .mkj-faq .mkj-a { padding:12px 15px 15px; font-size:.88rem; }

  .mkj-final { padding:30px 19px; border-radius:20px; }
  .mkj-final p { font-size:.94rem; }

  /* The docked Apply button ----------------------------------------------- */
  /* Sits above the site's own tab bar (NAV.m-tabbar, 64px + an 8px gap),
     never over it. Hidden until the hero button has scrolled away, and
     hidden again once the closing CTA is on screen — two Apply buttons
     visible at once looks like a mistake. */
  .mkj-dock {
    position:fixed; left:12px; right:12px; bottom:80px; z-index:60;
    display:flex; gap:10px; align-items:center;
    padding:9px 10px 9px 14px;
    background:var(--card); border:3px solid var(--ink); border-radius:16px;
    box-shadow:0 8px 24px -6px rgba(16,24,40,.35);
    transform:translateY(140%); opacity:0; pointer-events:none;
    transition:transform .26s cubic-bezier(.22,1.2,.36,1), opacity .2s ease;
  }
  .mkj-dock.is-on { transform:translateY(0); opacity:1; pointer-events:auto; }
  .mkj-dock-txt { flex:1 1 auto; min-width:0; line-height:1.25; }
  .mkj-dock-txt b { display:block; font-family:'Poppins',sans-serif; font-size:.9rem; }
  .mkj-dock-txt span { font-size:.73rem; color:var(--ink-3); }
  .mkj-dock .mkj-btn {
    flex:0 0 auto; padding:11px 16px; font-size:.92rem; border-radius:12px;
    box-shadow:var(--hard-sm);
  }
}

/* The dock is a phone affordance only — on anything wider the page already
   has the button in view, and a floating bar would just cover content. */
@media (min-width:601px) { .mkj-dock, .mkj-swipe { display:none; } }

/* Somebody who has asked for less motion gets none of it. */
@media (prefers-reduced-motion:reduce) {
  .mkj-paw { animation:none; }
  .mkj *,.mkj *::before,.mkj *::after { transition:none !important; }
}