/*
 * Mozão + Degrau landing. The brand's tokens and type, copied from the Mozão Design System (the platform's
 * tokens.css and fonts.css); the page's own styles follow.
 */

/* SN Pro, the brand's only typeface. It loads with `swap`; until it arrives a stand-in with the same
   proportions (Arial resized per weight) holds its place, so lines break in the same spots and the page
   does not move. The files are asked for by the same stamp the page preloads them with. */
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 100 450;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 98.6%;
  ascent-override: 99.9%;
  descent-override: 31.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 451 550;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 100%;
  ascent-override: 98.5%;
  descent-override: 31.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 551 650;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 94.9%;
  ascent-override: 103.8%;
  descent-override: 33.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 651 750;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 96.5%;
  ascent-override: 102.1%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 751 850;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 99.5%;
  ascent-override: 99%;
  descent-override: 31.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro Fallback';
  font-weight: 851 1000;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 103%;
  ascent-override: 95.6%;
  descent-override: 30.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'SN Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/sn-pro-latin-400-normal.woff2?v=b2635bb768) format('woff2');
}
@font-face {
  font-family: 'SN Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/sn-pro-latin-500-normal.woff2?v=b2635bb768) format('woff2');
}
@font-face {
  font-family: 'SN Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/sn-pro-latin-700-normal.woff2?v=b2635bb768) format('woff2');
}
@font-face {
  font-family: 'SN Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/fonts/sn-pro-latin-800-normal.woff2?v=b2635bb768) format('woff2');
}
@font-face {
  font-family: 'SN Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/fonts/sn-pro-latin-900-normal.woff2?v=b2635bb768) format('woff2');
}

:root {
  --laranja: #e16619;
  --laranja-escuro: #c9560e;
  --laranja-suave: rgba(225, 102, 25, 0.12);
  --marrom: #391c0a;
  /* Degrau's own colours, used only where the page speaks for Degrau. */
  --roxo: #5b1e8d;
  --verde: #afd137;
  --creme: #f4d9ba;
  --branco: #ffffff;
  --text-subtle: rgba(57, 28, 10, 0.68);
  --border-hair: rgba(57, 28, 10, 0.09);
  --border-control: rgba(57, 28, 10, 0.22);
  --border-control-hover: rgba(57, 28, 10, 0.42);
  --danger: #b42b1e;
  --danger-text: #8c1f15;
  --danger-soft: rgba(180, 43, 30, 0.1);
  --focus-ring: rgba(225, 102, 25, 0.45);
  --font: 'SN Pro', 'SN Pro Fallback', system-ui, sans-serif;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --shadow-card: 0 1px 2px rgba(57, 28, 10, 0.05), 0 10px 28px -12px rgba(57, 28, 10, 0.18);
  --shadow-button: 0 2px 6px rgba(57, 28, 10, 0.18);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: clamp(16px, 4vw, 48px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: calc(1184px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--marrom);
  color: var(--creme);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* ── top: the two brands ─────────────────────────────────────────────────── */

.top {
  padding-top: 12px;
}

/* Mozão on its orange, Degrau on its purple, cut on a slant; the "×" sits on the seam. */
.duo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  height: clamp(64px, 10vw, 104px);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--laranja);
  isolation: isolate;
}

.duo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--roxo);
  clip-path: polygon(53% 0, 100% 0, 100% 100%, 47% 100%);
}

.duo__side {
  display: grid;
  place-items: center;
  min-width: 0;
  padding-inline: 12px 22px;
}

.duo__side--degrau {
  padding-inline: 22px 12px;
}

.duo__mozao {
  width: clamp(84px, 13vw, 150px);
  height: auto;
}

.duo__degrau {
  width: clamp(116px, 19vw, 220px);
  height: auto;
  /* The lettering sits low in the logo's box ("Escola de Negócios" rides above it): lift it to the eye. */
  transform: translateY(-6%);
}

.duo__x {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(30px, 4.4vw, 44px);
  height: clamp(30px, 4.4vw, 44px);
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 2px 8px rgba(57, 28, 10, 0.22);
  color: var(--marrom);
  transform: translate(-50%, -50%);
}

.duo__x svg {
  width: 52%;
  height: 52%;
}

.plain {
  display: inline-block;
  padding-block: 8px;
}

/* ── the offer ───────────────────────────────────────────────────────────── */

/* One column on a phone: the words, the form, then how it works. */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  flex: 1;
  padding-block: 22px 56px;
}

.offer__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* The amount is the headline; the words before and after it make the sentence, at a reading size. */
.offer__title {
  font-size: clamp(22px, 5.6vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.offer__title span {
  display: block;
}

.offer__figure {
  margin-block: 2px 4px;
  font-size: clamp(68px, 21vw, 132px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.offer__rest {
  text-wrap: balance;
}

.offer__lead {
  max-width: 26em;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 500;
  text-wrap: pretty;
}

/* ── the stage: the form on the brand's orange ───────────────────────────── */

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--laranja);
  isolation: isolate;
  scroll-margin-top: 16px;
}

/* The M pattern steps back behind the title and shows at the foot of the stage, around the card. */
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/brand/pattern-m.svg?v=b2635bb768) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.16) 30%, #000 100%);
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.16) 30%, #000 100%);
  pointer-events: none;
}

.stage__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 6px 0 10px;
}

.stage__title {
  outline: none;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  text-wrap: balance;
}

/* An orange ring cannot be seen on orange: on the stage the focus is drawn in brown. */
.stage__title:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--marrom);
  outline-offset: 4px;
}

.stage__symbol {
  flex: none;
  width: 44px;
  height: auto;
  transform: rotate(8deg);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  border-radius: 18px;
  background: var(--branco);
  box-shadow: var(--shadow-card);
}

.form__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 16px;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.field input,
.field select {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--border-control);
  border-radius: 14px;
  outline: none;
  background-color: var(--branco);
  color: var(--marrom);
  font: inherit;
  /* Sixteen pixels: a phone does not zoom into a field of that size. */
  font-size: 16px;
  line-height: 22px;
  transition:
    border-color 150ms,
    box-shadow 150ms;
}

.field select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23391c0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Nothing chosen yet reads as a placeholder. */
.field select:has(option[value='']:checked) {
  color: var(--text-subtle);
}

.field input::placeholder {
  color: rgba(57, 28, 10, 0.5);
}

@media (hover: hover) {
  .field input:hover:not(:focus, :disabled),
  .field select:hover:not(:focus, :disabled) {
    border-color: var(--border-control-hover);
  }
}

.field input:focus,
.field select:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--danger);
}

.field input[aria-invalid='true']:focus,
.field select[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field input:disabled,
.field select:disabled {
  opacity: 0.6;
}

/* Each field keeps a line for its message, so an error never pushes the button down. */
.field__error {
  min-height: 24px;
  padding-top: 5px;
  color: var(--danger-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}

.check input {
  flex: none;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--border-control-hover);
  border-radius: 8px;
  outline: none;
  background: var(--branco);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:
    background-color 150ms,
    border-color 150ms;
}

.check input::after {
  content: '';
  width: 12px;
  height: 7px;
  border: solid var(--marrom);
  border-width: 0 0 3px 3px;
  border-radius: 1px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.check input:checked {
  border-color: var(--laranja);
  background: var(--laranja);
}

.check input:checked::after {
  opacity: 1;
}

.check input:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form__aside {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: var(--laranja);
  box-shadow: var(--shadow-button);
  color: var(--marrom);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms var(--ease-bounce),
    background-color 150ms,
    box-shadow 150ms;
}

.button--inline {
  align-self: flex-start;
  width: auto;
  min-height: 48px;
  font-size: 16px;
}

@media (hover: hover) {
  .button:hover:not(:disabled) {
    background: var(--laranja-escuro);
    box-shadow:
      var(--shadow-button),
      0 6px 16px -6px rgba(225, 102, 25, 0.6);
  }
}

.button:active:not(:disabled) {
  transform: scale(0.98);
}

.button:disabled {
  cursor: progress;
  opacity: 0.75;
}

/* While the sign-up is on its way the button shows it is working. */
.button[aria-busy='true']::before {
  content: '';
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(57, 28, 10, 0.3);
  border-top-color: var(--marrom);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form__error {
  padding: 10px 14px;
  border-radius: 12px;
  outline: none;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.form__fine {
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

.done {
  text-wrap: pretty;
}

/* ── how it works: Degrau's card, three steps drawn as stairs ────────────── */

.how {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.climb {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 20px 24px;
  border-radius: var(--radius-l);
  background: var(--roxo);
  color: var(--branco);
}

.climb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.climb__title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
  line-height: 1.1;
  text-wrap: balance;
}

/* Degrau's mark, as the M signs the form's stage. Its own ground is the card's purple. */
.climb__mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.climb__stairs {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font);
}

.steps {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.step__number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--verde);
  color: #33104f;
  font-size: 17px;
  font-weight: 900;
}

.step__title {
  margin-bottom: 2px;
  color: var(--branco);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.terms {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  color: var(--text-subtle);
  font-size: 15px;
  line-height: 1.5;
}

/* ── foot ────────────────────────────────────────────────────────────────── */

.foot {
  padding-block: 32px;
  background: var(--marrom);
  color: var(--creme);
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

.foot__brands {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(244, 217, 186, 0.7);
  font-size: 18px;
}

.foot__degrau {
  width: 118px;
  height: auto;
  transform: translateY(-6%);
}

.foot__line {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
}

.foot__note {
  color: rgba(244, 217, 186, 0.78);
  font-size: 14px;
  line-height: 1.6;
}

/* ── wider screens ───────────────────────────────────────────────────────── */

@media (min-width: 520px) {
  .stage {
    padding: clamp(14px, 2.2vw, 24px);
    border-radius: var(--radius-xl);
  }

  .card {
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius-l);
  }

  .form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 520px) and (max-width: 959px) {
  .stage,
  .how {
    width: 100%;
    max-width: 620px;
    justify-self: center;
  }
}

/* Words on the left, the form on its stage on the right. */
@media (min-width: 960px) {
  .offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    grid-template-areas:
      'head stage'
      'how stage';
    grid-template-rows: auto 1fr;
    gap: 44px clamp(32px, 6vw, 80px);
    padding-block: 32px 88px;
  }

  .offer__head {
    grid-area: head;
    gap: 18px;
  }

  .stage {
    grid-area: stage;
  }

  .how {
    grid-area: how;
  }

  .climb {
    padding: 26px 28px 30px;
    border-radius: var(--radius-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: 1.5s !important;
  }
}