/* Entry pages for visitors (js/landing.js): landing page, join code, sign-in.
   Same materials as the app: wine-red header leather, parchment sheets, gold
   rules and the book typeface. Dark theme overrides are at the end. */

/* ---------------------------------------------------------------- shell */
/* No sidebar for visitors: the content spans the page; sign-in and start sit in the header. */
.guest-mode .shell { grid-template-columns: minmax(0, 1fr) auto; }
.guest-mode .view { grid-column: 1 / -1; }
.nav.guest { align-items: center; gap: .35rem; }
.nav.guest a { flex-direction: row; gap: .4rem; font-size: .95rem; }
.nav.guest .nav-section { display: none; }
.nav.guest a.nav-start { min-width: 0; height: 36px; padding: 0 .85rem; border: 1px solid #8a6524; border-radius: 3px; color: #2e1d12;
  background: linear-gradient(#ecc977, #c49444); box-shadow: inset 0 1px #fff3c8; }
.nav.guest a.nav-start:hover { color: #2e1d12; filter: brightness(1.06); }
@media (max-width: 459px) {
  .nav.guest a:not(.nav-start) .nav-icon { display: none; }
  .nav.guest a.nav-start { padding: 0 .6rem; font-size: .88rem; }
}
@media (min-width: 900px) {
  .guest-mode .nav {
    grid-column: 2; grid-row: 1; align-self: center; justify-self: end; position: relative; top: 0; z-index: 11;
    width: auto; height: auto; margin: 0 1.25rem 0 0; padding: 0; flex-direction: row;
    background: none; border: 0; box-shadow: none;
  }
  .nav.guest a { padding: .45rem .8rem; border-radius: 3px; }
  .nav.guest .nav-section { display: flex; color: #dcc49a; font-weight: 600; }
  .nav.guest a.active { box-shadow: inset 0 -2px #d3a45f; }
  .nav.guest a.nav-start { height: 38px; margin-left: .35rem; padding: 0 1.1rem; }
  .guest-mode .view { justify-self: center; width: calc(100% - 2.5rem); max-width: 1220px; margin: 1.25rem auto 2rem; }
}
@media (min-width: 900px) and (max-width: 1099px) { .nav.guest .nav-section { display: none; } }

/* The landing page is a stack of its own sheets, not one parchment page. */
.view.landing-screen { max-width: 1220px; padding: 0; background: none; border: 0; box-shadow: none; }
.landing { display: flex; flex-direction: column; gap: 1.25rem; }
.landing > section { scroll-margin-top: calc(var(--nav-height) + .75rem); }
@media (min-width: 900px) { .landing { gap: 1.75rem; } .landing > section { scroll-margin-top: 1rem; } }

.lp-kicker { margin: 0 0 .5rem; font: 700 .78rem/1.3 var(--book); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lp-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.lp-link:hover { filter: none; color: var(--wine); }

.button.lp-gold { color: #2e1d12; border-color: #8a6524; background: linear-gradient(#ecc977, #c49444); box-shadow: inset 0 1px #fff3c8, 0 4px 14px #0000002e; }
.button.lp-ghost { color: #fff0cb; border-color: #d3a75e; background: #ffffff0d; box-shadow: none; }
.button.lp-ghost:hover { background: #ffffff1c; }
.lp-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.4rem 0 0; }
.lp-actions .button { min-height: 50px; padding: .6rem 1.5rem; font-size: 1.05rem; }
@media (max-width: 479px) { .lp-actions .button { flex: 1 1 100%; } }

/* Dark leather panels: hero and the closing call to action. */
.lp-hero, .lp-final {
  position: relative; overflow: hidden; color: #ead7b0;
  background:
    radial-gradient(ellipse at 85% -10%, #9a5a4f66 0, transparent 55%),
    radial-gradient(ellipse at 0% 110%, #b58a4333 0, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 18px, #e2b86b0b 18px 19px, transparent 19px 37px),
    linear-gradient(125deg, #25151b, #4b242c 55%, #2c191e);
  border: 2px solid #b58c4e; border-radius: 2px;
  box-shadow: 0 0 0 4px #271b16, 0 0 0 5px #a3763c, 0 16px 32px #110b096e;
}
.lp-hero h1, .lp-hero h2, .lp-final h2 { color: #fff0cb; text-shadow: 0 2px #1e1116; }
.lp-hero .lp-kicker { color: var(--gold-light); }

/* ---------------------------------------------------------------- hero */
.lp-hero { display: grid; gap: 1.75rem; align-items: center; padding: 1.75rem 1.25rem 1.5rem; }
.lp-hero-title { font-size: clamp(2.15rem, 6.6vw, 3.7rem); line-height: 1.06; letter-spacing: .005em; margin: 0 0 1rem; hyphens: manual; }
.lp-hero-title span, .lp-hero-title em { display: block; }
.lp-hero-title em { font-style: normal; color: var(--gold-light); }
.lp-lead { max-width: 37rem; margin: 0; font-size: 1.1rem; line-height: 1.55; color: #ead7b0; }
.lp-signin { margin: 1rem 0 0; color: #cdb48a; }
.lp-signin a, .lp-hero .lp-link { color: var(--gold-light); font-weight: 600; }
.lp-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.25rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid #b58c4e55; color: #cdb48a; font-size: .95rem; }
.lp-facts b { font: 700 1.5rem/1 var(--book); color: var(--gold-light); margin-right: .2rem; }
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; padding: 3.25rem 2.75rem; }
}

/* Hero composition of real screens; decoration only. */
.lp-preview { position: relative; min-height: 290px; }
.lp-preview > * { position: absolute; border-radius: 6px; box-shadow: 0 14px 34px #0e070999, 0 0 0 1px #c79a5599; }
.lp-preview .lp-sheet { top: 0; left: 0; width: 74%; z-index: 2; transform: rotate(-2deg); }
.lp-preview .lp-codex { right: 0; top: 50%; width: 62%; z-index: 3; transform: rotate(1.5deg); }
.lp-map { right: 4%; top: 2%; width: 50%; z-index: 1; overflow: hidden; transform: rotate(3deg); opacity: .9; }
.lp-map img { display: block; width: 100%; height: auto; }
@media (max-width: 479px) { .lp-map { display: none; } .lp-preview .lp-sheet { width: 82%; } .lp-preview .lp-codex { width: 70%; } }
@media (min-width: 900px) { .lp-preview { min-height: 390px; } .lp-preview .lp-sheet { left: 4%; width: 66%; } .lp-preview .lp-codex { top: 47%; width: 56%; } }

/* Shared preview pieces: always the light parchment look. */
.lp-sheet, .lp-codex, .lp-frame { --ink: #372818; --muted: #705d46; --wine: #52242c; --edge: #baa177; --ok: #4f6b2f; --warn: #8a5a14; color: var(--ink); text-align: left; }
.lp-sheet { padding: .85rem .9rem; background: linear-gradient(#f3e4c2, #e6cfa2), url("/img/parchment.jpg") center / cover; border-radius: 6px; }
.lp-sheet-head { display: flex; gap: .65rem; align-items: center; margin-bottom: .6rem; }
.lp-sheet-head img { width: 46px; height: 46px; border: 2px solid var(--gold); border-radius: 50%; background: #fbf1da; }
.lp-sheet-head strong { display: block; font: 700 1.05rem var(--book); color: var(--wine); }
.lp-chips { display: flex; gap: .3rem; margin-top: .2rem; }
.lp-chips em { padding: 0 .45rem; border: 1px solid var(--edge); border-radius: 999px; font: normal .72rem/1.5 var(--book); background: #f3e2bd; }
.lp-chips em.dark { color: #fff0cb; background: var(--wine); border-color: var(--wine); }
.lp-bar { display: grid; grid-template-columns: 1fr auto; font-size: .76rem; margin-bottom: .35rem; }
.lp-bar i { grid-column: 1 / -1; height: 5px; margin-top: .15rem; border-radius: 3px; background: linear-gradient(90deg, var(--ok) var(--fill), #d8c49c var(--fill)); }
.lp-bar i.mind { background: linear-gradient(90deg, #5160a0 var(--fill), #d8c49c var(--fill)); }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .55rem; }
.lp-stats span { padding: .25rem .4rem; border: 1px solid var(--edge); border-radius: 3px; background: #f6e7c6; }
.lp-stats small { display: block; font-size: .64rem; color: var(--muted); }
.lp-stats b { font: 700 .9rem var(--book); }
.lp-codex { padding: .8rem .9rem; background: #fbf3df; border-radius: 6px; }
.lp-codex small { color: var(--muted); font-size: .7rem; }
.lp-codex strong { display: block; margin: .1rem 0 .3rem; font: 700 1.15rem var(--book); color: var(--wine); }
.lp-codex p { margin: 0 0 .45rem; font: italic .82rem var(--book); }
.lp-secret { display: inline-block; padding: .1rem .5rem; border: 1px dashed var(--gold); border-radius: 3px; font-size: .7rem; color: var(--warn); background: #f6e6c4; }

/* ---------------------------------------------------------------- invitation */
.lp-invite {
  display: grid; gap: 1rem; padding: 1.4rem 1.25rem; color: var(--ink);
  background: linear-gradient(#f6e9caf2, #ead5abf2), url("/img/parchment.jpg") center / cover;
  border: 2px solid var(--gold); border-radius: 2px;
  box-shadow: 0 0 0 4px #271b16, 0 0 0 5px #e0bf78, 0 16px 32px #110b096e;
}
.lp-invite h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); color: var(--wine); margin: 0 0 .6rem; hyphens: manual; }
.lp-invite-seal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  color: #fff0cb; font-size: 1.7rem; background: radial-gradient(circle at 40% 30%, #9c4a4f, #52242c 70%);
  box-shadow: inset 0 0 0 3px #3b1e25, inset 0 0 0 4px #d3a75e, 0 4px 10px #3b1e2566; }
.lp-invite-code { margin: .6rem 0 0; padding: .55rem .8rem; border-left: 4px solid var(--ok); background: #f9efd6; border-radius: 3px; font-weight: 600; }
.lp-invite-form { display: grid; gap: .6rem; margin-top: 1rem; align-items: start; }
.lp-invite-form button { min-height: 50px; font-size: 1.05rem; color: #2e1d12; border-color: #8a6524; background: linear-gradient(#ecc977, #c49444); box-shadow: inset 0 1px #fff3c8; }
.lp-invite-alt { margin: .9rem 0 0; color: var(--muted); }
@media (min-width: 640px) {
  .lp-invite { grid-template-columns: auto minmax(0, 1fr); padding: 2rem 2.25rem; }
  .lp-invite-form { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-invite-form button { margin-top: 1.45rem; }
}

/* ---------------------------------------------------------------- sections */
.lp-section {
  padding: 1.75rem 1.1rem;
  background: linear-gradient(#f3e4c2d9, #e6cfa2d9), url("/img/parchment.jpg") center / cover, var(--paper);
  border: 2px solid #b58c4e; border-radius: 2px;
  box-shadow: 0 0 0 4px #271b16, 0 0 0 5px #a3763c, 0 16px 32px #110b096e;
}
@media (min-width: 900px) { .lp-section { padding: 3rem 2.75rem; } }
.lp-section-head { max-width: 50rem; margin: 0 auto 1.75rem; text-align: center; }
.lp-section-head h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin-bottom: .6rem; }
.lp-section-head p:last-child { margin: 0; font-size: 1.05rem; color: var(--muted); }
.lp-section h3 { display: block; }
.lp-fineprint { max-width: 52rem; margin: 1.25rem auto 0; text-align: center; font-size: .88rem; color: var(--muted); }
.lp-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; color: #f6dda1;
  background: radial-gradient(circle at 50% 30%, #9c5b55, #51232d 75%); box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e; }

/* The four applications: alternating rows of text and preview. */
.lp-app-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 60rem; margin: 0 auto 2rem; }
.lp-app-index span { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid var(--edge); border-radius: 999px; background: #fbf1dab3; font: 600 .9rem var(--book); color: var(--wine); }
.lp-app-index b, .lp-app-number { display: inline-grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 700 .8rem var(--book); color: #2e1d12; background: linear-gradient(#ecc977, #c49444); box-shadow: inset 0 0 0 1px #8a6524; }
@media (min-width: 760px) { .lp-app-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp-app-index span { justify-content: center; } }
.lp-apps { display: flex; flex-direction: column; }
.lp-app { display: grid; gap: 1.25rem; padding: 1.75rem 0; border-top: 1px solid #b58c4e66; }
.lp-app:first-child { padding-top: 0; border-top: 0; }
.lp-app:last-child { padding-bottom: 0; }
.lp-app-name { display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; font: 700 .82rem var(--book); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.lp-app-part { color: var(--muted); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.lp-app h3 { font-size: clamp(1.45rem, 3.4vw, 2rem); margin: 0 0 .7rem; }
.lp-app-copy > p:not(.lp-app-name) { font-size: 1.02rem; line-height: 1.6; }
.lp-app-copy .lp-app-action { margin: 1.25rem 0 0; }
.lp-app-action .button { min-height: 44px; }
.lp-points { display: grid; gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.lp-points li { position: relative; padding-left: 1.6rem; }
.lp-points li::before { content: "✓"; position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  font-size: .7rem; font-weight: 700; color: #fff4dc; background: var(--ok); }
@media (min-width: 900px) {
  .lp-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; align-items: center; padding: 2.75rem 0; }
  .lp-app:nth-child(even) .lp-app-copy { order: 2; }
}

/* Application window around a preview. */
.lp-frame { overflow: hidden; border: 1px solid #a3763c; border-radius: 8px; background: linear-gradient(#f6e9ca, #ecd8b0); box-shadow: 0 18px 40px #3b1e2540, 0 2px 6px #3b1e2526; }
.lp-frame-bar { display: flex; align-items: center; gap: .55rem; height: 38px; padding: 0 .8rem; color: #fff0cb; font-family: var(--book);
  background: linear-gradient(115deg, #25151b, #4b242c 60%, #2c191e); border-bottom: 2px solid #bc904c; }
.lp-frame-bar strong { font-size: .95rem; letter-spacing: .03em; }
.lp-frame-mark { display: grid; place-items: center; width: 20px; height: 22px; border: 1px solid #e3bf78; border-radius: 4px 4px 9px 9px; font-size: .7rem; color: #f6dda1; background: #51232d; }
.lp-frame-body { display: grid; gap: .75rem; padding: .9rem; }
.lp-frame .lp-sheet { box-shadow: 0 0 0 1px var(--edge); }
.lp-side { display: grid; gap: .75rem; align-content: start; }
.lp-mini-card { padding: .65rem .75rem; border: 1px solid var(--edge); border-radius: 5px; background: #fbf3dfe6; }
.lp-mini-card > small { display: block; margin-bottom: .35rem; font: 700 .68rem var(--book); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-ledger { margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.lp-ledger li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dotted var(--edge); }
.lp-ledger li:last-child { border-bottom: 0; }
.lp-ledger em { font-style: normal; color: var(--muted); white-space: nowrap; }
@media (min-width: 520px) { .lp-frame-online .lp-frame-body, .lp-frame-dm .lp-frame-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Character Creator */
.lp-wizard-steps { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.lp-wizard-steps li { display: flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .2rem; border: 1px solid var(--edge); border-radius: 999px; font-size: .72rem; background: #fbf3df; color: var(--muted); }
.lp-wizard-steps li span { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: .65rem; font-weight: 700; background: #e6d3ab; color: var(--ink); }
.lp-wizard-steps li.done span { background: var(--ok); color: #fff4dc; }
.lp-wizard-steps li.current { border-color: var(--wine); color: #fff0cb; background: var(--wine); }
.lp-wizard-steps li.current span { background: #fff0cb; color: var(--wine); }
.lp-races { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.lp-races span { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .45rem .2rem; border: 1px solid var(--edge); border-radius: 5px; background: #fbf3df; font: 600 .78rem var(--book); }
.lp-races img { width: 44px; height: 44px; }
.lp-races span.chosen { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: #fff6e2; color: var(--wine); }
.lp-attrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.lp-attr { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--edge); border-radius: 4px; background: #f6e7c6; font-size: .8rem; }
.lp-stepper { display: flex; align-items: center; gap: .3rem; }
.lp-stepper i { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--edge); border-radius: 3px; font-style: normal; background: #fbf3df; }
.lp-stepper b { min-width: 1rem; text-align: center; font-family: var(--book); }

/* Orbis Online */
.lp-activity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.lp-activity span { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .15rem; border: 1px solid var(--edge); border-radius: 4px; background: #f6e7c6; font-size: .66rem; text-align: center; overflow-wrap: anywhere; }
.lp-activity b { font-size: .95rem; color: var(--wine); }

/* Orbis DM */
.lp-initiative { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.lp-initiative li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .35rem .45rem; border: 1px solid var(--edge); border-radius: 4px; background: #f6e7c6; font-size: .84rem; }
.lp-initiative b { display: grid; place-items: center; height: 1.6rem; border-radius: 4px; font-family: var(--book); background: #e6d3ab; }
.lp-initiative em { font-style: normal; font-size: .7rem; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); }
.lp-initiative li.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); background: #fff6e2; }
.lp-initiative li.active b { color: #fff0cb; background: var(--wine); }
.lp-check strong { display: block; font: 700 1rem var(--book); color: var(--wine); }
.lp-result { display: inline-block; margin-top: .35rem; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff4dc; background: var(--ok); }

/* Orbis Codex */
.lp-frame-codex .lp-frame-body { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: start; }
.lp-codex-nav { margin: 0; padding: .4rem; list-style: none; border: 1px solid var(--edge); border-radius: 5px; background: #fbf3dfcc; font: 600 .78rem var(--book); }
.lp-codex-nav li { padding: .3rem .4rem; border-bottom: 1px solid #baa17755; }
.lp-codex-nav li:last-child { border-bottom: 0; }
.lp-codex-nav li::before { content: "▸ "; color: var(--muted); }
.lp-codex-nav li.open { color: #fff0cb; background: var(--wine); border-radius: 4px; }
.lp-codex-nav li.open::before { content: "▾ "; color: #f6dda1; }
.lp-codex-page { padding: .7rem .8rem; border: 1px solid var(--edge); border-radius: 5px; background: #fbf3df; font-size: .82rem; }
.lp-tag { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .68rem; background: #ece0c3; color: var(--muted); }
.lp-codex-page strong { display: block; margin: .25rem 0 .4rem; font: 700 1.3rem/1.15 var(--book); color: var(--wine); }
.lp-codex-page p { margin: 0 0 .5rem; }
.lp-codex-page u { text-decoration: underline dotted var(--wine); text-underline-offset: 2px; color: var(--wine); font-weight: 600; }
.lp-codex-secret { margin-bottom: .55rem; padding: .4rem .55rem; border: 1px dashed var(--gold); border-radius: 4px; background: #f6e6c4; font-style: italic; }
.lp-codex-secret small { display: block; font-style: normal; font-weight: 700; color: var(--warn); font-size: .68rem; }
.lp-codex-map { overflow: hidden; border: 1px solid var(--edge); border-radius: 4px; }
.lp-codex-map img { display: block; width: 100%; height: 90px; object-fit: cover; }
@media (max-width: 419px) { .lp-frame-codex .lp-frame-body { grid-template-columns: 1fr; } .lp-codex-nav { display: flex; flex-wrap: wrap; gap: .2rem; } .lp-codex-nav li { border: 0; } }

/* Orbis Stage: a map, presentation and soundtrack inside the shared preview frame. */
.lp-frame-stage .lp-frame-body { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-items: stretch; }
.lp-stage-scene > strong, .lp-frame-stage .lp-side strong { display: block; font: 700 .85rem var(--book); color: var(--wine); }
.lp-stage-map { position: relative; overflow: hidden; height: 135px; margin-bottom: .4rem; border: 1px solid var(--edge); border-radius: 4px; background: #d8c49c; }
.lp-stage-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-stage-token { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid #f6dda1; border-radius: 50%; color: #fff4dc; background: #3174a6; font: 700 .65rem var(--book); box-shadow: 0 2px 5px #0008; }
.lp-stage-token.active { top: 44%; left: 35%; box-shadow: 0 0 0 3px #d3a75e, 0 2px 5px #0008; }
.lp-stage-token.foe { top: 25%; right: 22%; background: #8a2f2f; }
.lp-stage-reveal, .lp-stage-music { display: block; margin-top: .55rem; color: var(--wine); font-size: .78rem; }
.lp-stage-reveal { padding: .25rem .4rem; border: 1px solid var(--edge); border-radius: 3px; background: #f6e7c6; }
.lp-stage-music { color: var(--warn); white-space: nowrap; }
@media (max-width: 519px) { .lp-frame-stage .lp-frame-body { grid-template-columns: 1fr; } }

/* Benefits: lighter than the application showcase, no boxes. */
.lp-section-benefits { background: linear-gradient(#f8eed6e6, #efdfbbe6), url("/img/parchment.jpg") center / cover, var(--paper); }
.lp-benefits { display: grid; gap: 1.25rem 2rem; }
.lp-benefit { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: .9rem; align-content: start; }
.lp-benefit .lp-icon { grid-row: span 2; }
.lp-benefit h3 { margin: .1rem 0 .3rem; font-size: 1.15rem; }
.lp-benefit p { margin: 0; color: var(--ink); }
@media (min-width: 640px) { .lp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; } }

/* Worlds: grid with the Orbis world featured; a swipeable row on phones. */
.lp-worlds { display: grid; gap: 1rem; }
.lp-world { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--edge); border-radius: 8px; background: #fbf1da;
  box-shadow: 0 6px 18px #5a3f2030; transition: transform .2s, box-shadow .2s; }
.lp-world:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold), 0 12px 26px #5a3f2045; }
.lp-world-art { position: relative; height: 170px; border-bottom: 3px double var(--gold); background: #d8c49c; }
.lp-world-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-world-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #1d110e66); }
.lp-world-genre { position: absolute; left: .7rem; bottom: .6rem; z-index: 1; padding: .1rem .55rem; border-radius: 999px; font: 700 .7rem var(--book); letter-spacing: .06em; text-transform: uppercase;
  color: #2e1d12; background: #f3dc9ef2; box-shadow: 0 2px 6px #0000004d; }
.lp-world-copy { padding: .9rem 1rem 1.1rem; }
.lp-world-copy h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.lp-world-copy p { margin: 0; font-size: .93rem; }
.lp-world.featured h3 { font-size: 1.45rem; }
.lp-world-own .lp-world-art { background: #ead2a3; }
.lp-world-own .lp-world-genre { background: #51232de8; color: #f6dda1; }
@media (max-width: 639px) {
  .lp-worlds { grid-auto-flow: column; grid-auto-columns: 80%; margin: 0 -1.1rem; padding: .25rem 1.1rem 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.1rem; scrollbar-color: var(--gold) transparent; overscroll-behavior-x: contain; }
  .lp-world { scroll-snap-align: start; }
}
@media (min-width: 640px) {
  .lp-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-world.featured { grid-column: span 2; }
  .lp-world.featured .lp-world-art { height: 220px; }
}
@media (min-width: 1000px) {
  .lp-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-world.featured .lp-world-art { height: 170px; }
}

/* How it works: three numbered steps joined by a line. */
.lp-steps { counter-reset: step; position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.lp-steps li { counter-increment: step; position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.lp-step-icon { position: relative; grid-row: span 2; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem; color: #f6dda1;
  background: radial-gradient(circle at 50% 30%, #9c5b55, #51232d 75%); box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e, 0 4px 10px #3b1e2540; }
.lp-step-icon::after { content: counter(step); position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 700 .85rem var(--book); color: #2e1d12; background: linear-gradient(#ecc977, #c49444); box-shadow: 0 0 0 2px #f3e4c2; }
.lp-steps h3 { margin: .2rem 0 .3rem; font-size: 1.15rem; }
.lp-steps p { margin: 0; color: var(--muted); }
.lp-steps-actions { justify-content: center; margin-top: 1.75rem; }
@media (min-width: 760px) {
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .lp-steps::before { content: ""; position: absolute; top: 36px; left: 17%; right: 17%; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); }
  .lp-steps li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .lp-step-icon { grid-row: auto; width: 72px; height: 72px; margin-bottom: .85rem; font-size: 1.8rem; }
}

/* Closing call to action and footer. */
.lp-final { padding: 2.25rem 1.25rem; text-align: center; }
.lp-final h2 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); margin-bottom: .7rem; }
.lp-final p { max-width: 38rem; margin: 0 auto; font-size: 1.08rem; }
.lp-final .lp-actions { justify-content: center; }
@media (min-width: 900px) { .lp-final { padding: 3.25rem 2rem; } }
.lp-footer { padding: .5rem .5rem 1rem; text-align: center; color: #cdb48a; font-size: .85rem; }
.lp-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; margin-bottom: .6rem; }
.lp-footer a { color: #f0dcb0; }
.lp-footer p { margin: 0; color: #b39c78; }

/* ---------------------------------------------------------------- sign-in and join */
.auth-page { display: flex; flex-direction: column; gap: var(--gap); }
.auth-page > .back { align-self: flex-start; color: var(--muted); text-decoration: none; font-weight: 600; }
.auth-page > .back:hover { color: var(--wine); }
.auth-page .banner { margin: 0; }
.auth-page .banner p:last-child, .auth-page .banner .lp-link { margin-bottom: 0; }
.auth-head { text-align: center; padding: .5rem 0 .25rem; }
.auth-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--wine); margin-bottom: .35rem; }
.auth-head p { margin: 0; color: var(--muted); }
.auth-card { align-items: stretch; text-align: center; }
.auth-card .field { text-align: left; }
.auth-card .auth-seal { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font: 700 1.6rem var(--book); color: #f6dda1; background: radial-gradient(circle at 50% 30%, #9c5b55, #51232d 75%); box-shadow: inset 0 0 0 2px #4b2530, inset 0 0 0 3px #d3a75e; }
.auth-card input { text-align: center; font: 600 1.25rem var(--book); letter-spacing: .12em; text-transform: uppercase; }
.auth-card input::placeholder { letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) { .lp-world:hover { transform: none; } }

/* ---------------------------------------------------------------- dark theme */
html[data-theme="dark"] :is(.lp-section, .lp-invite) {
  color: var(--ink); background: linear-gradient(#1e1715f2, #1e1715f2), url("/img/parchment.jpg") center / cover, var(--paper);
  border-color: #6b4f2c; box-shadow: 0 0 0 4px #0b0806, 0 0 0 5px #6b4f2c, 0 16px 32px #000000a0;
}
html[data-theme="dark"] .lp-section-benefits { background: linear-gradient(#251c19f2, #251c19f2), url("/img/parchment.jpg") center / cover, var(--paper); }
html[data-theme="dark"] .lp-invite { border-color: var(--gold); box-shadow: 0 0 0 4px #0b0806, 0 0 0 5px var(--gold), 0 16px 32px #000000a0; }
html[data-theme="dark"] :is(.lp-hero, .lp-final) { border-color: #6b4f2c; box-shadow: 0 0 0 4px #0b0806, 0 0 0 5px #6b4f2c, 0 16px 32px #000000a0; }
html[data-theme="dark"] :is(.lp-world, .lp-app-index span) { background: var(--panel); box-shadow: inset 0 0 0 1px #ffffff08, 0 1px 3px #00000040; }
html[data-theme="dark"] .lp-world:hover { box-shadow: 0 0 0 1px var(--gold), 0 6px 16px #00000066; }
html[data-theme="dark"] .lp-app { border-top-color: #6b4f2c; }
html[data-theme="dark"] .lp-frame { border-color: #6b4f2c; box-shadow: 0 18px 40px #000000a0; }
html[data-theme="dark"] .lp-step-icon::after { box-shadow: 0 0 0 2px #241b19; }
html[data-theme="dark"] .lp-invite-code { background: var(--raised); }
html[data-theme="dark"] .lp-world-art { border-bottom-color: #6b4f2c; }
html[data-theme="dark"] .lp-points li::before { color: #1a1210; }