/* =====================================================================
   NETWOVEN LANDING PAGES (shared stylesheet): nw-landing.css
   Everything is scoped to .nw-landing, so it only affects landing pages
   that use the .nw-landing wrapper. Load it on those pages only.

   SECTIONS
   1. Tokens (extra --nw-* values, incl. dark-section colours)
   2. Hero + hero dashboard card
   3. Icon tiles, problem cards, feature grid
   4. [DARK] How it works
   5. Benefits, Why Netwoven, [DARK] final CTA + form
   6. Grid locks, responsive rules, hover effects, reduced motion

   EDITING DARK SECTIONS: change the --nw-navy* tokens (section 1) for colours,
   or the .how-card / #cta rules for spacing and hover.
   ===================================================================== */

/* Shared landing page styles. Scoped to .nw-landing. */
/* ===== TOKENS: extra page tokens (only where no existing --nw-* token fits) =====
   DARK SECTION COLOURS: --nw-navy (How it works bg), --nw-navy-card, --nw-navy-card-hover,
   --nw-on-navy-eyebrow, --nw-on-navy-text. The CTA gradient is in the CTA block below. */
.nw-landing {
  --nw-accent-yellow: #ffbd1f;
  --nw-navy: #0a2a5c;
  --nw-navy-card: #12386f;
  --nw-navy-card-hover: #174581;
  --nw-on-navy-eyebrow: #afd9ff;
  --nw-on-navy-text: #c9d6ea;
  --nw-warn-label: #8a3a10;
  --nw-warn-value: #b5410f;
  --nw-score-amber: #b26200;
  --nw-icon-red: #dc2626;
  --nw-icon-purple: #9333ea;
  --nw-icon-orange: #ea580c;
  --nw-border-yellow: #f7e3a1;
  --nw-focus-ring: #60a5fa;
  --nw-focus-ring-soft: rgba(37,99,235,.15);
  --nw-glow-blue: rgba(59,130,246,.05);
  --nw-glow-purple: rgba(139,92,246,.05);
  --nw-shadow-hero: 0 24px 60px rgb(0 0 0 / 11%);
  --nw-shadow-hero-hover: 0 32px 80px rgba(15,23,42,.18);
  --nw-shadow-brand: 0 12px 24px rgba(37,99,235,.24);
  --nw-shadow-on-dark: 0 20px 40px rgba(0,0,0,.15);
}

.nw-landing,
.nw-landing h1,
.nw-landing h2,
.nw-landing h3,
.nw-landing p,
.nw-landing li,
.nw-landing a,
.nw-landing label,
.nw-landing input,
.nw-landing button {
  font-family: Inter,'Segoe UI',system-ui,sans-serif;
}

#HeaderMain { position: absolute; }
@media (max-width:768px){#HeaderMain { position: absolute!important; }}
.hero-gradient-text { background: linear-gradient(to right,#3b82f6,#8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.nw-landing {
  color: var(--nw-text-heading);
  isolation: isolate;
}

.nw-landing,
.nw-landing * {
  box-sizing: border-box;
}

.nw-landing a {
  color: var(--nw-brand-primary);
}

.nw-landing .wp-block-button__link {
  text-decoration: none;
  line-height: 1.25;
}

.nw-landing a,
.nw-landing button,
.nw-landing .wp-block-button__link,
.nw-landing svg {
  transition: background-color .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1),border-color .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1);
}

/* ===== HERO ===== */
.nw-landing .hero-bg {
  background: radial-gradient(circle at top right,var(--nw-glow-blue),transparent),radial-gradient(circle at bottom left,var(--nw-glow-purple),transparent),var(--nw-bg-blue-soft);
}

.nw-landing .hero-bg>.wp-block-columns {
  gap: clamp(28px,4vw,56px);
}

.nw-landing .hero-bg .wp-block-column {
  min-width: 0;
}

.nw-landing .nw-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.nw-landing .nw-cta-primary,
.nw-landing .nw-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.nw-landing .nw-cta-primary {
  background: var(--nw-accent-yellow);
  color: var(--nw-text-heading);
  font-weight: 600;
}

.nw-landing .nw-cta-primary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.nw-landing .nw-cta-secondary {
  background: var(--nw-bg-white);
  color: var(--nw-text-primary);
  border: 1px solid var(--nw-border);
  font-weight: 500;
}

.nw-landing .nw-cta-separator {
  color: var(--nw-text-light);
}

.nw-landing .cta-one .wp-block-button__link,
.nw-landing .cta-two .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.nw-landing .nw-hero-checks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 14px;
  color: var(--nw-text-secondary);
}

.nw-landing .nw-hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.nw-landing .nw-hero-checks svg {
  color: var(--nw-brand-primary);
  flex: 0 0 16px;
}

/* ===== HERO DASHBOARD CARD ===== */
.nw-landing .hero-box {
  position: relative;
  width: 100%;
  box-shadow: var(--nw-shadow-hero);
  transition: box-shadow .3s cubic-bezier(.4,0,.2,1);
}

.nw-landing .hero-box .nw-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--nw-brand-primary);
  color: var(--nw-bg-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  line-height: 1;
}

.nw-landing .hero-box .nw-stat {
  min-width: 0;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .hero-box .nw-stat>p {
  overflow-wrap: anywhere;
}

.nw-landing .nw-score-suffix {
  font-size: 15px;
  font-weight: 500;
}

/* ===== ICON TILES ===== */
.nw-landing .nw-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 16px;
  color: var(--nw-bg-white);
  border: 1px solid var(--nw-border-blue);
  box-shadow: var(--nw-shadow-soft);
}

.nw-landing .nw-icon-tile.is-blue {
  background: var(--nw-brand-primary);
}

.nw-landing .nw-icon-tile.is-red {
  background: var(--nw-icon-red);
}

.nw-landing .nw-icon-tile.is-purple {
  background: var(--nw-icon-purple);
}

.nw-landing .nw-icon-tile.is-orange {
  background: var(--nw-icon-orange);
}

/* ===== PROBLEM CARDS ===== */
.nw-landing .nw-problem-grid {
  gap: 20px;
}

.nw-landing .nw-problem-card {
  min-width: 0;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

/* ===== FEATURE GRID ===== */
.nw-landing .feat-grid {
  gap: 20px!important;
}

.nw-landing .feat-grid>.wp-block-group {
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .feat-grid>.wp-block-group::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 3px;
  background: var(--nw-brand-primary);
  transition: width .28s ease;
}

.nw-landing .feat-grid svg {
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .feat-grid h3 {
  transition: color .28s cubic-bezier(.4,0,.2,1);
}

/* ===== [DARK] HOW IT WORKS (bg: --nw-navy, cards: --nw-navy-card, hover: --nw-navy-card-hover) ===== */
.nw-landing .how-steps .wp-block-group.is-layout-grid {
  gap: 24px;
}

.nw-landing .how-card {
  min-width: 0;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .nw-on-dark {
  opacity: .9;
}

.nw-landing .nw-step-num {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}

/* ===== BENEFITS ===== */
.nw-landing .nw-benefit {
  min-width: 0;
  border-top: 4px solid var(--nw-brand-primary)!important;
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .nw-benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--nw-bg-white);
  color: var(--nw-brand-primary);
  border: 1px solid var(--nw-border);
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

/* ===== WHY NETWOVEN + [DARK] FINAL CTA (gradient: brand-primary to --nw-navy, set on #cta) ===== */
.nw-landing #why-netwoven>.wp-block-columns {
  max-width: 1240px;
  margin-inline: auto;
}

.nw-landing #cta>.wp-block-columns {
  max-width: 1240px;
  margin-inline: auto;
}

.nw-landing .nw-why-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--nw-border-blue);
  transition: all .28s cubic-bezier(.4,0,.2,1);
}

.nw-landing .nw-why-item .nw-why-check {
  flex: 0 0 20px;
  color: var(--nw-brand-primary);
}

.nw-landing #why-netwoven .wp-block-column>.wp-block-group {
  gap: 16px;
  width: 100%;
}

.nw-landing #cta {
  scroll-margin-top: 120px;
  background-image: linear-gradient(135deg,var(--nw-brand-primary) 0%,var(--nw-navy) 100%);
}

.nw-landing #cta form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  background: var(--nw-bg-white);
  color: var(--nw-text-heading);
  border: 1px solid var(--nw-border);
  border-radius: 14px;
  padding: clamp(20px,3vw,28px);
}

.nw-landing #cta form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.nw-landing #cta form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--nw-border);
  border-radius: 6px;
  color: var(--nw-text-heading);
  background: var(--nw-bg-white);
  font: inherit;
  font-weight: 400;
}

.nw-landing #cta form button {
  min-height: 48px;
  width: 100%;
  background: var(--nw-brand-primary);
  color: var(--nw-bg-white);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nw-landing #cta form .nw-form-note {
  font-size: 12px;
  color: var(--nw-text-secondary);
}

.nw-landing input:focus,
.nw-landing textarea:focus,
.nw-landing select:focus {
  outline: none;
  border-color: var(--nw-brand-primary);
  box-shadow: 0 0 0 4px var(--nw-focus-ring-soft);
}

.nw-landing .wp-block-button__link:focus-visible,
.nw-landing button:focus-visible,
.nw-landing a:focus-visible {
  outline: 3px solid var(--nw-focus-ring);
  outline-offset: 3px;
}

@media (max-width:781px) {
  .nw-landing .hero-bg {
    padding-top: 40px!important;
    padding-bottom: 40px!important;
  }

  .nw-landing .wp-block-columns {
    flex-wrap: wrap!important;
  }

  .nw-landing .wp-block-column {
    flex-basis: 100%!important;
  }

  .nw-landing h1 {
    font-size: 34px!important;
  }

  .nw-landing h2 {
    font-size: 30px!important;
  }

  .nw-landing h3 {
    font-size: 20px!important;
  }

  .nw-landing .hero-p {
    font-size: 16px!important;
  }

  .nw-landing .two-btn {
    flex-wrap: wrap!important;
  }

  .nw-landing .two-btn>.wp-block-button {
    width: 100%;
  }

  .nw-landing section {
    padding-left: 20px!important;
    padding-right: 20px!important;
  }

}

@media (max-width:480px) {
  .nw-landing .nw-cta-group {
    gap: 8px;
  }

  .nw-landing .nw-cta-primary,
  .nw-landing .nw-cta-secondary {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
    white-space: normal;
  }

  .nw-landing .hero-box {
    padding: 18px!important;
  }

  .nw-landing .hero-box .nw-stat>p:nth-child(2) {
    font-size: 24px!important;
  }

}

@media (prefers-reduced-motion:reduce) {
  .nw-landing *,
  .nw-landing *::before,
  .nw-landing *::after {
    scroll-behavior: auto!important;
    transition: none!important;
    animation: none!important;
    transform: none!important;
  }

}

/* ===== GRID LOCKS: explicit columns so WordPress's generated auto-fill grid rules
   (repeat(auto-fill,minmax(min(260px,100%),1fr)) + container-type) cannot reflow these sections ===== */
.nw-landing .nw-problem-grid,
.nw-landing .nw-grid-4 {
  display: grid!important;
  grid-template-columns: repeat(4,minmax(0,1fr))!important;
  container-type: normal!important;
  gap: 20px;
}

.nw-landing .feat-grid,
.nw-landing .nw-grid-3 {
  display: grid!important;
  grid-template-columns: repeat(3,minmax(0,1fr))!important;
  container-type: normal!important;
}

.nw-landing .nw-grid-3 {
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.nw-landing .nw-grid-3>.how-card {
  height: 100%;
}

.nw-landing .hero-box .wp-block-group.is-layout-grid {
  display: grid!important;
  grid-template-columns: repeat(2,minmax(0,1fr))!important;
  container-type: normal!important;
  gap: 12px;
}

.nw-landing .nw-grid-3>*,
.nw-landing .nw-grid-4>*,
.nw-landing .nw-problem-grid>*,
.nw-landing .feat-grid>* {
  min-width: 0;
  margin: 0!important;
}

/* WHY NETWOVEN: fixed two-column grid, pills stacked in a single column */
.nw-landing #why-netwoven>.wp-block-columns {
  display: grid!important;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 48px;
  align-items: center;
  flex-wrap: nowrap!important;
}

.nw-landing #why-netwoven>.wp-block-columns>.wp-block-column {
  flex-basis: auto!important;
  min-width: 0;
  width: auto;
}

.nw-landing .nw-why-pills {
  display: flex!important;
  flex-direction: column!important;
  align-items: stretch!important;
  container-type: normal!important;
  gap: 16px;
  width: 100%;
}

.nw-landing .nw-why-pills>.nw-why-item {
  width: 100%;
  margin: 0!important;
}

@media (max-width:1100px) {
  .nw-landing .nw-problem-grid,
  .nw-landing .nw-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
  }

  .nw-landing .feat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))!important;
  }

}

@media (max-width:1100px) {
  .nw-landing .how-card {
    padding: 26px!important;
  }

}

@media (max-width:781px) {
  .nw-landing .nw-grid-3 {
    grid-template-columns: minmax(0,1fr)!important;
  }

}

@media (max-width:781px) {
  .nw-landing #why-netwoven>.wp-block-columns {
    grid-template-columns: minmax(0,1fr);
    gap: 32px;
  }

}

@media (max-width:640px) {
  .nw-landing .nw-problem-grid,
  .nw-landing .nw-grid-4,
  .nw-landing .feat-grid,
  .nw-landing .nw-grid-3 {
    grid-template-columns: minmax(0,1fr)!important;
  }

}

/* ===== HOVER EFFECTS (hover devices only). Dark-section hovers: .how-card:hover ===== */
@media (hover:hover) {
  .nw-landing a:hover {
    color: var(--nw-brand-primary-hover);
  }

  .nw-landing .cta-one .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--nw-shadow-brand);
  }

  .nw-landing .cta-two .wp-block-button__link:hover {
    transform: translateY(-2px);
    border-color: var(--nw-brand-primary)!important;
    box-shadow: var(--nw-shadow-soft);
  }

  .nw-landing .hero-box:hover {
    box-shadow: var(--nw-shadow-hero-hover);
  }

  .nw-landing .hero-box .nw-stat:hover {
    transform: translateY(-2px);
    /*border-color: var(--nw-brand-primary)!important;*/
    background: var(--nw-bg-blue-soft); 
    border-color: var(--nw-border-blue);
    box-shadow: var(--nw-shadow-soft);
  }

  .nw-landing .nw-problem-card:hover {
    transform: translateY(-4px);
    background: var(--nw-bg-white)!important;
    border-color: var(--nw-brand-primary)!important;
    box-shadow: var(--nw-shadow-card);
  }

  .nw-landing .nw-problem-card:hover .nw-icon-tile {
    transform: scale(1.08);
  }

  .nw-landing .feat-grid>.wp-block-group:hover::before {
    width: 100%;
  }

  .nw-landing .feat-grid>.wp-block-group:hover {
    transform: translateY(-6px);
    box-shadow: var(--nw-shadow-card));
  }

  .nw-landing .feat-grid>.wp-block-group:hover svg {
    transform: scale(1.08);
  }

  .nw-landing .feat-grid>.wp-block-group:hover h3 {
    color: var(--nw-brand-primary);
  }

  .nw-landing .feat-grid .feature-teal:hover {
    background: var(--nw-bg-teal)!important;
    border-color: var(--nw-border-teal)!important;
  }

  .nw-landing .feat-grid .feature-green:hover {
    background: var(--nw-bg-green)!important;
    border-color: var(--nw-border-green)!important;
  }

  .nw-landing .feat-grid .feature-orange:hover {
    background: var(--nw-bg-orange)!important;
    border-color: var(--nw-border-orange)!important;
  }

  .nw-landing .feat-grid .feature-purple:hover {
    background: var(--nw-bg-purple)!important;
    border-color: var(--nw-border-purple)!important;
  }

  .nw-landing .feat-grid .feature-yellow:hover {
    background: var(--nw-bg-yellow)!important;
    border-color: var(--nw-border-yellow)!important;
  }

  .nw-landing .feat-grid .feature-rose:hover {
    background: var(--nw-bg-rose)!important;
    border-color: var(--nw-border-rose)!important;
  }

  .nw-landing .how-card:hover {
    transform: translateY(-4px);
    background: var(--nw-navy-card-hover)!important;
    box-shadow: var(--nw-shadow-on-dark);
  }

  .nw-landing .how-card:hover .nw-step-num {
    transform: scale(1.08);
  }

  .nw-landing .nw-benefit:hover {
    transform: translateY(-4px);
    background: var(--nw-bg-white)!important;
    box-shadow: var(--nw-shadow-card);
  }

  .nw-landing .nw-benefit:hover .nw-benefit-icon {
    background: var(--nw-brand-primary);
    color: var(--nw-bg-white);
    transform: scale(1.08);
  }

  .nw-landing .nw-why-item:hover {
    transform: translateX(6px);
    border-color: var(--nw-brand-primary);
    box-shadow: var(--nw-shadow-card);
  }

  .nw-landing #cta form button:hover {
    transform: translateY(-2px);
    box-shadow: var(--nw-shadow-brand);
  }

}


/* CTA Section - Remove default Gutenberg list bullets */
#cta ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* CTA Section - Custom turquoise checkmarks */
#cta ul li {
    list-style: none !important;
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

/* Custom checkmark */
#cta ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    line-height: inherit;
}

/* Remove extra spacing from the last item */
#cta ul li:last-child {
    margin-bottom: 0;
}