/* PayManzo — Warm Market. Merged additions: nav, header state, grain toggle,
   hero facts, industries, services icons, dev extras, FAQ lead,
   contact + footer extras. All new selectors use the wm- prefix.
   Sizes come from the LAYOUT SYSTEM tokens in styles.css :root. */

/* ---------- nav: drawer until the full row fits ---------- */
.wm-nav-actions { display: flex; flex-wrap: wrap; gap: var(--btn-gap); }
.wm-nav-actions .btn { flex: 1 1 180px; }

.wm-fx-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: var(--control-h);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  background: var(--cream);
  color: var(--cocoa);
  border: 2px dashed var(--cocoa);
  border-radius: var(--radius-pill);
  font: 800 var(--text-sm) var(--font-body);
  cursor: pointer;
  flex: 1 1 100%;
  transition: transform var(--dur-fast) var(--ease-bounce), background-color var(--dur-fast) ease;
}
.wm-fx-toggle:hover { transform: translateY(-2px); background: var(--ochre-soft); }
.wm-fx-swatch {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  border: 2px solid var(--cocoa);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, var(--cocoa) 0 1.4px, transparent 1.8px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, var(--wood) 0 1.2px, transparent 1.6px) 0 0 / 6px 6px,
    var(--sand-2);
}
.wm-fx-toggle[aria-pressed="false"] { border-style: solid; }
.wm-fx-toggle[aria-pressed="false"] .wm-fx-swatch { background: var(--cream); }
.wm-fx-toggle[aria-pressed="false"] .wm-fx-label { text-decoration: line-through; text-decoration-thickness: 2px; }

/* open drawer never runs past the viewport (header + a little breathing room) */
.site-nav.is-open {
  max-height: calc(100vh - var(--header-h) - var(--space-6));
  max-height: calc(100dvh - var(--header-h) - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 400px) and (max-width: 1359px) {
  .site-nav ul { grid-template-columns: 1fr 1fr; column-gap: var(--space-2); }
}

/* 960–1359: keep the drawer (8 links + 3 controls do not fit in one row) */
@media (min-width: 960px) and (max-width: 1359px) {
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: auto;
    right: var(--gutter);
    width: min(560px, calc(100vw - 2 * var(--gutter)));
    margin-top: var(--space-2);
    padding: var(--space-5);
    background: var(--cream);
    border: 2px solid var(--cocoa);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-warm);
    animation: drop-in var(--dur-mid) var(--ease-bounce);
  }
  .site-nav ul { display: grid; margin: 0 0 var(--space-4); }
  .site-nav ul a { min-height: 48px; font-size: var(--text-base); }
}

/* ≥1360: two rows. Row 1 = logo + actions; row 2 = the 8 bordered links as
   equal-width pills spanning the container. The nav uses display: contents so
   its list and actions can sit in the header grid; --header-h grows to match
   so scroll-padding and sticky offsets stay correct. */
@media (min-width: 1360px) {
  :root { --header-h: 128px; } /* 72 row + 44 links + 12 bottom padding */
  .site-header > .wrap.header-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 72px auto;
    grid-template-areas: "brand actions" "links links";
    column-gap: var(--space-4);
    row-gap: 0;
    padding-bottom: var(--space-3);
  }
  .site-header .brand { grid-area: brand; }
  .site-nav, .site-nav.is-open { display: contents; }
  .site-nav ul { grid-area: links; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
  .site-nav ul a { min-height: 44px; white-space: nowrap; }
  .wm-nav-actions { grid-area: actions; justify-self: end; flex-wrap: nowrap; gap: var(--space-2); }
  .wm-nav-actions .btn { flex: none; padding-inline: var(--space-4); white-space: nowrap; }
  .wm-fx-toggle { flex: none; }
}

/* scrolled header (IO sentinel adds .is-scrolled). Same 2px border width as the
   resting dashed rule, so the header never changes height. */
.site-header { transition: box-shadow var(--dur-mid) ease, border-color var(--dur-mid) ease; }
.site-header.is-scrolled { border-bottom: 2px solid var(--cocoa); box-shadow: var(--shadow-warm); }

/* paper grain toggle off */
.wm-fx-off body::before { display: none; }
.wm-fx-off .tag, .wm-fx-off .wm-tag-inner { animation: none; }

/* ---------- hero facts ----------
   Same pill metrics as .chip (38px tall, 2px border). The li is a block with an
   inline check so "<strong>9+</strong> payment rails" keeps a normal word space
   and wraps as one run of text. Capped at the CTA block width (36rem) from 640. */
.wm-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
@media (min-width: 640px) { .wm-facts { max-width: 36rem; } }
.wm-facts li {
  min-width: 0;
  min-height: var(--chip-h);
  padding: var(--chip-pad);
  /* one-line pill = exactly --chip-h: (38 - 2x2 border - 1.3em line) / 2 */
  padding-block: calc((var(--chip-h) - 4px - 1.3em) / 2);
  border: 2px dashed color-mix(in srgb, var(--cocoa) 55%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}
.wm-facts li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
  vertical-align: -3px;
  border-radius: 50%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23FBF4E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.wm-facts strong { font-family: var(--font-display); font-weight: 800; color: var(--clay-deep); }

/* ---------- methods extras ---------- */
.wm-kicker { margin-bottom: var(--kicker-gap); }
.wm-more-desc { margin-top: var(--space-3); max-width: var(--measure-lead); color: var(--cocoa-soft); font-weight: 600; }
.wm-fineprint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--cocoa-soft); font-style: italic; }
.wm-sub {
  display: inline-block;
  margin-top: var(--space-section);
  font-size: var(--text-xl);
  font-weight: 800;
  position: relative;
}
.wm-sub::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: var(--space-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c20-6 36 4 56-1s36-5 56 0 36 4 56-1 20-3 28 0' fill='none' stroke='%23D9A036' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------- services icons ---------- */
.wm-svc-ico {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-bottom: var(--space-3);
  fill: none;
  stroke: var(--ochre-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- industries: hanging price tags ----------
   Row gap 40 clears the 16px hanging string. Each tag spans two rows of a
   subgrid so the descriptions start on one line across a row even when a
   title wraps (1040–1250). Rows stretch, so every tag in a row is equal height. */
.wm-ind-list { list-style: none; display: grid; gap: var(--space-8) var(--card-gap); padding-top: var(--space-4); }
@media (min-width: 560px) { .wm-ind-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wm-ind-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wm-ind {
  position: relative;
  min-width: 0;
  padding: 28px var(--card-pad) var(--card-pad);
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--radius-soft);
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-mid) var(--ease-bounce);
}
@supports (grid-template-rows: subgrid) {
  /* The list's row gap would be inherited between a tag's own two rows, so the
     gap between tag rows moves to a bottom margin (cancelled after the last row). */
  @media (min-width: 560px) {
    .wm-ind-list { row-gap: 0; margin-bottom: calc(-1 * var(--space-8)); }
    .wm-ind { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--space-8); }
  }
}
.wm-ind:hover { transform: translateY(-4px); }
.wm-ind::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  height: 22px;
  border-left: 2px solid var(--cocoa);
}
.wm-ind::after {
  content: "";
  position: absolute;
  left: calc(50% - 6px);
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sand);
  border: 2px solid var(--cocoa);
}
.wm-ind h3 { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-h4); }
.wm-ind h3::before {
  content: "";
  width: var(--icon-dot);
  height: var(--icon-dot);
  flex: none;
  border-radius: 50%;
  background: var(--dot, var(--clay));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.wm-ind p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--cocoa-soft); }
.wm-ind-also { margin-top: var(--space-7); font-weight: 700; }

/* ---------- developer extras ----------
   Checklist text shares the .flow text edge: a 32px marker column (same as the
   numbered circles) + the flow's 12px gap, with the bullet centred in it. */
.wm-checklist { --wm-marker: 32px; list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.wm-checklist li { position: relative; padding-left: calc(var(--wm-marker) + var(--space-3)); font-weight: 600; }
.wm-checklist li::before {
  content: "";
  position: absolute;
  left: calc((var(--wm-marker) - 18px) / 2);
  top: calc(0.8em - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--leaf);
}
.wm-plain-box {
  margin-top: var(--space-7);
  padding: var(--card-pad);
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--radius-soft);
  box-shadow: var(--card-shadow-lg-ochre);
}
.wm-plain-box h3 { font-size: var(--text-h3); }
.dev-copy .wm-plain-box p { margin-top: var(--space-2); font-size: var(--text-base); }

/* ---------- faq, cta, contact, footer ---------- */
/* The lead is the .section-head intro; spacing comes from .section-head p. */
.faq-wrap .wm-faq-lead { font-weight: 700; color: var(--cocoa-soft); }
.wm-faq-lead a { white-space: nowrap; }
.wm-cta-body { margin-top: var(--head-gap); max-width: var(--measure-lead); font-size: var(--text-lg); }
.wm-way-static { cursor: default; }
.wm-way-static:hover { transform: none; }
.wm-footer-loc { display: flex; align-items: center; min-height: var(--control-h); font-weight: 700; }

/* ---------- stall tag tap wiggle ---------- */
.tag { cursor: pointer; }
.wm-tag-inner { transform-box: view-box; }
.wm-tag-inner.is-wiggle { animation: wm-wiggle 0.6s var(--ease-bounce); }
@keyframes wm-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  45% { transform: rotate(11deg); }
  70% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-tag-inner.is-wiggle { animation: none; }
  .wm-ind, .wm-ind:hover, .wm-ind:nth-child(even):hover { transition: none; }
}