/* Lux Travely public site — page system.
   The hand-off ships the home page and the booking funnel. Every OTHER public
   page (support, help centre, account flows) is built from the primitives
   below, which are drawn from the hand-off's own tokens in styles.css so the
   two never read as different sites. Prefix `lx-`, never a designer class. */

/* ─────────────── page frame ─────────────── */
.lx {
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 24px 96px;
  color: var(--ink, #3b3b3b);
  font-family: var(--text, "Inter", system-ui, sans-serif);
}

.lx--narrow { max-width: 620px; }
.lx--mid { max-width: 880px; }
.lx--tight { padding-top: 30px; }

@media (max-width: 640px) {
  .lx { padding: 28px 18px 64px; }
}

/* ─────────────── dark hero band ─────────────── */
.lx-hero {
  position: relative;
  overflow: hidden;
  background: #14130f;
  color: #fff;
  padding: 72px 24px 76px;
  text-align: center;
}

.lx-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 160%;
  background: radial-gradient(ellipse at 50% 0%, rgba(180, 168, 134, .22), transparent 62%);
  pointer-events: none;
}

.lx-hero__in { position: relative; max-width: 780px; margin: 0 auto; }

.lx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d8d2c2;
}

.lx-hero__eyebrow svg { color: var(--gold, #b4a886); }

.lx-hero__title {
  font-family: var(--display, "Montserrat", system-ui, sans-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 20px 0 0;
  color: #fff;
}

.lx-hero__title em { font-style: normal; color: var(--gold, #b4a886); }

.lx-hero__sub {
  font-size: 16px;
  line-height: 1.6;
  color: #b5b0a4;
  margin: 14px auto 0;
  max-width: 560px;
}

.lx-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

.lx-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
  padding: 16px 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md, 16px);
  background: rgba(255, 255, 255, .04);
}

.lx-hero__stat b {
  display: block;
  font-family: var(--display, "Montserrat", sans-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--gold, #b4a886);
}

.lx-hero__stat span { font-size: 11.5px; color: #9d988c; letter-spacing: .04em; }
.lx-hero__div { width: 1px; height: 34px; background: rgba(255, 255, 255, .12); }

@media (max-width: 560px) {
  .lx-hero { padding: 52px 20px 56px; }
  .lx-hero__stats { gap: 16px; padding: 14px 18px; }
  .lx-hero__div { display: none; }
}

/* ─────────────── page head (light) ─────────────── */
.lx-head { text-align: center; margin-bottom: 32px; }
.lx-head--left { text-align: left; }

.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold-700, #847953);
}

.lx-eyebrow svg { color: var(--gold-700, #847953); }

.lx-title {
  font-family: var(--display, "Montserrat", system-ui, sans-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--black, #1b1a18);
  margin: 12px 0 0;
}

.lx-lede { font-size: 15.5px; line-height: 1.6; color: var(--muted, #706d65); margin: 10px auto 0; max-width: 620px; }
.lx-head--left .lx-lede { margin-left: 0; }

/* ─────────────── section head ─────────────── */
.lx-sec { margin-top: 48px; }
.lx-sec__head { margin-bottom: 18px; }
.lx-sec__head--center { text-align: center; }

.lx-sec__title {
  font-family: var(--display, "Montserrat", sans-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.005em;
  color: var(--black, #1b1a18);
  margin: 8px 0 0;
}

/* ─────────────── cards ─────────────── */
.lx-card {
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8e4db);
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(31, 30, 28, .06);
  padding: 28px;
}

.lx-card--flat { box-shadow: none; }
.lx-card--pad { padding: 32px; }
.lx-card--tight { padding: 20px; }
.lx-card + .lx-card { margin-top: 16px; }

.lx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line, #e8e4db);
}

.lx-card__title {
  font-family: var(--display, "Montserrat", sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--black, #1b1a18);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lx-card__title svg { color: var(--gold-700, #847953); }

@media (max-width: 560px) {
  .lx-card, .lx-card--pad { padding: 22px 18px; }
}

/* ─────────────── grids & shell ─────────────── */
.lx-grid { display: grid; gap: 16px; }
.lx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) { .lx-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .lx-grid--2 { grid-template-columns: 1fr; } }

.lx-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.lx-shell__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 86px; }

@media (max-width: 900px) {
  .lx-shell { grid-template-columns: 1fr; }
  .lx-shell__aside { position: static; }
}

/* ─────────────── form fields ─────────────── */
.lx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lx-fields .span-2 { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .lx-fields { grid-template-columns: 1fr; }
  .lx-fields .span-2 { grid-column: auto; }
}

.lx-field { min-width: 0; }

.lx-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black, #1b1a18);
}

.lx-req { color: #b4514e; margin-left: 3px; }

.lx-in,
.lx-ta,
.lx-select {
  width: 100%;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-xs, 8px);
  background: var(--white, #fff);
  font-family: inherit;
  font-size: 15px;
  color: var(--black, #1b1a18);
  transition: border-color .12s, box-shadow .12s;
}

.lx-in, .lx-select { height: 52px; padding: 0 16px; }
.lx-ta { min-height: 132px; padding: 14px 16px; line-height: 1.6; resize: vertical; }

.lx-in::placeholder, .lx-ta::placeholder { color: var(--muted-2, #b6b1a6); }

.lx-in:focus, .lx-ta:focus, .lx-select:focus {
  outline: none;
  border-color: var(--gold, #b4a886);
  box-shadow: 0 0 0 3px var(--gold-tint, #f5f2ea);
}

.lx-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23847953' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.lx-in--code { text-transform: uppercase; letter-spacing: .22em; font-weight: 600; }
.lx-in--bad, .lx-ta--bad { border-color: #c47b77; }

.lx-help { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--muted, #706d65); }
.lx-help--right { text-align: right; }

.lx-error { display: block; margin-top: 7px; font-size: 12.5px; color: #b4514e; }
.lx-error ul { margin: 0; padding: 0; list-style: none; }

.lx-fieldset + .lx-fieldset { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line, #e8e4db); }

.lx-fieldset__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-700, #847953);
  margin: 0 0 16px;
}

.lx-fieldset__title svg { color: var(--gold-700, #847953); }

/* ─────────────── buttons ─────────────── */
.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-xs, 8px);
  background: var(--white, #fff);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black, #1b1a18);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s;
}

.lx-btn:hover { border-color: var(--muted-2, #b6b1a6); background: var(--paper-2, #f3f1ec); color: var(--black, #1b1a18); text-decoration: none; }

.lx-btn--gold { border-color: var(--gold, #b4a886); background: var(--gold, #b4a886); color: #fff; }
.lx-btn--gold:hover { border-color: var(--gold-600, #9b8e69); background: var(--gold-600, #9b8e69); color: #fff; }

.lx-btn--dark { border-color: rgba(255, 255, 255, .22); background: transparent; color: #fff; }
.lx-btn--dark:hover { border-color: var(--gold, #b4a886); background: rgba(255, 255, 255, .06); color: #fff; }

.lx-btn--full { width: 100%; }
.lx-btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; }
.lx-btn:disabled { opacity: .55; cursor: progress; }

.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.lx-actions__note { flex: 1; min-width: 220px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #706d65); }
.lx-actions__note a { color: var(--gold-700, #847953); }

/* ─────────────── notes ─────────────── */
.lx-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e8e4db);
  border-radius: var(--r-sm, 12px);
  background: var(--paper, #faf9f6);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #706d65);
}

.lx-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--gold-700, #847953); }
.lx-note b, .lx-note strong { color: var(--black, #1b1a18); font-weight: 600; }
.lx-note a { color: var(--gold-700, #847953); font-weight: 600; }
.lx-note + .lx-note, .lx-note + .lx-card, .lx-card + .lx-note { margin-top: 16px; }

.lx-note--gold { border-color: var(--gold-300, #cfc6ac); background: var(--gold-tint, #f5f2ea); }
.lx-note--ok { border-color: #bcd0bd; background: #f2f7f2; }
.lx-note--ok svg { color: #4b7a52; }
.lx-note--warn { border-color: #e4d3a8; background: #fbf6e9; }
.lx-note--warn svg { color: #9a7620; }
.lx-note--err { border-color: #e0bfbd; background: #fbf2f1; }
.lx-note--err svg { color: #b4514e; }

/* ─────────────── badges ─────────────── */
.lx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2, #ddd8cc);
  background: var(--paper, #faf9f6);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted, #706d65);
  white-space: nowrap;
}

.lx-badge--new { border-color: #c3cfdd; background: #f1f5fa; color: #3f5a7a; }
.lx-badge--open { border-color: var(--gold-300, #cfc6ac); background: var(--gold-tint, #f5f2ea); color: var(--gold-700, #847953); }
.lx-badge--pending { border-color: #e4d3a8; background: #fbf6e9; color: #8a6a1c; }
.lx-badge--resolved { border-color: #bcd0bd; background: #f2f7f2; color: #43704a; }
.lx-badge--closed { border-color: var(--line-2, #ddd8cc); background: #f2f1ee; color: #6d6a62; }
.lx-badge--urgent { border-color: #e0bfbd; background: #fbf2f1; color: #a84845; }

/* ─────────────── steps ─────────────── */
.lx-steps { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.lx-step { display: flex; align-items: flex-start; gap: 14px; }

.lx-step__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold, #b4a886);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.lx-step__n--muted { background: var(--paper-2, #f3f1ec); border: 1px solid var(--line-2, #ddd8cc); color: var(--muted, #706d65); }
.lx-step b { display: block; font-size: 14px; font-weight: 600; color: var(--black, #1b1a18); }
.lx-step small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #706d65); }

/* ─────────────── feature / info tiles ─────────────── */
.lx-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line, #e8e4db);
  border-radius: var(--r-md, 16px);
  background: var(--white, #fff);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

a.lx-tile { text-decoration: none; color: inherit; }
a.lx-tile:hover { border-color: var(--gold-300, #cfc6ac); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(31, 30, 28, .28); }

.lx-tile__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--r-xs, 8px);
  background: var(--gold-tint, #f5f2ea);
  color: var(--gold-700, #847953);
}

.lx-tile b { display: block; font-size: 14.5px; font-weight: 600; color: var(--black, #1b1a18); }
.lx-tile p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted, #706d65); }

/* ─────────────── check list ─────────────── */
.lx-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lx-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted, #706d65); }
.lx-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--gold-700, #847953); }
.lx-list b { color: var(--black, #1b1a18); font-weight: 600; }

/* ─────────────── contact rows ─────────────── */
.lx-contact { display: flex; align-items: center; gap: 13px; }
.lx-contact + .lx-contact { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line, #e8e4db); }

.lx-contact__ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold-tint, #f5f2ea);
  color: var(--gold-700, #847953);
}

.lx-contact__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2, #b6b1a6); }
.lx-contact__val { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; color: var(--black, #1b1a18); text-decoration: none; }
a.lx-contact__val:hover { color: var(--gold-700, #847953); }

/* ─────────────── key/value meta ─────────────── */
.lx-meta { display: flex; flex-direction: column; gap: 13px; }
.lx-meta__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lx-meta__k { font-size: 13px; color: var(--muted, #706d65); }
.lx-meta__v { font-size: 13.5px; font-weight: 600; color: var(--black, #1b1a18); text-align: right; }

/* ─────────────── tracking code ─────────────── */
.lx-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border: 1px dashed var(--gold-300, #cfc6ac);
  border-radius: var(--r-sm, 12px);
  background: var(--gold-tint, #f5f2ea);
}

.lx-code__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700, #847953); }
.lx-code__val { display: block; margin-top: 3px; font-size: 18px; font-weight: 700; letter-spacing: .14em; color: var(--black, #1b1a18); word-break: break-all; }

/* ─────────────── conversation thread ─────────────── */
.lx-thread { display: flex; flex-direction: column; gap: 16px; }

.lx-msg { border: 1px solid var(--line, #e8e4db); border-radius: var(--r-md, 16px); background: var(--white, #fff); padding: 16px 18px; }
.lx-msg--agent { border-color: var(--gold-300, #cfc6ac); background: var(--gold-tint, #f5f2ea); }
.lx-msg--sys { border-style: dashed; background: var(--paper, #faf9f6); }

.lx-msg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.lx-msg__who { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--black, #1b1a18); }

.lx-msg__av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-2, #f3f1ec);
  color: var(--muted, #706d65);
  font-size: 12px;
  font-weight: 700;
}

.lx-msg--agent .lx-msg__av { background: var(--gold, #b4a886); color: #fff; }
.lx-msg__when { font-size: 12px; color: var(--muted-2, #b6b1a6); white-space: nowrap; }
.lx-msg__body { font-size: 14px; line-height: 1.65; color: var(--ink, #3b3b3b); white-space: pre-line; }

/* ─────────────── list rows (my tickets) ─────────────── */
.lx-rows { display: flex; flex-direction: column; gap: 12px; }

.lx-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid var(--line, #e8e4db);
  border-radius: var(--r-md, 16px);
  background: var(--white, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, box-shadow .16s;
}

.lx-row:hover { border-color: var(--gold-300, #cfc6ac); box-shadow: 0 10px 26px -16px rgba(31, 30, 28, .3); text-decoration: none; }
.lx-row__main { flex: 1; min-width: 0; }
.lx-row__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-row__num { font-size: 13px; font-weight: 700; letter-spacing: .05em; color: var(--gold-700, #847953); }
.lx-row__title { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--black, #1b1a18); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.lx-row__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted, #706d65); }
.lx-row__go { flex: 0 0 auto; color: var(--muted-2, #b6b1a6); }
.lx-row:hover .lx-row__go { color: var(--gold-700, #847953); }

@media (max-width: 560px) { .lx-row__go { display: none; } }

/* ─────────────── empty state ─────────────── */
.lx-empty { text-align: center; padding: 46px 24px; }

.lx-empty__ic {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gold-tint, #f5f2ea);
  color: var(--gold-700, #847953);
}

.lx-empty b { display: block; font-family: var(--display, "Montserrat", sans-serif); font-weight: 500; font-size: 18px; color: var(--black, #1b1a18); }
.lx-empty p { margin: 8px auto 20px; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--muted, #706d65); }

/* ─────────────── pager ─────────────── */
.lx-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
.lx-pager__now { font-size: 13px; color: var(--muted, #706d65); }

/* ─────────────── filters bar ─────────────── */
.lx-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
@media (max-width: 860px) { .lx-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lx-filters { grid-template-columns: 1fr; } }

/* ─────────────── FAQ (native details) ─────────────── */
.lx-faq { display: flex; flex-direction: column; gap: 10px; }

.lx-faq__item { border: 1px solid var(--line, #e8e4db); border-radius: var(--r-sm, 12px); background: var(--white, #fff); overflow: hidden; transition: border-color .16s; }
.lx-faq__item[open] { border-color: var(--gold-300, #cfc6ac); }

.lx-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black, #1b1a18);
  cursor: pointer;
  list-style: none;
}

.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q svg { flex: 0 0 auto; color: var(--gold-700, #847953); transition: transform .18s; }
.lx-faq__item[open] .lx-faq__q svg { transform: rotate(180deg); }
.lx-faq__a { padding: 0 20px 18px; font-size: 14px; line-height: 1.65; color: var(--muted, #706d65); }

/* ─────────────── misc ─────────────── */
.lx-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted, #706d65); margin-bottom: 14px; }
.lx-crumb a { color: var(--muted, #706d65); text-decoration: none; }
.lx-crumb a:hover { color: var(--gold-700, #847953); }
.lx-crumb svg { color: var(--muted-2, #b6b1a6); }

.lx-divider { height: 1px; background: var(--line, #e8e4db); margin: 26px 0; }
.lx-center { text-align: center; }
.lx-mt { margin-top: 22px; }

.lx-actions--center { justify-content: center; }
.lx-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 10px; }
.lx-help--bad { color: #b4514e; }
.lx-sec--narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.lx-grid > .lx-contact + .lx-contact { margin-top: 0; padding-top: 0; border-top: 0; }
.lx-badge--in_progress { border-color: var(--gold-300, #cfc6ac); background: var(--gold-tint, #f5f2ea); color: var(--gold-700, #847953); }
.lx-badge--pending_customer { border-color: #e4d3a8; background: #fbf6e9; color: #8a6a1c; }
.lx-mb { margin-bottom: 16px; }

/* ─────────────── hero search ─────────────── */
.lx-search {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 30px auto 0;
}

.lx-search__ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #8d8779; pointer-events: none; display: grid; }

.lx-search__in {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px 0 50px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-xs, 8px);
  background: rgba(255, 255, 255, .07);
  font-family: inherit;
  font-size: 15px;
  color: #fff;
}

.lx-search__in::placeholder { color: #8d8779; }
.lx-search__in:focus { outline: none; border-color: var(--gold, #b4a886); background: rgba(255, 255, 255, .1); }
.lx-search .lx-btn { height: 52px; }

@media (max-width: 560px) {
  .lx-search { flex-direction: column; }
  .lx-search .lx-btn { width: 100%; }
}

/* ─────────────── link lists ─────────────── */
.lx-links { display: flex; flex-direction: column; gap: 2px; }

.lx-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: var(--r-xs, 8px);
  font-size: 13.5px;
  color: var(--ink, #3b3b3b);
  text-decoration: none;
  transition: background .14s, color .14s;
}

.lx-link:hover { background: var(--gold-tint, #f5f2ea); color: var(--gold-700, #847953); text-decoration: none; }
.lx-link svg { flex: 0 0 auto; color: var(--muted-2, #b6b1a6); }
.lx-link:hover svg { color: var(--gold-700, #847953); }
.lx-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lx-span-all { grid-column: 1 / -1; }

/* ─────────────── article prose ─────────────── */
.lx-prose { font-size: 15.5px; line-height: 1.75; color: var(--ink, #3b3b3b); }
.lx-prose > :first-child { margin-top: 0; }
.lx-prose h2, .lx-prose h3 { font-family: var(--display, "Montserrat", sans-serif); font-weight: 500; color: var(--black, #1b1a18); margin: 28px 0 10px; }
.lx-prose h2 { font-size: 20px; }
.lx-prose h3 { font-size: 17px; }
.lx-prose h4 { font-size: 15px; font-weight: 600; color: var(--black, #1b1a18); margin: 22px 0 8px; }
.lx-prose p { margin: 12px 0; }
.lx-prose ul, .lx-prose ol { margin: 12px 0; padding-left: 22px; }
.lx-prose li { margin: 6px 0; }
.lx-prose a { color: var(--gold-700, #847953); text-decoration: underline; }
.lx-prose a:hover { color: var(--gold-600, #9b8e69); }
.lx-prose strong { color: var(--black, #1b1a18); font-weight: 600; }
.lx-prose code { padding: 2px 6px; border-radius: 5px; background: var(--paper-2, #f3f1ec); font-size: 13.5px; }
.lx-prose img { max-width: 100%; height: auto; border-radius: var(--r-sm, 12px); }
.lx-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.lx-prose th, .lx-prose td { padding: 9px 12px; border: 1px solid var(--line, #e8e4db); text-align: left; }
.lx-prose th { background: var(--paper, #faf9f6); font-weight: 600; color: var(--black, #1b1a18); }

/* ─────────────── one-time code ─────────────── */
.lx-otp { display: flex; justify-content: center; gap: 10px; margin: 4px 0 22px; }

.lx-otp__in {
  width: 52px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-xs, 8px);
  background: var(--white, #fff);
  font-family: var(--display, "Montserrat", sans-serif);
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  color: var(--black, #1b1a18);
  transition: border-color .14s, box-shadow .14s, background .14s;
}

.lx-otp__in:focus { outline: none; border-color: var(--gold, #b4a886); box-shadow: 0 0 0 3px var(--gold-tint, #f5f2ea); }
.lx-otp__in.is-filled { border-color: var(--gold-300, #cfc6ac); background: var(--gold-tint, #f5f2ea); }
.lx-otp__in.is-error { border-color: #c47b77; background: #fbf2f1; }

@media (max-width: 420px) {
  .lx-otp { gap: 7px; }
  .lx-otp__in { width: 44px; height: 54px; font-size: 19px; }
}

.lx-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e8e4db);
  border-radius: var(--r-sm, 12px);
  background: var(--paper, #faf9f6);
  font-size: 13px;
  color: var(--muted, #706d65);
}

.lx-countdown b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--black, #1b1a18); }
.lx-countdown.is-low b { color: #b4514e; }
.lx-countdown svg { color: var(--gold-700, #847953); }

/* ─────────────── password field + strength ─────────────── */
.lx-field--pw { position: relative; }
.lx-field--pw .lx-in { padding-right: 46px; }

.lx-eye {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted-2, #b6b1a6);
  cursor: pointer;
}

.lx-eye:hover { color: var(--muted, #706d65); }

.lx-strength { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line, #e8e4db); border-radius: var(--r-sm, 12px); background: var(--paper, #faf9f6); }
.lx-strength__bar { height: 5px; border-radius: 999px; background: var(--line-2, #ddd8cc); overflow: hidden; }
.lx-strength__fill { height: 100%; width: 0; border-radius: 999px; background: var(--gold, #b4a886); transition: width .25s, background .25s; }
.lx-strength[data-level="1"] .lx-strength__fill, .lx-strength[data-level="2"] .lx-strength__fill { background: #c47b77; }
.lx-strength[data-level="3"] .lx-strength__fill { background: #c9922f; }
.lx-strength[data-level="4"] .lx-strength__fill, .lx-strength[data-level="5"] .lx-strength__fill { background: #4b7a52; }
.lx-strength__lbl { margin: 10px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #706d65); }

.lx-reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.lx-reqs li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted-2, #b6b1a6); }
.lx-reqs li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.lx-reqs li.is-met { color: #4b7a52; }

@media (max-width: 480px) { .lx-reqs { grid-template-columns: 1fr; } }

/* ─────────────── inline text button ─────────────── */
.lx-linkbtn {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-700, #847953);
  cursor: pointer;
}

.lx-linkbtn:hover { color: var(--gold-600, #9b8e69); }
.lx-linkbtn:disabled { color: var(--muted-2, #b6b1a6); cursor: default; }

.lx-foot { text-align: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line, #e8e4db); font-size: 13.5px; color: var(--muted, #706d65); }
.lx-foot a { color: var(--gold-700, #847953); font-weight: 600; text-decoration: none; }
.lx-foot a:hover { color: var(--gold-600, #9b8e69); }

/* ─────────────── star rating (CSS-only, radio-backed) ─────────────── */
.lx-stars { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
.lx-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.lx-stars label {
  display: grid;
  place-items: center;
  padding: 3px;
  color: var(--line-2, #ddd8cc);
  cursor: pointer;
  transition: color .12s, transform .12s;
}

.lx-stars label:hover,
.lx-stars label:hover ~ label,
.lx-stars input:checked ~ label { color: var(--gold, #b4a886); }
.lx-stars label:hover { transform: scale(1.12); }
.lx-stars input:focus-visible + label { outline: 2px solid var(--gold, #b4a886); outline-offset: 2px; border-radius: 4px; }

.lx-ratingrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lx-ratingrow__hint { font-size: 13px; color: var(--muted, #706d65); }

.lx-stars--static { flex-direction: row; }
.lx-stars--static span { display: grid; place-items: center; color: var(--line-2, #ddd8cc); }
.lx-stars--static span.is-on { color: var(--gold, #b4a886); }

/* ─────────────── filter chips ─────────────── */
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.lx-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: 999px;
  background: var(--white, #fff);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted, #706d65);
  text-decoration: none;
  transition: border-color .14s, background .14s, color .14s;
}

.lx-chip:hover { border-color: var(--gold-300, #cfc6ac); color: var(--black, #1b1a18); text-decoration: none; }
.lx-chip.is-on { border-color: var(--gold, #b4a886); background: var(--gold-tint, #f5f2ea); color: var(--gold-700, #847953); }

.lx-badge--reviewed { border-color: #c3cfdd; background: #f1f5fa; color: #3f5a7a; }
.lx-badge--actioned { border-color: #bcd0bd; background: #f2f7f2; color: #43704a; }
.lx-badge--archived { border-color: var(--line-2, #ddd8cc); background: #f2f1ee; color: #6d6a62; }
.lx-stars label.is-on { color: var(--gold, #b4a886); }