/* ==========================================================================
   partners.tillii.com — component styles additional to the shared
   tokens/base/components/pages stylesheets copied from tillii.com.
   ========================================================================== */

/* Compact horizontal "Partners" context badge next to the main Tillii
   wordmark — NOT a stacked Tillii/Partners lockup (final live-site review
   handover, section 3). Overrides the shared `.site-header__brand span`
   bold-wordmark rule with higher specificity. */
.partner-header__badge {
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-normal, normal);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
  line-height: 1.4;
}
.mobile-nav__top .partner-header__badge { display: none; }

/* The base stylesheet's global `p { color: var(--color-text); }` rule
   (dark ink) beats inherited colour on any <p> inside a dark section that
   isn't itself `.section--dark`, e.g. the footer brand tagline — fix
   contrast here rather than editing the shared stylesheet. Also: `hidden`
   is a UA-stylesheet rule (0-1-0) that a class+attribute selector like
   `.form-status[data-state="success"] { display:block }` (0-2-0) can beat,
   so the confirmation message would render even while `hidden` is set.
   Force it back off explicitly. */
.site-footer__brand p { color: var(--color-text-on-dark-muted); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------
   Trust line under hero CTAs
   -------------------------------------------------------------------- */
.trust-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}
.trust-line svg { width: 14px; height: 14px; color: var(--color-green-700); flex-shrink: 0; }

/* --------------------------------------------------------------------
   Section 3 — vertical cards (expandable)
   -------------------------------------------------------------------- */
.vertical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .vertical-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vertical-grid { grid-template-columns: 1fr; } }

.vertical-card {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.vertical-card:has(.vertical-card__trigger[aria-expanded="true"]) {
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-sm);
}
.vertical-card__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: left;
  background: transparent;
}
.vertical-card__icon { width: 26px; height: 26px; color: var(--color-green-700); flex-shrink: 0; }
.vertical-card__icon svg { width: 100%; height: 100%; }
.vertical-card__title { flex: 1; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.vertical-card__chev { color: var(--color-ink-300); transition: transform var(--duration-base) var(--ease-out); flex-shrink: 0; }
.vertical-card__chev svg { width: 18px; height: 18px; }
.vertical-card__trigger[aria-expanded="true"] .vertical-card__chev { transform: rotate(180deg); color: var(--color-green-700); }
.vertical-card__panel { padding: 0 var(--space-5) var(--space-5); }
.vertical-card__row { margin-bottom: var(--space-3); }
.vertical-card__row .l {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-green-700);
  margin-bottom: var(--space-1);
}
.vertical-card__row p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.vertical-card__panel .btn { margin-top: var(--space-2); }

/* --------------------------------------------------------------------
   Section 4 — partnership route cards
   -------------------------------------------------------------------- */
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .route-grid { grid-template-columns: 1fr; } }

.route-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  background: var(--color-bg-subtle);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.route-card:hover { border-color: var(--color-green-500); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.route-card.is-selected { border-color: var(--color-green-500); background: var(--color-green-100); }
.route-card__title { display:block; font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.route-card__row { margin-bottom: var(--space-3); }
.route-card__row .l {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.route-card__row p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.route-card__cta { margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-green-700); }

/* --------------------------------------------------------------------
   Section 5 — Qualify / Discover / Pilot / Measure / Scale
   -------------------------------------------------------------------- */
.process-sequence {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
@media (max-width: 980px) { .process-sequence { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-sequence { grid-template-columns: 1fr; } }
.process-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.process-step__index { font-size: var(--fs-2xs); color: var(--color-green-300); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3); }
.process-step__icon { width: 24px; height: 24px; color: var(--color-green-300); margin-bottom: var(--space-3); }
.process-step__icon svg { width: 100%; height: 100%; }
.process-step h3 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.process-step p { font-size: var(--fs-xs); color: var(--color-text-on-dark-muted); }

/* --------------------------------------------------------------------
   Section 6 — pilot design table (definition-row layout, stacks cleanly)
   -------------------------------------------------------------------- */
.pilot-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-orange-600);
  background: var(--color-orange-100);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin-bottom: var(--space-8);
}
.pilot-table {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pilot-table__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.pilot-table__row:first-child { border-top: none; }
.pilot-table__row:nth-child(even) { background: var(--color-bg-subtle); }
.pilot-table__label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.pilot-table__value { font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (max-width: 640px) {
  .pilot-table__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* --------------------------------------------------------------------
   Section 7 — freemium steps
   -------------------------------------------------------------------- */
.freemium-steps { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; }
.freemium-step { display: flex; gap: var(--space-4); align-items: flex-start; }
.freemium-step__num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-green-100);
  color: var(--color-green-700);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  display: flex; align-items: center; justify-content: center;
}
.freemium-step p { font-size: var(--fs-sm); color: var(--color-text); padding-top: 4px; }
.freemium-note {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: 720px;
}

/* --------------------------------------------------------------------
   Section 8 — trust principles
   -------------------------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}
@media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-principle { display: flex; gap: var(--space-4); align-items: flex-start; }
.trust-principle__check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(14,225,86,0.14);
  color: var(--color-green-300);
  display: flex; align-items: center; justify-content: center;
}
.trust-principle__check svg { width: 14px; height: 14px; }
.trust-principle h3 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.trust-principle p { font-size: var(--fs-xs); color: var(--color-text-on-dark-muted); }

/* --------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------- */
.faq-list { max-width: 820px; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__heading { margin: 0; }
.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  text-align: left;
  background: transparent;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.faq-item__chev { color: var(--color-ink-300); transition: transform var(--duration-base) var(--ease-out); flex-shrink: 0; }
.faq-item__chev svg { width: 18px; height: 18px; }
.faq-item__trigger[aria-expanded="true"] .faq-item__chev { transform: rotate(180deg); }
.faq-item__panel { padding-bottom: var(--space-5); }
.faq-item__panel p { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 68ch; }

/* --------------------------------------------------------------------
   Final CTA band + merchant link
   -------------------------------------------------------------------- */
.merchant-link { display: block; margin-top: var(--space-6); font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; }
.merchant-link a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-accent-text); }

/* --------------------------------------------------------------------
   Sticky CTA (appears after hero; never covers form controls / mobile nav)
   -------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-header);
  transform: translateY(140%);
  transition: transform var(--duration-base) var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta.is-hidden-near-form { transform: translateY(140%); }
.sticky-cta .btn { box-shadow: var(--shadow-lg); }
@media (max-width: 640px) {
  .sticky-cta { left: var(--space-4); right: var(--space-4); }
  .sticky-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------
   Partner enquiry form — conditional field groups
   -------------------------------------------------------------------- */
.form-panel { background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); max-width: 760px; }
@media (max-width: 640px) { .form-panel { padding: var(--space-5); } }
[data-conditional-field] { display: none; }
[data-conditional-field].is-active { display: flex; }
.form-hint { font-size: var(--fs-2xs); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.field--error[data-required-group] .cluster { outline: 1.5px solid #C4300B; outline-offset: 6px; border-radius: var(--radius-md); }