/* page-mylo.css
   ════════════════════════════════════════════════════════════════════════
   Componentes só da página /mylo ("Cria o teu MYLO" — o guia de montagem).
   Dono: agente da página mylo. Carregar SEMPRE por último, depois de
   dadiva-inner.css e mylo-companion.css — é essa ordem que deixa afinar
   sem !important. Tudo aqui está prefixado .mp- (mylo page) e vive dentro
   de .page-mylo, por isso não toca em nenhuma outra página.

   A PÁGINA MUDOU DE FORMA (2026-09-20)
   ------------------------------------
   Deixou de ser uma apresentação do MYLO com os passos dobrados atrás de um
   <details>: o guia É o corpo da página. Saiu a dobra .mp-montar, saiu a
   grelha "seis coisas do dia a dia" (a página é sobre montar, não sobre
   vender) e a história do passeio passou a viver DENTRO do passo 6, que é
   exatamente o passo das notas de voz.

   O QUE É NOVO
     .mp-journey      a secção dos passos sobre a pintura vertical da Dádiva
                      II (céu → caminho → lago → jardim → estufa → portão →
                      pôr do sol). A pintura é um <img> em object-fit:cover
                      dentro de .mp-journey__bg, com um LQIP em CSS por
                      baixo; .mp-journey__veil esbate-a no marfim em cima,
                      em baixo e nos lados, e .mp-journey__foot fecha com a
                      banda de nuvens. Todo o texto vive em cartões OPACOS,
                      por isso o contraste nunca depende da pintura.
     .mp-step         cartão de passo: cabeçalho em cima, corpo à esquerda e
                      ilustração à direita a partir dos 1024px.
     .mp-ill          moldura das ilustrações (+ legenda "ilustração · …")
     .mp-term         janela de terminal desenhada em HTML (texto a sério)
     .mp-chat/.mp-phone  conversa do BotFather e conversa no telemóvel
     .mp-tabs         Windows / macOS·Linux. Sem JS os dois painéis ficam
                      visíveis com a sua etiqueta; o JS acrescenta os botões.
     .mp-check        caixa verde de "confirma antes de seguir"
     .mp-k            comando curto no meio de uma frase
     .mp-quote        a história do Jaime, dentro do passo 6
     .mp-notes        as notas honestas, à vista (já não são um <details>)
     .mp-version      a linha "os comandos são os da versão de hoje"

   Herdados de antes: .mp-cta-row, .mp-intro, .mp-facts, .mp-grid/.mp-card,
   .mp-code/.mp-copy, .mp-warn, .mp-sr.

   O botão copiar, os separadores e o i18n vivem no <script> de mylo.html.
   Os CTA com [data-chat] são apanhados por dadiva-companion.js.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Utilitários ──────────────────────────────────────────────────────── */
/* Só para leitores de ecrã (avisos do copiar; rótulo das ilustrações que
   são role="img"). */
.page-mylo .mp-sr,
.page-mylo .mp-chat__t {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* A barra flutua por cima: qualquer salto tem de parar abaixo dela. */
.page-mylo #passos,
.page-mylo #depois,
.page-mylo .mp-step {
  scroll-margin-top: calc(var(--nav-h, 90px) + 16px);
}
/* Cabeçalho de secção com respiração antes da grelha. */
.page-mylo .inner-section > h2 {
  margin-bottom: var(--s4);
}

/* ── Botões em fila ───────────────────────────────────────────────────── */
.page-mylo .mp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
}
.page-mylo .scenic-hero .mp-cta-row {
  justify-content: center;
  margin-top: var(--s4);
}
.page-mylo .mp-cta-row .button {
  background-clip: padding-box;
}
/* A pílula de contorno sobre pintura precisa de papel opaco por baixo: com
   o marfim translúcido o contraste do texto azul passava a depender do que
   estivesse pintado nesse sítio. */
.page-mylo .scenic-hero .mp-cta-row .button:not(.primary) {
  background: var(--ivory);
}
.page-mylo .scenic-hero .mp-cta-row .button:not(.primary):hover {
  background: #e6f0ff;
}

/* ── O que vais montar: retrato + texto ───────────────────────────────── */
.page-mylo .mp-intro {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.page-mylo .mp-intro > * {
  min-width: 0;
}
.page-mylo .mp-portrait {
  margin: 0;
}
/* Pintura emoldurada, não recortada: o papel da aguarela é um fio mais
   quente que o marfim da página, por isso o corte a direito lia-se como
   erro. Com o mesmo traço dos cartões passa a ser um quadro na parede. */
.page-mylo .mp-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--ivory);
}
.page-mylo .mp-intro-text > * + * {
  margin-top: var(--s2);
}
.page-mylo .mp-intro-text p {
  max-width: 56ch;
  color: var(--navy);
}

/* ── Factos curtos ────────────────────────────────────────────────────── */
.page-mylo .mp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) 12px;
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}
.page-mylo .mp-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ivory);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

/* ── "Os comandos são os de hoje" ─────────────────────────────────────── */
/* Isto não é um aviso de perigo (por isso não usa o amarelo do .mp-warn):
   é a nota de rodapé que diz quem manda quando esta página envelhecer. */
.page-mylo .mp-version {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 62ch;
  margin-top: var(--s3);
  padding: 12px 16px;
  border: 1px solid #cfe0ef;
  border-radius: 12px;
  background: #f2f8fd;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.page-mylo .mp-version .ico {
  flex: none;
  margin-top: 2px;
  color: #2b5e96;
}
.page-mylo .mp-version a {
  color: var(--blue);
  font-weight: 700;
}

/* ── Grelha de cartões com ícone ──────────────────────────────────────── */
.page-mylo .mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-mylo .mp-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.page-mylo .mp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ivory);
  text-align: left;
}
.page-mylo .mp-card h3 {
  margin: 0;
  font-size: 17px;
}
.page-mylo .mp-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.page-mylo .mp-card .ico {
  width: 28px;
  height: 28px;
}
/* Um título de duas linhas ao lado de um de uma linha empurrava o parágrafo
   para baixo só nesse cartão. Com subgrid, ícone / título / parágrafo
   partilham as linhas da grelha-mãe e alinham de coluna para coluna. */
@supports (grid-template-rows: subgrid) {
  .page-mylo .mp-grid:not(.mp-grid--wide) .mp-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 10px;
  }
}
/* O link fica colado ao fundo do cartão, para que os três acabem na mesma
   linha mesmo com parágrafos de alturas diferentes. */
/* inline-flex com 44px de altura: é um alvo de toque a sério, sem virar um
   botão desenhado. */
.page-mylo .mp-inline-link {
  display: inline-flex;
  align-items: flex-end;
  align-self: flex-start;
  min-height: 44px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
}

/* ══ A JORNADA ════════════════════════════════════════════════════════════
   A pintura comprida da Dádiva II atrás dos seis passos. Sangra para fora
   da goteira do <main> como o hero cénico (mesma variável, --main-pad).
   O selector tem de ter pelo menos duas classes E dois tipos para ganhar a
   `.inner-page main > section:not(.scenic-hero)` de dadiva-inner.css. */
.page-mylo main > section.mp-journey {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: auto;
  max-width: none;
  align-self: stretch;
  margin: 0 calc(-1 * var(--main-pad)) var(--s5);
  padding: clamp(40px, 5vw, 64px) max(var(--main-pad), 20px)
    clamp(104px, 12vw, 160px);
}

/* A pintura. object-fit:cover reproduz o enquadramento de um
   background-size:cover sem distorção, e com <img> temos lazy-loading e
   decoding assíncrono a sério (um background CSS não os tem). O LQIP em
   base64 fica por baixo, para não haver um buraco enquanto carrega. */
.page-mylo .mp-journey__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: #cfe3ef url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCACPAA4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwB3ln0rfisLT7OgWNZc8lie9RwWaBt0g2ovcjg1NLcIpKfcUHI211Va19jz6NHlu5EM94xyqhjn1FU8SSOzMrAHGADintLFETukx9B/WqguiASkeQT1YV53tHNnTFN7mgj722MhU+nY0x4kVvmiRvpUjuIvlQYx1NRmUgdM1zSaSt17l7EyoWH72NmA745qBzED8hcevFAvHjYNtINXB5TRhiVYnkkV3Sw8baszjU5tDD8wjBJBDehPFPLvgcnb2OaiitGY/OFUepNTEbE2oocepH9K5Xa5si8rDewQxbOoDdarXLMsgC+SOOq80WRQbQqMWI5yM1JetGZOY2B/2VqpSutRKGppx7R90Clbaeqg0LtYfKwNJIVj++yj8a5uY69DOivI3QHlQeOnFMmvI0Pzc/jSQ20gjjZG+YEHBGM/WobyKQH5kDN3Oc0+VAb8aKetNkRQe1QQXYb/AFSE/U4qV2HUnB+maEnbbUV+p//Z") center / cover no-repeat;
}
.page-mylo .mp-journey__bg picture,
.page-mylo .mp-journey__bg img {
  display: block;
  width: 100%;
  height: 100%;
}
.page-mylo .mp-journey__bg img {
  object-fit: cover;
  object-position: center;
}

/* Véu: um sopro de marfim nos lados e um lençol leve por cima de tudo — a
   pintura fica a ser cenário, não concorrência.
   Aqui SÓ entram esbatimentos horizontais. Um gradiente vertical em
   percentagem seria uma percentagem da secção inteira, que é altíssima
   (7 600 px no telemóvel): 14% já eram mil pixels de marfim a comer o pôr
   do sol, e 52% lavavam metade da jornada. O esbatimento de cima e de
   baixo vive nos ::before/::after, em pixels. */
.page-mylo .mp-journey__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 253, 245, 0.75) 0,
      rgba(255, 253, 245, 0) 14%,
      rgba(255, 253, 245, 0) 86%,
      rgba(255, 253, 245, 0.75) 100%
    ),
    rgba(255, 253, 245, 0.3);
}
.page-mylo .mp-journey::before,
.page-mylo .mp-journey::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -2;
  pointer-events: none;
}
.page-mylo .mp-journey::before {
  top: 0;
  height: 420px;
  background: linear-gradient(
    180deg,
    var(--ivory) 0,
    rgba(255, 253, 245, 0.86) 45%,
    rgba(255, 253, 245, 0) 100%
  );
}
.page-mylo .mp-journey::after {
  bottom: 0;
  height: 200px;
  background: linear-gradient(
    0deg,
    var(--ivory) 0,
    rgba(255, 253, 245, 0.45) 55%,
    rgba(255, 253, 245, 0) 100%
  );
}
/* Banda de nuvens a fechar a jornada no marfim, como no hero. As arestas da
   nuvem escondem-se a esticar o FUNDO 4% para lá da caixa, não a puxar a
   caixa para fora da secção: assim nenhuma ferramenta de QA a vê como um
   elemento que passa a largura do ecrã. */
.page-mylo .mp-journey__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  width: auto;
  height: clamp(110px, 13vw, 175px);
  background-size: 108% 100%;
}

.page-mylo .mp-journey__inner {
  max-width: 1120px;
  margin: 0 auto;
}
/* O único texto desta secção que NÃO vive num cartão opaco é este título.
   Leva por isso a mesma nuvem quente do hero cénico: marfim cheio debaixo
   das letras, a desfazer-se na pintura. Sem ela o contraste do título
   passava a depender do que estivesse pintado nesse sítio. */
.page-mylo .mp-journey__head {
  position: relative;
  max-width: 720px;
  margin: 0 auto var(--s5);
  text-align: center;
}
.page-mylo .mp-journey__head::before {
  content: "";
  position: absolute;
  inset: -44px -10% -32px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    60% 62% at 50% 50%,
    var(--ivory) 0 54%,
    rgba(255, 253, 245, 0) 100%
  );
}
.page-mylo .mp-journey__head .lede {
  margin-inline: auto;
}

/* ── Passos ───────────────────────────────────────────────────────────── */
.page-mylo .mp-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Papel opaco: é ele que garante o AA sobre a pintura. A sombra larga
   levanta o cartão do cenário sem lhe pôr um contorno pesado. */
.page-mylo .mp-step {
  position: relative;
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ivory);
  box-shadow:
    0 2px 6px rgba(16, 41, 79, 0.06),
    0 14px 40px rgba(16, 41, 79, 0.1);
}
.page-mylo .mp-step__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.page-mylo .mp-step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fffdf5;
  font: 800 16px/1 var(--sans);
}
.page-mylo .mp-step h3 {
  margin: 0;
}
/* Uma só medida para TUDO o que vai dentro do passo — parágrafo, aviso,
   bloco de código, separadores. Cada um com a sua deixava três arestas
   direitas diferentes dentro do mesmo cartão. */
.page-mylo .mp-step__body {
  --mp-measure: 640px;
  min-width: 0;
}
/* O ritmo vertical do corpo vive em três regras e por esta ordem: tudo a
   zero, depois um degrau entre irmãos, depois o degrau mais curto entre
   dois parágrafos seguidos. Nenhuma delas pode ser um selector de tipo
   (`> p { margin: 0 }`), senão ganhava por especificidade ao `* + *` e o
   parágrafo a seguir a um bloco de código colava-se-lhe. */
.page-mylo .mp-step__body > * {
  margin: 0;
}
.page-mylo .mp-step__body > * + * {
  margin-top: var(--s3);
}
.page-mylo .mp-step__body > p + p {
  margin-top: var(--s2);
}
.page-mylo .mp-step__body > p {
  max-width: var(--mp-measure);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--navy);
}
/* Avisos, confirmações, citação e fila de botões respiram sempre o degrau
   grande, mesmo quando vêm logo a seguir a um parágrafo. */
.page-mylo .mp-step__body > .mp-warn,
.page-mylo .mp-step__body > .mp-check,
.page-mylo .mp-step__body > .mp-quote,
.page-mylo .mp-step__body > .mp-aside-line,
.page-mylo .mp-step__body > .mp-links {
  margin-top: var(--s3);
}
.page-mylo .mp-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* Avisos e confirmações ------------------------------------------------- */
/* Especificidade a mais de propósito: .mp-step__body > p (acima) tem
   margin:0 e a cor do corpo, e sem isto ganhava a estes. */
.page-mylo .mp-step .mp-warn,
.page-mylo .mp-step .mp-check {
  display: flex;
  gap: 10px;
  max-width: var(--mp-measure);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
}
.page-mylo .mp-step .mp-warn {
  border: 1px solid #e4d6a8;
  border-left: 4px solid #e0b93c;
  background: #fffaea;
  color: #4a3a12;
}
.page-mylo .mp-step .mp-warn .ico {
  flex: none;
  color: #8a6a10;
}
.page-mylo .mp-step .mp-check {
  border: 1px solid #bfe0cb;
  border-left: 4px solid #3f9b6b;
  background: #f1faf4;
  color: #173d2b;
}
.page-mylo .mp-step .mp-check .ico {
  flex: none;
  color: #2b7550;
}
.page-mylo .mp-step .mp-check p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.page-mylo .mp-step .mp-check p span:first-of-type {
  font-weight: 800;
}
.page-mylo .mp-step .mp-aside-line {
  max-width: var(--mp-measure);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Comando curto no meio de uma frase ------------------------------------ */
.page-mylo .mp-k {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #cfe0ef;
  border-radius: 7px;
  background: #eef5fb;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
    monospace;
  font-size: 0.86em;
  color: #0f3a63;
  white-space: nowrap;
}

/* A história do Jaime, dentro do passo das notas de voz ------------------ */
.page-mylo .mp-quote {
  max-width: var(--mp-measure);
  padding: var(--s2) var(--s3);
  border: 1px solid #efe3bb;
  border-left: 4px solid #ffe479;
  border-radius: 0 14px 14px 0;
  background: #fffbec;
}
.page-mylo .mp-quote p {
  margin: 0;
  font: 400 16.5px/1.7 var(--serif);
  color: var(--navy);
}

/* ── Separadores Windows / macOS·Linux ────────────────────────────────── */
.page-mylo .mp-tabs {
  max-width: var(--mp-measure);
}
.page-mylo .mp-tabs__list {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.page-mylo .mp-tabs.is-ready .mp-tabs__list {
  display: flex;
}
.page-mylo .mp-tab {
  min-height: 44px;
  padding: 10px 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--muted);
  font: 800 14px/1 var(--sans);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.page-mylo .mp-tab:hover {
  border-color: #9fc0e6;
  background: #f2f8fd;
}
.page-mylo .mp-tab[aria-selected="true"] {
  border-color: var(--blue);
  background: #e6f0ff;
  color: #0a4fb0;
}
/* Sem JS não há botões: cada painel mostra a sua etiqueta e vêem-se os dois
   comandos, um por baixo do outro. */
.page-mylo .mp-tabs__mark {
  margin: 0 0 8px;
  font: 800 13px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.page-mylo .mp-tabs.is-ready .mp-tabs__mark {
  display: none;
}
.page-mylo .mp-tabs__pane + .mp-tabs__pane {
  margin-top: var(--s3);
}
.page-mylo .mp-tabs.is-ready .mp-tabs__pane + .mp-tabs__pane {
  margin-top: 0;
}
.page-mylo .mp-tabs .mp-code {
  margin-top: 0;
}
.page-mylo .mp-tabs__pane:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 16px;
}

/* ── Bloco de código ──────────────────────────────────────────────────── */
.page-mylo .mp-code {
  max-width: var(--mp-measure);
  border-radius: 14px;
  background: #0f2743;
  overflow: hidden;
}
.page-mylo .mp-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 16px;
  background: #17365a;
}
/* A etiqueta é que quebra em duas linhas no telemóvel; o botão fica sempre
   inteiro à direita. */
.page-mylo .mp-code__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfe3f7;
}
.page-mylo .mp-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 112px;
  padding: 8px 18px;
  border: 1.5px solid #6ea8e6;
  border-radius: 999px;
  background: transparent;
  color: #e8f2fa;
  font: 700 14px/1 var(--sans);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.page-mylo .mp-copy:hover {
  background: #23456d;
}
.page-mylo .mp-copy .ico {
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
}
.page-mylo .mp-copy.is-done {
  border-color: #8ad6a8;
  color: #d6f5e3;
}
.page-mylo .mp-copy.is-manual {
  border-color: #f0cf7a;
  color: #ffeec2;
}
/* O bloco é que rola, nunca a página. */
.page-mylo .mp-code pre {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: #5e90c8 #0f2743;
}
.page-mylo .mp-code pre::-webkit-scrollbar {
  height: 10px;
}
.page-mylo .mp-code pre::-webkit-scrollbar-track {
  background: #0f2743;
}
.page-mylo .mp-code pre::-webkit-scrollbar-thumb {
  border: 3px solid #0f2743;
  border-radius: 999px;
  background: #5e90c8;
}
.page-mylo .mp-code code {
  display: block;
  min-width: 0;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
    monospace;
  font-size: 14px;
  line-height: 1.7;
  color: #eaf3fb;
  white-space: pre;
  tab-size: 2;
}
/* Um endereço comprido não ganha nada em ficar escondido atrás de um
   scroll: nestes blocos a linha quebra e lê-se inteira no telemóvel.
   (Tem de vir DEPOIS da regra acima — mesma especificidade, ganha a
   última.) */
.page-mylo .mp-code--wrap code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.page-mylo .mp-code code::selection {
  background: #8ad6a8;
  color: #0f2743;
}
.page-mylo .mp-code pre:focus-visible {
  outline: 3px solid #6ea8e6;
  outline-offset: -3px;
}

/* ── Ilustrações ──────────────────────────────────────────────────────── */
.page-mylo .mp-ill {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-mylo .mp-ill > figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.page-mylo .mp-ill--draw svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #eef6ff 0, #e4f0ff 100%);
}
.page-mylo .mp-dr__glow {
  fill: #ffe479;
  opacity: 0.55;
}
.page-mylo .mp-dr__fill {
  fill: #fffdf5;
  stroke: #10294f;
  stroke-width: 2;
}
.page-mylo .mp-dr__screen {
  fill: #cfe6fb;
  stroke: #10294f;
  stroke-width: 1.5;
}
.page-mylo .mp-dr__line {
  fill: none;
  stroke: #10294f;
  stroke-width: 2;
  stroke-linecap: round;
}
.page-mylo .mp-dr__spark {
  fill: #ffe479;
  stroke: #06482f;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.page-mylo .mp-dr__dash {
  fill: none;
  stroke: #06482f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
}
.page-mylo .mp-dr__dot {
  fill: #2f7d55;
}

/* Janela de terminal desenhada em HTML (o texto é texto a sério) --------- */
.page-mylo .mp-term {
  border: 1px solid #0b1e35;
  border-radius: 14px;
  background: #0f2743;
  overflow: hidden;
}
.page-mylo .mp-term__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  background: #17365a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfe3f7;
}
.page-mylo .mp-term__dots {
  flex: none;
  width: 38px;
  height: 9px;
  background:
    radial-gradient(circle 4.5px at 4.5px 4.5px, #e08a72 0 4.5px, transparent 4.5px),
    radial-gradient(circle 4.5px at 19px 4.5px, #dfbe62 0 4.5px, transparent 4.5px),
    radial-gradient(circle 4.5px at 33.5px 4.5px, #79bd8e 0 4.5px, transparent 4.5px);
}
.page-mylo .mp-term__pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-mylo .mp-term__pre code {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
    monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #dfeefb;
  /* Quebra em vez de cortar. Este terminal é uma ILUSTRAÇÃO: não tem botão
     "Copiar" e ninguém precisa de selecionar a linha inteira, por isso uma
     linha comprida (o URL de login) vale mais partida do que decepada
     contra a berma do bloco escuro sem sinal nenhum de que há mais texto.
     O pre-wrap guarda as mudanças de linha e a indentação, e só parte
     quando a linha não cabe — acima dos 320px nada disto muda: a linha mais
     larga já cabia em todas as outras larguras medidas. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.page-mylo .mp-term__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  padding: 16px;
  list-style: none;
  font: 700 14px/1.2 var(--sans);
  color: #eaf3fb;
}
.page-mylo .mp-term__list li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.page-mylo .mp-term__tick {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2f5f93;
}
.page-mylo .mp-term__tick::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 3.5px;
  width: 5px;
  height: 8px;
  border: 2px solid #d8f0e2;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

/* Conversas (BotFather e telemóvel) ------------------------------------- */
.page-mylo .mp-chat,
.page-mylo .mp-phone {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #e9f1f9;
  overflow: hidden;
}
.page-mylo .mp-phone {
  border-radius: 26px;
  box-shadow: inset 0 0 0 5px #fffdf5;
}
.page-mylo .mp-chat__bar,
.page-mylo .mp-phone__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 16px;
  background: #d7e6f4;
  font-size: 13.5px;
  font-weight: 800;
  color: #10294f;
}
.page-mylo .mp-phone__bar {
  margin: 5px 5px 0;
  border-radius: 21px 21px 0 0;
}
.page-mylo .mp-chat__av {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4b96ff, #0864ec);
}
.page-mylo .mp-chat__body,
.page-mylo .mp-phone__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.page-mylo .mp-phone__body {
  margin: 0 5px 5px;
  padding: 14px 12px 18px;
}
.page-mylo .mp-b {
  align-self: flex-start;
  max-width: 88%;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid #d3e2f0;
  border-radius: 14px;
  background: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  color: #10294f;
}
.page-mylo .mp-b--me {
  align-self: flex-end;
  border-color: #b3d6f7;
  background: #d9ecff;
}
.page-mylo .mp-b--tok {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}
.page-mylo .mp-tok {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
    monospace;
  font-size: 12px;
  color: #3c5470;
  overflow-wrap: anywhere;
}
/* Nota de voz: onda desenhada com barras, não com uma imagem. */
.page-mylo .mp-b--voice {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-mylo .mp-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 22px;
}
.page-mylo .mp-wave i {
  display: block;
  width: 2.5px;
  height: 8px;
  border-radius: 2px;
  background: #0864ec;
}
.page-mylo .mp-wave i:nth-child(2) { height: 15px; }
.page-mylo .mp-wave i:nth-child(3) { height: 21px; }
.page-mylo .mp-wave i:nth-child(4) { height: 12px; }
.page-mylo .mp-wave i:nth-child(5) { height: 18px; }
.page-mylo .mp-wave i:nth-child(6) { height: 9px; }
.page-mylo .mp-wave i:nth-child(7) { height: 16px; }
.page-mylo .mp-wave i:nth-child(8) { height: 22px; }
.page-mylo .mp-wave i:nth-child(9) { height: 11px; }
.page-mylo .mp-wave i:nth-child(10) { height: 17px; }
.page-mylo .mp-wave i:nth-child(11) { height: 8px; }
.page-mylo .mp-wave i:nth-child(12) { height: 13px; }
.page-mylo .mp-b__time {
  font-size: 11.5px;
  font-weight: 800;
  color: #3c5470;
}
/* O eco da transcrição: o bot devolve o que ouviu, em papel quente. */
.page-mylo .mp-b--echo {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  border-color: #e4d6a8;
  background: #fffaea;
  color: #4a3a12;
  font-style: italic;
}
.page-mylo .mp-mic {
  position: relative;
  flex: none;
  width: 13px;
  height: 16px;
  margin-top: 2px;
}
.page-mylo .mp-mic::before {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0;
  width: 6px;
  height: 9px;
  border-radius: 3px;
  background: #8a6a10;
}
.page-mylo .mp-mic::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 11px;
  height: 6px;
  border: 1.6px solid #8a6a10;
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

/* ── Passos no PC: corpo à esquerda, ilustração à direita ────────────────
   Abaixo dos 1024px a coluna do corpo ficaria mais estreita do que a
   medida de leitura, por isso empilha-se: cabeçalho, corpo, ilustração. */
@media (min-width: 1024px) {
  .page-mylo .mp-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas:
      "head head"
      "body art";
    column-gap: var(--s4);
    row-gap: var(--s3);
    align-items: start;
  }
  .page-mylo .mp-step__head {
    grid-area: head;
    margin-bottom: 0;
  }
  .page-mylo .mp-step__body {
    grid-area: body;
    /* A coluna é a medida; nada de medida própria por cima dela. */
    --mp-measure: 100%;
  }
  /* Sem sticky de propósito: a ilustração presa no topo enquanto o texto
     rolava dava a impressão de pertencer ao passo seguinte. Fica ao lado
     do corpo, alinhada pelo cimo, e acaba onde acabar. */
  .page-mylo .mp-step .mp-ill {
    grid-area: art;
  }
}

/* ── Notas honestas ───────────────────────────────────────────────────── */
.page-mylo .mp-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-mylo .mp-notes li {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-left: 4px solid #cbb968;
  border-radius: 4px 16px 16px 4px;
  background: var(--ivory);
}
.page-mylo .mp-notes h3 {
  margin: 0 0 8px;
  font-size: 16.5px;
}
.page-mylo .mp-notes p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.page-mylo .mp-notes a {
  color: var(--blue);
  font-weight: 700;
}

/* ── Fecho ────────────────────────────────────────────────────────────── */
.page-mylo .mp-final {
  text-align: center;
}
/* A base dá --s5 de fundo a todas as secções; na última somava-se ao
   padding do <main> e ao do rodapé e deixava um palmo de marfim vazio. */
.page-mylo main > .mp-final {
  margin-bottom: 0;
}
.page-mylo .mp-final h2,
.page-mylo .mp-final p {
  margin-left: auto;
  margin-right: auto;
}
.page-mylo .mp-final .mp-cta-row {
  justify-content: center;
  /* .inner-section limita os filhos a 68ch; a fila de botões é mais larga. */
  max-width: none;
  margin-top: var(--s4);
}

/* ── Tablet e telemóvel ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Empilhado, a ilustração fica com a largura de uma imagem, não de uma
     parede: centrada e travada, para não ficar maior do que no PC. */
  .page-mylo .mp-step .mp-ill {
    margin-top: var(--s3);
    max-width: 440px;
  }
}

@media (max-width: 860px) {
  .page-mylo .mp-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }
  /* .inner-section.is-wide > * mete max-width:none com 3 classes, por isso
     um selector de 2 classes não chegava e o retrato ficava com a largura
     toda da secção. Aqui prende-se na mesma medida do PC. */
  .page-mylo .inner-section.is-wide .mp-portrait {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .page-mylo .scenic-hero .mp-cta-row {
    margin-top: var(--s3);
  }
  .page-mylo .mp-cta-row .button {
    width: 100%;
  }
  .page-mylo main > section.mp-journey {
    padding-top: var(--s4);
    padding-bottom: clamp(90px, 22vw, 130px);
  }
  .page-mylo .mp-journey::before {
    height: 300px;
  }
  .page-mylo .mp-journey__head {
    margin-bottom: var(--s4);
  }
  .page-mylo .mp-step__num {
    width: 34px;
    height: 34px;
    font-size: 15px;
  }
  .page-mylo .mp-step__head {
    margin-bottom: var(--s2);
  }
  .page-mylo .mp-step__body {
    --mp-measure: none;
  }
  .page-mylo .mp-code pre {
    padding-left: 14px;
    padding-right: 14px;
  }
  .page-mylo .mp-copy {
    min-width: 0;
    padding: 8px 16px;
  }
  .page-mylo .mp-term__list {
    padding: 14px;
    gap: 10px 12px;
  }
  .page-mylo .mp-quote {
    padding: var(--s2);
  }
  .page-mylo .mp-quote p {
    font-size: 15.5px;
  }
}

@media (max-width: 420px) {
  .page-mylo .mp-code__bar {
    padding-left: 12px;
  }
  .page-mylo .mp-code__label {
    font-size: 11.5px;
  }
  /* Um comando comprido no meio de uma frase é preferível partido do que
     fora do ecrã. */
  .page-mylo .mp-k {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .page-mylo .mp-term__pre code {
    font-size: 11.5px;
  }
  .page-mylo .mp-b {
    max-width: 94%;
  }
}

/* Nos ecrãs mais estreitos o terminal ilustrativo perde 6px de margem de
   cada lado. Não é cosmética: a 360px são esses 12px que deixam o ecrã de
   login caber inteiro, linha a linha, sem partir nada. */
@media (max-width: 360px) {
  .page-mylo .mp-term__pre {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/* A 320px nem assim: o URL do Codex (36 caracteres) pede 228px e só há 216.
   Um ponto a menos na letra põe-no em 208 e ele passa a caber inteiro numa
   linha — perde só a indentação, que fica pendurada na linha de cima. Vale
   mais do que ver o endereço partido a meio de uma palavra. O pre-wrap lá
   de cima continua a ser a rede: se a letra do sistema for mais larga do
   que a medida, isto quebra em vez de cortar. */
@media (max-width: 340px) {
  .page-mylo .mp-term__pre code {
    font-size: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-mylo .mp-tab,
  .page-mylo .mp-copy {
    transition: none;
  }
}