/* PayManzo — Warm Market. Base, tokens, header, buttons, hero, chips. */

:root {
  /* palette */
  --sand: #F3E6D0;
  --sand-2: #EBD7B6;
  --cream: #FBF4E8;
  --clay: #C65D3B;
  --clay-btn: #B04B2B;
  --clay-deep: #93391F;
  --ochre: #D9A036;
  --ochre-soft: #F2D491;
  --leaf: #5A8A3C;
  --leaf-soft: #D5E3BF;
  --wa: #236B3A;
  --wa-hover: #1B5A30;
  --cocoa: #3A2418;
  --cocoa-soft: #654535;
  --wood: #A86B45;
  --wood-dark: #7A4A2E;
  --skin: #8A5A3C;
  --tomato: #D2452B;

  /* abstract brand tokens (no logos) */
  --c-mtn: #FFCB05;
  --c-telecel: #D7141A;
  --c-at: #1E4FA0;
  --c-visa: #1A1F71;
  --c-mc: #EB7A1E;
  --c-btc: #F2931A;
  --c-usdt: #17785A;

  /* ===== LAYOUT SYSTEM (see polish/AUDIT.md "LAYOUT SYSTEM") ===== */

  /* type families */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* type scale (fluid 375 -> 1440) */
  --text-2xs: 0.75rem;                                       /* 12px: labels inside mock UIs */
  --text-xs: 0.8125rem;                                      /* 13px: captions, fine print, meta */
  --text-sm: clamp(0.9rem, 0.86rem + 0.2vw, 0.975rem);       /* 14.4-15.6: chips, secondary copy */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16-18: body */
  --text-lg: clamp(1.125rem, 1.02rem + 0.5vw, 1.35rem);      /* 18-21.6: section intro / lede */
  --text-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);           /* 17-19: small card / tile titles */
  --text-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);        /* 18-22: list + card titles */
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);            /* 24-32: featured card titles, sub-heads */
  --text-h2: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem);          /* 30-54: every section h2 */
  --text-display: clamp(2.1rem, 1.35rem + 3.2vw, 3.75rem);   /* 34-60: statement h2 (why, final CTA) */
  --text-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);       /* 36-72: h1 only */
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 65ch;        /* long-form copy */
  --measure-lead: 36em;   /* intro / lede paragraphs */

  /* spacing scale (4/8 based) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* container */
  --container: 1360px;                      /* outer max-width incl. gutters -> 1280 content */
  --gutter: 16px;                           /* 16 -> 24 @640 -> 32 @960 -> 40 @1200 (integer steps keep edges on whole pixels) */
  --header-h: 72px;
  --stick-top: calc(var(--header-h) + var(--space-8));       /* top offset for sticky columns */

  /* section rhythm */
  --space-section: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);   /* 56 @375 -> 104 @1440 */
  --section-tight: clamp(2rem, 1.25rem + 3vw, 4rem);         /* 32 -> 64: consecutive same-bg sections */
  --split-gap: clamp(2rem, 1rem + 3.5vw, 4rem);              /* 32 -> 64: two-column section layouts */

  /* section header: kicker -> h2 -> intro, always LEFT aligned */
  --head-max: 44rem;                                         /* width of h2 + intro block */
  --kicker-gap: var(--space-4);                              /* kicker -> h2 */
  --head-gap: var(--space-4);                                /* h2 -> intro */
  --head-mb: clamp(2rem, 1.5rem + 2vw, 3.25rem);             /* head -> section content */

  /* cards */
  --card-pad: clamp(20px, 1rem + 0.75vw, 28px);
  --card-pad-lg: clamp(24px, 1rem + 2.5vw, 40px);
  --card-gap: clamp(16px, 0.75rem + 0.75vw, 24px);           /* gap inside card grids */
  --card-border: 2px solid var(--cocoa);
  --card-shadow: 0 4px 0 var(--cocoa);                       /* small cards / tiles */
  --card-shadow-lg: 8px 8px 0 var(--cocoa);                  /* feature panels */
  --card-shadow-lg-ochre: 8px 8px 0 var(--ochre);            /* feature panels, ochre variant */

  /* shape */
  --radius-pill: 999px;
  --radius-soft: 28px;
  --radius-sm: 14px;
  --shadow-warm: 0 18px 40px -18px rgba(90, 45, 20, 0.35);
  --shadow-press: 0 4px 0 var(--cocoa);

  /* buttons + controls */
  --btn-h: 52px;
  --btn-h-sm: 44px;
  --btn-pad-x: 24px;
  --btn-pad-x-sm: 18px;
  --btn-gap: var(--space-3);                                 /* gap between buttons in a row */
  --control-h: 44px;                                         /* min tap target: tabs, toggles, chips-as-buttons */
  --chip-h: 38px;                                            /* .chip and hero fact pills */
  --chip-pad: 6px 14px 6px 10px;                             /* pill padding (right side a touch wider than the dot side) */

  /* icons */
  --icon-dot: 14px;       /* colour dots in chips / tags */
  --icon-sm: 22px;        /* icons inside buttons */
  --icon-md: 28px;        /* service / feature icons */
  --icon-lg: 44px;        /* list-leading illustrations (why list) */

  /* motion */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-3)); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--cocoa);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-x: clip;
  position: relative;
}

/* paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--leading-tight); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--text-h2); font-weight: 800; }
h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--clay-deep); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--cocoa);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* ---------- layout primitives ---------- */
/* .wrap is THE container. Every section's content starts at the same left edge. */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Consecutive sections on the same background: halve the doubled gap.
   (.section padding itself lives in sections.css and reads --space-section.) */
.section.section-join { padding-top: var(--section-tight); }

/* Section header pattern: [kicker] -> h2 -> intro p. Left aligned site-wide.
   Base box (max-width / margin-bottom / p spacing) is in sections.css .section-head. */
/* the kicker is a <p> inside .section-head: undo the intro-paragraph styles on it */
.section-head > .hero-kicker { margin: 0 0 var(--kicker-gap); font-size: var(--text-sm); color: var(--cocoa); }
.section-head > p { max-width: var(--measure-lead); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: var(--cocoa);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 12px var(--btn-pad-x);
  border-radius: var(--radius-pill);
  border: 2px solid var(--cocoa);
  font: 800 var(--text-base)/1.2 var(--font-body);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-press);
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--cocoa); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cocoa); }
.btn-small { min-height: var(--btn-h-sm); padding: 8px var(--btn-pad-x-sm); font-size: var(--text-sm); }
.btn-icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); }
.btn-clay { background: var(--clay-btn); color: #fff; }
.btn-ghost { background: var(--cream); color: var(--cocoa); }
.btn-ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 0 4px 0 var(--clay-deep); }
.btn-ghost-light:hover { box-shadow: 0 7px 0 var(--clay-deep); }
.btn-on-clay { border-color: var(--cocoa); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sand) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px dashed color-mix(in srgb, var(--cocoa) 22%, transparent);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
/* Header shares the page container so the logo lines up with every section's left edge. */
.site-header > .wrap.header-row { max-width: var(--container); padding-inline: var(--gutter); }
/* >=1360 the header is two rows (see merged.css): logo + actions, then the bordered links. */
@media (min-width: 1360px) {
  .site-header .site-nav ul a { padding-inline: var(--space-3); font-size: var(--text-sm); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cocoa);
  text-decoration: none;
  font: 800 1.45rem/1 var(--font-display);
  letter-spacing: -0.03em;
  min-height: 44px;
}
.brand-mark { width: 38px; height: 38px; transition: transform var(--dur-mid) var(--ease-bounce); }
.brand:hover .brand-mark { transform: scale(1.06); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  background: var(--cream);
  color: var(--cocoa);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-pill);
  font: 800 var(--text-sm) var(--font-body);
  cursor: pointer;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: var(--gutter);
  right: 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);
}
.site-nav.is-open { display: block; animation: drop-in var(--dur-mid) var(--ease-bounce); }
.site-nav ul { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
/* Each link is its own bordered pill so items read as separate buttons. */
.site-nav ul a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px var(--space-4);
  color: var(--cocoa);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: var(--cream);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 0 var(--cocoa);
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) ease;
}
.site-nav ul a:hover { background: var(--ochre-soft); transform: translateY(-1px); box-shadow: 0 3px 0 var(--cocoa); }
.site-nav .btn { width: 100%; }

@keyframes drop-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (min-width: 960px) {
  .menu-toggle { display: none; }
  .site-nav, .site-nav.is-open {
    display: flex;
    align-items: center;
    gap: 18px;
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }
  .site-nav ul { display: flex; gap: var(--space-2); margin: 0; }
  .site-nav ul a { min-height: 44px; font-size: var(--text-sm); }
  .site-nav .btn { width: auto; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.blob { position: absolute; z-index: 0; pointer-events: none; }
.blob-hero-a {
  width: min(70vw, 620px);
  aspect-ratio: 1;
  right: -18%;
  top: -8%;
  background: var(--ochre-soft);
  border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%;
  opacity: 0.7;
}
.blob-hero-b {
  width: min(50vw, 380px);
  aspect-ratio: 1.2;
  left: -20%;
  bottom: -12%;
  background: var(--leaf-soft);
  border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%;
  opacity: 0.8;
}

.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--split-gap); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
@media (min-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }

.hero-kicker {
  display: inline-block;
  margin-bottom: var(--kicker-gap);
  padding: 6px 14px;
  background: var(--cream);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: var(--text-sm);
}
.hero h1 {
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13em;
  font-variation-settings: "opsz" 96;
}
.squiggle-word { position: relative; display: inline-block; color: var(--clay-deep); padding-bottom: 0.12em; }
.squiggle {
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.34em;
  overflow: visible;
}
.squiggle path {
  fill: none;
  stroke: var(--ochre);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: draw 1.1s var(--ease-out) 0.5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-lede { margin-top: var(--space-6); max-width: var(--measure-lead); font-size: var(--text-lg); color: var(--cocoa-soft); }

/* Button rows. Default (also used in .cta-blob): wrap, full width on phones. */
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--btn-gap); margin-top: var(--space-7); }
.hero-actions .btn { flex: 1 1 240px; }
@media (min-width: 640px) { .hero-actions .btn { flex: 0 0 auto; } }
/* 320-359: tighter side padding keeps "Chat with us on WhatsApp" + icon on one line */
@media (max-width: 359px) { .hero-actions .btn { padding-inline: var(--btn-pad-x-sm); } }
/* Hero: primary CTA on its own row, the two secondary CTAs split the row below
   at equal width, so the block reads as one tidy rectangle instead of a ragged wrap. */
@media (min-width: 640px) {
  .hero .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
  .hero .hero-actions .btn:first-child { grid-column: 1 / -1; }
  .hero .hero-actions .btn { padding-inline: var(--btn-pad-x-sm); }
}

.hero-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--cocoa-soft);
}
.hand-arrow { width: 46px; height: 32px; flex: none; color: var(--clay); transform: scaleY(-1) rotate(8deg); }

/* Stall art: bleeds to the screen edge on phones, capped and centred on
   tablets (it was ~700px tall at 768), fills its column on desktop. */
.hero-art { margin: 0 calc(var(--gutter) * -1); position: relative; }
@media (min-width: 640px) { .hero-art { width: 100%; max-width: 34rem; margin: 0 auto; } }
@media (min-width: 960px) { .hero-art { max-width: none; margin: 0; } }
.stall { display: block; width: 100%; height: auto; overflow: hidden; }
.tag-text { font: 800 15px var(--font-body); text-anchor: middle; }
.bubble-text { font: 800 15px var(--font-body); }

.tag { transform-box: view-box; animation: sway 4.2s ease-in-out infinite alternate; }
.tag-2 { animation-duration: 5s; animation-delay: -1.2s; }
.tag-3 { animation-duration: 3.6s; animation-delay: -2s; }
.tag-4 { animation-duration: 4.6s; animation-delay: -0.6s; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

.paid-bubble {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: pop 0.7s var(--ease-bounce) 1.3s forwards;
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.6); } to { opacity: 1; transform: none; } }

/* ---------- chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--chip-h);
  padding: var(--chip-pad);
  background: var(--cream);
  border: 2px solid var(--cocoa);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: var(--icon-dot);
  height: var(--icon-dot);
  border-radius: 50%;
  background: var(--dot, var(--clay));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
  flex: none;
}
.chip-soft { border-style: dashed; background: transparent; }
.chip-soft::before { background: var(--ochre); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .tag { animation: none; }
  .squiggle path { stroke-dashoffset: 0; animation: none; }
  .paid-bubble { opacity: 1; animation: none; }
  .reveal { opacity: 1; transform: none; }
}