/* The home page's three paths and the pages they lead to (/servers, /players, /play): the "Seals" look. Hairline glyphs that draw themselves, corner ticks, cards that lean toward the pointer, one idea
   per section. Everything is under .rd.paths, on top of the shared .rd look (redesign.css). */

.rd .lp-tag { margin: 12px auto 0; padding: 11px 0; text-align: center; font: 600 11px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.rd .lp-tag b { color: var(--accent); font-weight: 600; }
.rd .lp-head { text-align: center; margin: 52px 0 28px; }
.rd .lp-head h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: 8px; }
.rd .lp-head p { color: var(--soft); max-width: 38em; margin: 10px auto 0; font-size: 18px; }
.rd .lp-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.rd .lp-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rd .lp-cmd { font: 600 12.5px var(--font-mono); color: var(--link); }
.rd .lp-chip { display: inline-flex; align-items: center; font: 600 12px var(--font-mono); padding: 5px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.055); border: 1px solid var(--line); color: var(--soft); }
.rd .lp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rd .lp-cta { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.rd .lp-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--font-body); padding: 13px 24px; border-radius: 12px; background: var(--accent); color: var(--on-accent); text-decoration: none; }
.rd .lp-btn.ghost { background: var(--card-soft); color: var(--ink); border: 1px solid var(--line); }
.rd .lp-link { font-weight: 600; text-decoration: none; }
.rd .lp-link::after { content: " \2192"; }
.rd .lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.rd .lp-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; counter-increment: s; }
.rd .lp-steps li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 14px var(--font-head); color: var(--on-accent); background: var(--accent); }
.rd .lp-steps b { display: block; font-size: 17px; }
.rd .lp-steps span { color: var(--soft); font-size: 15px; }
.rd .lp-plans { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 26px; margin: 56px 0 8px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-soft); color: var(--soft); }
.rd .lp-plans b { color: var(--ink); }
.rd .lp-plans a { white-space: nowrap; }
.rd .lp-end { text-align: center; margin: 64px 0 20px; }
.rd .lp-end h2 { font-size: clamp(26px, 3.2vw, 40px); }
.rd .lp-mini { display: grid; gap: 4px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit; }
.rd .lp-mini b { font-size: 17px; }
.rd .lp-mini p { color: var(--soft); font-size: 14.5px; }
.rd .lp-mm { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.rd .lp-mm-top { display: flex; align-items: center; gap: 14px; }
.rd .lp-av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 700 20px var(--font-head); color: #fff; background: linear-gradient(135deg, #fd9425, #e11d48); }
.rd .lp-ring { margin-left: auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--accent) 94%, rgba(255, 255, 255, 0.1) 0); position: relative; font: 700 16px var(--font-head); }
.rd .lp-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.rd .lp-ring span { position: relative; }
.rd svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .rd .lp-head { margin-top: 36px; } }
.rd .lpx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px 0; }
.rd .lpx-back { color: var(--mute); text-decoration: none; font-size: 14px; }
.rd .lpx-back:hover { color: var(--ink); }
.rd .lpx-seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-soft); }
.rd .lpx-seg a { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--soft); font: 600 14px var(--font-body); transition: color 0.15s, background 0.15s; }
.rd .lpx-seg a:hover { color: var(--ink); }
.rd .lpx-seg a.on { background: var(--accent); color: var(--on-accent); }

.rd .lpx-ey { display: inline-flex; align-items: center; gap: 10px; }
.rd .lpx-ey svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rd .lpx-sec { margin-top: 76px; }
.rd .lpx-head { text-align: center; margin-bottom: 30px; }
.rd .lpx-head h2 { font-size: clamp(28px, 3.4vw, 44px); margin-top: 8px; }
.rd .lpx-head p { color: var(--soft); max-width: 36em; margin: 10px auto 0; font-size: 18px; }

.rd .lpx-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rd .lpx-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.rd .lpx-card h3 { font-size: 22px; line-height: 1.15; }
.rd .lpx-card p { color: var(--soft); font-size: 16px; }
.rd .lpx-n { font: 600 12px var(--font-mono); letter-spacing: 0.16em; color: var(--accent); }
.rd .lpx-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rd .lpx-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rd .lpx-cmd { font: 600 12.5px var(--font-mono); color: var(--link); }
.rd .lpx-chip { display: inline-flex; align-items: center; font: 600 12.5px var(--font-mono); padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.055); border: 1px solid var(--line); color: var(--soft); }
.rd .lpx-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the landing: three doors */
.rd .lpx-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rd a.lpx-door { display: grid; gap: 10px; align-content: start; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.18s, transform 0.18s, background 0.18s; }
.rd a.lpx-door:hover { border-color: var(--accent); transform: translateY(-4px); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.rd .lpx-door h3 { font: 700 26px/1.1 var(--font-head); letter-spacing: -0.02em; margin-top: 4px; }
.rd .lpx-door > p { color: var(--soft); font-size: 16.5px; }
.rd .lpx-door ul { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 8px; }
.rd .lpx-door li { position: relative; padding-left: 24px; color: var(--soft); font-size: 15px; }
.rd .lpx-door li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.rd .lpx-go { margin-top: 8px; font-weight: 700; color: var(--link); }
.rd .lpx-go::after { content: " \2192"; transition: margin 0.18s; }
.rd a.lpx-door:hover .lpx-go::after { margin-left: 6px; }

/* the server page */
.rd .lpx-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rd .lpx-group { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); display: grid; gap: 4px; align-content: start; }
.rd .lpx-group h3 { font-size: 24px; }
.rd .lpx-group > p { color: var(--soft); margin-bottom: 8px; }
.rd .lpx-feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.rd .lpx-feat b { font-size: 16.5px; }
.rd .lpx-feat span.d { grid-column: 1; color: var(--soft); font-size: 14.5px; }
.rd .lpx-feat .lpx-cmd { grid-column: 2; grid-row: 1; }
.rd .lpx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(520px 320px at 90% 10%, rgba(253, 148, 37, 0.13), transparent 70%), var(--card); }
.rd .lpx-split h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; margin: 10px 0 14px; }
.rd .lpx-split p { color: var(--soft); font-size: 17.5px; }
.rd .lpx-ticks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.rd .lpx-ticks li { position: relative; padding-left: 28px; color: var(--ink); }
.rd .lpx-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.rd .lpx-win { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: #17171b; overflow: hidden; box-shadow: 0 30px 60px -28px #000; }
.rd .lpx-win .top { display: flex; gap: 6px; padding: 11px 14px; background: #1e1f22; }
.rd .lpx-win .top i { width: 10px; height: 10px; border-radius: 50%; background: #3a3c44; }
.rd .lpx-win .body { display: grid; grid-template-columns: 130px 1fr; min-height: 270px; }
.rd .lpx-win .side { padding: 14px 12px; background: #1b1c20; display: grid; gap: 6px; align-content: start; font-size: 13px; color: var(--mute); }
.rd .lpx-win .side span { padding: 7px 10px; border-radius: 8px; }
.rd .lpx-win .side span.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.rd .lpx-win .main { padding: 16px; display: grid; gap: 10px; align-content: start; }
.rd .lpx-win .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.045); font-size: 14px; }
.rd .lpx-win .sw { width: 34px; height: 20px; border-radius: 99px; background: #3a3c44; position: relative; flex: none; }
.rd .lpx-win .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.rd .lpx-win .sw.on { background: var(--accent); }
.rd .lpx-win .sw.on::after { left: 17px; }
.rd .lpx-win .pv { margin-top: 4px; padding: 13px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.2); display: grid; gap: 6px; }
.rd .lpx-win .pv small { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.rd .lpx-win .pv b { font-size: 15px; }
.rd .lpx-win .pv p { color: var(--soft); font-size: 13.5px; }

/* the people page */
.rd .lpx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd .lpx-tile { display: grid; gap: 6px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.rd .lpx-tile b { font-size: 18px; }
.rd .lpx-tile p { color: var(--soft); font-size: 15px; }
.rd .lpx-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; margin-top: 8px; }
.rd .lpx-vs .side { padding: 22px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 12px; align-content: start; }
.rd .lpx-vs .side:first-child { border-radius: 20px 0 0 20px; }
.rd .lpx-vs .side:last-child { border-radius: 0 20px 20px 0; }
.rd .lpx-vs .side small { font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.rd .lpx-vs .mid { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 22px 26px; border-block: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.rd .lpx-vs .mid small { font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.rd .lpx-vs .mid .lpx-chip { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--ink); }

/* the play page */
.rd .lpx-weave { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(520px 320px at 10% 10%, rgba(253, 148, 37, 0.13), transparent 70%), var(--card); }
.rd .lpx-weave h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; margin: 10px 0 14px; }
.rd .lpx-weave p { color: var(--soft); font-size: 17.5px; }
.rd .lpx-board { display: grid; gap: 18px; justify-items: center; padding: 28px; border-radius: 22px; background: #17171b; border: 1px solid rgba(255, 255, 255, 0.12); }
.rd .lpx-board .line { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rd .lpx-tilel { display: grid; place-items: center; width: 52px; height: 58px; border-radius: 10px; background: #fff; color: #17171b; font: 700 24px var(--font-head); box-shadow: 0 5px 0 #c9c9d2; position: relative; }
.rd .lpx-tilel small { position: absolute; right: 5px; bottom: 3px; font: 600 10px var(--font-mono); color: #6b6b75; }
.rd .lpx-tilel.b { background: #ffd9b8; color: #8a3604; box-shadow: 0 5px 0 #e0640c; }
.rd .lpx-board .cap { font: 600 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.rd .lpx-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rd a.lpx-game { display: grid; gap: 8px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.rd a.lpx-game:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-3px); }
.rd .lpx-game h3 { font-size: 22px; }
.rd .lpx-game p { color: var(--soft); font-size: 15.5px; }
.rd .lpx-demo { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); }
.rd .lpx-demo span { font-size: 12px; color: var(--mute); }
.rd .lpx-demo b { font: 700 20px var(--font-mono); letter-spacing: 0.08em; color: #ffd9b8; }

/* the end of each page */
.rd .lpx-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 76px; }
.rd a.lpx-nx { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s; }
.rd a.lpx-nx:hover { border-color: var(--accent); }
.rd .lpx-nx small { display: block; font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.rd .lpx-nx b { font: 700 21px var(--font-head); }
.rd .lpx-nx i { font-style: normal; font-size: 22px; color: var(--accent); }
.rd .lpx-end { text-align: center; margin: 80px 0 24px; }
.rd .lpx-end h2 { font-size: clamp(28px, 3.4vw, 44px); }
.rd .lpx-end .rd-cta-row { justify-content: center; margin-top: 26px; }

@media (max-width: 960px) {
  .rd .lpx-doors, .rd .lpx-3, .rd .lpx-groups, .rd .lpx-tiles, .rd .lpx-games, .rd .lpx-next { grid-template-columns: 1fr; }
  .rd .lpx-split, .rd .lpx-weave { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .rd .lpx-vs { grid-template-columns: 1fr; }
  .rd .lpx-vs .side:first-child, .rd .lpx-vs .side:last-child { border-radius: 20px; }
  .rd .lpx-bar { flex-direction: column; align-items: stretch; }
  .rd .lpx-seg { overflow-x: auto; }
}
.rd .lpx-sec { margin-top: 104px; }
.rd .lpx-head { margin-bottom: 40px; }
.rd .lpx-head h2 { font-size: clamp(30px, 3.8vw, 50px); }

/* the landing: three doors with one line each */
.rd .lpx-doors-s a.lpx-door { padding: 36px 32px; gap: 12px; }
.rd .lpx-doors-s .lpx-door > p { font-size: 18px; min-height: 3.1em; }
.rd .lpx-fine { text-align: center; margin-top: 40px; color: var(--soft); }

/* three steps in a row, joined by a line, no boxes */
.rd .lpx-flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 980px; margin: 0 auto; }
.rd .lpx-flow::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 2px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.rd .lpx-fs { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.rd .lpx-fs i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 700 22px var(--font-head); font-style: normal; color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 8px var(--bg, #060607); position: relative; }
.rd .lpx-fs b { font: 700 22px var(--font-head); margin-top: 6px; }
.rd .lpx-fs span { color: var(--soft); font-size: 17px; max-width: 14em; }

/* a few tiles: an icon, a name, one short line */
.rd .lpx-t3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.rd .lpx-t2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.rd .lpx-tt { display: grid; gap: 8px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.rd .lpx-tt b { font: 700 20px var(--font-head); }
.rd .lpx-tt p { color: var(--soft); font-size: 16px; }
.rd .lpx-more { text-align: center; margin-top: 30px; }

/* the end of each page: one button, one quiet line */
.rd .lpx-end2 { text-align: center; margin: 112px 0 12px; }
.rd .lpx-end2 h2 { font-size: clamp(28px, 3.4vw, 44px); }
.rd .lpx-end2 .rd-cta-row { justify-content: center; margin-top: 26px; }
.rd .lpx-also { text-align: center; margin-top: 30px; color: var(--mute); font-size: 15px; }
.rd .lpx-also a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); margin: 0 6px; }
.rd .lpx-also a:hover { color: var(--ink); border-color: var(--accent); }

/* the daily game: a short band */
.rd .lpx-weave2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1040px; margin: 0 auto; padding: 52px; border: 1px solid var(--line); border-radius: 30px; background: radial-gradient(520px 320px at 10% 10%, rgba(253, 148, 37, 0.13), transparent 70%), var(--card); }
.rd .lpx-weave2 h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.04; margin: 10px 0 14px; }
.rd .lpx-weave2 p { color: var(--soft); font-size: 18px; margin-bottom: 24px; }
.rd .lpx-games2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.rd a.lpx-g2 { display: grid; gap: 6px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.rd a.lpx-g2:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-3px); }
.rd .lpx-g2 b { font: 700 21px var(--font-head); }
.rd .lpx-g2 p { color: var(--soft); font-size: 15.5px; }

@media (max-width: 960px) {
  .rd .lpx-flow { grid-template-columns: 1fr; gap: 28px; }
  .rd .lpx-flow::before { display: none; }
  .rd .lpx-t3, .rd .lpx-t2, .rd .lpx-games2 { grid-template-columns: 1fr; }
  .rd .lpx-weave2 { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .rd .lpx-sec { margin-top: 72px; }
}
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }
.rd .lpx-go { display: inline-block; }
.rd .lpx-head .rd-eyebrow { display: block; }
.rd.paths .lpx-head h2 { letter-spacing: -0.03em; }

.rd.paths .pt-seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.rd.paths .pt-seal { --rx: 0deg; --ry: 0deg; position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 64px 30px 40px; min-height: 460px; text-align: center; color: inherit; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 62%); box-shadow: inset 0 0 0 1px var(--line);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.rd.paths .pt-seal::before, .rd.paths .pt-seal::after, .rd.paths .lpx-tt::before, .rd.paths .lpx-tt::after, .rd.paths .lpx-g2::before, .rd.paths .lpx-g2::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) left top / 16px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 16px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 16px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 1px 16px no-repeat; }
.rd.paths .pt-seal::after, .rd.paths .lpx-tt::after, .rd.paths .lpx-g2::after { transform: rotate(180deg); }
.rd.paths .pt-seal:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rd.paths .pt-i { position: absolute; top: 18px; left: 22px; font: 600 11px var(--font-mono); letter-spacing: 0.18em; color: var(--mute); }
.rd.paths .pt-ring { position: absolute; top: 42px; left: 50%; width: 196px; height: 196px; margin-left: -98px; border-radius: 50%; border: 1px dashed rgba(253, 148, 37, 0.32); animation: pt-rot 44s linear infinite; transition: border-color 0.25s; }
.rd.paths .pt-ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.rd.paths .pt-seal:hover .pt-ring { animation-duration: 9s; border-color: var(--accent); }
@keyframes pt-rot { to { transform: rotate(360deg); } }
.rd.paths .pt-glyph { position: relative; width: 150px; height: 150px; margin-bottom: 18px; fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(253, 148, 37, 0.35)); transition: filter 0.25s, transform 0.4s; transform: translateZ(40px); }
.rd.paths .pt-seal:hover .pt-glyph { filter: drop-shadow(0 0 18px rgba(253, 148, 37, 0.75)); transform: translateZ(60px) scale(1.04); }
.rd.paths .pt-glyph *, .rd.paths .pt-wm * { stroke-dasharray: 100; stroke-dashoffset: 100; animation: pt-draw 1.9s 0.2s cubic-bezier(0.6, 0.1, 0.2, 1) forwards; }
.rd.paths .pt-glyph *:nth-child(2), .rd.paths .pt-wm *:nth-child(2) { animation-delay: 0.7s; }
.rd.paths .pt-seal:nth-child(2) .pt-glyph * { animation-delay: 0.45s; }
.rd.paths .pt-seal:nth-child(3) .pt-glyph * { animation-delay: 0.7s; }
@keyframes pt-draw { to { stroke-dashoffset: 0; } }
.rd.paths .pt-seal h3 { font: 700 26px/1.1 var(--font-head); letter-spacing: -0.02em; transform: translateZ(24px); }
.rd.paths .pt-seal p { color: var(--soft); font-size: 17px; max-width: 16em; transform: translateZ(14px); }
.rd.paths .pt-seal .lpx-go { margin-top: 10px; }

/* the pages */
.rd.paths .pt-wm { position: absolute; left: 50%; top: 50%; z-index: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; fill: none; stroke: var(--accent); stroke-width: 1.3; opacity: 0.1; pointer-events: none; }
.rd.paths .lpx-seg { border: 0; background: none; border-radius: 0; gap: 26px; padding: 0; }
.rd.paths .lpx-seg a { padding: 8px 2px; border-radius: 0; border-bottom: 2px solid transparent; }
.rd.paths .lpx-seg a.on { background: none; color: var(--ink); border-bottom-color: var(--accent); }
.rd.paths .lpx-fs i { width: 62px; height: 62px; border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); box-shadow: none; font-size: 24px; }
.rd.paths .lpx-flow::before { height: 1px; top: 31px; background: linear-gradient(90deg, var(--accent), rgba(253, 148, 37, 0.15)); }
.rd.paths .lpx-tt, .rd.paths .lpx-g2 { position: relative; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.rd.paths .lpx-tt .lpx-ico { background: none; border: 1px solid var(--line); border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.rd.paths a.lpx-g2:hover, .rd.paths .lpx-tt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rd.paths .lpx-weave2 { border-radius: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent); box-shadow: inset 0 0 0 1px var(--line); border: 0; }
.rd.paths .lpx-board { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; }

@media (max-width: 960px) { .rd.paths .pt-seals { grid-template-columns: 1fr; } .rd.paths .pt-seal { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .rd.paths .pt-ring, .rd.paths .pt-glyph *, .rd.paths .pt-wm * { animation: none; stroke-dashoffset: 0; } }

/* the cue under the hero: scroll to choose a path */
html:has(.rd.paths) { scroll-behavior: smooth; }
.rd.paths .pt-scroll { display: grid; justify-items: center; gap: 10px; margin-top: 30px; color: var(--mute); text-decoration: none; transition: opacity 0.45s ease, transform 0.45s ease, color 0.2s; }
.rd.paths .pt-scroll:hover { color: var(--ink); }
.rd.paths .pt-scroll-t { font: 600 11px var(--font-mono); letter-spacing: 0.26em; text-transform: uppercase; }
.rd.paths .pt-scroll-line { position: relative; width: 1px; height: 52px; background: linear-gradient(rgba(255, 255, 255, 0.14), color-mix(in srgb, var(--accent) 60%, transparent)); }
.rd.paths .pt-scroll-line i { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; background: var(--accent); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px var(--accent)); animation: pt-fall 2.4s cubic-bezier(0.5, 0, 0.2, 1) infinite; }
@keyframes pt-fall { 0% { transform: translateY(-4px); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(44px); opacity: 0; } }
.rd.paths .pt-scroll::after { content: ""; width: 9px; height: 9px; margin-top: -8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); animation: pt-nudge 2.4s ease-in-out infinite; }
@keyframes pt-nudge { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
.rd.paths .pt-scroll.gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rd.paths .pt-scroll-line i, .rd.paths .pt-scroll::after { animation: none; } .rd.paths .pt-scroll-line i { opacity: 1; transform: translateY(20px); } html:has(.rd.paths) { scroll-behavior: auto; } }

/* a tile that is a link keeps the card's colours */
.rd.paths a.lpx-tt { color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s, background 0.15s; }
.rd.paths a.lpx-tt:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 6%, transparent); }


/* the small line of links under the paths on the home page */
.rd.paths .lpx-fine.lpx-small { max-width: 44em; margin: 12px auto 0; font-size: 14.5px; color: var(--mute); }
.rd.paths .lpx-fine.lpx-small a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.rd.paths .lpx-fine.lpx-small a:hover { color: var(--ink); border-color: var(--accent); }