/* PayManzo — Warm Market. Page sections below the hero.
   Every size here comes from the LAYOUT SYSTEM tokens in styles.css :root. */

.section { position: relative; padding-block: var(--space-section); }
.section-head { max-width: var(--head-max); margin-bottom: var(--head-mb); }
.section-head p { margin-top: var(--head-gap); font-size: var(--text-lg); color: var(--cocoa-soft); }

/* ---------- ways to pay: baskets ---------- */
.pay { background: var(--cream); border-radius: 48px 48px 0 0; }
.baskets { display: grid; gap: var(--card-gap); align-items: stretch; }
@media (min-width: 900px) {
  .baskets { grid-template-columns: 1.15fr 1fr 1fr; }
}
.basket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad) var(--card-pad) 44px; /* 44 bottom clears the woven strip */
  border: var(--card-border);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-bounce);
}
.basket:hover { transform: translateY(-4px); }
.basket h3 { font-size: var(--text-xl); font-weight: 800; }
.basket p { margin: var(--space-3) 0 var(--space-5); color: var(--cocoa-soft); max-width: 30em; }
.basket .chips { margin-top: auto; }
.basket::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  opacity: 0.35;
  background:
    repeating-linear-gradient(45deg, var(--cocoa) 0 3px, transparent 3px 12px),
    repeating-linear-gradient(-45deg, var(--cocoa) 0 3px, transparent 3px 12px);
}
.basket-momo { background: var(--ochre-soft); border-radius: var(--radius-soft); }
.basket-cards { background: var(--sand); border-radius: var(--radius-soft); }
.basket-crypto { background: var(--leaf-soft); border-radius: var(--radius-soft); }

.more-rails {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  font-weight: 700;
}
.more-rails strong { margin-right: var(--space-1); }

/* ---------- picker ---------- */
.picker { background: var(--clay-btn); color: var(--cream); overflow: clip; }
.blob-picker {
  width: min(80vw, 560px);
  aspect-ratio: 1;
  left: -22%;
  top: -18%;
  background: var(--clay);
  border-radius: 62% 38% 46% 54% / 48% 60% 40% 52%;
}
.picker-grid { position: relative; z-index: 1; display: grid; gap: var(--split-gap); align-items: center; }
.picker-grid > * { min-width: 0; }
@media (min-width: 960px) { .picker-grid { grid-template-columns: 1fr 1.05fr; } }
.picker-intro > p { margin-top: var(--head-gap); font-size: var(--text-lg); max-width: var(--measure-lead); }

.picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-7); }
@media (min-width: 520px) { .picker-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the intro column is too narrow for three "Restaurant"-wide pills until 1200 */
@media (min-width: 960px) and (max-width: 1199px) { .picker-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: var(--space-2) var(--space-4);
  background: var(--cream);
  color: var(--cocoa);
  border: var(--card-border);
  border-radius: var(--radius-pill);
  font: 800 var(--text-base) var(--font-body);
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-fast) var(--ease-bounce), background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.pick:hover { transform: translateY(-3px); }
.pick[aria-pressed="true"] { background: var(--ochre); transform: translateY(3px); box-shadow: 0 1px 0 var(--cocoa); }
.pick-emoji { font-size: 1.3em; line-height: 1; }
@media (max-width: 419px) {
  .pick { flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: var(--space-2) 6px; border-radius: 22px; font-size: var(--text-sm); }
}
.picker-also { margin-top: var(--space-6); font-size: var(--text-sm); font-weight: 700; max-width: var(--measure-lead); }

.picker-result {
  background: var(--cream);
  color: var(--cocoa);
  border: var(--card-border);
  border-radius: var(--radius-soft);
  padding: var(--card-pad-lg);
  box-shadow: var(--card-shadow-lg);
}
.picker-result.is-swapping { animation: swap var(--dur-mid) var(--ease-bounce); }
@keyframes swap { 0% { opacity: 0.35; translate: 0 8px; } 100% { opacity: 1; translate: 0 0; } }
.result-for { font-weight: 800; color: var(--clay-deep); }
.result-title { margin-top: var(--space-2); font-size: var(--text-xl); font-weight: 800; }
.result-block { margin-top: var(--space-6); }
.result-block h4 { font: 800 var(--text-sm) var(--font-body); margin-bottom: var(--space-3); color: var(--cocoa-soft); letter-spacing: 0; }
.result-list { list-style: none; display: grid; gap: var(--space-3); }
.result-list li { position: relative; padding-left: var(--space-7); }
.result-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--leaf);
}
.picker-result .btn { margin-top: var(--space-7); width: 100%; }
@media (max-width: 420px) { .picker-result .btn { padding-inline: var(--btn-pad-x-sm); font-size: var(--text-sm); } }

/* ---------- services: market board ---------- */
.board {
  background: var(--cocoa);
  color: var(--cream);
  border: 10px solid var(--wood-dark);
  border-radius: 26px;
  padding: var(--card-pad-lg);
  box-shadow: var(--shadow-warm), inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.board-list { list-style: none; display: grid; }
@media (min-width: 700px) { .board-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
@media (min-width: 1100px) { .board-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.board-list li { padding-block: var(--space-5); border-bottom: 2px dashed rgba(251, 244, 232, 0.25); }
/* the board frame closes the list: no dashed rule on the last row (9 items: 1 or 2 cols -> last item; 3 cols -> last 3) */
.board-list li:first-child { padding-top: 0; }
.board-list li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 700px) { .board-list li:nth-child(2) { padding-top: 0; } }
/* 2 columns: the 9th item would sit alone, so it spans the row instead */
@media (min-width: 700px) and (max-width: 1099px) { .board-list li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .board-list li:nth-child(3) { padding-top: 0; }
  .board-list li:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 0; }
}
.board-list h3 { color: var(--ochre-soft); }
.board-list p { margin-top: var(--space-2); color: #EADFCF; font-size: var(--text-sm); max-width: var(--measure-lead); }

/* ---------- how it works ---------- */
.steps { list-style: none; display: grid; gap: var(--space-7); position: relative; }
.step { position: relative; padding-left: 76px; min-height: 58px; }
.step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: calc(2px - var(--space-7)); /* stop 2px short of the next number */
  border-left: 3px dashed var(--clay);
}
.step:last-child::before { display: none; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  font: 800 1.6rem/1 var(--font-display);
  border: var(--card-border);
  border-radius: 50%;
  background: var(--ochre-soft);
}
.step:nth-child(2) .step-num { background: var(--leaf-soft); }
.step:nth-child(3) .step-num { background: var(--clay); color: #fff; }
.step:nth-child(4) .step-num { background: var(--cream); }
.step:nth-child(5) .step-num { background: var(--wa); color: #fff; }
.step h3 { padding-top: var(--space-3); }
.step p { margin-top: var(--space-2); color: var(--cocoa-soft); max-width: var(--measure-lead); }
@media (min-width: 1200px) {
  /* one straight timeline: every number on the same line, the dashes run number to number */
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--card-gap); }
  .step { padding-left: 0; padding-top: calc(58px + var(--space-5)); }
  .step h3 { padding-top: 0; }
  .step::before { left: 62px; right: calc(-1 * var(--card-gap)); top: 29px; bottom: auto; border-left: 0; border-top: 3px dashed var(--clay); }
}

/* ---------- why ---------- */
/* The ochre panel's content edge lands on the page grid. The panel only insets from the
   screen edge once the viewport is wider than the container, so the text always keeps at
   least a full gutter of ochre around it (a fixed 2vw inset left 9-12px at 640-1359). */
.why { --why-inset: clamp(0px, (100vw - var(--container)) / 2, 24px); background: var(--ochre-soft); border-radius: 48px; margin-inline: var(--why-inset); }
.why > .wrap { max-width: calc(var(--container) - 2 * var(--why-inset)); padding-inline: calc(var(--gutter) - var(--why-inset)); }
.why-grid { display: grid; gap: var(--split-gap); }
@media (min-width: 960px) {
  .why-grid { grid-template-columns: 0.9fr 1.1fr; }
  .why-statement { position: sticky; top: var(--stick-top); align-self: start; }
}
.why-statement h2 { font-size: var(--text-display); }
.why-statement p { margin-top: var(--head-gap); font-size: var(--text-lg); max-width: var(--measure-lead); }
.why-list { list-style: none; display: grid; gap: var(--space-6); }
.why-list li { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-list svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; fill: none; stroke: var(--clay-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.why-list h3 { padding-top: var(--space-2); }
.why-list p { margin-top: var(--space-1); max-width: var(--measure); }

/* ---------- developer receipt ---------- */
.dev { background: var(--sand-2); margin-top: var(--space-section); }
.dev-grid { display: grid; gap: var(--split-gap); align-items: start; }
.dev-grid > * { min-width: 0; }
@media (min-width: 960px) { .dev-grid { grid-template-columns: 1fr 1fr; } }
/* .dev-grid > .receipt outranks the later .receipt { position: relative } base rule */
@media (min-width: 960px) and (min-height: 820px) { .dev-grid > .receipt { position: sticky; top: var(--stick-top); } }
.dev-copy p { margin-top: var(--head-gap); font-size: var(--text-lg); color: var(--cocoa-soft); max-width: var(--measure-lead); }
.flow { list-style: none; counter-reset: flow; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.flow li {
  counter-increment: flow;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
}
.flow li::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  width: var(--space-7);
  height: var(--space-7);
  flex: none;
  border-radius: 50%;
  background: var(--cocoa);
  color: var(--cream);
  font: 800 0.9rem var(--font-display);
}

.receipt {
  position: relative;
  margin: 0;
  background: var(--cream);
  padding: var(--space-7) var(--card-pad);
  box-shadow: var(--shadow-warm);
}
.receipt::before, .receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: radial-gradient(circle at 50% 0, var(--sand-2) 6px, transparent 6.5px) 0 0 / 16px 8px repeat-x;
}
.receipt::before { top: 0; }
.receipt::after { bottom: 0; transform: scaleY(-1); }
.receipt-head {
  font: 800 var(--text-sm) var(--font-code);
  padding-bottom: var(--space-3);
  border-bottom: 2px dashed var(--cocoa-soft);
  color: var(--cocoa-soft);
}
.receipt pre {
  margin: var(--space-4) 0;
  overflow-x: auto;
  font: 500 clamp(0.78rem, 0.72rem + 0.3vw, 0.92rem)/1.7 var(--font-code);
  color: var(--cocoa);
}
.receipt .c { color: var(--cocoa-soft); font-style: italic; }
.receipt .k { color: var(--clay-deep); font-weight: 700; }
.receipt .s { color: var(--wa); }
.receipt .n { color: var(--c-at); }
.receipt-foot { padding-top: var(--space-3); border-top: 2px dashed var(--cocoa-soft); font-size: var(--text-xs); color: var(--cocoa-soft); }

/* ---------- faq ---------- */
/* Left-aligned like every other section: head on the left, questions on the right from 960. */
.faq-wrap { max-width: var(--container); }
@media (min-width: 960px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--split-gap); align-items: start; }
  .faq-wrap > .section-head { position: sticky; top: var(--stick-top); margin-bottom: 0; }
}
/* guards the head rhythm against older negative-margin overrides on the lead */
.faq-wrap > .section-head > .wm-faq-lead { margin: var(--head-gap) 0 0; }
.faq-list { max-width: 860px; }
.faq-item { border-bottom: 2px dashed color-mix(in srgb, var(--cocoa) 35%, transparent); }
.faq-item:first-child { border-top: 2px dashed color-mix(in srgb, var(--cocoa) 35%, transparent); }
.faq-item h3 { font-size: inherit; }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  color: var(--cocoa);
  text-align: left;
  font: 700 var(--text-h3)/1.25 var(--font-display);
  cursor: pointer;
}
.faq-q::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: var(--card-border);
  border-radius: 50%;
  background: var(--cream);
  font: 800 1.4rem/1 var(--font-body);
  transition: transform var(--dur-mid) var(--ease-bounce), background-color var(--dur-fast) ease;
}
.faq-q[aria-expanded="true"]::after { transform: rotate(135deg); background: var(--ochre); }
.faq-q:hover::after { background: var(--ochre-soft); }
.faq-a { padding: 0 0 var(--space-6); max-width: var(--measure); color: var(--cocoa-soft); }

/* ---------- final cta ---------- */
.final-cta { padding-block: 0 var(--space-section); overflow: clip; }
.cta-blob {
  position: relative;
  background: var(--clay-btn);
  color: var(--cream);
  padding: clamp(var(--space-8), 6vw, 88px) clamp(var(--space-6), 6vw, 80px);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-warm);
}
.cta-blob h2 { max-width: 20ch; font-size: var(--text-display); }

/* ---------- contact ---------- */
.contact { padding-top: 0; }
.contact-grid { display: grid; gap: var(--split-gap); }
.contact-grid > * { min-width: 0; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.contact-side p { margin-top: var(--head-gap); font-size: var(--text-lg); color: var(--cocoa-soft); max-width: var(--measure-lead); }
.contact-ways { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.contact-way {
  display: grid;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: var(--cream);
  border: var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--cocoa);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.contact-way:hover { transform: translateX(4px); }
.contact-way span { font-size: var(--text-sm); color: var(--cocoa-soft); font-weight: 700; }
.contact-way strong { font: 800 var(--text-lg) var(--font-display); }

.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: var(--card-pad-lg);
  background: var(--cream);
  border: var(--card-border);
  border-radius: 32px;
  box-shadow: var(--card-shadow-lg-ochre);
}
@media (min-width: 640px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
}
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
/* direct children only: the checkbox pills (.check) are labels too and keep their own padding */
.field > label, .field > legend { font-weight: 800; font-size: var(--text-sm); padding: 0; }
.field > legend { margin-bottom: var(--space-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  color: var(--cocoa);
  border: 2px solid var(--cocoa-soft);
  border-radius: var(--radius-sm);
  font: 600 16px/1.4 var(--font-body);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--cocoa); box-shadow: 0 0 0 4px var(--ochre-soft); }
.field [aria-invalid="true"] { border-color: var(--clay-deep); background: #FFF6F2; }
.field-err { min-height: 0; color: var(--clay-deep); font-weight: 700; font-size: var(--text-sm); }
.field-err:empty { display: none; }

.checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 2px solid var(--cocoa-soft);
  border-radius: var(--radius-pill);
  background: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-bounce);
}
.check input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--wa); }
.check:has(input:checked) { background: var(--leaf-soft); border-color: var(--cocoa); }
.check:has(input:focus-visible) { outline: 3px solid var(--cocoa); outline-offset: 2px; }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--btn-gap); }
.form-actions .btn { flex: 1 1 220px; }
.form-status { font-weight: 800; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--wa); }
.form-status.is-err { color: var(--clay-deep); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--cocoa);
  color: #EADFCF;
  padding: var(--space-10) 0 var(--space-8); /* the floating WhatsApp button tucks away over the footer (merged.js) */
  border-radius: 48px 48px 0 0;
  position: relative;
}
.footer-grid { display: grid; gap: var(--split-gap); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); } }
.brand-footer { color: var(--cream); }
.footer-tag { margin-top: var(--space-3); font-weight: 700; }
.footer-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.footer-links a, .footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  color: var(--ochre-soft);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer-links a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-contact { display: grid; align-content: start; }
.footer-base { margin-top: var(--space-8); font-size: var(--text-sm); }
/* the rule sits on the text column, not across the gutter */
.footer-base > p { padding-top: var(--space-5); border-top: 2px dashed rgba(251, 244, 232, 0.2); }

/* ---------- floating whatsapp: a 56px icon circle at every width ---------- */
.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--wa);
  color: #fff;
  border: var(--card-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-press), var(--shadow-warm);
  font-weight: 800;
  text-decoration: none;
  animation: float-in 0.8s var(--ease-bounce) 1.8s both;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.wa-float:hover { transform: translateY(-4px) scale(1.04); }
.wa-float svg { width: 26px; height: 26px; flex: none; }
@keyframes float-in { from { opacity: 0; transform: translateY(40px) scale(0.7); } to { opacity: 1; transform: none; } }
.wa-float-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* merged.js tucks the button away while #contact or the footer is on screen (both
   offer WhatsApp already). It stays in the tab order and slides back in on focus. */
.wa-float.is-ready { animation: none; }
.wa-float { transition: transform var(--dur-fast) var(--ease-bounce), opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out); }
.wa-float.is-tucked { opacity: 0; translate: 0 calc(100% + var(--space-6)); pointer-events: none; }
.wa-float.is-tucked:focus-visible { opacity: 1; translate: 0 0; pointer-events: auto; }