/* ============================================================
   OrgMesh site-wide texture layer
   Loaded after page CSS so surfaces stay consistent everywhere.
   Header styling is intentionally left alone.
   ============================================================ */

body {
  background:
    var(--texture-paper),
    linear-gradient(180deg, #f8f5ef 0%, var(--bg) 46%, #f0f3f6 100%);
  background-size: 180px 180px, auto;
}

body::before {
  background:
    var(--texture-grid),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .18), transparent 44%);
  background-size: 42px 42px, auto;
  opacity: .18;
}

main,
.page-shell,
.about-page-shell,
.ai-page {
  position: relative;
}

main::before,
.page-shell::before,
.about-page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--texture-grid),
    radial-gradient(circle at 8% 10%, rgba(235, 163, 51, .04), transparent 28%),
    radial-gradient(circle at 100% 34%, rgba(54, 84, 82, .035), transparent 30%);
  background-size: 44px 44px, auto, auto;
  opacity: .16;
}

.hero-card,
.about-hero-panel,
.ai-hero-card,
.register-page {
  background:
    var(--texture-warm-panel),
    linear-gradient(135deg, rgba(255, 252, 247, .98), rgba(247, 242, 234, .96));
  box-shadow:
    var(--shadow-md, 0 10px 24px rgba(12, 28, 52, .08)),
    inset 0 1px 0 rgba(255, 255, 255, .46);
}

.hero-card::before,
.about-hero-panel::before,
.ai-hero-card::before,
.pricing-card.featured::before,
.cta-card::before,
.about-cta-panel::before {
  background:
    linear-gradient(90deg, rgba(216, 149, 39, .82), rgba(54, 84, 82, .66));
}

.hero-card::after,
.about-hero-panel::after,
.ai-hero-card::after,
.register-card::after {
  opacity: .16;
}

.content-card,
.card,
.card-soft,
.feature,
.feature-detail-card,
.comparison-card,
.step-card,
.pricing-card,
.pricing-card-inner,
.addon-card,
.ai-price-card,
.example-section .section-heading,
.ai-example-section .section-heading,
.ai-ready-section .section-heading,
.section-note,
.cta-card,
.about-purpose-panel,
.about-problem-card,
.about-principle-card,
.about-structure-card,
.about-fit-card,
.about-outcome-feature,
.about-outcomes-side,
.about-outcomes-note,
.about-cta-panel,
.about-workflow-step,
.trust-item,
.preview-note,
.dashboard-card,
.dashboard-action-card,
.dashboard-module-card,
.dashboard-detail-card,
.dashboard-panel,
.register-card {
  background:
    var(--texture-warm-panel),
    linear-gradient(135deg, rgba(255, 252, 247, .98), rgba(248, 244, 237, .96));
  box-shadow:
    var(--shadow-sm, 0 6px 16px rgba(12, 28, 52, .06)),
    inset 0 1px 0 rgba(255, 255, 255, .42);
}

.content-card:hover,
.card-soft:hover,
.feature:hover,
.feature-detail-card:hover,
.pricing-card:hover,
.addon-card:hover,
.about-problem-card:hover,
.about-principle-card:hover,
.about-structure-card:hover,
.about-fit-card:hover,
.about-outcome-feature:hover,
.dashboard-action-card:hover,
.dashboard-module-card:hover,
.dashboard-detail-row:hover,
.trust-item:hover,
.preview-note:hover {
  background:
    var(--texture-fiber),
    linear-gradient(135deg, rgba(255, 252, 247, .98), rgba(250, 246, 240, .97));
}

.content-grid,
.pricing-grid,
.comparison-grid,
.feature-detail-grid,
.steps-grid,
.about-problem-grid,
.about-principles-grid,
.about-structure-grid,
.about-fit-grid,
.dashboard-grid,
.dashboard-table,
.dashboard-list,
.table-wrap {
  background:
    var(--texture-grid),
    rgba(24, 37, 56, .1);
  background-size: 38px 38px, auto;
}

.form-control,
.form-select,
.form-textarea,
.form-group input,
.form-group select,
.form-group textarea,
.dashboard-filter,
.dashboard-search,
.register-card input,
.register-card select,
.register-card textarea {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 251, 252, .96)),
    var(--surface);
}

.table th,
.dashboard-table th {
  background:
    var(--texture-fiber),
    linear-gradient(180deg, rgba(247, 249, 251, .98), rgba(240, 244, 247, .96));
}

.table tbody tr:hover td,
.dashboard-table tbody tr:hover td {
  background:
    linear-gradient(90deg, rgba(228, 237, 245, .34), rgba(247, 249, 251, .96));
}

.ai-hero-photo,
.about-hero-photo,
.pricing-hero-photo {
  position: relative;
}

.ai-hero-photo::after,
.about-hero-photo::after,
.pricing-hero-photo::after {
  background:
    var(--texture-dark-panel),
    linear-gradient(180deg, rgba(8, 28, 42, .08), rgba(8, 28, 42, .2));
}

.pitch-hero-card {
  background:
    var(--texture-dark-panel),
    linear-gradient(90deg, rgba(15, 37, 53, .88) 0%, rgba(15, 37, 53, .72) 42%, rgba(15, 37, 53, .12) 72%, rgba(15, 37, 53, 0) 100%),
    var(--pitch-image, url("/assets/images/orgmesh-warm/operations-table.jpg")) center center / cover no-repeat;
  box-shadow:
    0 18px 46px rgba(76, 50, 20, .09),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

.pricing-card.featured,
.ai-price-card-featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 149, 39, .08), transparent 36%),
    var(--texture-warm-panel),
    linear-gradient(135deg, rgba(255, 252, 247, .99), rgba(247, 241, 231, .97));
}

.btn.primary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 42%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, #e6a23a, #d18a22);
}

.btn.secondary {
  background:
    var(--texture-fiber),
    rgba(255, 250, 242, .72);
}

@media (max-width: 760px) {
  main::before,
  .page-shell::before,
  .about-page-shell::before {
    opacity: .1;
  }

  .hero-card,
  .about-hero-panel,
  .ai-hero-card,
  .pitch-hero-card,
  .register-page,
  .content-card,
  .card,
  .feature-detail-card,
  .pricing-card,
  .register-card {
    background:
      var(--texture-fiber),
      linear-gradient(135deg, rgba(255, 252, 247, .98), rgba(249, 244, 235, .97));
  }
}

/* Pricing CTA must stay dark and readable after this global texture layer. */
main:has(.pricing-grid) .cta-card {
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 28, 42, .94), rgba(8, 28, 42, .76) 50%, rgba(8, 28, 42, .42)),
    linear-gradient(180deg, rgba(8, 28, 42, .18), rgba(8, 28, 42, .34)),
    url("/assets/images/photos/warm-cta-boardroom-collaboration.png") center center / cover no-repeat;
  box-shadow:
    0 24px 58px rgba(12, 28, 42, .22),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

main:has(.pricing-grid) .cta-card::before,
main:has(.pricing-grid) .cta-card::after {
  display: none;
}

main:has(.pricing-grid) .cta-card h2,
main:has(.pricing-grid) .cta-card p,
main:has(.pricing-grid) .cta-card .cta-actions {
  position: relative;
  z-index: 1;
}

main:has(.pricing-grid) .cta-card h2 {
  color: #fff;
  text-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

main:has(.pricing-grid) .cta-card p {
  color: rgba(255, 255, 255, .9);
}

main:has(.pricing-grid) .cta-card .btn.secondary {
  border-color: rgba(255, 255, 255, .74);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* Pricing hero should be an open editorial band, not a textured card. */
main:has(.pricing-grid) > .hero-section {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(54px, 7vw, 92px) max(22px, calc((100vw - 1200px) / 2)) clamp(42px, 6vw, 72px) !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(216, 149, 39, .1), transparent 30%),
    linear-gradient(90deg, #fffaf2 0%, rgba(255, 250, 242, .96) 48%, rgba(255, 250, 242, .78) 100%);
}

main:has(.pricing-grid) .hero-card {
  width: min(100%, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main:has(.pricing-grid) .hero-card::before,
main:has(.pricing-grid) .hero-card::after {
  display: none !important;
}

main:has(.pricing-grid) .hero-copy {
  max-width: 780px;
}

main:has(.pricing-grid) .hero-copy h1 {
  max-width: 11.5ch;
  margin-bottom: 22px;
  color: #365452;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.4vw, 5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: 0;
}

main:has(.pricing-grid) .hero-copy p {
  max-width: 58ch;
  color: rgba(36, 53, 54, .82);
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  font-weight: 500;
  line-height: 1.72;
}

main:has(.pricing-grid) .pricing-hero-photo {
  display: none;
}

@media (max-width: 760px) {
  main:has(.pricing-grid) > .hero-section {
    padding: 36px 22px 42px;
  }

  main:has(.pricing-grid) .hero-card {
    width: 100%;
  }

  main:has(.pricing-grid) .hero-copy h1 {
    max-width: 10.5ch;
    font-size: clamp(2.45rem, 11vw, 3.25rem);
    line-height: 1;
  }
}