/* ==========================================================================
   ecomwom landing — band-by-band layout
   Every dimension is an artboard pixel value multiplied by --s, so the page is
   a 1:1 reproduction of the Figma artboards at 1512px (desktop) and 393px
   (mobile), and scales proportionally at every width in between.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --lilac: #f4dcfc;
  --lilac-soft: #fcf4ff;
  --ink: #252324;
  --cream: #fffbf0;
  --pink: #ff98c7;
  --orange: #fe5c2b;
  --yellow: #eeff60;
  --white: #fff;

  --font-display: 'Mazzard', 'Arial Black', system-ui, sans-serif;
  --font-light: 'Aminute', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --font-ui: 'Outfit', system-ui, sans-serif;
  --font-serif: 'Bodoni Moda', 'Didot', Georgia, serif;

  /* artboard reference width, overridden at the mobile breakpoint */
  --artboard: 1512;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { container-type: inline-size; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  /* one scale factor drives the whole page */
  --s: calc(min(100cqw, 1512px) / var(--artboard));
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: none; }
a { text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Band + stage scaffold ---------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
}

.stage {
  position: relative;
  width: calc(var(--s) * 1512);
  height: 100%;
  margin-inline: auto;
}

.t-pink { color: var(--pink); }
.t-white { color: var(--white); }
.t-mazzard { font-family: var(--font-display); font-weight: 900; }
.t-aminute { font-family: var(--font-light); font-weight: 400; }

/* --- Band 1 — header ---------------------------------------------------- */

.band--header {
  height: calc(var(--s) * 176);
  background: var(--lilac);
}

.logo {
  position: absolute;
  left: calc(var(--s) * 430);
  top: calc(var(--s) * 53);
  width: calc(var(--s) * 652);
  height: calc(var(--s) * 69);
}

/* --- Band 2 — hero ------------------------------------------------------ */

.band--hero {
  height: calc(var(--s) * 582);
  background: var(--ink);
}

.hero__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 127);
  text-align: center;
  line-height: calc(var(--s) * 102);
  font-weight: 400;
}

/* the artboard sets each hero line slightly left of the optical centre */
.hero__line--1 { transform: translateX(calc(var(--s) * -10)); }
.hero__line--2 { transform: translateX(calc(var(--s) * -29)); }
.hero__line--3 { transform: translate(calc(var(--s) * 12), calc(var(--s) * -6)); }

/* the line carries a font-size of its own so the word space between the two
   differently-styled halves scales with the design */
.hero__line {
  display: block;
  white-space: nowrap;
  font-size: calc(var(--s) * 100);
}

.hero__line .t-mazzard { font-size: calc(var(--s) * 100); }
.hero__line .t-aminute { font-size: calc(var(--s) * 112); }
.hero__line--2 { font-size: calc(var(--s) * 100); }
.hero__line--3 { font-size: calc(var(--s) * 110); }

/* --- Band 3 — free classes ---------------------------------------------- */

.band--classes {
  height: calc(var(--s) * 516);
  background: var(--cream);
}

.classes__title { font-weight: 400; }

.classes__word {
  position: absolute;
  display: block;
  white-space: nowrap;
  line-height: 1;
}

/* the artboard stretches this word vertically; scaling from the baseline
   reproduces it without distorting the stroke weights horizontally */
.classes__word--clases {
  left: calc(var(--s) * 266);
  top: calc(var(--s) * 78);
  font-size: calc(var(--s) * 115);
  transform: scaleY(1.086);
  transform-origin: left bottom;
}

.classes__word--gratuitas {
  left: calc(var(--s) * 233);
  top: calc(var(--s) * 204);
  font-size: calc(var(--s) * 124);
}

.classes__bolt {
  position: absolute;
  left: calc(var(--s) * 653);
  top: calc(var(--s) * 101);
  width: calc(var(--s) * 58);
  height: calc(var(--s) * 91);
}

.classes__ellipse {
  position: absolute;
  left: calc(var(--s) * -15);
  top: calc(var(--s) * 16);
  width: calc(var(--s) * 606);
  height: calc(var(--s) * 115);
}

.badge {
  position: absolute;
  left: calc(var(--s) * 928);
  top: calc(var(--s) * 117.5);
  width: calc(var(--s) * 373);
  height: calc(var(--s) * 207);
  background: var(--yellow);
}

.badge__star {
  position: absolute;
  left: calc(var(--s) * 256);
  top: calc(var(--s) * -45);
  width: calc(var(--s) * 103);
  height: calc(var(--s) * 108);
}

.badge__top {
  position: absolute;
  left: calc(var(--s) * 38);
  top: calc(var(--s) * 18);
  font-size: calc(var(--s) * 64);
  line-height: 1;
  transform: scaleY(1.077);
  transform-origin: left bottom;
}

.badge__bottom {
  position: absolute;
  left: calc(var(--s) * 94);
  top: calc(var(--s) * 85);
  display: flex;
  align-items: baseline;
}

.badge__number {
  font-size: calc(var(--s) * 116);
  line-height: 1;
  color: var(--orange);
  transform: scaleY(1.073);
  transform-origin: left bottom;
}

.badge__unit {
  font-size: calc(var(--s) * 67);
  line-height: 1;
}

.classes__subtitle {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 400);
  text-align: center;
  font-size: calc(var(--s) * 35.5);
  font-weight: 400;
  line-height: 1.2;
}

.classes__arc {
  position: absolute;
  left: calc(var(--s) * 1235);
  top: calc(var(--s) * 425);
  width: calc(var(--s) * 222);
  height: calc(var(--s) * 120);
}

/* --- Band 4 — topics ticker --------------------------------------------- */

.band--ticker {
  height: calc(var(--s) * 89);
  background: var(--yellow);
}

.ticker__text {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 24);
  text-align: center;
  font-family: var(--font-light);
  font-size: calc(var(--s) * 43);
  letter-spacing: calc(var(--s) * .8);
  white-space: nowrap;
  transform: translateX(calc(var(--s) * -18));
}

/* --- Checker rule ------------------------------------------------------- */

.band--checker { height: calc(var(--s) * 91); }

.checker {
  display: block;
  height: calc(var(--s) * 91);
  background-color: var(--orange);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pink) 0 calc(var(--s) * 90),
    transparent calc(var(--s) * 90) calc(var(--s) * 180)
  );
  /* pink squares start at artboard x = 90 */
  background-position-x: calc(var(--s) * 90);
}

/* --- Band 6 — tags ------------------------------------------------------ */

.band--tags {
  height: calc(var(--s) * 419);
  background: var(--lilac-soft);
}

/* Pill fill *and* dashed outline are drawn in one SVG so the 10/10 dash rhythm
   and the "background shows through the gaps" look of the artboard are exact.
   The box is the artboard rect grown by the 4px stroke (2px on each side). */
.tag {
  position: absolute;
  height: calc(var(--s) * 67);
  font-size: calc(var(--s) * 32);
  letter-spacing: calc(var(--s) * 1.5);
  line-height: calc(var(--s) * 67);
  text-align: center;
  background: transparent no-repeat center / 100% 100%;
}

.tag--eventos {
  left: calc(var(--s) * 202);
  top: calc(var(--s) * 113);
  width: calc(var(--s) * 301);
  color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 301 67' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='297' height='63' rx='31.5' fill='%23F4DCFC' stroke='%23FE5C2B' stroke-width='4' stroke-dasharray='10 10'/%3E%3C/svg%3E");
}

.tag--networking {
  left: calc(var(--s) * 552);
  top: calc(var(--s) * 113);
  width: calc(var(--s) * 394);
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 394 67' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='390' height='63' rx='31.5' fill='%23EEFF60' stroke='%23252324' stroke-width='4' stroke-dasharray='10 10'/%3E%3C/svg%3E");
}

.tag--comunidad-dark {
  left: calc(var(--s) * 995);
  top: calc(var(--s) * 113);
  width: calc(var(--s) * 315);
  color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 315 67' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='311' height='63' rx='31.5' fill='%23252324' stroke='%23F4DCFC' stroke-width='4' stroke-dasharray='10 10'/%3E%3C/svg%3E");
}

.tag--inspiracion {
  left: calc(var(--s) * 367);
  top: calc(var(--s) * 228);
  width: calc(var(--s) * 383);
  color: var(--pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 383 67' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='379' height='63' rx='31.5' fill='%23FFFFFF' stroke='%23FF98C7' stroke-width='4' stroke-dasharray='10 10'/%3E%3C/svg%3E");
}

.tag--comunidad-orange {
  left: calc(var(--s) * 830);
  top: calc(var(--s) * 228);
  width: calc(var(--s) * 315);
  color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 315 67' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='311' height='63' rx='31.5' fill='%23FE5C2B' stroke='%23FFFFFF' stroke-width='4' stroke-dasharray='10 10'/%3E%3C/svg%3E");
}

/* --- Band 7 — join the community ---------------------------------------- */

.band--join { height: calc(var(--s) * 182); }

.checker--a,
.checker--b { position: absolute; left: 0; right: 0; }
.checker--a { top: 0; }
.checker--b {
  top: calc(var(--s) * 91);
  /* half-pitch offset row: pink squares start at artboard x = -5 */
  background-position-x: calc(var(--s) * -5);
}

.pill-cta {
  position: absolute;
  display: block;
  text-align: center;
  font-weight: 600;
  transition: transform .18s ease, filter .18s ease;
}

.pill-cta:hover { transform: translateY(calc(var(--s) * -2)); filter: brightness(1.05); }
.pill-cta:focus-visible {
  outline: calc(var(--s) * 4) solid var(--orange);
  outline-offset: calc(var(--s) * 4);
}

.pill-cta--dark {
  left: calc(var(--s) * 318);
  top: calc(var(--s) * 57);
  width: calc(var(--s) * 723);
  height: calc(var(--s) * 67);
  line-height: calc(var(--s) * 61);
  border-radius: calc(var(--s) * 33.5);
  background: var(--ink);
  color: var(--white);
  font-size: calc(var(--s) * 34);
  letter-spacing: calc(var(--s) * 1.3);
}

/* --- Band 8 — upcoming events ------------------------------------------- */

.band--events {
  height: calc(var(--s) * 895);
  background: var(--pink);
}

.events__bg {
  position: absolute;
  left: calc(var(--s) * -14);
  top: calc(var(--s) * 1);
  width: calc(var(--s) * 1526);
  height: calc(var(--s) * 909);
  background: url('../img/calendar-bg.png') no-repeat center / cover;
  opacity: .3;
}

.events__title {
  position: absolute;
  left: calc(var(--s) * 216);
  top: calc(var(--s) * 98);
  color: var(--white);
  font-weight: 400;
  line-height: calc(var(--s) * 82);
}

.events__title-top { display: block; font-size: calc(var(--s) * 80); }
.events__title-bottom { display: block; font-size: calc(var(--s) * 87); }

.events__list {
  position: absolute;
  left: calc(var(--s) * 211);
  top: calc(var(--s) * 282);
  width: calc(var(--s) * 1088);
}

.event {
  position: relative;
  height: calc(var(--s) * 87);
  margin-bottom: calc(var(--s) * 39);
  background: var(--white);
  display: flex;
  align-items: center;
}

.event__bullet {
  position: absolute;
  left: calc(var(--s) * 23);
  top: 50%;
  width: calc(var(--s) * 26);
  height: calc(var(--s) * 26);
  margin-top: calc(var(--s) * -13);
  border-radius: 50%;
  background: var(--ink);
}

.event__date {
  position: absolute;
  left: calc(var(--s) * 114);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(var(--s) * 62);
  line-height: 1;
  transform: translateY(calc(var(--s) * -3));
}

.event__date--stacked {
  left: calc(var(--s) * 137);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(var(--s) * 40);
  line-height: calc(var(--s) * 43);
  transform: translateY(calc(var(--s) * 2.5));
}

.event__month { letter-spacing: calc(var(--s) * 6.5); }

.event__name {
  position: absolute;
  left: calc(var(--s) * 270);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: calc(var(--s) * 57.3);
  transform: translateY(calc(var(--s) * -7.5));
}

/* the artboard sets the second event title a touch tighter */
.event:nth-child(2) .event__name { font-size: calc(var(--s) * 55.8); }

.events__note {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 528);
  text-align: center;
  color: var(--white);
  font-size: calc(var(--s) * 34);
  font-weight: 400;
  line-height: calc(var(--s) * 43);
  transform: translateX(calc(var(--s) * -4));
}

.events__note strong { font-weight: 700; }

.pill-cta--yellow {
  left: calc(var(--s) * 466);
  top: calc(var(--s) * 677);
  width: calc(var(--s) * 580);
  height: calc(var(--s) * 67);
  line-height: calc(var(--s) * 61);
  border-radius: calc(var(--s) * 33.5);
  background: var(--yellow);
  color: var(--ink);
  font-size: calc(var(--s) * 37.5);
  letter-spacing: calc(var(--s) * 6.35);
}

/* --- Mobile artboard (393 × 1128) --------------------------------------- */

@media (max-width: 760px) {
  :root { --artboard: 393; }

  .stage { width: 100cqw; }

  /* header */
  .band--header { height: calc(var(--s) * 120); }
  .logo {
    left: calc(var(--s) * 115);
    top: calc(var(--s) * 81);
    width: calc(var(--s) * 163);
    height: calc(var(--s) * 17.3);
  }

  /* hero */
  .band--hero { height: calc(var(--s) * 167); }
  .hero__title {
    top: calc(var(--s) * 36);
    line-height: calc(var(--s) * 29.5);
  }
  .hero__line { font-size: calc(var(--s) * 29); }
  .hero__line .t-mazzard { font-size: calc(var(--s) * 29); }
  .hero__line .t-aminute { font-size: calc(var(--s) * 31.2); }
  .hero__line--1 { transform: none; }
  .hero__line--2 {
    font-size: calc(var(--s) * 29);
    transform: translateX(calc(var(--s) * -3));
  }
  .hero__line--3 {
    font-size: calc(var(--s) * 32.5);
    transform: translate(calc(var(--s) * 3), calc(var(--s) * -1.5));
  }

  /* classes */
  .band--classes { height: calc(var(--s) * 297.6); }
  .classes__word--clases {
    left: calc(var(--s) * 130);
    top: calc(var(--s) * 29);
    font-size: calc(var(--s) * 44.5);
  }
  .classes__word--gratuitas {
    left: calc(var(--s) * 88);
    top: calc(var(--s) * 73);
    font-size: calc(var(--s) * 48);
  }
  .classes__bolt {
    left: calc(var(--s) * 104);
    top: calc(var(--s) * 32);
    width: calc(var(--s) * 22.3);
    height: calc(var(--s) * 34.9);
  }
  .classes__ellipse {
    left: calc(var(--s) * -13);
    top: calc(var(--s) * 6);
    width: calc(var(--s) * 232.5);
    height: calc(var(--s) * 44);
  }
  .badge {
    left: calc(var(--s) * 124);
    top: calc(var(--s) * 145.3);
    width: calc(var(--s) * 143.1);
    height: calc(var(--s) * 79.4);
  }
  .badge__star {
    left: calc(var(--s) * 98.2);
    top: calc(var(--s) * -17.3);
    width: calc(var(--s) * 39.5);
    height: calc(var(--s) * 41.5);
  }
  .badge__top {
    left: calc(var(--s) * 15);
    top: calc(var(--s) * 3);
    font-size: calc(var(--s) * 21.5);
  }
  .badge__bottom {
    left: calc(var(--s) * 36);
    top: calc(var(--s) * 28);
  }
  .badge__number { font-size: calc(var(--s) * 44.5); }
  .badge__unit { font-size: calc(var(--s) * 27.5); }
  .classes__subtitle {
    top: calc(var(--s) * 234);
    padding-inline: calc(var(--s) * 54);
    font-size: calc(var(--s) * 15.5);
    line-height: calc(var(--s) * 22);
  }
  .classes__arc { display: none; }

  /* ticker */
  .band--ticker { height: calc(var(--s) * 22.4); }
  .ticker__text {
    top: calc(var(--s) * 5.5);
    font-size: calc(var(--s) * 11.5);
    letter-spacing: calc(var(--s) * .65);
    transform: none;
  }

  /* checker */
  .band--checker,
  .checker { height: calc(var(--s) * 35.2); }
  .checker {
    background-image: repeating-linear-gradient(
      90deg,
      var(--pink) 0 calc(var(--s) * 31.3),
      transparent calc(var(--s) * 31.3) calc(var(--s) * 62.6)
    );
    background-position-x: calc(var(--s) * -3.07);
  }

  /* tags */
  .band--tags { height: calc(var(--s) * 159.8); }
  .tag {
    height: calc(var(--s) * 25.2);
    line-height: calc(var(--s) * 25.2);
    font-size: calc(var(--s) * 12);
    letter-spacing: calc(var(--s) * .5);
  }
  .tag--networking {
    left: calc(var(--s) * 58);
    top: calc(var(--s) * 31);
    width: calc(var(--s) * 148);
  }
  .tag--comunidad-orange {
    left: calc(var(--s) * 216);
    top: calc(var(--s) * 31);
    width: calc(var(--s) * 118.3);
  }
  .tag--eventos {
    left: calc(var(--s) * 62.2);
    top: calc(var(--s) * 68);
    width: calc(var(--s) * 113);
  }
  .tag--inspiracion {
    left: calc(var(--s) * 186.2);
    top: calc(var(--s) * 69);
    width: calc(var(--s) * 143.9);
  }
  .tag--comunidad-dark {
    left: calc(var(--s) * 137);
    top: calc(var(--s) * 107);
    width: calc(var(--s) * 118.3);
  }

  /* join */
  .band--join { height: calc(var(--s) * 70.2); }
  .checker--b {
    top: calc(var(--s) * 35);
    background-position-x: calc(var(--s) * 27.9);
  }
  .pill-cta--dark {
    left: calc(var(--s) * 91);
    top: calc(var(--s) * 23);
    width: calc(var(--s) * 210);
    height: calc(var(--s) * 24);
    line-height: calc(var(--s) * 24);
    border-radius: calc(var(--s) * 12);
    font-size: calc(var(--s) * 11);
    letter-spacing: calc(var(--s) * .5);
  }

  /* events */
  .band--events { height: calc(var(--s) * 256); }
  .events__bg {
    left: calc(var(--s) * -7);
    top: 0;
    width: calc(var(--s) * 400);
    height: calc(var(--s) * 238);
  }
  .events__title {
    left: calc(var(--s) * 57);
    top: calc(var(--s) * 10);
    line-height: calc(var(--s) * 28);
  }
  .events__title-top { font-size: calc(var(--s) * 28); }
  .events__title-bottom { font-size: calc(var(--s) * 29); }
  .events__list {
    left: calc(var(--s) * 57);
    top: calc(var(--s) * 74);
    width: calc(var(--s) * 272.5);
  }
  .event {
    height: calc(var(--s) * 21.75);
    margin-bottom: calc(var(--s) * 10.25);
  }
  .event__bullet {
    left: calc(var(--s) * 6);
    width: calc(var(--s) * 6.5);
    height: calc(var(--s) * 6.5);
    margin-top: calc(var(--s) * -3.25);
  }
  .event__date {
    left: calc(var(--s) * 28);
    font-size: calc(var(--s) * 12);
    transform: translateY(calc(var(--s) * -.8));
  }
  .event__date--stacked {
    left: calc(var(--s) * 34);
    font-size: calc(var(--s) * 10);
    line-height: calc(var(--s) * 11);
    transform: translateY(calc(var(--s) * .65));
  }
  .event__month { letter-spacing: calc(var(--s) * 1.7); }
  .event__name,
  .event:nth-child(2) .event__name {
    left: calc(var(--s) * 67);
    font-size: calc(var(--s) * 14.5);
    transform: translateY(calc(var(--s) * -2));
  }
  /* the mobile artboard reflows this paragraph into three lines */
  .events__note br { display: none; }
  .events__note {
    top: calc(var(--s) * 134);
    padding-inline: calc(var(--s) * 64);
    font-size: calc(var(--s) * 12);
    line-height: calc(var(--s) * 17);
    transform: translateX(calc(var(--s) * -1));
  }
  .pill-cta--yellow {
    left: calc(var(--s) * 102.75);
    top: calc(var(--s) * 197.5);
    width: calc(var(--s) * 181);
    height: calc(var(--s) * 24);
    line-height: calc(var(--s) * 24);
    border-radius: calc(var(--s) * 12);
    font-size: calc(var(--s) * 11.5);
    letter-spacing: calc(var(--s) * 1.8);
  }
}

/* --- Band 9 — pre-registration form ------------------------------------- */

/* This band deliberately opts out of the --s artboard model used by bands 1-8.
   Multiplying a form control by --s yields sub-16px text on narrow viewports,
   and iOS Safari auto-zooms the page whenever a focused input is below 16px.
   So band 9 is a normal-flow, genuinely responsive block: fluid widths, fixed
   readable type, no absolute positioning. Do not convert it back to
   calc(var(--s) * n). */

/* the CTAs in bands 7 and 8 jump down to this band */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.band--signup {
  /* band-local tones; kept out of :root because nothing else uses them */
  --field-border: #e6ded2;
  --label-ink: #8a7f78;

  padding-block: 96px;
  background: var(--cream);
}

.signup__inner {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: 20px;
}

.signup__badge {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signup__title {
  margin-top: 22px;
  color: var(--ink);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.12;
}

.signup__intro {
  margin-top: 16px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

.signup__form {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  color: var(--label-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-ui);
  /* 16px is the hard floor on every control in this band: anything smaller
     makes iOS Safari zoom the page in when the field takes focus */
  font-size: 16px;
  line-height: 1.4;
}

.field__control::placeholder { color: var(--label-ink); opacity: 1; }

.field__control:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* native select, restyled — the dropdown itself stays the platform one */
select.field__control {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a7f78' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* WhatsApp row — dial code beside the number, side by side at every width */
.phone {
  display: flex;
  gap: 10px;
}

select.phone__code {
  flex: 0 0 96px;
  width: 96px;
  padding-right: 26px;
  padding-left: 12px;
  background-position: right 8px center;
}

.phone__number {
  flex: 1 1 auto;
  min-width: 0;
}

.signup__question {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
}

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice {
  position: relative;
  display: inline-flex;
}

/* the radio stays in the DOM and keeps focus; the chip label carries the paint */
.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.choice__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: box-shadow .16s ease;
}

.choice__chip--marca { background: var(--lilac); }
.choice__chip--dropshipping { background: var(--yellow); }
.choice__chip--proveedora { background: var(--white); border: 1px dashed var(--pink); }
.choice__chip--idea { background: var(--orange); }

/* three of the four chips are already coloured, so the selected state is
   carried by an ink ring rather than by colour alone */
.choice__input:checked + .choice__chip { box-shadow: inset 0 0 0 2px var(--ink); }

.choice__input:focus-visible + .choice__chip {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}

/* 24px hit area around an 18px painted box */
.consent__box {
  appearance: none;
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.consent__box::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: var(--white);
}

.consent__box::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--yellow);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .14s ease;
}

.consent__box:checked::before { border-color: var(--ink); background: var(--ink); }
.consent__box:checked::after { transform: rotate(45deg) scale(1); }

.consent__box:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-radius: 6px;
}

.consent__text {
  padding-top: 3px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.consent__link {
  color: var(--ink);
  text-decoration: underline;
}

.signup__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.signup__submit:hover { transform: translateY(-2px); filter: brightness(1.05); }

.signup__submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.signup__note {
  margin-top: 14px;
  color: var(--pink);
  font-size: 11.5px;
  line-height: 1.5;
}

/* --- Band 9 — mobile adjustments ---------------------------------------- */

@media (max-width: 760px) {
  .band--signup { padding-block: 64px; }
  .signup__title { font-size: 34px; }
  .signup__question { font-size: 20px; }
  /* the dial code narrows a little so the row still sits side by side at 320px */
  select.phone__code { flex-basis: 88px; width: 88px; }
  .choice__chip { padding-inline: 18px; }
}

/* --- Band 9 — submission states ----------------------------------------- */

/* Everything below is driven by assets/js/signup.js. Like the rest of band 9
   it stays out of the --s artboard model: fixed, readable type at every width. */

/* Spam trap. Off-screen rather than display:none, so a naive bot still finds
   the input and fills it; aria-hidden + tabindex="-1" keep people away. */
.signup__honeypot {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The live region stays in the DOM and in the accessibility tree at all times
   so screen readers announce later updates. While it is empty it pulls itself
   back out of the form's 18px grid gap instead of leaving a hole. */
.signup__status {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.signup__status:empty { margin-block: -9px; }

/* warm red, 6.3:1 on --cream */
.signup__status--error { color: #b3261e; font-weight: 500; }
.signup__status--info { color: var(--ink); font-weight: 500; }

/* while the POST is in flight the button is disabled, so it also leaves the
   tab order — nothing can land on a control that no longer does anything */
.signup__submit:disabled,
.signup__submit--submitting {
  opacity: .55;
  cursor: not-allowed;
}

.signup__submit:disabled:hover,
.signup__submit--submitting:hover {
  transform: none;
  filter: none;
}

/* the form carries display:grid, which would otherwise outrank [hidden] */
.signup__form[hidden] { display: none; }

.signup__success {
  margin-top: 28px;
  padding: 28px 24px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  background: var(--lilac-soft);
}

.signup__success:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.signup__success-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.18;
}

.signup__success-text {
  margin-top: 12px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .signup__success { padding: 24px 20px; }
  .signup__success-title { font-size: 22px; }
}