/* ==========================================================================
   /partners

   The first cut hardcoded rgba(255,255,255,.03) panels and leaned on
   opacity for secondary text, which is a dark-mode-only assumption: on the
   light theme those panels vanished and the faded text went muddy grey on
   white. Everything here now comes from one set of tokens that flip with
   the theme, so a rule is written once and is correct in both.

   The theme ships dark as the default and overrides with .light-theme, so
   these follow that order too.
   ========================================================================== */

.partners-page {
  --pt-panel: #1a1b2e;
  --pt-panel-2: #212235;
  --pt-line: #2a2c44;
  --pt-ink: #ffffff;
  --pt-ink-soft: #a6a8bd;
  --pt-accent: var(--primary);
  --pt-accent-ink: #6ea6ff;
  --pt-accent-wash: rgba(0, 96, 254, .12);
  --pt-accent-line: rgba(0, 96, 254, .34);
  --pt-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.light-theme.partners-page,
.light-theme .partners-page {
  /* Tinted rather than white: the theme's .bg-2 sections are white in light
     mode, so a white panel on them is an invisible card. */
  --pt-panel: #f7fafd;
  --pt-panel-2: #ffffff;
  --pt-line: #d9e3ec;
  --pt-ink: #0b0c1b;
  --pt-ink-soft: #5b6472;
  --pt-accent-ink: #0052d6;
  --pt-accent-wash: #eef4ff;
  --pt-accent-line: #c7dbff;
  --pt-shadow: 0 1px 2px rgba(11, 12, 27, .06);
}

/* One panel treatment, used by every block on the page. */
.pt-panel {
  background: var(--pt-panel);
  border: 1px solid var(--pt-line);
  border-radius: 16px;
  box-shadow: var(--pt-shadow);
  min-width: 0;
}
.partners-page .pt-panel strong,
.partners-page .pt-panel h3 { color: var(--pt-ink); }
.partners-page .pt-panel p { color: var(--pt-ink-soft); }


/* ==========================================================================
   Hero

   Every theme page gives .header its own pastel background, because the
   theme's .title-1 colour is near black and is drawn to sit on one. This page
   had no .header rule at all, so near black type landed on the dark body and
   the headline was effectively invisible. The pastel stays light in both
   themes, exactly as ssl.css and shared.css do.
   ========================================================================== */
.partners-page .header {
  padding: 30px 0 60px;
  background: #cfe0ff;
  overflow: hidden;
}
@media only screen and (max-width: 767.98px) {
  .partners-page .header { padding: 60px 0; }
}
/* The hero is a light panel in both themes, so its type is always dark. */
.partners-page .header .title-1,
.partners-page .header .title-5,
.partners-page .header .para-1 { color: var(--darkBlue); }
.partners-page .header .title-5 { color: #0052d6; }
.partners-page .header .para-1 { max-width: 33rem; }
.partners-page .header .pt-note { color: #3a4a63; }

/* The secondary action sat on a dark-theme outline style and read as bare
   text on the pastel. */
.partners-page .header .pt-ghost {
  display: inline-flex; align-items: center;
  padding: .8rem 1.4rem; border-radius: 10px;
  font-weight: 600; text-decoration: none;
  color: var(--darkBlue); background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(11, 12, 27, .18);
  transition: background .15s ease, border-color .15s ease;
}
.partners-page .header .pt-ghost:hover {
  background: #fff; border-color: rgba(11, 12, 27, .35); color: var(--darkBlue);
}

/* ---- what fills the right half ----
   Other pages drop an illustration here. There is no partner illustration, and
   a stock one would say nothing, so this shows the actual product instead:
   the same client paying every month and the commission arriving each time. */
.pt-hero-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 2rem; align-items: center; }
@media (max-width: 1199.98px) { .pt-hero-wrap { grid-template-columns: 1fr; } .pt-ledger { display: none; } }

.pt-ledger {
  background: #fff; border-radius: 16px; padding: 1.25rem 1.35rem;
  box-shadow: 0 18px 40px rgba(11, 12, 27, .16);
  text-align: left; color: var(--darkBlue);
}
.pt-ledger-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .8rem; margin-bottom: .3rem;
  border-bottom: 1px solid #e6edf5;
}
.pt-ledger-head strong { font-size: .95rem; }
.pt-ledger-head span { font-size: .78rem; color: #5b6472; }
.pt-ledger-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .9rem;
  align-items: center; padding: .62rem 0; border-bottom: 1px solid #f1f5f9;
  font-size: .87rem;
}
.pt-ledger-row:last-of-type { border-bottom: 0; }
.pt-ledger-when { color: #5b6472; font-variant-numeric: tabular-nums; }
.pt-ledger-what { color: var(--darkBlue); }
.pt-ledger-amt { font-weight: 700; color: #0a7d33; font-variant-numeric: tabular-nums; }
.pt-ledger-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #e6edf5;
}
.pt-ledger-foot span { font-size: .8rem; color: #5b6472; }
.pt-ledger-foot strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pt-ledger-note { margin: .55rem 0 0; font-size: .76rem; color: #5b6472; }

.pt-hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 1199.98px) { .pt-hero-cta { justify-content: center; } }

/* ---- the offer ---- */
.pt-cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.pt-card { padding: 1.7rem 1.6rem; }
.pt-card-lead { background: var(--pt-accent-wash); border-color: var(--pt-accent-line); }
.pt-card-num {
  display: block; font-size: 2.4rem; font-weight: 800; line-height: 1;
  margin-bottom: .5rem; color: var(--pt-accent-ink);
  font-variant-numeric: tabular-nums;
}
.pt-card strong { display: block; margin-bottom: .45rem; font-size: 1.02rem; }
.pt-card p { margin: 0; font-size: .92rem; }

/* ---- calculator ---- */
.pt-calc {
  display: grid; gap: 1.8rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: center; padding: 1.9rem;
}
@media (max-width: 900px) { .pt-calc { grid-template-columns: 1fr; } }

.pt-calc-controls { display: grid; gap: 1.6rem; min-width: 0; }
.pt-calc-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; min-width: 0; }
.pt-calc-row > span { font-size: .93rem; color: var(--pt-ink-soft); }
.pt-calc-row output {
  font-weight: 700; color: var(--pt-accent-ink);
  font-variant-numeric: tabular-nums;
}
.pt-calc-row select,
.pt-calc-row input[type=range] { grid-column: 1 / -1; width: 100%; max-width: 100%; }
.pt-calc-row select {
  padding: .55rem .7rem; border-radius: 9px; font: inherit;
  background: var(--pt-panel-2); color: var(--pt-ink); border: 1px solid var(--pt-line);
}

/* The thumb is what should feel continuous; the value steps in whole units. */
.pt-calc-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 22px; background: transparent; cursor: grab; touch-action: none;
}
.pt-calc-row input[type=range]:active { cursor: grabbing; }
.pt-calc-row input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--pt-line);
}
.pt-calc-row input[type=range]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--pt-line);
}
.pt-calc-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--pt-accent); border: 2px solid var(--pt-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pt-calc-row input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pt-accent); border: 2px solid var(--pt-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pt-calc-row input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.pt-calc-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); }
.pt-calc-row input[type=range]:hover::-moz-range-thumb { transform: scale(1.12); }
.pt-calc-row input[type=range]:active::-moz-range-thumb { transform: scale(1.22); }
.pt-calc-row input[type=range]:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 4px; }

.pt-calc-out {
  text-align: center; padding: 1.6rem 1.2rem; border-radius: 14px; min-width: 0;
  background: var(--pt-accent-wash); border: 1px solid var(--pt-accent-line);
}
.pt-calc-label {
  display: block; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--pt-ink-soft);
}
.partners-page .pt-calc-big {
  display: block; font-size: 2.5rem; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--pt-ink);
}
.pt-calc-sub { display: block; font-size: .88rem; color: var(--pt-ink-soft); }
.partners-page .pt-calc-year {
  margin: 1rem 0 0; padding-top: .9rem; font-size: .9rem;
  border-top: 1px solid var(--pt-accent-line); color: var(--pt-ink-soft);
}
.partners-page .pt-calc-year strong { color: var(--pt-ink); }
.partners-page .pt-fineprint { margin-top: 1rem; font-size: .87rem; color: var(--pt-ink-soft); }

/* ---- steps ---- */
.pt-steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.pt-step { padding: 1.6rem; }
.pt-step-n {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .85rem;
  border-radius: 50%; font-weight: 800; background: var(--pt-accent); color: #fff;
}
.pt-step strong { display: block; margin-bottom: .4rem; font-size: 1.05rem; }
.pt-step p { margin: 0; font-size: .92rem; }

/* ---- why ---- */
.pt-why { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.pt-why-item { padding: 1.3rem 1.4rem; border-left-width: 3px; border-left-color: var(--pt-accent); }
.pt-why-item strong { display: block; margin-bottom: .35rem; }
.pt-why-item p { margin: 0; font-size: .92rem; }

/* ---- faq ---- */
.pt-faq { display: grid; gap: .7rem; max-width: 820px; margin: 0 auto; }
.pt-q { padding: 1.05rem 1.3rem; }
.partners-page .pt-q summary {
  cursor: pointer; font-weight: 600; list-style: none;
  color: var(--pt-ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.pt-q summary::-webkit-details-marker { display: none; }
.pt-q summary::after { content: '+'; color: var(--pt-ink-soft); font-weight: 400; font-size: 1.2rem; }
.pt-q[open] summary::after { content: '\2212'; }
.pt-q p { margin: .85rem 0 0; font-size: .93rem; }

/* ---- closing ---- */
.pt-final {
  text-align: center; padding: 2.6rem 1.5rem;
  background: var(--pt-accent-wash); border-color: var(--pt-accent-line);
}
.partners-page .pt-final h3 { margin-bottom: .5rem; color: var(--pt-ink); }
.partners-page .pt-final p { margin-bottom: 1.4rem; }

/* The partner dashboard and application live in the PORTAL shell, which does
   not load this file. Their styles are in assets/app.css. */