/* =========================================================================
   WHITE-LABEL PAGE COMPONENTS  (wl-*)
   assets/css/white-label.css

   The single home of every `wl-` rule. Both white-label pages load this file:

     white-label-shopify-development-template.php   (/white-label-shopify-services/)
     white-label-wordpress-template.php             (/white-label-wordpress-services/)

   It began as a verbatim lift of the <style id="wl-page-css"> block the Shopify
   template printed in its body, kept beside it so the WordPress page could
   render the same layout rather than a lookalike. That left the same 20KB of
   CSS written out twice. On the owner's instruction (31 Aug 2026) the inline
   block was removed and the Shopify template enqueued this file instead, so
   the duplication and the drift risk are both gone.

   Edit here and nowhere else. A `wl-` rule added to either template's body
   would re-open exactly the split this file was created to close.

   Values come only from design-tokens.css.
   ========================================================================= */
/* ============================================================
     WHITE-LABEL SHOPIFY DEVELOPMENT — component styles (wl-*)
     Values come only from design-tokens.css.
     ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.wl-hero {
  position: relative;
  padding: var(--hero-pad-top) 0 var(--section-pad);
  /* Hero ground: plain white, per the owner's ruling on every hero. This
     drew the same warm corner glow over a --brand-50 to white wash that
     section-hero.php's `canvas` variant did, and both come off together so
     the two white-label heroes match every other hero on the site. */
  background: var(--bg-surface);
  overflow: hidden;
}

.wl-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gap-fluid-xl);
  align-items: center;
}

.wl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--brand-200);
  color: var(--brand-600);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* The badge's leading dot and its wlPulse keyframes are gone with the
     element they styled. The badge's `gap` only applies between real children,
     so the label is not left indented. */

.wl-hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}

.wl-hero h1 .wl-em {
  font-style: italic;
  color: var(--brand-500);
}

.wl-hero-sub {
  font-size: var(--fs-lede-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 33em;
  margin-bottom: var(--space-6);
}

.wl-hero-points {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.wl-hero-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--text-body);
}

.wl-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

.wl-hero-trust {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.wl-hero-trust img {
  max-height: 40px;
  width: auto;
}

.wl-trust-divider {
  width: 1px;
  height: 34px;
  background: var(--border-default);
}

.wl-clutch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.wl-clutch img {
  max-height: 26px;
}
.wl-clutch .wl-clutch-rating {
  font-weight: 800;
  color: var(--text-heading);
  font-size: var(--fs-body);
}
.wl-clutch .wl-stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: var(--fs-small);
}

/* ── Lead form card ───────────────────────────────────────── */
.wl-form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
}

.wl-form-card h2 {
  font-size: var(--fs-title-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}

.wl-form-card h2 span {
  color: var(--brand-500);
}

.wl-form-card .wl-form-note {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.wl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.wl-field {
  margin-bottom: var(--space-3);
}

.wl-field input,
.wl-field select,
.wl-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-heading);
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 13px var(--space-4);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
}

.wl-field textarea {
  resize: vertical;
  min-height: 84px;
}

.wl-field input::placeholder,
.wl-field textarea::placeholder {
  color: var(--text-muted);
}

.wl-field input:focus,
.wl-field select:focus,
.wl-field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(232, 93, 32, 0.12);
}

/* Honeypot — hidden from humans, catches bots */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wl-form-card .com-new-btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.wl-form-legal {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-align: center;
  margin: var(--space-4) 0 0;
}

/* ── Proof band ───────────────────────────────────────────── */
.wl-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-fluid-md);
}

.wl-proof-item {
  text-align: center;
}

.wl-proof-value {
  font-size: var(--fs-title-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

.wl-proof-value .wl-suffix {
  color: var(--brand-500);
}

.wl-proof-label {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* ── Generic feature/step/service grids ───────────────────── */
.wl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-fluid-md);
}
.wl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-fluid-lg);
  align-items: center;
}

.wl-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.wl-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}

.wl-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.wl-card-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.wl-card h3 {
  font-size: var(--fs-card-title);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin-bottom: var(--space-3);
}

.wl-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* ── How it works (numbered) ──────────────────────────────── */
.wl-step {
  position: relative;
}

.wl-step-num {
  font-family: var(--font-label);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--brand-500);
  letter-spacing: 1px;
  margin-bottom: var(--space-4);
}

.wl-step h3 {
  font-size: var(--fs-card-title);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin-bottom: var(--space-3);
}

.wl-step p {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* ── Confidentiality / NDA (dark dossier) ─────────────────── */
.wl-confidential {
  position: relative;
  background:
    radial-gradient(
      ellipse 50% 60% at 85% 8%,
      rgba(232, 93, 32, 0.14),
      transparent 62%
    ),
    var(--gray-900);
  overflow: hidden;
}

.wl-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(80px, 14vw, 190px);
  letter-spacing: 0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.wl-confidential .wl-grid-2 {
  position: relative;
  z-index: 1;
}

/* The eyebrow is a chip site-wide now (utilities.css), and a chip is a light
     surface, so on this dark band it has to be repainted or it sits as a pale
     lozenge over the artwork. Same translucent brand wash utilities.css gives
     an `.es-bg-dark` section; this band carries its own dark background rather
     than that class, so it does not inherit the rule and states it here.
     The index takes the chip's ink, as it does everywhere else. */
.wl-confidential .es-eyebrow {
  border-color: rgba(255, 157, 107, 0.28);
  background: rgba(232, 93, 32, 0.14);
  color: var(--brand-300);
}
.wl-confidential .es-index {
  color: inherit;
}
.wl-confidential h2 {
  color: var(--text-inverse);
}

.wl-confidential-copy {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gray-300);
  margin: var(--space-5) 0 0;
  max-width: 34em;
}

.wl-dossier {
  position: relative;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-lg);
}

.wl-dossier-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: var(--space-6);
}

.wl-dossier-head::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #27c93f;
  box-shadow: 0 0 10px rgba(39, 201, 63, 0.6);
}

.wl-dossier ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wl-dossier li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--gray-700);
  font-size: var(--fs-small);
  color: var(--gray-200);
}

.wl-dossier li:last-child {
  border-bottom: 0;
}
.wl-dossier li strong {
  color: var(--text-inverse);
}

.wl-dossier li .wl-check {
  background: rgba(232, 93, 32, 0.15);
}

/* ── Comparison table ─────────────────────────────────────── */
.wl-compare-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.wl-compare {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--bg-surface);
}

.wl-compare th,
.wl-compare td {
  padding: var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.wl-compare thead th {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-heading);
  background: var(--gray-50);
}

.wl-compare thead th.wl-col-us {
  color: var(--brand-600);
  background: var(--brand-50);
  border-bottom: 2px solid var(--brand-500);
}

.wl-compare td.wl-col-us {
  background: var(--brand-50);
}

.wl-compare .wl-metric-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: var(--fs-small);
}

.wl-compare h4 {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 var(--space-1);
}

.wl-compare td.wl-col-us h4 {
  color: var(--brand-600);
}

.wl-compare p {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}

/* ── Pricing / engagement models ──────────────────────────── */
.wl-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-fluid-lg);
}

.wl-plan {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.wl-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.wl-plan--featured {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-brand);
}

.wl-plan-badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-7);
  background: var(--brand-500);
  color: var(--text-inverse);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}

.wl-plan-kicker {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--space-2);
}

.wl-plan h3 {
  font-size: var(--fs-title-sm);
  font-weight: 800;
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}
.wl-plan-desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* The "Why us" editorial rows that used to be styled here now ship with
     template-parts/sections/section-why.php, which carries its own scoped
     stylesheet under `es-why__*` names. */

/* ── Final CTA / scheduler ────────────────────────────────── */
.wl-cta-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap-fluid-xl);
  align-items: center;
}

.wl-cta-steps {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.wl-cta-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-body);
  color: var(--text-body);
}

.wl-step-num-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-500);
  color: var(--text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--fs-small);
}

.wl-contact-card {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
}

.wl-contact-card:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-sm);
}
.wl-contact-card .wl-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wl-contact-card span {
  font-weight: 700;
  color: var(--text-heading);
  font-size: var(--fs-body);
}

.wl-calendly-panel {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-height: 640px;
  position: relative;
}

.wl-calendly-panel .calendly-inline-widget {
  min-width: 280px;
  height: 680px;
}

.wl-calendly-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.wl-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--brand-100);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: wlSpin 0.9s linear infinite;
}

@keyframes wlSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── FAQ ──────────────────────────────────────────────────── */
.wl-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--gap-fluid-xl);
  align-items: start;
}
.wl-faq-aside {
  position: sticky;
  top: 120px;
}

#wlFaqAccordion .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
}
#wlFaqAccordion .accordion-item:first-of-type {
  border-top: 1px solid var(--border-subtle);
}
#wlFaqAccordion .accordion-button {
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-heading);
  padding: var(--space-5) var(--space-2);
  letter-spacing: -0.01em;
}
#wlFaqAccordion .accordion-button::after {
  background-image: none;
  content: "+";
  font-family: var(--font-label);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand-500);
  width: auto;
  height: auto;
  transition: transform var(--duration-normal) var(--ease-out);
}
#wlFaqAccordion .accordion-button:not(.collapsed) {
  color: var(--brand-600);
}
#wlFaqAccordion .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}
#wlFaqAccordion .accordion-body {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
  padding: 0 var(--space-2) var(--space-5);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .wl-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-fluid-lg);
  }
  .wl-form-card {
    order: -1;
  }
  .wl-proof {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-fluid-lg);
  }
  .wl-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .wl-grid-2 {
    grid-template-columns: 1fr;
  }
  .wl-pricing-grid {
    grid-template-columns: 1fr;
  }
  .wl-cta-grid {
    grid-template-columns: 1fr;
  }
  .wl-faq-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-fluid-lg);
  }
  .wl-faq-aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .wl-grid-3 {
    grid-template-columns: 1fr;
  }
  .wl-form-row {
    grid-template-columns: 1fr;
  }
}