/* ==========================================================================
   MMINT Retail landing
   Tokens follow the MMINT brand manual 2026 (dark base, product gradient as accent).
   The two masters of the logo carry meaning on this page:
     blue  = the market (MercadoLibre listings)
     pink  = your number (the target purchase cost)
   The retail violet gradient is reserved for primary actions.
   Shared with gracias.html and ingresar.html (.hero, .simple, .display, .eyebrow, .btn...).
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subset, same as Google Fonts' latin block) ----------
   One static file per width/weight actually used, so the hero only waits on ~14 KB files.
   Archivo widths: 100 (step numbers), 110 (legacy h2), 112 (brand, h2, card titles), 115 (figures), 125 (display). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/landing/fonts/archivo-w100-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-stretch: 110%; font-display: swap; src: url(/landing/fonts/archivo-w110-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-stretch: 112%; font-display: swap; src: url(/landing/fonts/archivo-w112-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 112%; font-display: swap; src: url(/landing/fonts/archivo-w112-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 115%; font-display: swap; src: url(/landing/fonts/archivo-w115-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-stretch: 125%; font-display: swap; src: url(/landing/fonts/archivo-w125-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 900; font-stretch: 125%; font-display: swap; src: url(/landing/fonts/archivo-w125-900.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/landing/fonts/dmsans-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/landing/fonts/dmsans-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fredoka ships as one small variable file covering both weights in use */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500 600; font-stretch: 100%; font-display: swap; src: url(/landing/fonts/fredoka-500-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0f0c17;
  --bg-deep: #0a0811;
  --surface: #17131f;
  --surface-2: #1e1929;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  /* Text */
  --text: #ffffff;
  --text-muted: #c3bdd1;
  --text-dim: #9a93aa;

  /* Brand masters */
  --brand-pink: #ff3dcb;
  --brand-blue: #219bff;
  --brand-violet: #5500a1;

  /* Meaning on this page */
  --market: #219bff;          /* listings */
  --market-text: #6cbcff;     /* blue lifted for small text on the dark base */
  --cost: #ff3dcb;            /* target purchase cost */
  --cost-text: #ff8fe0;

  /* Product: Retail */
  --product-a: #5500a1;
  --product-b: #900098;
  --product-d: #5f02db;
  --gradient: linear-gradient(120deg, var(--product-a) 0%, var(--product-b) 100%);
  /* The retail purples are too dark for text on the dark base (<3:1).
     Text/accents use a lifted tint of #5f02db into the master pink #ff3dcb. */
  --accent: #ff3dcb;
  --accent-soft: #c58bff;
  --gradient-text: linear-gradient(90deg, #c58bff 0%, #ff3dcb 100%);
  --glow: rgba(144, 0, 152, 0.45);
  --focus: #ff7ad9;

  /* Type */
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-button: "Fredoka", "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --radius: 20px;
  --radius-sm: 12px;
  --header-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, output { font: inherit; color: inherit; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 820px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 7.4vw, 4.6rem);
}
.display--md { font-size: clamp(1.75rem, 5.4vw, 3.1rem); }
.display__line { display: block; text-wrap: balance; }

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.75rem, 4.6vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: 40px;
}

/* Kept for gracias.html / ingresar.html */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lead { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); color: var(--text-muted); max-width: 50ch; }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h);
  padding: 0 calc(var(--btn-h) * 0.62);
  border-radius: 999px;
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 1.1875rem; /* 19px/600 = large text for contrast purposes */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  touch-action: manipulation;
  transition: transform 180ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover { box-shadow: 0 14px 40px -8px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); }
.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); }
.btn--sm { --btn-h: 44px; font-size: 1rem; font-weight: 500; padding: 0 20px; }
.btn--block { width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }

.text-link {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 4px;
  font-family: var(--font-button); font-weight: 600; font-size: 1.125rem;
  color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 61, 203, 0.7);
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.text-link:hover { text-decoration-color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 12, 23, 0.8);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; margin-right: auto; }
.brand img { width: auto; height: 32px; }
.brand__name { white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-variation-settings: "wdth" 112; font-size: 1.0625rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand__name strong { font-weight: 800; color: var(--accent); }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--text-muted); text-decoration: none; font-size: 0.9375rem; border-radius: 10px;
  transition: color 150ms ease;
}
.site-nav a:hover { color: var(--text); }
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.site-header__actions .btn--sm { padding: 0 16px; }
.only-wide { display: none; }
.only-narrow { display: inline; }

/* ---------- Sections ---------- */
.section { padding: 80px 0; position: relative; }
.section--alt { background: var(--bg-deep); border-block: 1px solid var(--line); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 48px 0 64px; overflow: hidden; isolation: isolate; }
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; right: -260px; top: -160px;
  background: radial-gradient(circle at 45% 45%, rgba(144, 0, 152, 0.42), rgba(95, 2, 219, 0.2) 45%, transparent 70%);
  filter: blur(40px);
}
.hero .lead { margin-top: 24px; }

/* Promise on top, the real product below it, framed like an app window */
.hero--product { padding: 56px 0 72px; text-align: center; }
.hero--product::before { /* faint grid behind the copy, fading out */
  content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: 720px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 25%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 25%, #000 10%, transparent 75%);
}
.hero--product .hero__glow {
  left: 50%; right: auto; top: 420px; width: 1200px; height: 760px; margin-left: -600px;
  background: radial-gradient(closest-side, rgba(144, 0, 152, 0.5), rgba(95, 2, 219, 0.2) 55%, transparent 100%);
  filter: blur(20px);
}
.hero__intro { display: grid; justify-items: center; }
.hero__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112;
  font-size: clamp(2.25rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.03em;
}
.hero__line { display: block; text-wrap: balance; }
.hero__line--soft { color: #b4a6d4; }
.hero__lead { margin-top: 24px; max-width: 54ch; }
.hero__ctas { justify-content: center; margin-top: 32px; }
.btn--play svg { flex: none; }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 28px; font-size: 0.9375rem; color: var(--text-muted); }
.hero__proof li { position: relative; padding-left: 16px; }
.hero__proof li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 7px; height: 7px; border-radius: 50%; background: var(--market); }
.hero__proof li:first-child::before { background: var(--cost); }
.hero__proof strong { color: var(--text); }

.product { position: relative; margin: 64px auto 0; perspective: 2200px; text-align: left; }
.product__window {
  position: relative; border-radius: 16px; overflow: hidden; background: #0d0c12;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 120px -30px rgba(144, 0, 152, 0.55);
  transform-origin: 50% 0;
}
.product__window::after { /* bottom of the shot dissolves into the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(15, 12, 23, 0), var(--bg)); pointer-events: none;
}
.product__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #15121c; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.product__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.product__bar span { margin: 0 auto; transform: translateX(-30px); padding: 3px 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); font-size: 0.75rem; color: var(--text-dim); }
.product__shot { display: block; width: 100%; height: auto; }

.product__chip {
  position: absolute; z-index: 2; display: grid; gap: 4px; padding: 16px 20px; border-radius: 16px;
  background: rgba(24, 19, 33, 0.84); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95);
}
.chip__label { font-size: 0.8125rem; color: var(--text-muted); }
.chip__value {
  font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-variation-settings: "wdth" 115;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; color: var(--cost); font-variant-numeric: tabular-nums;
}
.chip__value--sm { font-size: clamp(1.375rem, 2.2vw, 1.75rem); color: var(--text); }
.chip__note { font-size: 0.8125rem; color: var(--text-dim); }
.chip__note b { color: var(--market-text); }
.chip__dots { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin: 4px 0 2px; }
.chip__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--market); }
.chip__dots i:nth-child(3n+1) { transform: translateY(-14px); }
.chip__dots i:nth-child(3n+2) { transform: translateY(-6px); }
.chip__dots i:nth-child(n+5):nth-child(-n+7) { box-shadow: 0 0 0 2px rgba(33, 155, 255, 0.25); }
.product__chip--cost { left: -32px; top: 56%; border-color: rgba(255, 61, 203, 0.5); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.95), 0 0 50px -12px rgba(255, 61, 203, 0.55); }
.product__chip--scan { right: -28px; top: 16%; }
.product__chip--price { right: 9%; top: 62%; }

/* ---------- Try it: the price ruler as a hands-on example ---------- */
.try { border-top: 1px solid var(--line); }
.try__grid { display: grid; gap: 40px; align-items: center; }
.try__copy .h2 { margin-bottom: 20px; }

/* ---------- Signature: the price ruler ---------- */
.quote {
  position: relative;
  padding: 22px 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 25, 41, 0.94), rgba(20, 16, 28, 0.97));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(144, 0, 152, 0.12);
  font-variant-numeric: tabular-nums;
  width: 100%; max-width: 540px; justify-self: center;
}
.quote__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112;
  text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1.2;
}
.quote__meta { color: var(--text-dim); font-size: 0.875rem; margin-top: 4px; }

.quote__figures {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px;
  margin-top: 20px; padding: 16px 0; border-block: 1px solid var(--line);
}
.quote__figure { display: grid; align-content: start; gap: 6px; }
.quote__figure + .quote__figure { border-left: 1px solid var(--line); padding-left: 16px; }
.quote__figure dt { font-size: 0.8125rem; line-height: 1.35; color: var(--text-muted); }
.quote__figure dd {
  font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-variation-settings: "wdth" 115;
  font-size: clamp(1.5rem, 6vw, 1.75rem); line-height: 1; white-space: nowrap;
}
.quote__figure--cost dt { color: var(--text); font-weight: 700; }
.quote__figure--cost dd { color: var(--cost); font-size: clamp(1.875rem, 8vw, 2.5rem); }

.ruler { --thumb: 22px; position: relative; margin-top: 18px; }
.ruler__plot { position: relative; height: 140px; }

/* Lanes inside the plot: labels 0-28px, listings 28-100px, difference 104-140px.
   The axis line (y = 140px) doubles as the slider track. */
.ruler__band {
  position: absolute; top: 28px; bottom: 40px;
  left: 41%; width: 10.5%; /* $81.000 to $91.500 */
  background: linear-gradient(180deg, rgba(33, 155, 255, 0.24), rgba(33, 155, 255, 0.06));
  border-inline: 1px solid rgba(108, 188, 255, 0.55);
  border-radius: 4px;
}
.ruler__dots { position: absolute; inset: 40px 0 auto 0; height: 44px; }
.ruler__dots i {
  position: absolute; left: calc(var(--p) * 1%); top: calc(var(--y) * 17px);
  width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--market); box-shadow: 0 0 0 2px rgba(15, 12, 23, 0.9);
}

.ruler__mark {
  position: absolute; top: 0; bottom: 36px; width: 2px; margin-left: -1px;
  left: calc(var(--p) * 1%);
  transform-origin: 50% 100%;
}
.ruler__mark b {
  position: absolute; top: 0; left: 8px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 700; line-height: 1.2;
}
.ruler__mark--cost { --p: var(--at-cost); background: var(--cost); z-index: 2; }
.ruler__mark--cost b { color: var(--cost-text); }
.ruler__mark--sale { --p: var(--at-sale); background: rgba(255, 255, 255, 0.75); }
.ruler__mark--sale b { color: var(--text); }

.ruler__gap {
  position: absolute; bottom: 0; height: 36px; z-index: 2; /* label stays above the offer line */
  left: calc(var(--at-cost) * 1%); width: calc((var(--at-sale) - var(--at-cost)) * 1%);
  transform-origin: 0 50%;
}
.ruler__gap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cost), var(--market));
}
.ruler__gap b {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 6px; border-radius: 4px; background: #18141f;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
}

.ruler__axis {
  position: relative; height: 34px; border-top: 1px solid var(--line-strong);
  font-size: 0.6875rem; color: var(--text-dim);
}
.ruler__axis span { position: absolute; top: 14px; left: calc(var(--p) * 1%); transform: translateX(-50%); white-space: nowrap; }
.ruler__axis span::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 4px; background: var(--line-strong); }
.ruler__axis span:first-child { transform: none; }
.ruler__axis span:first-child::before { left: 0; }
.ruler__axis span:last-child { transform: translateX(-100%); }
.ruler__axis span:last-child::before { left: auto; right: 0; }

/* What the supplier asks: a line through the market down to the handle on the axis */
.ruler__offer {
  position: absolute; top: 28px; height: 112px; width: 0; z-index: 1;
  left: calc(var(--at-offer) * 1%);
  border-left: 2px dashed rgba(255, 255, 255, 0.85); margin-left: -1px;
  pointer-events: none;
}
.ruler__over {
  position: absolute; top: 28px; bottom: 40px; display: none;
  left: calc(var(--at-cost) * 1%); width: calc(max(0, var(--at-offer) - var(--at-cost)) * 1%);
  background: repeating-linear-gradient(135deg, rgba(255, 61, 203, 0.42) 0 2px, transparent 2px 7px);
}
.quote[data-offer="over"] .ruler__over,
.quote[data-offer="out"] .ruler__over { display: block; }

/* The range input is widened by one thumb so the thumb centre lands exactly on the axis value,
   and centred on the axis line (140px) so the handle rides the axis */
.ruler__range {
  position: absolute; top: 120px; height: 40px; margin: 0; z-index: 3;
  left: calc(var(--thumb) / -2); width: calc(100% + var(--thumb));
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.ruler__range:focus-visible { outline: none; }
.ruler__range::-webkit-slider-runnable-track { height: 40px; background: transparent; }
.ruler__range::-moz-range-track { height: 40px; background: transparent; }
.ruler__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); margin-top: 9px; border-radius: 50%;
  background: #fff; border: 5px solid var(--product-d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: transform 150ms var(--ease-out);
}
.ruler__range::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb); box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 5px solid var(--product-d);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}
.ruler__range:hover::-webkit-slider-thumb, .ruler__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ruler__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus); }
.ruler__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--focus); }

.offer { margin-top: 10px; }
.offer__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.9375rem; color: var(--text-muted); }
.offer__row output {
  font-family: var(--font-display); font-weight: 800; font-stretch: 115%; font-variation-settings: "wdth" 115;
  font-size: 1.25rem; color: var(--text);
}
.offer__verdict { margin-top: 6px; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--text); min-height: 3em; }
.quote[data-offer="over"] .offer__verdict,
.quote[data-offer="out"] .offer__verdict { color: var(--cost-text); }
.offer__hint { margin-top: 6px; font-size: 0.8125rem; color: var(--text-dim); }
.quote[data-touched] .offer__hint { visibility: hidden; }

/* ---------- Audience ---------- */
.audience-strip { border-block: 1px solid var(--line); background: var(--bg-deep); }
.audience-strip__inner { display: grid; gap: 14px; padding-block: 28px; }
.audience-strip__title { font-size: 0.9375rem; font-weight: 700; color: var(--text-dim); }
.audience { display: grid; gap: 14px; }
.audience li { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.audience strong { color: var(--text); }

/* ---------- Problem ---------- */
.problem__head { display: grid; gap: 22px; margin-bottom: 56px; }
.problem .display--md {
  max-width: 14ch; text-transform: none; font-stretch: 112%; font-variation-settings: "wdth" 112;
  font-size: clamp(2rem, 5.4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.02;
}

.tracks { display: grid; gap: 40px; }
.track__title { font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.track--blind .track__title { color: var(--text-dim); }

/* Mobile: vertical timeline. Each step is a node on the line; the pink node is when you learn your margin. */
.track__steps { position: relative; display: grid; gap: 18px; }
.track__steps::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 0;
  border-left: 2px solid var(--line-strong);
}
.track--blind .track__steps::before { border-left-style: dashed; }
.track__steps li { position: relative; padding-left: 32px; color: var(--text-muted); line-height: 1.4; }
.track__steps li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--text-dim);
}
.track__steps li.is-margin { color: var(--text); font-weight: 700; }
.track__steps li.is-margin::before {
  background: var(--cost); border-color: var(--cost);
  box-shadow: 0 0 0 5px rgba(255, 61, 203, 0.18);
}
.track--mmint .track__steps::before { border-left-color: rgba(255, 61, 203, 0.55); }

/* ---------- Features ---------- */
.features { display: grid; }
.feature { padding: 28px 0; border-top: 1px solid var(--line); }
.feature__glyph { display: block; width: 120px; height: 48px; margin-bottom: 22px; overflow: visible; }
.feature h3 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-variation-settings: "wdth" 112;
  text-transform: uppercase; font-size: 1.0625rem; letter-spacing: 0.01em; line-height: 1.25; margin-bottom: 8px;
}
.feature p { color: var(--text-muted); font-size: 0.9375rem; }
.g-axis { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.g-market { fill: var(--market); }
.g-cost { fill: var(--cost); }
.g-cost-line { stroke: var(--cost); stroke-width: 2; fill: none; }
.g-cost-ring { fill: none; stroke: rgba(255, 61, 203, 0.45); stroke-width: 1.5; stroke-dasharray: 3 3; }
.g-trend { stroke: rgba(33, 155, 255, 0.5); stroke-width: 1.5; fill: none; }

/* ---------- Steps (a real sequence) ---------- */
.steps { position: relative; display: grid; gap: 32px; }
.steps::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, var(--market), var(--cost));
  opacity: 0.6;
}
.step { position: relative; padding-left: 44px; }
.step::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-deep); border: 2px solid var(--market);
}
.step--result::before { background: var(--cost); border-color: var(--cost); box-shadow: 0 0 0 6px rgba(255, 61, 203, 0.18); }
.step__num {
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-variation-settings: "wdth" 100;
  font-size: 2.5rem; line-height: 1; color: rgba(255, 255, 255, 0.22);
}
.step--result .step__num { color: var(--cost); }
.step h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; }
.step p { color: var(--text-muted); font-size: 0.9375rem; max-width: 26ch; }

/* ---------- Walkthrough video: the steps are its chapters ---------- */
.walkthrough { display: grid; gap: 36px; }
.demo { margin: 0; }
.demo__video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius); background: #17082c;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(144, 0, 152, 0.12);
}
.demo__caption { margin-top: 12px; font-size: 0.875rem; color: var(--text-dim); }

/* Each step title is a button that jumps the video to that part; its ::after covers the whole step */
.step__seek {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.step__seek::after { content: ""; position: absolute; inset: -10px; border-radius: 14px; }
.step__seek:focus-visible { outline: none; }
.step__seek:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 0; }
.step:hover h3 { color: #ffd6f4; }

/* While the video plays, the step on screen lights up and the rest step back */
.steps.has-active .step { transition: opacity 300ms ease; }
.steps.has-active .step:not(.is-active) { opacity: 0.5; }
.steps.has-active .step--result:not(.is-active)::before { background: var(--bg-deep); border-color: var(--market); box-shadow: none; }
.steps.has-active .step--result:not(.is-active) .step__num { color: rgba(255, 255, 255, 0.22); }
.step.is-active::before { background: var(--cost); border-color: var(--cost); box-shadow: 0 0 0 6px rgba(255, 61, 203, 0.18); }
.step.is-active .step__num { color: var(--cost); }

/* ---------- Proof: metric + differentiators ---------- */
.proof__grid { display: grid; gap: 56px; }
.proof__metric { position: relative; isolation: isolate; padding-block: 12px; }
.proof__metric::before { /* a field of listings behind the number */
  content: ""; position: absolute; z-index: -1; inset: -40px -20px;
  background-image: radial-gradient(circle, rgba(33, 155, 255, 0.5) 1.4px, transparent 1.8px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 35% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 35% 50%, #000 0%, transparent 75%);
  opacity: 0.55;
}
.metric { display: grid; gap: 12px; }
.metric__value {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(3.25rem, 15vw, 7rem); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.metric__label { font-size: clamp(1.125rem, 2.4vw, 1.375rem); font-weight: 700; }
.metric__caption { margin-top: 14px; font-size: 0.8125rem; color: var(--text-dim); }

.proof__list .h2 { margin-bottom: 24px; }
.bullets { display: grid; }
.bullets li {
  padding: 16px 0; border-top: 1px solid var(--line);
  color: var(--text-muted); font-size: 1.0625rem; line-height: 1.5;
}
.bullets li:last-child { border-bottom: 1px solid var(--line); }
.bullets strong { color: var(--text); }

/* ---------- Contact form ---------- */
.contact {
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(144, 0, 152, 0.22), transparent 70%),
    var(--bg-deep);
  border-top: 1px solid var(--line);
  padding-bottom: 112px;
}
.contact__grid { display: grid; gap: 40px; }
.contact__intro .h2 { margin-bottom: 20px; }
.promises { display: grid; gap: 10px; margin-top: 28px; }
.promises li { position: relative; padding-left: 22px; font-weight: 700; }
.promises li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--market);
}
.contact__alt { margin-top: 24px; color: var(--text-muted); }
.contact__alt a, .form__status a, .form__privacy a, .faq a, .faq-section__alt a { color: #ffa3e6; }

.form {
  display: grid; gap: 18px; padding: 24px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -40px rgba(144, 0, 152, 0.55);
  position: relative;
}
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 700; font-size: 0.9375rem; }
.req { color: var(--accent); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg); border: 1.5px solid var(--line-strong); color: var(--text);
  font-size: 1rem; line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.32); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(197, 139, 255, 0.4); border-radius: 12px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff8a8a; }
.field__error { color: #ffb0b0; font-size: 0.875rem; font-weight: 700; }
.form__foot { display: grid; gap: 14px; }
.form__required { font-size: 0.8125rem; color: var(--text-dim); }
.form__status {
  padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 0.9375rem;
  background: rgba(255, 90, 90, 0.1); border: 1px solid rgba(255, 138, 138, 0.5); color: #ffd0d0;
}
.form__privacy { font-size: 0.8125rem; color: var(--text-dim); }
.form button[disabled] { opacity: 0.6; cursor: progress; transform: none; }
[hidden] { display: none !important; }

.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQ ---------- */
.faq-section__grid { display: grid; gap: 8px; }
.faq-section__intro .h2 { margin-bottom: 16px; }
.faq-section__alt { color: var(--text-muted); margin-bottom: 24px; }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 64px; padding: 16px 48px 16px 0;
  display: flex; align-items: center; position: relative; font-weight: 700; font-size: 1.0625rem;
  transition: color 150ms ease;
}
.faq summary:hover { color: #ffd6f4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { /* plus that turns into minus */
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  background: var(--text-muted); border-radius: 2px;
  transition: transform 220ms var(--ease-out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 48px 22px 0; color: var(--text-muted); max-width: 60ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-deep); padding: 36px 0 44px; }
.site-footer__inner { display: grid; gap: 24px; }
.site-footer__brand { display: flex; align-items: center; gap: 16px; color: var(--text-dim); font-size: 0.875rem; }
.site-footer__brand img { width: 40px; height: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.site-footer__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  color: var(--text-muted); text-decoration: none; font-size: 0.9375rem;
}
.site-footer__links a:hover { color: var(--text); text-decoration: underline; }

/* ---------- WhatsApp floating button ---------- */
.wa-fab {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1a7f45; color: #fff; /* darker WhatsApp green keeps the white glyph at AA contrast */
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.7);
  transition: transform 200ms var(--ease-out), opacity 200ms ease, visibility 200ms;
}
.wa-fab:hover { transform: scale(1.06); }
/* Hidden while the contact form is on screen so it never covers the submit button */
.wa-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.9); pointer-events: none; }
.has-fab .site-footer { padding-bottom: 100px; } /* room so the floating button never covers footer links */

/* ---------- Simple pages (gracias / ingresar) ---------- */
.simple { min-height: calc(100dvh - var(--header-h) - 180px); display: grid; align-items: center; padding: 72px 0; }
.simple .display { max-width: 16ch; }
.simple .lead { margin-top: 18px; }
.simple .cta-row { margin-top: 28px; }

/* ---------- Entrance motion: one orchestrated moment in the hero ----------
   Copy rises, then the market fills in left to right, then your cost and the difference appear. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 700ms var(--ease-out) both; }
  .reveal--late { animation-delay: 140ms; }
  /* Hero: the app window tilts up into place, then its key figures land on it */
  .product__window { animation: tilt-in 1100ms var(--ease-out) 250ms both; }
  .product__chip { animation: chip-in 600ms var(--ease-out) both; }
  .product__chip--cost { animation-delay: 1000ms; }
  .product__chip--scan { animation-delay: 1150ms; }
  .product__chip--price { animation-delay: 1300ms; }
  /* The price ruler waits until it is on screen (landing.js adds/removes .is-waiting) */
  .quote.is-waiting .ruler__dots i, .quote.is-waiting .ruler__band, .quote.is-waiting .ruler__mark,
  .quote.is-waiting .ruler__gap, .quote.is-waiting .quote__figure--cost dd, .quote.is-waiting .ruler__offer,
  .quote.is-waiting .ruler__range, .quote.is-waiting .offer { animation-play-state: paused; }
  /* Dots pop in left to right (420 ms each, 35 ms apart, first at 500 ms). All 24 share ONE start and end time and
     carry their stagger inside their own keyframes: same motion, but the browser starts/finishes a single batch
     instead of 48 separate animation events. */
  .ruler__dots i { animation: 1225ms linear 500ms both; }
  .ruler__dots i:nth-child(1) { animation-name: pop-0; }
  .ruler__dots i:nth-child(2) { animation-name: pop-1; }
  .ruler__dots i:nth-child(3) { animation-name: pop-2; }
  .ruler__dots i:nth-child(4) { animation-name: pop-3; }
  .ruler__dots i:nth-child(5) { animation-name: pop-4; }
  .ruler__dots i:nth-child(6) { animation-name: pop-5; }
  .ruler__dots i:nth-child(7) { animation-name: pop-6; }
  .ruler__dots i:nth-child(8) { animation-name: pop-7; }
  .ruler__dots i:nth-child(9) { animation-name: pop-8; }
  .ruler__dots i:nth-child(10) { animation-name: pop-9; }
  .ruler__dots i:nth-child(11) { animation-name: pop-10; }
  .ruler__dots i:nth-child(12) { animation-name: pop-11; }
  .ruler__dots i:nth-child(13) { animation-name: pop-12; }
  .ruler__dots i:nth-child(14) { animation-name: pop-13; }
  .ruler__dots i:nth-child(15) { animation-name: pop-14; }
  .ruler__dots i:nth-child(16) { animation-name: pop-15; }
  .ruler__dots i:nth-child(17) { animation-name: pop-16; }
  .ruler__dots i:nth-child(18) { animation-name: pop-17; }
  .ruler__dots i:nth-child(19) { animation-name: pop-18; }
  .ruler__dots i:nth-child(20) { animation-name: pop-19; }
  .ruler__dots i:nth-child(21) { animation-name: pop-20; }
  .ruler__dots i:nth-child(22) { animation-name: pop-21; }
  .ruler__dots i:nth-child(23) { animation-name: pop-22; }
  .ruler__dots i:nth-child(24) { animation-name: pop-23; }
  .ruler__band { animation: fade 600ms ease 1300ms both; }
  .ruler__mark--sale { animation: grow 500ms var(--ease-out) 1500ms both; }
  .ruler__mark--cost { animation: grow 600ms var(--ease-out) 1750ms both; }
  .ruler__gap { animation: draw 700ms var(--ease-out) 2100ms both; }
  .quote__figure--cost dd { animation: fade 500ms ease 1850ms both; }
  .ruler__offer, .ruler__range, .offer { animation: fade 500ms ease 2400ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tilt-in { from { opacity: 0; transform: rotateX(24deg) translateY(70px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
/* Staggered dot keyframes: window i = [35i, 35i + 420] ms of a 1225 ms run (see .ruler__dots i above) */
@keyframes pop-0 { 0% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 34.2857%, 100% { opacity: 1; transform: none; } }
@keyframes pop-1 { 0%, 2.8571% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 37.1429%, 100% { opacity: 1; transform: none; } }
@keyframes pop-2 { 0%, 5.7143% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes pop-3 { 0%, 8.5714% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 42.8571%, 100% { opacity: 1; transform: none; } }
@keyframes pop-4 { 0%, 11.4286% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 45.7143%, 100% { opacity: 1; transform: none; } }
@keyframes pop-5 { 0%, 14.2857% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 48.5714%, 100% { opacity: 1; transform: none; } }
@keyframes pop-6 { 0%, 17.1429% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 51.4286%, 100% { opacity: 1; transform: none; } }
@keyframes pop-7 { 0%, 20% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 54.2857%, 100% { opacity: 1; transform: none; } }
@keyframes pop-8 { 0%, 22.8571% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.1429%, 100% { opacity: 1; transform: none; } }
@keyframes pop-9 { 0%, 25.7143% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes pop-10 { 0%, 28.5714% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 62.8571%, 100% { opacity: 1; transform: none; } }
@keyframes pop-11 { 0%, 31.4286% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 65.7143%, 100% { opacity: 1; transform: none; } }
@keyframes pop-12 { 0%, 34.2857% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 68.5714%, 100% { opacity: 1; transform: none; } }
@keyframes pop-13 { 0%, 37.1429% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 71.4286%, 100% { opacity: 1; transform: none; } }
@keyframes pop-14 { 0%, 40% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 74.2857%, 100% { opacity: 1; transform: none; } }
@keyframes pop-15 { 0%, 42.8571% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 77.1429%, 100% { opacity: 1; transform: none; } }
@keyframes pop-16 { 0%, 45.7143% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes pop-17 { 0%, 48.5714% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 82.8571%, 100% { opacity: 1; transform: none; } }
@keyframes pop-18 { 0%, 51.4286% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 85.7143%, 100% { opacity: 1; transform: none; } }
@keyframes pop-19 { 0%, 54.2857% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 88.5714%, 100% { opacity: 1; transform: none; } }
@keyframes pop-20 { 0%, 57.1429% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 91.4286%, 100% { opacity: 1; transform: none; } }
@keyframes pop-21 { 0%, 60% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 94.2857%, 100% { opacity: 1; transform: none; } }
@keyframes pop-22 { 0%, 62.8571% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 97.1429%, 100% { opacity: 1; transform: none; } }
@keyframes pop-23 { 0%, 65.7143% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Breakpoints (mobile-first) ---------- */
@media (max-width: 759px) {
  .product { margin-top: 44px; }
  .product__window { border-radius: 12px; }
  .product__bar { height: 24px; padding: 0 10px; gap: 5px; }
  .product__bar i { width: 7px; height: 7px; }
  .product__bar span { display: none; }
  .product__chip--scan, .product__chip--price { display: none; }
  .product__chip--cost { left: 12px; top: auto; bottom: -36px; padding: 12px 16px; }
}
@media (max-width: 419px) {
  .site-header__inner { gap: 10px; }
  .site-header .brand__name { display: none; } /* the mark + aria-label carry the brand on small phones */
  .ruler__axis span:nth-child(even) { display: none; }
  .ruler__dots i { width: 8px; height: 8px; margin-left: -4px; }
}
@media (min-width: 480px) {
  .only-wide { display: inline; }
  .only-narrow { display: none; }
  .quote { padding: 26px 26px 22px; }
}

@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .audience { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .audience li { padding-inline: 20px; border-left: 1px solid var(--line); }
  .features { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .form { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .field--wide, .form__foot { grid-column: 1 / -1; }
  .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .site-footer__links { justify-content: flex-end; }
}

/* Horizontal timelines: same four columns in both rows, so the pink node visibly jumps from last to first */
@media (min-width: 760px) {
  .tracks { gap: 0; border-top: 1px solid var(--line); }
  .track { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
  .track__title { margin: 0; padding-top: 30px; }
  .track__steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .track__steps::before { left: 7px; right: 7px; top: 7px; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px solid var(--line-strong); }
  .track--blind .track__steps::before { border-left: 0; border-top-style: dashed; }
  .track--mmint .track__steps::before { border-top-color: rgba(255, 61, 203, 0.55); }
  .track__steps li { padding: 32px 8px 0 0; }
  .track__steps li::before { top: 0; }

  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .steps::before { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--market), var(--cost)); }
  .step { padding: 44px 12px 0 0; }
  .step::before { top: 0; }
}

@media (min-width: 960px) {
  :root { --header-h: 72px; }
  .site-nav { display: block; }
  .section { padding: 96px 0; }
  .contact { padding-bottom: 136px; }
  .hero { padding: 72px 0 96px; }
  .hero--product { padding: 80px 0 88px; }
  .try__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; }
  .quote { justify-self: end; }

  .audience-strip__inner { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; padding-block: 32px; }
  .audience li:first-child { border-left: 0; padding-left: 0; }

  .problem__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 56px; margin-bottom: 64px; }

  .features { grid-template-columns: repeat(4, 1fr); column-gap: 0; border-block: 1px solid var(--line); }
  .feature { border-top: 0; padding: 32px 28px 36px; }
  .feature + .feature { border-left: 1px solid var(--line); }
  .feature:first-child { padding-left: 0; }

  .proof__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }

  .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
  .form { padding: 32px; }

  .faq-section__grid { grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
  .faq-section__intro { position: sticky; top: calc(var(--header-h) + 32px); }

  .wa-fab { width: 56px; height: 56px; right: 24px; bottom: 24px; }
}