/* ============================================================
   Partner page — dark theme on top of styles.css
   Measurements mirror the Figma design (1440px artboard):
   80px = 5rem, 160px = 10rem side insets.
   ============================================================ */
body.partner { background: #0B0D0C; color: #fff; }

/* ===== Header — fixed, always transparent (white content throughout).
   Only hides on scroll-down / reappears on scroll-up (see js/partner.js). ===== */
.partner-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-left { display: flex; align-items: center; gap: 2.5rem; }
.header-nav { display: flex; align-items: center; gap: 1.5rem; }
/* Match the right-side header buttons: 14px medium */
.header-nav a {
  font-family: var(--font-body);
  font-size: 0.8125rem; line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.header-nav a:hover, .header-nav a.is-active { color: #fff; }
.partner-header .header-signin-btn { display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.85); text-decoration: none; }
/* anchor (not <button>) needs flexbox to centre its label vertically + horizontally */
.partner-header .header-cta-btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; border-color: rgba(255, 255, 255, 0.25); text-decoration: none; }

/* ===== Buttons ===== */
.partner-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3rem; padding: 0 1.5rem; border-radius: 1.5rem;
  background: #fff; color: #0B0D0C;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
/* Filled white buttons darken by a 10% black overlay on hover (#fff → #E6E6E6) */
.partner-btn:hover { background-color: #E6E6E6; opacity: 1; }
.partner-btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.partner-btn--light:hover { opacity: 1; background: transparent; border-color: rgba(255, 255, 255, 0.5); }

/* ===== Shared headings ===== */
.partner-h2 {
  font-family: var(--font-display);
  font-size: 3.5rem;          /* 56px — region / monitor / plans */
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: #fff;
}
.partner-muted { color: rgba(255, 255, 255, 0.75); }

/* ===== Hero (static, photo background) ===== */
.partner-hero {
  position: relative;
  min-height: 100vh;          /* fit the viewport */
  /* symmetric vertical padding so the inner block centres in the true
     viewport middle — the absolute header doesn't shift it */
  padding: 5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(11,13,12,0.55) 0%, rgba(11,13,12,0.15) 35%, rgba(11,13,12,0.55) 100%),
    url('../public/images/partner/hero-bg.png') center/cover no-repeat,
    #0B0D0C;
  overflow: hidden;
}
.partner-hero-inner { max-width: 45rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.partner-hero-title {
  font-family: var(--font-display);
  font-size: 4rem;            /* 64px */
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-display);
  color: #fff;
}
.partner-hero-sub { color: rgba(255, 255, 255, 0.75); max-width: 40rem; }
.partner-hero-inner .partner-btn { margin-top: 0.5rem; }

.partner-hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7); font-size: 0.75rem;
}
/* Flush into the bottom-right corner (connected to both edges) */
.partner-hero-testimonial { position: absolute; right: 0; bottom: 0; width: 25rem; max-width: 100%; text-align: left; background: #0B0D0C; border-radius: 1rem 0 0 0; padding: 2.5rem; }
.partner-hero-quote { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: #fff; margin-bottom: 0.75rem; }
.partner-hero-attr { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.partner-hero-attr .avatar { width: 1rem; height: 1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }

/* ===== Region + 4 points ===== */
/* 160px side inset from the viewport edge (full width, no centred max-width) */
.partner-region { padding: 10rem 15rem; }
.partner-region-head { max-width: 50rem; margin: 0 auto 5rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; }
/* points fill the container (which sits 160px from each edge via the section
   padding); 40px gap between each */
.partner-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
.partner-point { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.partner-point-icon { width: 2.5rem; height: 2.5rem; display: block; }
/* fill the column so the content edges align to the 160px inset (text stays centred) */
.partner-point-text { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.partner-point-title { font-family: var(--font-body); font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: #fff; }
.partner-point-body { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* ===== Monitor — sticky scroll-snap section (3 slides) ===== */
.partner-monitor { position: relative; height: 300vh; background: #0B0D0C; }
.partner-monitor-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: stretch; overflow: hidden;
}
.pm-left {
  flex: 0 0 40rem;            /* 640px column */
  padding: 6.5rem 5rem 5rem;  /* 80px inset; content sits at the bottom, 80px gap */
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem;
}
.pm-left .partner-btn { align-self: flex-start; }
.partner-powered { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.4; color: #fff; }
.partner-powered img { height: 0.875rem; }
.pm-text { display: flex; flex-direction: column; gap: 1.25rem; min-height: 17rem; }
.pm-heading .char { opacity: 0; transition: opacity 0.3s ease; }
.pm-heading .char.visible { opacity: 1; }
.pm-body { color: rgba(255, 255, 255, 0.75); opacity: 0; transition: opacity 0.5s ease; }
.pm-body.visible { opacity: 1; }

.pm-right { flex: 1; position: relative; display: flex; align-items: stretch; overflow: hidden; }
/* Lighter container framing the dashboard preview (the container-on-section
   pattern from the homepage, inverted for the dark theme). Spans the full
   height; the preview image is inset from the top + left and bleeds off the
   right (and bottom) edge. */
.pm-stage {
  flex: 1; position: relative;
  margin: 1rem 1rem 1rem 0;       /* 16px top/bottom/right breathing room */
  background: #18191A;            /* lighter than the #0B0D0C section */
  border-radius: 0;               /* square corners on the preview container */
  overflow: hidden;
}
.pm-dash-img {
  position: absolute;
  top: 11rem;                     /* 176px inset from the container top */
  left: 5rem;                     /* 80px inset from the container left */
  /* Size by HEIGHT so all three dashboards render at one shared vertical scale
     regardless of their native resolution; each then bleeds off the right edge
     by its own width (like the original Jobs slide). */
  height: 50.5rem;                /* ~808px */
  width: auto;
  max-width: none;                /* let it bleed past the stage (no global clamp) */
  border-radius: 0.75rem 0 0 0;
  display: block;
  opacity: 0;                     /* two layers stacked; only .is-active shows */
  transition: opacity 0.6s ease;  /* soft crossfade between dashboards */
}
.pm-dash-img.is-active { opacity: 1; }

/* Slide indicator — same pill as the homepage steps (.steps-dots), 3 bullets */
.pm-dots {
  position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%);
  width: 1.5rem; height: 4.75rem;
  background: rgba(0, 0, 0, 0.5); border-radius: 0.75rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; z-index: 2;
}
.pm-dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: width 0.3s ease, height 0.3s ease, background 0.3s ease; }
.pm-dot.active { width: 0.5rem; height: 0.5rem; background: #fff; }

/* ===== 3 metric cards ===== */
/* Full width with 80px side inset, matching the monitor section above */
.partner-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding: 10rem 5rem; }
.partner-metric { display: flex; flex-direction: column; gap: 0; }
/* Outer container: lighter, 1:1 square (width drives height → all equal,
   so the titles below line up), no border, no rounding (matches the design) */
.partner-card { background: #18191A; border: none; border-radius: 0; aspect-ratio: 1 / 1; padding: 2.5rem; display: flex; align-items: center; justify-content: center; }
/* Inner component card: darker than the container, rounded */
.partner-card-inner { width: 100%; background: #1a1a1a; border-radius: 0.75rem; padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.partner-card-label { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.5); }
.partner-card-value { font-family: var(--font-display); font-size: 2.5rem; line-height: 1.1; color: #fff; }
.partner-card-chart { margin-top: 0.5rem; }
.partner-card-chart svg { width: 100%; height: 3rem; display: block; }
.partner-card-months { display: flex; justify-content: space-between; font-size: 0.6875rem; color: rgba(255, 255, 255, 0.35); margin-top: 0.25rem; }
.partner-card-bars { display: flex; gap: 0.25rem; height: 0.5rem; margin: 0.75rem 0; }
.partner-card-bars .bar { height: 100%; border-radius: 1rem; }
.bar--business { background: #b8e5a1; }
.bar--premium { background: #a1cfe5; }
.partner-legend { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); padding: 0.125rem 0; }
.partner-legend > span:first-child { display: inline-flex; align-items: center; }
.partner-legend .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; margin-right: 0.5rem; }
.dot--business { background: #b8e5a1; }
.dot--premium { background: #a1cfe5; }
/* 80px padding on the right of the text block under each card */
.partner-metric-title { color: #fff; font-size: 2.5rem; line-height: 1.2; margin-top: 2.5rem; padding-right: 5rem; }
.partner-metric > .partner-muted { font-size: 1rem; line-height: 1.5rem; color: rgba(255, 255, 255, 0.75); margin-top: 1rem; padding-right: 5rem; }

/* ===== 3-step list (inside the plan intro) — loops on a timer ===== */
/* margin 1rem + the intro's 1.5rem flex gap = 40px from the text above */
.plan-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.pstep { display: flex; align-items: center; gap: 1rem; }
.pstep-num { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; font-weight: 500; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); transition: background 0.4s ease, color 0.4s ease; }
.pstep-title { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: 1.3; color: #fff; }
/* static: only step 1 (.is-active) gets the white circle */
.pstep.is-active .pstep-num { background: #fff; color: #0B0D0C; }

/* ===== Partner plan ===== */
/* Full width with a fixed 160px side inset (sides stay 160px at every width) */
.partner-plan-section { padding: 10rem; }
/* 160px between the two columns; block centres so the sides are 160px at the design width */
.partner-plan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10rem; align-items: start; }
/* top-aligned with the card, pushed 80px down */
.partner-plan-intro { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 5rem; }
/* No fill, but keep a subtle hairline border (matches the design file) */
.partner-plan-card { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); padding: 2.5rem; max-width: none; }
.partner-plan-card .card-name, .partner-plan-card .card-price { color: #fff; }
.partner-plan-card .card-badge { color: rgba(255, 255, 255, 0.6); }
.partner-plan-card .card-price-period { color: rgba(255, 255, 255, 0.6); }
.partner-plan-setup { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.partner-plan-card .card-description { color: rgba(255, 255, 255, 0.72); }
.partner-plan-card .card-btn { background: #fff; color: #0B0D0C; border: none; }
.partner-plan-card .card-btn:hover { background: #E6E6E6; }
.partner-plan-card .card-cancel { color: rgba(255, 255, 255, 0.5); }
.partner-plan-card .card-divider { background: rgba(255, 255, 255, 0.1); }
.partner-plan-card .feature span { color: rgba(255, 255, 255, 0.75); }

/* ===== Footer (dark) ===== */
.partner-footer { background: #0B0D0C; color: #fff; }
.partner-footer .footer-tagline { color: #fff; }
.partner-footer .footer-label, .partner-footer .footer-contact-links a, .partner-footer .copyright, .partner-footer .legal a { color: rgba(255, 255, 255, 0.6); }
.partner-footer .footer-email-form input { color: #fff; background: transparent; }
.partner-footer .footer-email-form input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* ===== Responsive ===== */
@media (max-width: 80rem) {
  .partner-region, .partner-metrics, .partner-plan-section { padding-left: 2.5rem; padding-right: 2.5rem; }
  .partner-plan-layout { grid-template-columns: 1fr; gap: 3rem; max-width: 32rem; margin: 0 auto; }
  /* stacked: text sits above the plan card → centre it */
  .partner-plan-intro { padding-top: 0; align-items: center; text-align: center; }
  .plan-steps { align-items: center; }
}

@media (max-width: 64rem) {
  .partner-hero { padding-left: 1.5rem; padding-right: 1.5rem; min-height: 100vh; }
  .partner-hero-title { font-size: 3rem; }
  .partner-region, .partner-metrics, .partner-plan-section { padding: 6rem 1.5rem; }
  .partner-h2 { font-size: 2.5rem; }
  .partner-points { grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem; }
  .partner-metrics { grid-template-columns: 1fr; }
  .partner-metric-title, .partner-metric > .partner-muted { padding-right: 0; }
  .partner-card { min-height: 0; padding: 2rem; }
  .partner-card-inner { padding: 1.5rem; }

  /* Monitor collapses to a normal stacked block (no scroll-snap) */
  .partner-monitor { height: auto; }
  .partner-monitor-sticky { position: static; height: auto; flex-direction: column; gap: 3rem; padding: 6rem 1.5rem; overflow: visible; }
  .pm-left { flex: none; padding: 0; }
  .pm-text { min-height: 0; }
  .pm-heading .char { opacity: 1; }
  .pm-body { opacity: 1; }
  .pm-right { overflow: hidden; }
  .pm-stage { margin: 0; padding: 1.5rem 0 0 1.5rem; border-radius: 0; }
  .pm-dash-img:not(.is-active) { display: none; }
  .pm-dash-img.is-active { position: static; top: auto; left: auto; width: 100%; height: auto; border-radius: 0.5rem 0 0 0; opacity: 1; }
  .pm-dots { display: none; }
}

/* ===== MRR calculator ===== */
.mrr-section { padding: 5rem 10rem; }
.mrr-head { max-width: 50rem; margin: 0 auto 4rem; text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.mrr-card { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; padding: 2.5rem; }
.mrr-label { font-family: var(--font-body); font-size: 1rem; color: #fff; }
.mrr-total { font-family: var(--font-display); font-size: 3.5rem; line-height: 1.2; letter-spacing: var(--letter-spacing-display); color: #fff; margin-top: 1.5rem; }
.mrr-sub { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); margin-top: 0.5rem; }

/* Relative-size slider track */
/* Each group = bar + handle (same colour, 1px gap); 4px between groups */
.mrr-track { display: flex; gap: 4px; height: 3rem; margin-top: 2.5rem; user-select: none; }
.mrr-seg { display: flex; gap: 1px; align-items: stretch; height: 100%; flex-basis: 0; min-width: 25px; }
.mrr-bar { flex: 1 1 0; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.mrr-seg-count { padding-left: 1rem; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: #0B0D0C; white-space: nowrap; pointer-events: none; }
.mrr-handle { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; transition: filter 0.15s ease; }
.mrr-handle-icon { width: 16px; height: 16px; display: block; pointer-events: none; }
.mrr-handle:hover, .mrr-handle:active { filter: brightness(0.95); }
.mrr-handle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mrr-seg--premium .mrr-bar, .mrr-seg--premium .mrr-handle { background: #f5f3f0; }
.mrr-seg--business .mrr-bar, .mrr-seg--business .mrr-handle { background: #a1cfe6; }
.mrr-seg--enterprise .mrr-bar, .mrr-seg--enterprise .mrr-handle { background: #b8e5a1; }
.mrr-seg--partner { background: rgba(255, 255, 255, 0.2); }

.mrr-legend { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem; }
.mrr-legend-item { display: flex; flex-direction: column; gap: 0.5rem; }
.mrr-legend-label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.mrr-dot { width: 0.5rem; height: 0.5rem; border-radius: 1px; flex-shrink: 0; }
.mrr-dot--premium { background: #f5f3f0; }
.mrr-dot--business { background: #a1cfe6; }
.mrr-dot--enterprise { background: #b8e5a1; }
.mrr-dot--partner { background: rgba(255, 255, 255, 0.2); }
.mrr-legend-value { font-family: var(--font-display); font-size: 2rem; color: #fff; }
.mrr-legend-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.15); }

@media (max-width: 80rem) {
  .mrr-section { padding: 5rem 2.5rem; }
}
@media (max-width: 64rem) {
  .mrr-section { padding: 5rem 1.5rem; }
  .mrr-card { padding: 1.5rem; }
  .mrr-legend { gap: 1.5rem 2rem; }
}

/* ----- Mobile (≤768px): header + hero, mirroring the homepage ----- */
@media (max-width: 48rem) {
  /* Header: hide the page nav + secondary links, keep logo + CTA.
     (.hero-header height/padding and .header-signin-btn/.header-cta-btn
     sizing come from styles.css's own 48rem rules via the shared classes.) */
  .header-nav { display: none; }
  .header-left { gap: 0; }
  /* higher-specificity partner rule needs an explicit override to hide these */
  .partner-header .header-signin-btn { display: none; }

  /* Hero: hide the floating scroll hint + testimonial, shrink the title */
  .partner-hero-scroll, .partner-hero-testimonial { display: none; }
  .partner-hero-title { font-size: 2.5rem; }
}