/* ============================================================
   inqelo marketing site — partner program page
   @docs [[docs/Systems/Marketing Website/Patterns/inqelo Marketing Site Design Standard]]
   Page-specific rules only; tokens, buttons, header/nav and footer
   live in the shared static/site.css (loaded first by the base
   template). Rebuilt from the approved Claude Design "Partner
   Program" page as a guide: same buttons, type, spacing and
   geometric garnish as the rest of the site. Band rhythm: dark
   hero with a stat strip, cream "why partner" rows, sage decision
   cards, white activation scene, cream commission tables, deep
   green closing band. The deep hero greens are page art, not
   tokens. Mobile-first.
   ============================================================ */

.accent-light { color: #5fb567; }

[data-reveal] { transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); }
[data-reveal].is-hidden { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-hidden { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Every band's grid children may shrink below their content width so a
   long label never pushes a 320px viewport into horizontal scroll. */
.hero__inner > *, .why__row > *, .paths__grid > *, .activation__grid > *, .tiers__grid > *, .cta__grid > * { min-width: 0; }

/* ---- Hero (dark green) -------------------------------------- */
.hero { background: #0b2f16; position: relative; overflow: hidden; }
.hero .kicker { color: #6bb872; font-size: 14px; font-weight: 700; }
.hero__dots { top: 56px; right: 48px; width: 120px; height: 84px; background-image: radial-gradient(rgba(255,255,255,.18) 1.6px, transparent 1.7px); background-size: 16px 16px; z-index: 0; }
.hero__tri { top: 96px; right: 130px; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid var(--green-300); z-index: 0; }

.hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 44px 20px 0; display: grid; grid-template-columns: 1fr; }
.hero__copy { position: relative; z-index: 1; max-width: 540px; }
.hero__title { font-size: clamp(36px, 7vw, 68px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; color: #fff; margin: 16px 0 0; }
.hero__lede { font-size: clamp(16px, 2vw, 17px); line-height: 1.62; color: rgba(255,255,255,.78); margin: 22px 0 0; max-width: 520px; text-wrap: pretty; }
.hero__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; position: relative; z-index: 1; }
/* Long CTA labels wrap instead of clipping against .btn's nowrap. */
.hero__actions .btn { white-space: normal; text-align: center; }

/* Scene: the partner at her desk on a soft backdrop disc with a solid
   grounding ellipse, the design's own treatment for this hero. */
.hero__scene { margin: 28px auto 0; max-width: 560px; position: relative; }
.hero__scene-disc { left: 50%; bottom: 10%; transform: translateX(-50%); width: 92%; aspect-ratio: 1; border-radius: 50%; background: #1d4a2f; z-index: 0; }
.hero__scene-ground { left: 50%; bottom: -3%; transform: translateX(-50%); width: 118%; height: 24%; border-radius: 50%; background: #1f5233; z-index: 0; }
.hero__scene-ring { right: -6%; bottom: 8%; width: 48px; height: 48px; border: 4px solid var(--green-400); opacity: .8; z-index: 0; }
.hero__scene-tri { right: -2%; bottom: 62%; z-index: 0; }
.hero__scene-dots { right: 2%; top: 26%; width: 60px; height: 60px; background-image: radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 1.6px); background-size: 12px 12px; z-index: 0; }
.hero__scene img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .35)); z-index: 1; }

/* Stat strip under the scene, above the band edge. */
.hero__stats-wrap { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 20px 34px; }
.hero__stats { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; max-width: 800px; }
.hero__stat { padding: 0 20px; border-left: 1px solid rgba(255,255,255,.16); }
.hero__stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.hero__stat-value { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -0.015em; line-height: 1.2; }
.hero__stat-label { font-size: 12px; color: rgba(255,255,255,.62); margin-top: 3px; }

@media (min-width: 700px) {
  .hero__inner, .hero__stats-wrap { padding-left: 40px; padding-right: 40px; }
  .hero__stats { display: flex; }
  .hero__stat, .hero__stat:nth-child(odd) { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); }
  .hero__stat:first-child { padding-left: 0; border-left: 0; }
}

/* ---- Why partner (cream) ------------------------------------ */
.why { background: var(--paper); padding: 40px 0 16px; }
.why__row { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--gray-200); }
.why__row:last-child { border-bottom: 0; }
.why__row--lead { padding-top: 0; }
.why__copy { position: relative; z-index: 1; }
.why__heading { font-size: clamp(28px, 5.5vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; color: var(--ink-900); margin: 14px 0 0; }
.why__title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink-900); margin: 0; }
.why__heading + .why__title { margin-top: 32px; }
.why__lede { font-size: 15px; line-height: 1.7; color: var(--gray-600); margin: 14px 0 0; text-wrap: pretty; }

/* Scene art: sage backdrop disc, solid grounding ellipse, sparse garnish.
   The row clips its own overflow so the wide grounding never bleeds. */
.why__art { position: relative; overflow: hidden; padding-bottom: 12px; }
.why__art-disc { left: 50%; top: 0; transform: translateX(-50%); width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--surface-sage); z-index: 0; }
.why__art-disc--right { left: auto; right: 6%; top: 6%; transform: none; width: 36%; }
.why__art-ground { left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 22%; border-radius: 50%; background: #dfe9d3; z-index: 0; }
.why__art-tri { left: 6%; top: 18%; z-index: 0; }
.why__art-tri--right { left: auto; right: 3%; top: 4%; }
.why__art-tri--mid { left: 44%; top: 8%; }
.why__art-dots { right: 4%; top: 10%; width: 60px; height: 44px; background-image: radial-gradient(var(--green-300) 1.6px, transparent 1.7px); background-size: 12px 12px; z-index: 0; }
.why__art-dots--left { right: auto; left: 2%; top: 20%; width: 48px; }
.why__art-ring { right: 0; bottom: 30%; border: 4px solid var(--green-400); z-index: 0; }
.why__art-ring--left { right: auto; left: 0; bottom: 34%; width: 26px; height: 26px; }
.why__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(21, 36, 43, .12)); z-index: 1; }

/* ---- Two paths (sage) --------------------------------------- */
.paths { background: var(--surface-sage); position: relative; overflow: hidden; padding: 48px 0 44px; }
.paths .container { position: relative; z-index: 1; }
.paths__tri { top: 28px; right: 9%; z-index: 0; }
.paths__dots { left: 7%; bottom: 34px; width: 74px; height: 74px; background-image: radial-gradient(var(--green-300) 1.6px, transparent 1.7px); background-size: 16px 16px; opacity: .6; z-index: 0; }
.paths__sq { left: 4%; top: 44px; z-index: 0; }
/* The 69px sticky header must not cover the section the hero's anchor targets. */
#how { scroll-margin-top: 72px; }

.paths__heading { font-size: clamp(26px, 5vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink-900); margin: 14px 0 0; }
.paths__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; margin-top: 34px; }

.path { position: relative; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 30px 24px 26px; display: flex; flex-direction: column; }
.path--agency { border-color: var(--green-200); }
.path__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--green-500); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 12px; border-radius: var(--radius-pill); }
.path__name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); }
.path__title { font-size: clamp(22px, 3.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-900); margin: 12px 0 0; }
.path--agency .path__title { color: var(--green-700); }
.path__lede { font-size: 15px; line-height: 1.65; color: var(--gray-600); margin: 14px 0 0; text-wrap: pretty; }
.path__checks { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.path__checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.path__check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--green-100); color: var(--green-700); }
.path__cta { align-self: flex-start; font-size: 15px; padding: 11px 22px; }
.paths__note { margin: 30px 0 0; text-align: center; font-size: 14px; font-weight: 500; color: var(--gray-600); }

/* ---- Activation (white) ------------------------------------- */
.activation { background: var(--white); padding: 48px 0; }
.activation__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.activation__copy { position: relative; z-index: 1; max-width: 520px; }
.activation__heading { font-size: clamp(26px, 5vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; color: var(--ink-900); margin: 12px 0 0; }
.activation__lede { font-size: 15px; line-height: 1.7; color: var(--gray-600); margin: 18px 0 0; text-wrap: pretty; }
.activation__callout { margin: 24px 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.01em; color: var(--green-600); text-wrap: pretty; }
.activation__fine { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--gray-500); }
.activation__art { position: relative; overflow: hidden; max-width: 560px; }
.activation__art-disc { left: 50%; top: 6%; transform: translateX(-50%); width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--surface-sage); z-index: 0; }
.activation__art-ground { left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 18%; border-radius: 50%; background: #dfe9d3; z-index: 0; }
.activation__art-tri { left: 4%; top: 12%; z-index: 0; }
.activation__art-dots { right: 4%; top: 8%; width: 48px; height: 36px; background-image: radial-gradient(var(--green-300) 1.6px, transparent 1.7px); background-size: 12px 12px; z-index: 0; }
.activation__art-ring { left: 0; bottom: 34%; width: 26px; height: 26px; border: 4px solid var(--green-400); z-index: 0; }
.activation__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(21, 36, 43, .12)); z-index: 1; }

/* ---- Commission tiers (cream) ------------------------------- */
.tiers { background: var(--paper); border-top: 1px solid var(--gray-200); padding: 48px 0 56px; }
.tiers__heading { font-size: clamp(24px, 4.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.16; color: var(--ink-900); margin: 12px 0 0; max-width: 760px; }
.tiers__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; margin-top: 30px; }
.tier { display: flex; flex-direction: column; }
.tier__name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); margin: 0 0 14px; }
/* White panel like the pricing compare table; scrolls sideways on tight
   phones rather than pushing the page wider. */
.tier__panel { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; overflow-x: auto; flex: 1; display: flex; flex-direction: column; }
.ttable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ttable th { text-align: left; padding: 10px 14px; background: var(--gray-50); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); white-space: nowrap; }
.ttable td { padding: 13px 14px; border-top: 1px solid var(--gray-200); color: var(--text-body); vertical-align: middle; line-height: 1.35; }
.ttable td:first-child { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.ttable th:last-child, .ttable td:last-child { text-align: right; }
.ttable td:last-child { color: var(--gray-600); font-variant-numeric: tabular-nums; }
.tier__cap { flex: 1; display: flex; align-items: center; padding: 13px 14px; border-top: 1px solid var(--gray-200); background: var(--gray-50); font-size: 13px; line-height: 1.6; color: var(--gray-600); }
.tier__note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--gray-600); text-align: center; }
.tiers__foot { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--gray-600); text-align: center; }

/* ---- Closing band (deep green) ------------------------------ */
.cta { background: var(--green-800); position: relative; overflow: hidden; padding: 48px 0; }
.cta__dots { right: 48px; top: 48px; width: 120px; height: 84px; background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.5px); background-size: 16px 16px; z-index: 0; }
.cta__tri { right: 38%; top: 34%; transform: rotate(-18deg); z-index: 0; }
.cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.cta__copy { max-width: 560px; }
.cta__heading { font-size: clamp(26px, 5vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.14; color: #fff; margin: 0; }
.cta__lede { margin: 16px 0 0; font-size: 15px; line-height: 1.65; color: rgba(238,241,238,.72); }
.cta__btn { margin-top: 26px; }
.cta__fine { margin: 20px 0 0; font-size: 11px; line-height: 1.6; color: rgba(238,241,238,.42); }
.cta__art { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.cta__art-disc { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.06); z-index: 0; }
.cta__art-ground { left: 50%; bottom: -6%; transform: translateX(-50%); width: 100%; height: 18%; border-radius: 50%; background: rgba(0, 0, 0, .22); z-index: 0; }
.cta__art img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .3)); z-index: 1; }


/* ---- Desktop ------------------------------------------------- */
@media (min-width: 1024px) {
  /* The hero fills the first screen under the 69px sticky header: the
     grid takes the spare height, the copy centres in it, the scene rests
     on the stat strip, and the strip closes the band. */
  .hero { min-height: calc(100vh - 69px); display: flex; flex-direction: column; }
  .hero__inner { flex: 1; width: 100%; padding-top: clamp(36px, 4vw, 64px); grid-template-columns: minmax(420px, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: end; }
  .hero__stats-wrap { width: 100%; }
  /* Copy sits above the vertical centre of the band (owner call). */
  .hero__copy { align-self: center; padding-bottom: 200px; }
  .hero__scene { margin: 0; max-width: 760px; width: 100%; justify-self: end; align-self: end; }

  .why { padding: 88px 0 40px; }
  .why__row { gap: 48px; padding: 32px 0; }
  .why__row--lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding-top: 0; }
  .why__row--lead .why__copy { max-width: 460px; }
  .why__row--art-left { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .why__row--art-left .why__art { order: -1; }
  .why__row--art-left .why__copy { max-width: 400px; }
  .why__row--art-right { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .why__row--art-right .why__copy { max-width: 420px; }

  .paths { padding: 80px 0 64px; }
  .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
  .path { padding: 36px 34px 34px; }

  .activation { padding: 76px 0 72px; }
  .activation__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .activation__art { order: -1; justify-self: start; }

  .tiers { padding: 80px 0 72px; }
  .tiers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
  .ttable { font-size: 14px; }
  .ttable th, .ttable td, .tier__cap { padding-left: 20px; padding-right: 20px; }

  .cta { padding: 72px 0; }
  .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 48px; }
  .cta__art { margin: 0; justify-self: center; }
}