:root {
  --ground:    #F2F1EE;
  --raised:    #FBFAF8;
  --band:      #EBE9E4;
  --edge:      #DFDDD6;
  --ink:       #14171A;
  --ink-soft:  #545C5E;
  --ink-faint: #8B9394;
  --mint:      #1E9B77;
  --glow:      #5CCCA8;
  --ember:     #C9453B;
  --sand:      #8C857A;
  --violet:    #6E6BE0;
  --lift:      0 2px 6px rgba(20,30,28,.05), 0 26px 60px -24px rgba(20,30,28,.22);
  --veil:      rgba(242,241,238,.72);
  --noise:     .035;

  --display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0E0F11;
    --raised:    #17191C;
    --band:      #131518;
    --edge:      #272B2F;
    --ink:       #EDEFEE;
    --ink-soft:  #A6AFB0;
    --ink-faint: #6E7779;
    --mint:      #5CCCA8;
    --glow:      #5CCCA8;
    --ember:     #ED6B61;
    --sand:      #B8B3A8;
    --violet:    #8B87F0;
    --lift:      0 2px 6px rgba(0,0,0,.5), 0 26px 60px -24px rgba(0,0,0,.8);
    --veil:      rgba(14,15,17,.72);
    --noise:     .05;
  }
}
:root[data-theme="dark"] {
  --ground:    #0E0F11;
  --raised:    #17191C;
  --band:      #131518;
  --edge:      #272B2F;
  --ink:       #EDEFEE;
  --ink-soft:  #A6AFB0;
  --ink-faint: #6E7779;
  --mint:      #5CCCA8;
  --glow:      #5CCCA8;
  --ember:     #ED6B61;
  --sand:      #B8B3A8;
  --violet:    #8B87F0;
  --lift:      0 2px 6px rgba(0,0,0,.5), 0 26px 60px -24px rgba(0,0,0,.8);
  --veil:      rgba(14,15,17,.72);
  --noise:     .05;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grano finísimo sobre todo: es lo que separa un plano de color de una
   superficie. Se ve sin mirarlo. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.038em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7vw, 4.8rem); line-height: .98; font-variation-settings: "opsz" 84; }
h2 { font-size: clamp(1.85rem, 3.5vw, 2.65rem); line-height: 1.05; }
h3 { font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin: 0 0 .3rem; letter-spacing: -0.012em; }
p  { margin: 0; }
a  { color: inherit; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

.shell { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; }
.prose { max-width: 40rem; }
.wrap  { width: 100%; max-width: 46rem; margin: 0 auto; padding-inline: 1.5rem; }
section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; }
.band { background: var(--band); border-block: 1px solid var(--edge); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--ink-soft); text-wrap: balance; }
.fine { font-size: .82rem; color: var(--ink-faint); }
.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .17em; color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

/* ── Barra de arriba ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--veil); backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border-bottom: 1px solid var(--edge);
}
.nav-in { display: flex; align-items: center; gap: 1.4rem; height: 3.6rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.02em; margin-right: auto; }
.brand svg { width: 20px; height: 20px; display: block; }
.nav-links { display: flex; gap: 1.4rem; }
.nav-links a { text-decoration: none; font-size: .88rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 640px) { .nav-links { display: none; } }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .95rem; font-weight: 600; font-family: var(--body);
  padding: .8rem 1.55rem; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s, border-color .22s;
}
.btn-primary { background: var(--mint); color: var(--ground); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--mint) 90%, transparent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--mint) 95%, transparent); }
.btn-quiet { border-color: var(--edge); color: var(--ink); background: color-mix(in srgb, var(--raised) 70%, transparent); }
.btn-quiet:hover { background: var(--raised); border-color: var(--ink-faint); transform: translateY(-1px); }
.btn-sm { padding: .48rem 1.05rem; font-size: .86rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.actions.mid { justify-content: center; }

/* ── Portada ── */
.hero { padding-top: clamp(3.5rem, 8vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; overflow: hidden; }
/* La misma malla de color que la app pinta detrás del vidrio. Aquí es lo
   único que hay de fondo, así que va muy diluida: tiene que notarse sin
   que se pueda señalar. */
.hero::before {
  content: ""; position: absolute; inset: -25% -15% auto -15%; height: 105%;
  background:
    radial-gradient(38rem 26rem at 20% 14%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 68%),
    radial-gradient(32rem 24rem at 82% 6%,  color-mix(in srgb, var(--violet) 18%, transparent), transparent 68%),
    radial-gradient(30rem 22rem at 62% 72%, color-mix(in srgb, var(--sand) 22%, transparent), transparent 68%);
  filter: blur(26px); z-index: 0; pointer-events: none;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
}
.hero > .shell { position: relative; z-index: 1; display: grid; gap: 1.5rem; justify-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--edge); border-radius: 999px;
  padding: .34rem .85rem; background: color-mix(in srgb, var(--raised) 65%, transparent);
  backdrop-filter: blur(8px);
}
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
/* El PNG lleva un 10% de margen transparente, así que ni border-radius ni
   box-shadow valen aquí: dibujarían el rectángulo del lienzo, separado del
   icono. drop-shadow sigue el canal alfa, o sea la silueta de verdad. */
.icon {
  width: clamp(8.5rem, 20vw, 11rem); height: auto; margin-bottom: -.3rem;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.20)) drop-shadow(0 26px 44px rgba(0,0,0,.34));
  animation: land .8s cubic-bezier(.2,.9,.25,1) both;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)) drop-shadow(0 26px 50px rgba(0,0,0,.6));
  }
}
:root[data-theme="dark"] .icon {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)) drop-shadow(0 26px 50px rgba(0,0,0,.6));
}
@keyframes land { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } }
.hero .lede { max-width: 34rem; }
.hero .fine { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.hero .fine span + span::before { content: "·"; margin-right: .55rem; color: var(--edge); }

/* ── Rejilla de fichas ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.tile {
  border: 1px solid var(--edge); border-radius: 20px; padding: 1.5rem 1.4rem;
  background: var(--raised); text-align: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.tile p { font-size: .91rem; color: var(--ink-soft); }
.tile .cap { display: block; margin-bottom: .95rem; }
.tile .cap svg { display: block; }

/* ── Banda de una sola frase ── */
.split { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
@media (min-width: 860px) { .split { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.stat { font-family: var(--display); font-size: clamp(2.6rem, 5.5vw, 3.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--mint); }

/* ── Precio ── */
.price {
  position: relative; background: var(--raised); border: 1px solid var(--edge);
  border-radius: 28px; padding: clamp(2.2rem, 5vw, 3.2rem);
  box-shadow: var(--lift); display: grid; gap: 1.5rem; justify-items: center;
  max-width: 32rem; margin-inline: auto; text-align: center;
}
/* Un filo de luz en el borde de arriba: el mismo truco que el icono de la app. */
.price::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--glow) 75%, transparent), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.amount { font-family: var(--display); font-size: clamp(3.4rem, 9vw, 4.6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.amount span { font-family: var(--body); font-size: .88rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; display: block; margin-top: .55rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; text-align: left; width: 100%; max-width: 21rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); }
.ticks svg { flex-shrink: 0; margin-top: .38rem; color: var(--mint); }

/* ── Pasos ── */
.steps { counter-reset: s; display: grid; gap: .85rem; max-width: 38rem; }
.step {
  display: grid; grid-template-columns: 1.85rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 1.15rem; border: 1px solid var(--edge); border-radius: 15px;
  background: var(--raised);
}
.step::before {
  counter-increment: s; content: counter(s);
  font-family: var(--mono); font-size: .74rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid var(--edge); color: var(--ink-faint);
  display: grid; place-items: center;
}
.step p { font-size: .93rem; color: var(--ink-soft); }
.step b { color: var(--ink); font-weight: 600; }
kbd, code { font-family: var(--mono); font-size: .86em; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--edge); border-radius: 5px; padding: .08em .4em; }

/* ── Preguntas ── */
.faq { max-width: 40rem; }
details { border-top: 1px solid var(--edge); }
details:last-child { border-bottom: 1px solid var(--edge); }
summary { cursor: pointer; list-style: none; padding: 1.15rem 0; font-weight: 600; font-size: .97rem; display: flex; justify-content: space-between; gap: 1rem; transition: color .2s; }
summary:hover { color: var(--mint); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: 1.15rem; font-size: .92rem; color: var(--ink-soft); max-width: 34rem; }

/* ── Cierre ── */
.close { text-align: center; display: grid; gap: 1.7rem; justify-items: center; }

footer { border-top: 1px solid var(--edge); padding-block: 2.8rem; color: var(--ink-faint); font-size: .85rem; }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.foot .brand { font-size: .95rem; color: var(--ink); }
.foot-links { display: flex; gap: 1.3rem; margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.made { display: inline-flex; align-items: center; gap: .38em; }
.made .heart { width: .95em; height: .95em; color: var(--ember); transform-origin: center; animation: beat 2.6s ease-in-out infinite; }
@keyframes beat { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(1.22); } 86% { transform: scale(1.05); } 92% { transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) { .made .heart { animation: none; } }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--mint); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* La demo se escribió cuando el body entero iba centrado. Ya no lo va, así
   que el centrado se le devuelve aquí — sin tocar ni una regla suya. */
#stage { text-align: center; }

/* ── El escenario: la mecánica de la app, jugable ── */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 19rem) 1fr;
  align-items: center; justify-items: center;
  gap: clamp(.4rem, 3vw, 2rem);
  padding-bottom: 4.5rem;
}
.rumbo {
  display: grid; justify-items: center; gap: .4rem;
  color: var(--ink-faint); cursor: pointer;
  transition: color .25s, transform .25s;
}
.rumbo svg { width: 30px; height: 30px; }
.rumbo-label { font-size: .76rem; font-weight: 600; }
.key {
  font-family: var(--mono); font-size: .68rem;
  border: 1px solid var(--edge); border-radius: 5px;
  padding: .08rem .38rem; color: var(--ink-faint);
}
.rumbo.lit { transform: scale(1.14); }
.rumbo.lit[data-r="file"]  { color: var(--mint); }
.rumbo.lit[data-r="trash"] { color: var(--ember); }
.rumbo.lit[data-r="keep"]  { color: var(--sand); }
.rumbo[data-r="keep"] { grid-column: 2; grid-row: 2; margin-top: -3rem; }
.deck { grid-column: 2; grid-row: 1; width: 100%; }

.card {
  background: var(--raised); border: 1px solid var(--edge);
  border-radius: 22px; box-shadow: var(--lift);
  padding: 1.15rem; display: grid; gap: .8rem; text-align: left;
  transition: transform .48s cubic-bezier(.22,.9,.28,1), opacity .42s ease;
}
.card.gone { opacity: 0; }
.thumb {
  height: 4.6rem; border-radius: 13px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--edge);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-faint);
}
.nuevo { font-family: var(--mono); font-size: .88rem; font-weight: 500; word-break: break-all; line-height: 1.35; }
.viejo {
  font-family: var(--mono); font-size: .71rem; color: var(--ink-faint);
  text-decoration: line-through; word-break: break-all; margin-top: .2rem;
}
.row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pill {
  font-size: .74rem; font-weight: 600; padding: .28rem .62rem; border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill.trash { background: color-mix(in srgb, var(--ember) 14%, transparent); color: var(--ember); }
.pill.keep  { background: color-mix(in srgb, var(--sand) 20%, transparent);  color: var(--sand); }
.bars { display: flex; align-items: flex-end; gap: 2.5px; flex-shrink: 0; }
.bars i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.bars i:nth-child(1){height:7px} .bars i:nth-child(2){height:9px}
.bars i:nth-child(3){height:11px} .bars i:nth-child(4){height:13px}
.bars i.f { background: var(--mint); }
.why { font-size: .8rem; color: var(--ink-soft); line-height: 1.4; }
.hint { position: absolute; bottom: 1rem; left: 0; right: 0; font-size: .82rem; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════
   Lo que hace falta saber antes de pagar
   ══════════════════════════════════════════════════════════════════ */

/* ── Requisitos: la lista que evita una devolución ──
   Va con marca de verificación o de aviso, no con viñetas: un requisito es
   algo que se cumple o no se cumple, y la forma del icono ya lo dice. */
.req { display: grid; gap: .1rem; max-width: 40rem; }
.req-row {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .95rem;
  align-items: start; padding: 1.05rem .2rem;
  border-top: 1px solid var(--edge);
}
.req-row:last-child { border-bottom: 1px solid var(--edge); }
.req-row svg { width: 1.15rem; height: 1.15rem; margin-top: .28rem; }
.req-row .must { color: var(--mint); }
.req-row .warn { color: var(--sand); }
.req-row b { display: block; font-weight: 600; font-size: .97rem; margin-bottom: .15rem; }
.req-row p { font-size: .89rem; color: var(--ink-soft); }
.req-row code { font-size: .82em; }

/* ── Recuadro de aviso ──
   Un párrafo con un filo de color a la izquierda. Se usa para lo que costaría
   dinero no leer, así que no puede parecerse a un párrafo normal. */
.note {
  border-left: 3px solid var(--sand);
  background: color-mix(in srgb, var(--sand) 8%, transparent);
  border-radius: 0 13px 13px 0;
  padding: 1.05rem 1.25rem; max-width: 40rem;
  font-size: .9rem; color: var(--ink-soft);
}
.note.good { border-left-color: var(--mint); background: color-mix(in srgb, var(--mint) 8%, transparent); }
.note b { color: var(--ink); }

/* ── Lo que no hace ──
   Dos columnas de frases cortas, cada una con una raya en vez de un tic. La
   raya es deliberada: no es una carencia disfrazada de virtud, es un «no». */
.nots { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .1rem 2.5rem; max-width: 46rem; }
.nots div { border-top: 1px solid var(--edge); padding: .95rem .2rem; }
.nots b { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .1rem; }
.nots p { font-size: .86rem; color: var(--ink-soft); }

/* ── Capturas y vídeo ── */
.shot { margin: 0; display: grid; gap: .8rem; }
.shot img, .shot video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--edge); border-radius: 18px;
  background: var(--raised); box-shadow: var(--lift);
}
.shot figcaption { font-size: .84rem; color: var(--ink-faint); text-align: center; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.6rem; }

/* ── Números honestos ──
   Cifras que se pueden comprobar, no cifras de marketing. */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.6rem 1rem; }
.fig { text-align: left; }
.fig b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.04em; line-height: 1;
  color: var(--mint); margin-bottom: .35rem;
}
.fig span { font-size: .86rem; color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════════
   Páginas de texto (soporte, privacidad, novedades)
   ══════════════════════════════════════════════════════════════════ */
.page { padding-block: clamp(3rem, 7vw, 5rem); }
.page h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: .8rem; }
.page h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-top: 2.8rem; margin-bottom: .7rem; }
.page h3 { font-size: 1rem; margin-top: 1.8rem; }
.page p, .page li { font-size: .95rem; color: var(--ink-soft); }
.page p + p { margin-top: .9rem; }
.page ul { padding-left: 1.15rem; margin: .8rem 0; display: grid; gap: .38rem; }
.page a:not(.btn) { color: var(--mint); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mint) 35%, transparent); }
.page a:not(.btn):hover { border-bottom-color: var(--mint); }
.page .back { font-size: .87rem; color: var(--ink-faint); display: inline-block; margin-bottom: 1.6rem; text-decoration: none; }
.page .back:hover { color: var(--mint); }
.page time { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }

/* ── Una versión del changelog ── */
.rel { border-top: 1px solid var(--edge); padding-block: 1.8rem; }
.rel:last-child { border-bottom: 1px solid var(--edge); }
.rel-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rel-head h2 { font-size: 1.35rem; margin: 0; }
.rel ul { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 0; }
.rel li { display: grid; grid-template-columns: .55rem 1fr; gap: .8rem; align-items: start; font-size: .93rem; }
.rel li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); margin-top: .62rem; }