/* ============================================================
   VARIANTE 2b · "Trazo + fases": la misma línea de siete pasos de
   la variante 2, pero sin h2 largo encima. El título se parte en
   tres fases que van como corchetes sobre sus pasos, y se
   encienden cuando el pulso entra en ellas. El diagrama manda.
   Solo tokens y fuentes ya existentes en style.css.
   ============================================================ */

.m2b-stage{
  --dot: 88px;
  --pr: clamp(14px, 1.6vw, 26px);
  --c0: minmax(0,1fr); --c1: minmax(0,1fr); --c2: minmax(0,1fr);
  --c3: minmax(0,1.35fr);
  --c4: minmax(0,1fr); --c5: minmax(0,1fr); --c6: minmax(0,.9fr);
  --cols: var(--c0) var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6);
  max-width:1400px;
  margin:0 auto;
  padding:0 var(--gut);
}
/* la columna abierta toma más ancho */
.m2b-stage[data-open="0"]{ --c0: minmax(0,1.75fr) }
.m2b-stage[data-open="1"]{ --c1: minmax(0,1.75fr) }
.m2b-stage[data-open="2"]{ --c2: minmax(0,1.75fr) }
.m2b-stage[data-open="3"]{ --c3: minmax(0,2fr) }
.m2b-stage[data-open="4"]{ --c4: minmax(0,1.75fr) }
.m2b-stage[data-open="5"]{ --c5: minmax(0,1.75fr) }
.m2b-stage[data-open="6"]{ --c6: minmax(0,1.6fr) }

/* ---- encabezado: solo la etiqueta ---- */
.m2b-head-sec{ margin-bottom:clamp(1.8rem, 3.4vw, 2.8rem) }
.m2b-head-sec .label{ margin:0 }
.m2b-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---- las tres fases, alineadas con las columnas de los pasos ---- */
.m2b-phases{
  display:grid;
  grid-template-columns:var(--cols);
  margin-bottom:clamp(1.6rem, 2.6vw, 2.3rem);
  transition:grid-template-columns .6s var(--e-out);
}
.m2b-ph{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-right:var(--pr);
  min-width:0;
  opacity:.46;
  transition:opacity .6s var(--e-out);
}
.m2b-ph[data-ph="0"]{ grid-column:1 / 4 }
.m2b-ph[data-ph="1"]{ grid-column:4 / 5 }
.m2b-ph[data-ph="2"]{ grid-column:5 / 7 }
.m2b-ph[data-ph="3"]{ grid-column:7 / 8; padding-right:0 }
.m2b-ph.is-on{ opacity:1 }

.m2b-ph-k{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mono-dim);
  margin-bottom:.7rem;
}
.m2b-ph-t{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:clamp(1.55rem, 2.45vw, 2.35rem);
  letter-spacing:-.024em; line-height:1.04;
  color:var(--ink);
  text-wrap:balance;
}
.m2b-ph-s{
  margin-top:.55rem;
  font-size:.95rem; line-height:1.4;
  color:var(--ink-dim);
}
/* corchete: línea fina con remates verticales que bajan a los pasos */
.m2b-ph-br{
  position:relative;
  display:block;
  height:10px;
  margin-top:1.15rem;
  border:1px solid var(--line);
  border-bottom:0;
  transition:border-color .6s var(--e-out);
}
.m2b-ph.is-on .m2b-ph-br{ border-color:var(--ink-dim) }

/* soporte: sin corchete cerrado, solo un trazo punteado que se desvanece */
.m2b-ph-after .m2b-ph-k{ margin-bottom:0 }
.m2b-ph-after .m2b-ph-br{
  border:0;
  border-left:1px dashed var(--line);
  background:repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px) top left / 100% 1px no-repeat;
  -webkit-mask-image:linear-gradient(90deg, #000 30%, transparent);
          mask-image:linear-gradient(90deg, #000 30%, transparent);
}
.m2b-ph-after.is-on .m2b-ph-br{
  border-left-color:var(--ink-dim);
  background-image:repeating-linear-gradient(90deg, var(--ink-dim) 0 3px, transparent 3px 7px);
}

/* separadores de fase dentro de la lista: solo para lector de pantalla
   en escritorio; en teléfono se ven */
.m2b-sep{
  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;
}

/* ---- los pasos ---- */
.m2b-steps{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:var(--cols);
  transition:grid-template-columns .6s var(--e-out);
}

.m2b-step{
  position:relative;
  min-width:0;
  transition:opacity .45s var(--e-out);
}
.m2b-body{
  position:relative;
  padding-right:var(--pr);
}

/* ---- el tramo de línea hacia el siguiente paso ---- */
.m2b-link{
  position:absolute;
  top:calc(var(--dot) / 2);
  left:calc(var(--dot) + 12px);
  right:12px;
  height:1px;
  background:var(--line);
  overflow:hidden;
}
/* hasta el prototipo la línea es punteada; lo grande empieza tras la decisión */
.m2b-step[data-i="0"] .m2b-link,
.m2b-step[data-i="1"] .m2b-link,
.m2b-step[data-i="2"] .m2b-link{
  background:repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px);
}
.m2b-step[data-i="0"] .m2b-link-fill,
.m2b-step[data-i="1"] .m2b-link-fill,
.m2b-step[data-i="2"] .m2b-link-fill{
  background:repeating-linear-gradient(90deg, var(--ink-dim) 0 3px, transparent 3px 7px);
}
/* desde la decisión, sólida y un poco más firme */
.m2b-step[data-i="3"] .m2b-link{ background:rgba(169,184,204,.34) }

.m2b-step:last-child .m2b-link{
  /* soporte continuo: la línea se desvanece hacia la derecha */
  right:0;
  background:linear-gradient(90deg, var(--line), transparent);
}
.m2b-link-fill{
  position:absolute; inset:0;
  background:var(--ink-dim);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .35s var(--e-out);
}
.m2b-step.is-past .m2b-link-fill{
  transform:scaleX(1);
  transition:transform .55s var(--e-inout);
}
.m2b-step:last-child .m2b-link-fill{ display:none }

/* ---- botón: círculo + textos ---- */
.m2b-head{
  all:unset;
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  border-radius:12px;
}
.m2b-head:focus-visible{ outline:2px solid var(--ink); outline-offset:6px }

.m2b-dot{
  position:relative;
  display:block;
  width:var(--dot); height:var(--dot);
  flex:none;
}
/* halo del paso actual: solo opacidad */
.m2b-dot::before{
  content:""; position:absolute; inset:6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(237,242,249,.10), rgba(237,242,249,0) 70%);
  box-shadow:0 0 36px 2px rgba(237,242,249,.10);
  opacity:0;
  transition:opacity .6s var(--e-out);
}
.m2b-dot svg{ position:relative; display:block; width:100%; height:100%; overflow:visible }
.m2b-dot svg *{ fill:none; stroke-linecap:round; stroke-linejoin:round }

.m2b-ring{ stroke:var(--line); stroke-width:1.2 }
.m2b-dec-ring{ stroke:var(--mono-dim); stroke-width:1.1; stroke-dasharray:1.5 4.5 }

.m2b-arc{
  stroke:var(--ink); stroke-width:1.6;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .35s var(--e-out);
}
.m2b-ib path{ stroke:var(--steel); stroke-width:1.05; opacity:.75 }
.m2b-id path{
  stroke:var(--ink); stroke-width:1.1;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .35s var(--e-out);
}

/* alcanzado por el pulso: arco cerrado e ícono dibujado */
.m2b-step.is-done .m2b-arc{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .55s var(--e-inout) .08s;
}
.m2b-step.is-done .m2b-id path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .65s var(--e-inout) .25s;
}
.m2b-step.is-done .m2b-id path:nth-child(2){ transition-delay:.38s }
.m2b-step.is-done .m2b-id path:nth-child(3){ transition-delay:.48s }
.m2b-step.is-done .m2b-id path:nth-child(4){ transition-delay:.56s }
.m2b-step.is-done .m2b-id path:nth-child(5){ transition-delay:.62s }

.m2b-step.is-cur .m2b-dot::before,
.m2b-step.is-open .m2b-dot::before{ opacity:1 }

.m2b-head:hover .m2b-ring{ stroke:var(--ink-dim) }
.m2b-head:hover .m2b-ib path{ stroke:var(--ink-dim) }

/* ---- textos siempre visibles ---- */
.m2b-txt{ display:flex; flex-direction:column; gap:.4rem; margin-top:1.15rem; width:100% }
.m2b-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mono-dim);
}
.m2b-num{ color:var(--steel) }
.m2b-when{ color:var(--ink-dim) }
.m2b-name{
  font-family:var(--f-serif);
  font-weight:600; font-size:clamp(1rem, 1.25vw, 1.15rem);
  letter-spacing:-.015em; line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
.m2b-short{
  font-size:.93rem; line-height:1.5;
  color:var(--ink-dim);
  max-width:24ch;
  text-wrap:pretty;
}

/* ---- la decisión: rombo sobre la línea entre 03 y 04 ---- */
.m2b-gate{
  position:absolute;
  top:calc(var(--dot) / 2);
  left:calc(var(--dot) + 12px);
  right:12px;
  height:0;
  margin:0;
  display:flex; justify-content:center;
  pointer-events:none;
}
.m2b-gate-d{
  position:absolute; left:50%; top:0;
  width:11px; height:11px;
  transform:translate(-50%, -50%) rotate(45deg);
  background:var(--bg);
  border:1.5px solid var(--mono-dim);
  transition:border-color .4s var(--e-out), background-color .4s var(--e-out);
}
.m2b-gate-k, .m2b-gate-t{
  position:absolute; left:50%;
  transform:translateX(-50%);
  text-align:center;
  text-transform:uppercase;
}
.m2b-gate-k{
  bottom:14px;
  font-size:10.5px; letter-spacing:.14em;
  color:var(--ink);
  white-space:nowrap;
}
.m2b-gate-t{
  top:14px;
  width:max-content; max-width:13ch;
  font-size:9.5px; letter-spacing:.08em; line-height:1.45;
  color:var(--mono-dim);
  text-wrap:balance;
}
.m2b-step.is-past[data-i="3"] .m2b-gate-d{ border-color:var(--ink); background:var(--ink) }

/* ---- el detalle, que se abre en su lugar ---- */
.m2b-detail{ display:none }
.m2b-js .m2b-step.is-open .m2b-detail{ display:block }
.m2b-detail-in{
  margin-top:.9rem;
  padding-top:.9rem;
  border-top:1px solid var(--line);
  animation:m2bIn .45s var(--e-out) both;
}
.m2b-full{
  font-size:.95rem; line-height:1.58;
  color:var(--ink);
  max-width:34ch;
  margin:0;
}
.m2b-note{
  margin:.8rem 0 0;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; line-height:1.6;
  color:var(--mono-dim);
}
.m2b-detail .btn{ margin-top:1rem }

/* al abrir, la frase corta cede su lugar a la explicación completa */
.m2b-js .m2b-step.is-open .m2b-short{ display:none }

/* las demás columnas se atenúan */
.m2b-stage.has-open .m2b-step:not(.is-open){ opacity:.42 }
.m2b-stage.has-open .m2b-step:not(.is-open):hover{ opacity:.8 }

/* sin JS: todo abierto, dibujado y con las fases encendidas */
.m2b-stage:not(.m2b-js) .m2b-detail{ display:block }
.m2b-stage:not(.m2b-js) .m2b-arc,
.m2b-stage:not(.m2b-js) .m2b-id path{ stroke-dashoffset:0 }
.m2b-stage:not(.m2b-js) .m2b-ph{ opacity:1 }
.m2b-stage:not(.m2b-js) .m2b-bar{ display:none }

/* ---- total: barra de tiempo alineada a los pasos ---- */
.m2b-tl{
  --f0:0; --f1:0; --f2:0;
  display:grid;
  grid-template-columns:var(--cols);
  align-items:start;
  margin-top:clamp(2rem, 3.4vw, 2.8rem);
  transition:grid-template-columns .6s var(--e-out);
}
.m2b-tl-seg{ position:relative; min-width:0 }
.m2b-tl-seg[data-s="0"]{ grid-column:1 / 4 }
.m2b-tl-seg[data-s="1"]{ grid-column:4 / 5 }
.m2b-tl-seg[data-s="2"]{ grid-column:5 / 7; margin-right:var(--pr) }
.m2b-tl-bar{
  position:relative; display:block; height:2px;
  background:var(--line);
}
.m2b-tl-seg[data-s="0"] .m2b-tl-bar{
  background:repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px);
}
/* marca al inicio de cada tramo, y otra al final del último */
.m2b-tl-bar::before, .m2b-tl-seg[data-s="2"] .m2b-tl-bar::after{
  content:""; position:absolute; top:50%; width:1px; height:12px;
  transform:translateY(-50%);
  background:var(--mono-dim);
}
.m2b-tl-bar::before{ left:0 }
.m2b-tl-seg[data-s="2"] .m2b-tl-bar::after{ right:0; height:18px; background:var(--ink-dim) }
.m2b-tl-bar i{
  position:absolute; inset:0;
  background:var(--ink-dim);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform .75s var(--e-inout);
}
.m2b-tl-seg[data-s="0"] .m2b-tl-bar i{
  background:repeating-linear-gradient(90deg, var(--ink-dim) 0 3px, transparent 3px 7px);
}
.m2b-tl-seg[data-s="0"] .m2b-tl-bar i{ transform:scaleX(var(--f0)) }
.m2b-tl-seg[data-s="1"] .m2b-tl-bar i{ transform:scaleX(var(--f1)) }
.m2b-tl-seg[data-s="2"] .m2b-tl-bar i{ transform:scaleX(var(--f2)) }
.m2b-tl-l{
  display:block; margin-top:.8rem;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mono-dim);
}
.m2b-tl-seg[data-s="1"] .m2b-tl-l, .m2b-tl-seg[data-s="2"] .m2b-tl-l{ color:var(--ink-dim) }
.m2b-tl-total{
  grid-column:7 / 8;
  margin:-.95em 0 0;
  display:flex; align-items:baseline; gap:.45rem;
  line-height:1;
  opacity:.5;
  transition:opacity .6s var(--e-out);
}
.m2b-tl.is-full .m2b-tl-total{ opacity:1 }
.m2b-tl-n{
  font-family:var(--f-serif); font-weight:600;
  font-size:clamp(2rem, 3vw, 2.75rem);
  letter-spacing:-.03em;
  color:var(--ink);
}
.m2b-tl-u{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
}
.m2b-stage:not(.m2b-js) .m2b-tl{ --f0:1; --f1:1; --f2:1 }
.m2b-stage:not(.m2b-js) .m2b-tl-total{ opacity:1 }

/* ---- barra inferior: pista + pausa ---- */
.m2b-bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-top:clamp(1.6rem, 3vw, 2.4rem);
  padding-top:.4rem;
  border-top:1px solid var(--line-soft);
}
.m2b-hint{ margin:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel) }
.m2b-play{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; padding:0 .2rem 0 .9rem;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mono-dim);
  transition:color .2s;
}
.m2b-play:hover{ color:var(--ink) }
.m2b-play:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:6px }
.m2b-play svg{ width:14px; height:14px }
.m2b-play svg path{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.m2b-play[aria-pressed="true"] .m2b-i-play,
.m2b-play[aria-pressed="false"] .m2b-i-pause{ display:none }

@keyframes m2bIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  .m2b-steps, .m2b-phases, .m2b-tl, .m2b-tl-bar i, .m2b-tl-total, .m2b-gate-d, .m2b-ph, .m2b-ph-br, .m2b-step, .m2b-link-fill, .m2b-arc, .m2b-id path, .m2b-dot::before{ transition:none !important }
  .m2b-detail-in{ animation:none }
}

/* ---- tableta y teléfono: la línea baja en vertical y las fases
   se vuelven separadores entre grupos de pasos ---- */
@media (max-width:980px){
  .m2b-stage{ --dot:60px; max-width:640px }
  .m2b-phases{ display:none }
  .m2b-tl{ grid-template-columns:1fr 1fr 2fr auto; margin-top:1.8rem }
  .m2b-tl-seg[data-s]{ grid-column:auto; margin-right:0 }
  .m2b-tl-seg[data-s="2"]{ margin-right:1rem }
  .m2b-tl-total{ grid-column:auto }
  .m2b-tl-n{ font-size:2rem }
  .m2b-tl-l{ font-size:10px; letter-spacing:.06em; padding-left:6px }
  /* la decisión: renglón propio sobre la línea vertical, al cierre del 03 */
  .m2b-gate{
    position:relative; top:auto; left:auto; right:auto; height:auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:.3rem .7rem;
    margin-top:1.1rem;
    padding-left:calc(var(--dot) + 1.1rem);
  }
  .m2b-gate-d{ left:calc(var(--dot) / 2); top:50% }
  .m2b-gate-k, .m2b-gate-t{ position:static; transform:none; text-align:left; max-width:none }
  .m2b-ring{ stroke-width:1.6 }
  .m2b-arc{ stroke-width:2.2 }
  .m2b-ib path, .m2b-id path{ stroke-width:1.45 }
  .m2b-steps{ display:flex; flex-direction:column }
  .m2b-body{ padding:0 0 1.5rem 0 }
  .m2b-step:last-child .m2b-body{ padding-bottom:0 }
  .m2b-head{ flex-direction:row; align-items:flex-start; gap:1.1rem; min-height:44px }
  .m2b-txt{ margin-top:.35rem; gap:.3rem }
  .m2b-short{ max-width:none; text-wrap:wrap }
  .m2b-link{
    top:calc(var(--dot) + 8px);
    bottom:8px;
    left:calc(var(--dot) / 2);
    right:auto;
    width:1px; height:auto;
  }
  .m2b-step[data-i="0"] .m2b-link,
  .m2b-step[data-i="1"] .m2b-link,
  .m2b-step[data-i="2"] .m2b-link{
    background:repeating-linear-gradient(180deg, var(--line) 0 3px, transparent 3px 7px);
  }
  .m2b-step[data-i="0"] .m2b-link-fill,
  .m2b-step[data-i="1"] .m2b-link-fill,
  .m2b-step[data-i="2"] .m2b-link-fill{
    background:repeating-linear-gradient(180deg, var(--ink-dim) 0 3px, transparent 3px 7px);
  }
  .m2b-step:last-child .m2b-link{ display:none }
  .m2b-link-fill{ transform-origin:center top; transform:scaleY(0) }
  .m2b-step.is-past .m2b-link-fill{ transform:scaleY(1) }


  .m2b-detail{ padding-left:calc(var(--dot) + 1.1rem) }
  .m2b-detail-in{ margin-top:.7rem; padding-top:.75rem }
  .m2b-full{ max-width:48ch }
  .m2b-stage.has-open .m2b-step:not(.is-open){ opacity:.55 }

  /* separador de fase */
  .m2b-sep{
    position:relative; width:auto; height:auto; margin:0 0 1.35rem; padding:1.05rem 0 0;
    overflow:visible; clip:auto; clip-path:none; white-space:normal;
    display:flex; flex-direction:column;
    border-top:1px solid var(--line);
    opacity:.5;
    transition:opacity .6s var(--e-out), border-color .6s var(--e-out);
  }
  .m2b-step[data-i="0"] .m2b-sep{ margin-top:0 }
  .m2b-step:not([data-i="0"]) .m2b-sep{ margin-top:.6rem }
  /* remates del corchete, ahora horizontal sobre el grupo */
  .m2b-sep::before, .m2b-sep::after{
    content:""; position:absolute; top:-1px; width:1px; height:8px; background:inherit;
    background:var(--line);
  }
  .m2b-sep::before{ left:0 }
  .m2b-sep::after{ right:0 }
  .m2b-sep.is-on{ opacity:1; border-top-color:var(--ink-dim) }
  .m2b-sep.is-on::before, .m2b-sep.is-on::after{ background:var(--ink-dim) }
  .m2b-sep-k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mono-dim) }
  .m2b-sep-t{
    margin-top:.45rem;
    font-family:var(--f-serif); font-weight:600;
    font-size:clamp(1.6rem, 7vw, 2.1rem);
    letter-spacing:-.024em; line-height:1.05;
    color:var(--ink);
  }
  .m2b-sep-s{ margin-top:.4rem; font-size:.93rem; color:var(--ink-dim) }
  .m2b-sep-after{
    border-top:0; padding-top:.9rem;
    background:repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 7px) top left / 100% 1px no-repeat;
    -webkit-mask-image:linear-gradient(90deg, #000 40%, transparent);
            mask-image:linear-gradient(90deg, #000 40%, transparent);
  }
  .m2b-sep-after::after{ display:none }
}
@media (max-width:420px){
  .m2b-stage{ --dot:54px; padding:0 18px }
  .m2b-head{ gap:.95rem }
  .m2b-detail, .m2b-gate{ padding-left:calc(var(--dot) + .95rem) }
  .m2b-hint{ font-size:10px; letter-spacing:.1em }
}
@media (max-width:980px) and (prefers-reduced-motion: reduce){
  .m2b-sep{ transition:none }
}

/* etiqueta tipo sello en el texto chico de cada fase */
.m2b-tag{
  display:table;
  margin:.15rem 0 .55rem;
  padding:.28rem .55rem .26rem;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:10.5px; line-height:1; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  vertical-align:.12em;
}
.m2b-ph-s, .m2b-sep-s{ max-width:46ch; text-wrap:balance }

/* ---- fases sobre una sola cuadrícula: kicker, título, extra y corchete
   comparten fila en las tres, sin importar cuánto texto traiga cada una ---- */
@media (min-width:981px){
  .m2b-phases{ grid-template-rows:auto auto 1fr auto }
  .m2b-ph{
    display:grid;
    grid-row:1 / 5;
    grid-template-rows:subgrid;
    align-content:start;
    justify-content:stretch;
    grid-template-columns:minmax(0,1fr);
  }
  .m2b-ph-k{ grid-row:1; align-self:end }
  .m2b-ph-t{ grid-row:2; align-self:start }
  .m2b-ph-s{ grid-row:3; align-self:start }
  .m2b-ph-br{ grid-row:4; align-self:end }
  .m2b-ph-after .m2b-ph-k{ grid-row:3; align-self:end; margin-bottom:0 }
}