/**
 * Evolabs Enterprise Polish
 * Unifies typography, spacing, buttons, cards, and micro-interactions
 * across all pages without changing structure or branding.
 *
 * Typography colors are defined in styles.css :root
 * (--color-section-eyebrow, --color-section-heading, --color-body-text, --color-muted-text).
 */

:root {
  /* 8-point spacing system */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 120px;
  --space-9: 160px;
  --space-section: clamp(120px, 12vw, 180px);
  --space-section-hero: clamp(180px, 14vw, 240px);
  --space-section-sm: clamp(80px, 10vw, 132px);
  --space-split: clamp(48px, 5vw, 72px);
  --space-head: clamp(28px, 2.2vw, 40px);
  --space-card-gap: clamp(32px, 3vw, 56px);
  --space-grid-gap: clamp(48px, 4vw, 72px);

  /* Typography scale (~25–35% enterprise lift) */
  --type-hero: clamp(48px, 5.6vw, 76px);
  --type-section: clamp(40px, 4.2vw, 60px);
  --type-subhead: clamp(26px, 2.5vw, 36px);
  --type-card-title: clamp(20px, 1.35vw, 28px);
  --type-body: clamp(16px, 1.05vw, 20px);
  --type-body-sm: clamp(15px, 0.95vw, 17px);
  --type-eyebrow: 13px;
  --leading-hero: 1.05;
  --leading-section: 1.1;
  --leading-body: 1.65;
  --measure: var(--max-prose, 44rem);
  --eyebrow-tracking: 0.16em;

  --icon-size: 24px;
  --icon-size-sm: 22px;

  --radius-card: 22px;
  --radius-card-lg: 26px;
  --radius-input: 14px;
  --card-pad: clamp(40px, 3.5vw, 56px);
  --card-border: 1px solid rgba(16, 24, 32, 0.06);
  --card-shadow: 0 12px 36px rgba(16, 24, 32, 0.05);
  --card-shadow-hover: 0 20px 48px rgba(16, 24, 32, 0.09);

  --btn-height: 52px;
  --btn-pad-x: 26px;
  --btn-shadow: 0 10px 28px rgba(15, 110, 169, 0.18);
  --btn-shadow-hover: 0 14px 36px rgba(15, 110, 169, 0.24);
  --motion-ui: var(--motion-ui-duration, 240ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  --motion-ui-duration: 240ms;
}

/* ── Base typography ── */
body {
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

h1,
h2,
h3,
h4 {
  font-family: "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, sans-serif;
}

/* Hero headings — one scale sitewide (size only; color unchanged) */
.home-page h1,
.page-hero h1,
.products-hero-copy h1,
.solutions-page .solutions-hero-copy h1,
.solutions-page .solx-hero-copy h1,
.hero h1 {
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  font-weight: 700;
}

/* Major section headings */
.section .section-heading h2,
.section h2:not(.demo-form-card h2),
.section-heading h2,
.cta-panel h2,
.cta-panel-copy h2,
.split-intro h2,
.product-focus-copy h2,
.capability-copy h2,
.operations-layer-copy h2,
.legal-content h2,
.sol-trust-heading h2,
.sol-final-cta .sol-cta-panel h2,
.solutions-page .solx-copy h2,
.demo-form-card h2 {
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: 700;
  color: var(--color-section-heading);
}

.section.dark .cta-panel h2,
.section.dark .cta-panel-copy h2,
.section.dark .sol-cta-panel h2,
.section.dark .section-heading h2 {
  color: var(--color-section-heading-inverse);
}

h2 {
  font-size: var(--type-section);
  line-height: var(--leading-section);
  font-weight: 700;
}

/* Card titles */
.suite-card-head h3,
.suite-card-featured .suite-card-head h3,
.eco-card h3,
.integ-head h3,
.tile-grid h3,
.product-grid h3,
.sol-trust-card strong,
.sol-enterprise-card h3,
.sol-flip-front h3,
.faq-item h3,
.faq-question h3,
.footer-proof-grid b,
.legal-content h3 {
  font-size: var(--type-card-title);
  line-height: 1.28;
  font-weight: 700;
}

h3 {
  font-size: var(--type-card-title);
  line-height: 1.28;
  font-weight: 700;
}

/* Eyebrows / section labels */
.eyebrow,
.section-label,
.text-eyebrow,
.demo-section-label,
.demo-form-eyebrow,
.capability-preview-label,
.footer-kicker,
.eyebrow.evo-supporting-label,
.product-ecosystem-label.eyebrow {
  color: var(--color-section-eyebrow);
}

.eyebrow,
.demo-form-eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 800;
  letter-spacing: var(--eyebrow-tracking, 0.16em);
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: var(--space-2, 16px);
}

.section-heading .eyebrow,
.split-intro .eyebrow,
.page-hero .eyebrow,
.cta-panel .eyebrow,
.cta-panel-copy .eyebrow,
.demo-hero .eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: 800;
  letter-spacing: var(--eyebrow-tracking, 0.16em);
  text-transform: uppercase;
  line-height: 1.4;
  max-width: none;
  margin-bottom: var(--space-2, 16px);
}

/* Body copy */
.section p:not(.eyebrow):not(.footer-kicker),
.split-intro > p,
.section-heading p:not(.eyebrow),
.muted,
.products-hero-copy p:not(.eyebrow),
.solutions-page .solutions-hero-copy p:not(.eyebrow),
.home-page .hero-content > p:not(.eyebrow),
.legal-content p,
.sol-trust-card p,
.sol-section-intro p,
.suite-intro,
.eco-card > p,
.product-focus-copy p:not(.eyebrow) {
  font-size: var(--type-body);
  line-height: var(--leading-body);
  max-width: var(--measure);
  color: var(--color-muted-text);
}

/* Dark sections keep light body copy for contrast */
.section.dark p:not(.eyebrow),
.section.dark .muted,
.section.dark .cta-panel p:not(.eyebrow),
.section.dark .cta-panel-copy p:not(.eyebrow),
.section.dark .product-focus-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.86);
}

.home-page .hero-content > p:not(.eyebrow) {
  font-weight: 500;
}

.split-intro > p,
.muted {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.section-heading {
  margin-bottom: var(--space-5);
}

.section-heading .eyebrow + h2,
.section-heading .eyebrow + h3,
.split-intro .eyebrow + h2 {
  margin-top: 0;
}

.section-heading h2 + p,
.section-heading h3 + p,
.split-intro h2 + p,
.section-heading p:not(.eyebrow) {
  margin-top: var(--space-head);
}

.section .section-heading h3 {
  font-size: var(--type-subhead);
  line-height: 1.25;
}

/* ── Spacing rhythm ── */
.section-inner {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.products-page main > .section .section-inner {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section.pale .section-inner,
.section.dark .section-inner {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.footer-shell {
  padding-top: 72px;
  padding-bottom: var(--space-4);
}

.trust-band .trust-grid {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.suite-grid,
.eco-grid,
.integ-grid,
.tile-grid,
.faq-list {
  margin-top: var(--space-5);
  gap: var(--space-card-gap);
}

.split-intro,
.ecosystem-layout,
.cta-panel,
.operations-layer,
.capability-layout {
  gap: var(--space-grid-gap, var(--space-split));
  align-items: center;
}

.footer-main {
  gap: var(--space-split);
  align-items: start;
}

.product-grid {
  gap: var(--space-card-gap);
}

/* ── Buttons ── */
.demo-button:not(.btn-liquid),
.primary-action:not(.btn-liquid) {
  min-height: var(--btn-height);
  padding: 0 6px 0 var(--btn-pad-x);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition:
    background var(--motion-ui),
    transform var(--motion-ui),
    box-shadow var(--motion-ui);
}

.demo-button:not(.btn-liquid):hover,
.primary-action:not(.btn-liquid):hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.secondary-action,
.footer-secondary,
.footer-cta {
  min-height: var(--btn-height);
  padding: 0 var(--btn-pad-x);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 999px;
  transition:
    background var(--motion-ui),
    border-color var(--motion-ui),
    color var(--motion-ui),
    transform var(--motion-ui),
    box-shadow var(--motion-ui);
}

.secondary-action:hover {
  transform: translateY(-2px);
}

.hero-actions,
.demo-hero-actions {
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ── Cards ── */
.suite-card,
.eco-card,
.integ-card,
.faq-item,
.step-grid div,
.trust-grid span,
.sol-trust-card,
.sol-enterprise-card,
.cta-panel.light,
.product-focus-panel {
  border-radius: var(--radius-card);
}

.suite-card,
.eco-card,
.integ-card,
.faq-item,
.sol-trust-card,
.sol-enterprise-card {
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  transition:
    transform var(--motion-ui),
    box-shadow var(--motion-ui),
    border-color var(--motion-ui);
}

.suite-card:hover,
.suite-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.eco-card:hover,
.eco-card:focus-within,
.integ-card:hover,
.integ-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.faq-item:hover,
.faq-item:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

.sol-trust-card:hover,
.sol-enterprise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.suite-card-body,
.eco-card,
.integ-card {
  padding: var(--card-pad);
}

.step-grid div {
  padding: var(--card-pad);
  border: var(--card-border);
  box-shadow: 0 8px 24px rgba(16, 24, 32, 0.05);
  transition: transform var(--motion-ui), box-shadow var(--motion-ui);
}

.step-grid div:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow);
}

.trust-grid {
  gap: var(--space-3);
}

.trust-grid span {
  border: var(--card-border);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  transition: transform var(--motion-ui), box-shadow var(--motion-ui);
}

.trust-grid span:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

/* ── Pills & badges ── */
.hero-pill-list span,
.demo-trust-pills span,
.demo-mini-pill,
.sol-trust-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: border-color var(--motion-ui), background var(--motion-ui);
}

/* ── Forms (shared patterns) ── */
.demo-form input,
.demo-form select,
.demo-form textarea,
.demo-field input,
.demo-field textarea {
  border-radius: var(--radius-input);
  transition: border-color var(--motion-ui), box-shadow var(--motion-ui);
}

/* ── Links ── */
.footer-links-grid a,
.footer-bottom-links a,
.footer-contact-link {
  transition: color var(--motion-ui);
}

.footer-links-grid a:hover,
.footer-bottom-links a:hover,
.footer-contact-link:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Images ── */
.suite-card-visual img,
.eco-card img,
.hero-card-frame img,
.product-grid img {
  transition: transform var(--motion-ui);
}

.suite-card:hover .suite-card-visual img,
.eco-card:hover img {
  transform: scale(1.02);
}

/* ── CTA panels ── */
.cta-panel {
  border-radius: var(--radius-card-lg);
  padding: clamp(40px, 4vw, 56px);
}

.cta-panel.light {
  border: var(--card-border);
  box-shadow: var(--card-shadow);
}

/* ── Solutions page ── */
.solutions-page .sol-flip-front,
.solutions-page .sol-flip-back {
  border-radius: var(--radius-card);
}

.solutions-page .sol-enterprise-card,
.solutions-page .sol-trust-card {
  padding: var(--card-pad);
}

.demo-page .demo-form-card-header .demo-form-eyebrow {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
  max-width: none;
}

/* ── Demo page: preserve conversion layout, align tokens ── */
.demo-page .demo-section-label {
  font-size: var(--type-eyebrow);
  letter-spacing: 0.14em;
}

.demo-page .demo-product-card {
  border-radius: 14px;
  transition: transform var(--motion-ui), border-color var(--motion-ui), background var(--motion-ui);
}

.demo-page .demo-product-card:hover {
  transform: translateY(-2px);
}

/* Demo form card stays intentional focal point — do not flatten */
.demo-page .demo-form-card {
  border-radius: var(--radius-card-lg);
}

/* ── Visual rhythm: breathing room between major blocks ── */
.section + .section.pale,
.section.pale + .section:not(.pale),
.section + .section.dark,
.section.dark + .section:not(.dark) {
  margin-top: 0;
}

.home-page .section.dark + .section.pale {
  margin-top: 0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .suite-card,
  .eco-card,
  .integ-card,
  .demo-button,
  .primary-action,
  .secondary-action,
  .suite-card-visual img,
  .eco-card img {
    transition: none;
  }

  .suite-card:hover,
  .eco-card:hover,
  .integ-card:hover,
  .primary-action:hover,
  .secondary-action:hover {
    transform: none;
  }
}

/* ── Responsive: keep mobile readable, avoid desktop-only scale ── */
@media (max-width: 1100px) {
  :root {
    --type-hero: clamp(40px, 6vw, 56px);
    --type-section: clamp(32px, 4.4vw, 44px);
    --type-subhead: clamp(24px, 3vw, 30px);
    --type-card-title: 22px;
    --space-section: clamp(96px, 10vw, 136px);
    --space-section-hero: clamp(120px, 12vw, 180px);
    --space-grid-gap: clamp(32px, 4vw, 48px);
    --card-pad: clamp(32px, 4vw, 44px);
  }

  .hero,
  .page-hero,
  .products-hero {
    min-height: auto;
  }

  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 96px;
  }

  .hero-card-panel {
    min-width: 0;
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }

  .hero-card-inner {
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  :root {
    --type-hero: clamp(34px, 8vw, 44px);
    --type-section: clamp(28px, 6.2vw, 36px);
    --type-subhead: clamp(22px, 5vw, 28px);
    --type-card-title: 20px;
    --type-body: 16px;
    --type-eyebrow: 12px;
    --space-section: var(--space-section-sm);
    --space-section-hero: clamp(96px, 14vw, 140px);
    --space-head: 24px;
    --card-pad: 28px;
    --space-card-gap: 24px;
    --space-grid-gap: 32px;
    --btn-height: 48px;
    --btn-pad-x: 22px;
    --icon-size: 22px;
  }

  .section-inner,
  .section.pale .section-inner,
  .section.dark .section-inner,
  .products-page main > .section .section-inner {
    padding-top: var(--space-section-sm);
    padding-bottom: var(--space-section-sm);
  }

  .section-heading {
    margin-bottom: var(--space-3);
  }

  .split-intro,
  .ecosystem-layout,
  .cta-panel,
  .operations-layer,
  .capability-layout,
  .footer-main {
    gap: var(--space-5);
  }

  .footer-shell {
    padding-top: var(--space-5);
  }

  .hero,
  .page-hero,
  .products-hero,
  .home-hero {
    min-height: 0;
  }

  .page-hero .section-inner,
  .products-hero-layout {
    padding-top: 108px;
    padding-bottom: 48px;
  }
}

/* ============================================================
   Enterprise Scale Layer — 2026-07-23
   Global proportion lift without redesigning layouts.
   ============================================================ */

/* Liquid CTAs share the same button token scale */
.btn-liquid,
.demo-button.btn-liquid,
.primary-action.btn-liquid,
.site-header .demo-button.btn-liquid {
  min-height: var(--btn-height);
  padding-left: var(--btn-pad-x);
  font-size: 15px;
}

.primary-action,
.secondary-action {
  min-height: var(--btn-height);
}

/* Hero vertical rhythm */
.home-hero,
.page-hero,
.products-hero,
.solutions-hero,
.solx-hero,
.demo-hero,
.hero {
  --hero-pad-y: var(--space-section-hero);
}

.page-hero .section-inner,
.products-hero-layout,
.solutions-page .solutions-hero-layout,
.solx-hero-inner,
.demo-hero .section-inner {
  padding-top: var(--space-section-hero);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.home-page .home-hero {
  padding-top: max(96px, calc(var(--space-section-hero) * 0.55));
}

/* Navigation: spacing only */
.site-header {
  padding-left: clamp(16px, 2vw, 32px);
  padding-right: clamp(16px, 2vw, 32px);
}

.nav-shell {
  gap: clamp(4px, 0.6vw, 10px);
}

.nav-link > a,
.nav-shell > .nav-link:not(.menu-trigger) {
  padding-inline: 12px;
}

/* Mega menu scale handled in styles.css — avoid conflicting overrides */

/* Icon scale beside copy */
.solx-value-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.solx-nav-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.platform-band-icon,
.prod-svc-icon,
.prod-rfid-feature-icon,
.prod-ind-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.platform-band-icon svg,
.prod-svc-icon svg,
.prod-rfid-feature-icon svg,
.prod-ind-icon svg,
.solx-value-icon svg,
.solx-journey-icon svg {
  width: 100%;
  height: 100%;
}

.solx-journey-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Cards: lighter chrome, more internal air */
.suite-card,
.eco-card,
.integ-card,
.product-card,
.sol-trust-card,
.sol-enterprise-card {
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

.suite-card,
.eco-card,
.integ-card {
  padding: var(--card-pad);
}

/* Imagery: allow visuals to dominate text columns */
.suite-card-visual img,
.eco-card img,
.product-focus-visual img,
.capability-visual img,
.operations-layer-visual img,
.solutions-page .sol-solution-media img {
  max-height: min(640px, 70vh);
  width: 100%;
  object-fit: contain;
}

.solx-page .solx-media.solx-art picture img,
.solx-page .solx-media.solx-art > img,
.solx-media.solx-art picture img,
.solx-media.solx-art > img {
  max-height: none;
  height: 100%;
  object-fit: cover;
}

/* Two-column enterprise grids */
.solx-row,
.ecosystem-layout,
.capability-layout,
.operations-layer,
.product-focus {
  gap: var(--space-grid-gap);
}

/* Modal scale */
.prod-hw-modal-dialog,
.prod-catalog-dialog,
.hw-modal-panel,
.device-modal-panel {
  width: min(1120px, calc(100vw - 32px));
  max-width: min(1120px, calc(100vw - 32px));
}

.prod-hw-modal-body,
.prod-catalog-body,
.hw-modal-body {
  padding: var(--space-5) var(--space-6);
  gap: var(--space-5);
}

/* Footer breathing room */
.site-footer .footer-shell,
.site-footer .footer-shell.section-inner {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(24px, 3vw, 40px);
  width: min(var(--max), calc(100% - 2 * var(--page-gutter)));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.footer-top-band {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
}

.footer-links-grid {
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-5);
}

.footer-col-heading {
  font-size: 14px;
  margin-bottom: 16px;
}

.footer-links-grid a {
  font-size: 15px;
  line-height: 1.55;
  padding-block: 4px;
}

.footer-brand-name {
  font-size: 1.25rem;
}

/* Solutions in-page nav remains subordinate to site chrome — keep stack compact */
.solx-page {
  --solx-header-clear: 76px;
  --solx-nav-h: 48px;
  --solx-section-gap: clamp(44px, 5.5vw, 68px);
}

.solx-row {
  width: min(var(--max), calc(100% - 2 * var(--page-gutter, 24px)));
  max-width: none;
}

.solx-hero-brand {
  font-size: clamp(2.1rem, 3.6vw, 3rem);
}

.solx-hero-copy h1 {
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
}

/* Products: stop fighting the global section scale */
.products-page {
  --space-section: clamp(120px, 12vw, 160px);
  --products-content-max: var(--max);
  --type-eyebrow: 13px;
}

@media (max-width: 760px) {
  .page-hero .section-inner,
  .products-hero-layout,
  .solx-hero-inner,
  .demo-hero .section-inner {
    padding-top: calc(var(--space-section-hero) * 0.85);
    padding-bottom: var(--space-5);
  }

  .prod-hw-modal-body,
  .prod-catalog-body,
  .hw-modal-body {
    padding: var(--space-4);
  }
}