/* Content page layer — docs/renewal/pages/member-content.md §5-§7.
   Reading layout for Help/* and user_data/*, campaign pages, the FAQ page
   and the standalone error page. */

/* Reading layout */
.lx-read {
    width: min(100% - (var(--lx-gutter) * 2), 760px);
    margin-inline: auto;
}

.lx-read__head {
    display: grid;
    gap: var(--lx-s-3);
    margin-bottom: var(--lx-s-7);
}

.lx-read__title {
    margin: 0;
    font-size: var(--lx-text-h1);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    letter-spacing: var(--lx-track-heading);
    color: var(--lx-deep);
}

.lx-read__lead {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body-lg);
    line-height: var(--lx-lh-body);
}

.lx-read__h2 {
    margin: var(--lx-s-9) 0 var(--lx-s-5);
    padding-bottom: var(--lx-s-3);
    border-bottom: var(--lx-hairline);
    font-size: var(--lx-text-h2);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

.lx-read__cta {
    margin-top: var(--lx-s-9);
}

.lx-read__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-3);
    margin-top: var(--lx-s-5);
}

.lx-read__footnote {
    margin: var(--lx-s-7) 0 0;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
    text-align: center;
}

/* Long-page table of contents: details so it is collapsible on SP;
   on PC (with .lx-read--toc) it sticks at the side. */
.lx-toc {
    margin-bottom: var(--lx-s-7);
    padding: var(--lx-s-5) var(--lx-s-5) var(--lx-s-4);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-fog);
}

.lx-toc__toggle {
    min-height: var(--lx-touch);
    color: var(--lx-deep);
    font-size: var(--lx-text-h4);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.lx-toc__toggle::-webkit-details-marker {
    display: none;
}

.lx-toc__toggle::after {
    float: right;
    color: var(--lx-muted);
    content: "＋";
}

.lx-read .lx-link,
.lx-campaign a:not(.lx-btn) {
    color: var(--lx-link);
}

.lx-toc .lx-link {
    color: var(--lx-deep);
    font-weight: 500;
}


.lx-toc[open] .lx-toc__toggle::after {
    content: "−";
}

.lx-toc__list {
    display: grid;
    gap: var(--lx-s-1);
    margin: var(--lx-s-3) 0 0;
    padding-inline-start: var(--lx-s-6);
}

.lx-toc__list li {
    margin: 0;
}

.lx-toc__list a {
    display: inline-flex;
    align-items: center;
    min-width: var(--lx-touch);
    min-height: var(--lx-touch);
}

@media (min-width: 1024px) {
    .lx-read--toc {
        width: min(100% - (var(--lx-gutter) * 2), 960px);
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--lx-s-8);
        align-items: start;
    }

    .lx-read--toc .lx-read__head {
        grid-column: 1 / -1;
    }
    .lx-read--toc .lx-import-notice {
        grid-column: 1 / -1;
    }

    .lx-read--toc .lx-toc {
        position: sticky;
        top: calc(var(--lx-header-h) + var(--lx-s-5));
        margin-bottom: 0;
    }
}

/* Prose (legal/privacy text) */
.lx-prose {
    display: grid;
    gap: var(--lx-s-4);
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-prose p {
    margin: 0;
}

.lx-prose h2 {
    margin: var(--lx-s-7) 0 0;
    padding-bottom: var(--lx-s-2);
    border-bottom: var(--lx-hairline);
    font-size: var(--lx-text-h3);
    font-weight: 700;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
}

.lx-prose h3 {
    margin: var(--lx-s-5) 0 0;
    font-size: var(--lx-text-h4);
    font-weight: 700;
    line-height: var(--lx-lh-heading);
    color: var(--lx-ink);
}

.lx-prose ul,
.lx-prose ol {
    margin: 0;
    padding-inline-start: var(--lx-s-6);
}

.lx-prose li + li {
    margin-block-start: var(--lx-s-2);
}

.lx-beginner__facts {
    margin-block: 0 var(--lx-s-7);
}

.lx-beginner-links {
    display: grid;
    gap: var(--lx-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-beginner-links li {
    margin: 0;
}

.lx-terms-section {
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

/* Tradelaw table: allow longer values to wrap cleanly */
.lx-label--tradelaw th {
    width: 11em;
}

.lx-read .lx-label {
    table-layout: fixed;
}

.lx-read .lx-label td {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .lx-read .lx-label,
    .lx-read .lx-label tbody,
    .lx-read .lx-label tr,
    .lx-read .lx-label th,
    .lx-read .lx-label td {
        display: block;
        width: 100%;
    }

    .lx-read .lx-label th,
    .lx-label--tradelaw th {
        width: auto;
        padding: var(--lx-s-3) 0 var(--lx-s-1);
        border-block-end: 0;
    }

    .lx-read .lx-label td {
        padding: 0 0 var(--lx-s-3);
    }
}

/* Feature grid (about page) */
.lx-feature-grid {
    display: grid;
    gap: var(--lx-s-4);
    margin-top: var(--lx-s-7);
}

@media (min-width: 768px) {
    .lx-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lx-feature__title {
    margin: 0 0 var(--lx-s-2);
    font-size: var(--lx-text-h4);
    font-weight: 700;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
}

/* Numbered steps list (order flow, guide) */
.lx-steps-list {
    display: grid;
    gap: var(--lx-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: readstep;
}

.lx-steps-list__item {
    position: relative;
    margin: 0;
    padding: var(--lx-s-2) 0 var(--lx-s-2) calc(var(--lx-touch) + var(--lx-s-4));
    counter-increment: readstep;
}

.lx-steps-list__item::before {
    position: absolute;
    inset-inline-start: 0;
    top: var(--lx-s-2);
    display: grid;
    place-items: center;
    width: var(--lx-touch);
    height: var(--lx-touch);
    border-radius: var(--lx-radius-pill);
    background: var(--lx-deep);
    color: var(--lx-paper);
    font-weight: 700;
    content: counter(readstep);
}

.lx-steps-list__title {
    margin: 0 0 var(--lx-s-1);
    font-size: var(--lx-text-h4);
    font-weight: 700;
    line-height: var(--lx-lh-heading);
    color: var(--lx-ink);
}

.lx-steps-list__text {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

/* Notices with a bullet list inside */
.lx-notice__list {
    margin: var(--lx-s-2) 0 0;
    padding-inline-start: var(--lx-s-5);
}

.lx-notice__list li + li {
    margin-block-start: var(--lx-s-1);
}

/* ── Campaign pages ─────────────────────────────────────── */
.lx-campaign {
    width: min(100% - (var(--lx-gutter) * 2), var(--lx-content-max));
    margin-inline: auto;
}

.lx-campaign__hero {
    display: grid;
    gap: var(--lx-s-4);
    justify-items: center;
    margin-bottom: var(--lx-s-9);
    padding: var(--lx-s-10) var(--lx-gutter);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-deep);
    color: var(--lx-paper);
    text-align: center;
}

.lx-campaign__badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-inline: 0;
    color: rgba(150, 205, 196, 0.95);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
}

.lx-campaign__title {
    margin: 0;
    font-size: var(--lx-text-display);
    font-weight: 500;
    line-height: var(--lx-lh-display);
    letter-spacing: var(--lx-track-display);
    color: var(--lx-paper);
    width: 100%;
    min-width: 0;
    max-width: min(100%, 680px);
}

.lx-campaign__sub {
    margin: 0;
    color: var(--lx-mist);
    font-size: var(--lx-text-body-lg);
    line-height: var(--lx-lh-body);
    width: 100%;
    min-width: 0;
    max-width: min(100%, 680px);
}

.lx-campaign__section {
    width: min(100% - (var(--lx-gutter) * 2), 900px);
    margin: 0 auto var(--lx-s-10);
}

.lx-campaign__section-title {
    margin: 0 0 var(--lx-s-6);
    text-align: center;
    font-size: var(--lx-text-h2);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
}

.lx-campaign__steps {
    display: grid;
    gap: var(--lx-s-4);
}

@media (min-width: 768px) {
    .lx-campaign__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lx-campaign-step {
    display: grid;
    gap: var(--lx-s-3);
    justify-items: center;
    padding: var(--lx-s-6) var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
    text-align: center;
}

.lx-campaign-step__number {
    display: grid;
    place-items: center;
    width: var(--lx-touch);
    height: var(--lx-touch);
    border-radius: var(--lx-radius-pill);
    background: var(--lx-deep);
    color: var(--lx-paper);
    font-weight: 700;
}

.lx-campaign-step__label {
    margin: 0;
    font-size: var(--lx-text-h4);
    font-weight: 700;
    color: var(--lx-ink);
}

.lx-campaign-step__desc {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-campaign__benefits {
    padding: var(--lx-s-8) var(--lx-s-6);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-fog);
}

.lx-campaign-benefits__grid {
    display: grid;
    gap: var(--lx-s-4);
}

@media (min-width: 768px) {
    .lx-campaign-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lx-campaign-benefit {
    display: grid;
    gap: var(--lx-s-2);
    padding: var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
}

.lx-campaign-benefit__title {
    margin: 0;
    font-size: var(--lx-text-body);
    font-weight: 700;
    color: var(--lx-ink);
}

.lx-campaign-benefit__text {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-campaign__cta {
    display: grid;
    gap: var(--lx-s-5);
    justify-items: center;
    margin-bottom: var(--lx-s-10);
    text-align: center;
}

.lx-campaign__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-3) var(--lx-s-6);
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
}

.lx-campaign__trust li {
    margin: 0;
}

/* Referral point cards */
.lx-campaign-points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-4);
    align-items: center;
    justify-content: center;
}

.lx-campaign-points__card {
    display: grid;
    gap: var(--lx-s-2);
    justify-items: center;
    min-width: 200px;
    padding: var(--lx-s-7) var(--lx-s-6);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
}

.lx-campaign-points__label {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
}

.lx-campaign-points__value {
    margin: 0;
    color: var(--lx-ink);
    font-size: var(--lx-text-price-lg);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.lx-campaign-points__value span {
    margin-inline-start: var(--lx-s-1);
    font-size: var(--lx-text-body);
    font-weight: 700;
}

.lx-campaign-points__plus {
    color: var(--lx-muted);
    font-size: var(--lx-text-h2);
    font-weight: 700;
}

/* Conditions box */
.lx-campaign-conditions {
    padding: var(--lx-s-6) var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-fog);
}

.lx-campaign-conditions__title {
    margin: 0 0 var(--lx-s-4);
    font-size: var(--lx-text-h4);
    font-weight: 700;
    color: var(--lx-deep);
}

.lx-campaign-conditions__list {
    margin: 0;
    padding-inline-start: var(--lx-s-5);
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

/* Ranking category anchor pills */
.lx-campaign-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-2);
    justify-content: center;
    margin-bottom: var(--lx-s-7);
}

.lx-campaign-tab {
    display: inline-flex;
    align-items: center;
    min-height: var(--lx-touch);
    padding-inline: var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-body);
    font-size: var(--lx-text-small);
    font-weight: 500;
    text-decoration: none;
}

.lx-campaign-tab:hover,
.lx-campaign-tab.is-active {
    border-color: var(--lx-deep);
    color: var(--lx-deep);
    font-weight: 700;
}

.lx-campaign-category {
    margin-bottom: var(--lx-s-9);
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

.lx-campaign-category__header {
    display: flex;
    gap: var(--lx-s-3);
    align-items: center;
    margin-bottom: var(--lx-s-2);
}

.lx-campaign-category__name {
    margin: 0;
    font-size: var(--lx-text-h3);
    font-weight: 500;
    color: var(--lx-deep);
}

.lx-campaign-category__desc {
    margin: 0 0 var(--lx-s-5);
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-campaign-ranking {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lx-s-4);
    margin-bottom: var(--lx-s-5);
}

@media (min-width: 768px) {
    .lx-campaign-ranking {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lx-campaign-rank-card {
    position: relative;
    display: grid;
    gap: var(--lx-s-2);
    justify-items: center;
    padding: var(--lx-s-6) var(--lx-s-4) var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
    text-align: center;
}

.lx-campaign-rank-card__rank {
    position: absolute;
    top: var(--lx-s-3);
    inset-inline-start: var(--lx-s-3);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--lx-radius-pill);
    background: var(--lx-mist);
    color: var(--lx-deep);
    font-weight: 500;
}

.lx-campaign-rank-card__rank--1 {
    background: var(--lx-deep);
    color: var(--lx-paper);
}

.lx-campaign-rank-card__img {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--lx-radius-card);
    background: var(--lx-fog);
    color: var(--lx-muted);
}

.lx-campaign-rank-card__name {
    margin: 0;
    font-size: var(--lx-text-body);
    font-weight: 700;
    color: var(--lx-ink);
}

.lx-campaign-rank-card__info {
    margin: 0;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

/* ── Bank transfer info page (user_data/payment_info) ───── */
.lx-payinfo {
    width: min(100% - (var(--lx-gutter) * 2), 560px);
    margin-inline: auto;
}

.lx-payinfo__intro {
    margin-bottom: var(--lx-s-6);
}

.lx-payinfo__anchor-grid {
    display: grid;
    gap: var(--lx-s-2);
    margin-bottom: var(--lx-s-5);
}

.lx-payinfo__method-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-payinfo__method-list li {
    display: inline-flex;
    align-items: center;
    min-height: var(--lx-touch);
    padding-inline: var(--lx-s-4);
    border-radius: var(--lx-radius-pill);
    background: var(--lx-mist);
    color: var(--lx-deep);
    font-weight: 700;
}

.lx-payinfo__status {
    display: grid;
    gap: var(--lx-s-3);
    justify-items: center;
    margin-bottom: var(--lx-s-5);
    text-align: center;
}

.lx-payinfo__title {
    margin: 0;
    font-size: var(--lx-text-h1);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
}

.lx-payinfo__text {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-payinfo__deadline {
    margin-bottom: var(--lx-s-5);
}

.lx-payinfo__ref {
    display: grid;
    gap: var(--lx-s-3);
    justify-items: center;
    margin-bottom: var(--lx-s-5);
    padding: var(--lx-s-6) var(--lx-s-5);
    border-radius: var(--lx-radius-card);
    background: var(--lx-deep);
    color: var(--lx-paper);
    text-align: center;
}

.lx-payinfo__ref-label {
    margin: 0;
    color: var(--lx-mist);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

.lx-payinfo__ref-code {
    margin: 0;
    color: var(--lx-paper);
    font-size: var(--lx-text-price-lg);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.lx-payinfo__ref-hint {
    margin: 0;
    color: var(--lx-mist);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

.lx-payinfo__section {
    margin-bottom: var(--lx-s-4);
}

.lx-payinfo__row {
    display: flex;
    gap: var(--lx-s-4);
    align-items: center;
    justify-content: space-between;
    padding: var(--lx-s-3) 0;
    border-bottom: var(--lx-hairline);
}

.lx-payinfo__row:last-child {
    border-bottom: 0;
}

.lx-payinfo__row-label {
    color: var(--lx-muted);
    font-size: var(--lx-text-body);
    flex-shrink: 0;
}

.lx-payinfo__row-value {
    display: flex;
    gap: var(--lx-s-2);
    align-items: center;
    color: var(--lx-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.lx-payinfo__row-value--amount {
    color: var(--lx-deep);
    font-size: var(--lx-text-price);
}

.lx-payinfo__step {
    display: flex;
    gap: var(--lx-s-4);
    margin-bottom: var(--lx-s-4);
}

.lx-payinfo__step:last-child {
    margin-bottom: 0;
}

.lx-payinfo__step-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--lx-radius-pill);
    background: var(--lx-deep);
    color: var(--lx-paper);
    font-weight: 700;
}

.lx-payinfo__step-body strong {
    display: block;
    margin-bottom: var(--lx-s-1);
    color: var(--lx-ink);
    font-size: var(--lx-text-body);
}

.lx-payinfo__step-body span {
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

.lx-payinfo__warn {
    margin-bottom: var(--lx-s-3);
    padding: var(--lx-s-4) var(--lx-s-5);
    border-inline-start: 3px solid var(--lx-error);
    border-radius: 0 var(--lx-radius-card) var(--lx-radius-card) 0;
    background: var(--lx-error-wash);
    color: var(--lx-body);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

.lx-payinfo__warn strong {
    color: var(--lx-error);
}

.lx-payinfo__warn--amber {
    border-inline-start-color: var(--lx-deep);
    background: var(--lx-fog);
}

.lx-payinfo__warn--amber strong {
    color: var(--lx-deep);
}

.lx-payinfo__meta {
    display: flex;
    gap: var(--lx-s-6);
    justify-content: center;
    margin: var(--lx-s-5) 0;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
}

.lx-payinfo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-3);
    justify-content: center;
    margin-top: var(--lx-s-6);
}

.lx-payinfo__toast {
    position: fixed;
    bottom: calc(var(--lx-gutter) + var(--lx-safe-bottom));
    inset-inline: 0;
    z-index: 60;
    width: max-content;
    max-width: calc(100% - (var(--lx-gutter) * 2));
    margin-inline: auto;
    padding: var(--lx-s-3) var(--lx-s-6);
    border-radius: var(--lx-radius-pill);
    background: var(--lx-ink);
    color: var(--lx-paper);
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--lx-s-3));
    transition: opacity var(--lx-dur) var(--lx-ease), transform var(--lx-dur) var(--lx-ease);
}

.lx-payinfo__toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

@media print {
    .lx-header,
    .lx-footer,
    .lx-cookie,
    .lx-breadcrumb-slot,
    .lx-payinfo__actions,
    .lx-payinfo__toast {
        display: none !important;
    }
}

/* ── FAQ page ───────────────────────────────────────────── */
.lx-faq {
    max-width: 760px;
    margin-inline: auto;
}

.lx-faq-page .lx-faq {
    max-width: none;
}

.lx-faq-nav {
    margin-block: var(--lx-s-6) var(--lx-s-8);
}

.lx-faq-page .lx-faq-nav {
    margin-block-start: 0;
}

.lx-faq-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-faq-nav__item {
    margin: 0;
}

.lx-faq-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--lx-s-2);
    min-height: var(--lx-touch);
    padding: 0 var(--lx-s-4);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-ink);
    font-size: var(--lx-text-body);
    font-weight: 700;
    text-decoration: none;
}

.lx-faq-nav__link:hover {
    border-color: var(--lx-deep);
    background: var(--lx-mist);
}

.lx-faq-nav__count {
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    font-weight: 400;
}

.lx-faq__group {
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

.lx-acc {
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

.lx-faq__group + .lx-faq__group {
    margin-block-start: var(--lx-s-9);
}

.lx-faq__heading {
    margin: 0 0 var(--lx-s-4);
    color: var(--lx-deep);
    font-size: var(--lx-text-h2);
    line-height: var(--lx-lh-heading);
    letter-spacing: var(--lx-track-heading);
}

/* ── Contact pages ──────────────────────────────────────── */
.lx-auth {
    width: min(100% - (var(--lx-gutter) * 2), var(--lx-content-max));
    max-width: 480px;
    margin-inline: auto;
}

.lx-member__title,
.lx-auth__title {
    margin: 0;
    font-size: var(--lx-text-h1);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    letter-spacing: var(--lx-track-heading);
    color: var(--lx-deep);
}

.lx-member__lead,
.lx-auth__lead {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-form__card {
    display: grid;
    gap: var(--lx-s-5);
}

.lx-form__actions {
    display: grid;
    gap: var(--lx-s-3);
    justify-items: center;
}

.lx-form__actions .lx-btn--block {
    max-width: 420px;
}

.lx-fieldset {
    display: grid;
    gap: var(--lx-s-4);
    margin: 0;
    padding: 0;
    border: 0;
}

.lx-fieldset__grid {
    display: grid;
    gap: var(--lx-s-4);
}

@media (min-width: 768px) {
    .lx-fieldset__grid--two {
        grid-template-columns: 1fr 1fr;
    }
}

.lx-complete {
    display: grid;
    gap: var(--lx-s-6);
}

.lx-complete__body {
    display: grid;
    gap: var(--lx-s-4);
}

.lx-complete__heading {
    margin: 0;
    font-size: var(--lx-text-h2);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    color: var(--lx-deep);
}

.lx-complete__text {
    margin: 0;
    color: var(--lx-body);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-contact {
    width: min(100% - (var(--lx-gutter) * 2), 720px);
    margin-inline: auto;
}

.lx-contact__head {
    display: grid;
    gap: var(--lx-s-3);
    margin-bottom: var(--lx-s-6);
}

.lx-contact__channels {
    display: grid;
    gap: var(--lx-s-3);
    margin: 0 0 var(--lx-s-5);
}

.lx-contact .lx-form {
    display: grid;
    gap: var(--lx-s-5);
}

.lx-contact .lx-field {
    display: grid;
    gap: var(--lx-s-4);
}

.lx-contact .lx-label {
    table-layout: fixed;
}

.lx-contact .lx-label td {
    overflow-wrap: anywhere;
}


.lx-channel {
    display: flex;
    gap: var(--lx-s-4);
    align-items: center;
    min-height: var(--lx-touch);
    padding: var(--lx-s-4) var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    color: var(--lx-body);
    text-decoration: none;
}

.lx-channel:hover {
    border-color: var(--lx-deep);
    text-decoration: none;
}

.lx-channel__icon {
    display: grid;
    place-items: center;
    width: var(--lx-touch);
    height: var(--lx-touch);
    border-radius: var(--lx-radius-pill);
    background: var(--lx-mist);
    color: var(--lx-deep);
    flex-shrink: 0;
}

.lx-channel__body {
    display: grid;
    gap: var(--lx-s-1);
    min-width: 0;
}

.lx-channel__title {
    margin: 0;
    color: var(--lx-ink);
    font-size: var(--lx-text-body);
    font-weight: 700;
}

.lx-channel__text {
    margin: 0;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
    word-break: auto-phrase;
    text-wrap-style: pretty;
}

.lx-channel__nowrap {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .lx-channel {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 768px) {
    .lx-contact__channels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ExtraAgreeCheck injects this checkbox before Contact's submit button. */
#eac-user-policy-check {
    display: grid;
    grid-template-columns: var(--lx-touch) 1fr;
    gap: var(--lx-s-2);
    align-items: start;
}

#eac-user-policy-check input[type="checkbox"] {
    width: var(--lx-s-5);
    height: var(--lx-s-5);
    margin: 12px;
    accent-color: var(--lx-deep);
}

#eac-user-policy-check label {
    display: block;
    padding-block: 8px;
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

#eac-user-policy-check .lx-field__error,
#eac-user-policy-check .ec-errorMessage {
    grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
    .lx-channel {
        transition: none;
    }
}

/* ── Standalone error page ──────────────────────────────── */
.lx-error {
    display: grid;
    place-items: center;
    min-height: 70vh;
    min-height: 70svh;
    padding: var(--lx-s-9) var(--lx-gutter);
}

.lx-error--checkout {
    place-items: start center;
    min-height: auto;
    padding-block: var(--lx-s-8) var(--lx-s-10);
}

.lx-error__box {
    display: grid;
    gap: var(--lx-s-5);
    justify-items: center;
    max-width: 560px;
    text-align: center;
}

.lx-error__box--checkout {
    align-items: stretch;
    justify-items: stretch;
    width: min(100%, 1040px);
    max-width: none;
    text-align: left;
}

.lx-error__panel {
    display: grid;
    gap: var(--lx-s-5);
    align-content: start;
    padding: var(--lx-card-pad);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-paper);
}

.lx-error__box--checkout .lx-error__head {
    text-align: left;
}

.lx-error__box--checkout .lx-error__head .lx-head__kicker {
    justify-content: flex-start;
}

.lx-error__alert:empty {
    display: none;
}

.lx-error__alert .ec-cartRole__error {
    margin: 0;
}

.lx-error__alert .ec-alert-warning {
    display: grid;
    gap: var(--lx-s-2);
    padding: var(--lx-s-4);
    border-radius: var(--lx-radius-card);
    background: var(--lx-error-wash);
    color: var(--lx-error);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-body);
}

.lx-error__box--checkout .lx-contact-card {
    position: static;
    align-self: stretch;
}

.lx-error__box--checkout .lx-contact-card :focus-visible {
    outline-color: var(--lx-amber);
}

.lx-error__head {
    margin: 0;
    text-align: center;
}

.lx-error__head .lx-head__kicker {
    justify-content: center;
}

.lx-error__head .lx-head__lead {
    max-width: 36rem;
    line-height: var(--lx-lh-body);
}

.lx-error__search {
    width: min(100%, 520px);
}

.lx-error__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lx-s-2);
    justify-content: center;
}

.lx-error__categories a {
    display: inline-flex;
    align-items: center;
    min-height: var(--lx-touch);
    padding: 0 var(--lx-s-4);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-pill);
    color: var(--lx-ink);
    font-size: var(--lx-text-small);
    font-weight: 700;
    text-decoration: none;
}

.lx-error__categories a:hover {
    border-color: var(--lx-deep);
    background: var(--lx-mist);
}

.lx-error__actions {
    display: grid;
    gap: var(--lx-s-3);
    width: 100%;
}

@media (min-width: 768px) {
    .lx-error__box--checkout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    }
}

/* v2 phrase-aware Japanese: CSS first, BudouX fallback from lx.js. */
.lx-read :is(p, h1, h2, h3, li, dd, th, td),
.lx-contact :is(p, h1, h2, h3, li, label),
.lx-campaign :is(p, h1, h2, h3, li),
.lx-payinfo :is(p, h1, h2, h3, li),
.lx-error :is(p, h1, h2, h3, li) {
    word-break: auto-phrase;
    text-wrap-style: pretty;
}

.lx-campaign__hero .lx-head__kicker {
    color: rgba(150, 205, 196, 0.95);
}


.lx-campaign__hero .lx-head__title {
    color: var(--lx-paper);
}

.lx-campaign__hero .lx-head__lead {
    color: var(--lx-on-deep);
}

.lx-import-notice {
    margin-block: 0 var(--lx-s-7);
}

/* ── Guide page (v2.3) ───────────────────────────────────── */
.lx-guide {
    width: min(100% - (var(--lx-gutter) * 2), 1120px);
}

.lx-guide .lx-head__kicker {
    font-size: var(--lx-text-small);
}

.lx-guide__head {
    max-width: 760px;
}

.lx-guide__facts,
.lx-guide__notice {
    grid-column: 1 / -1;
}

.lx-guide__facts {
    margin-block: 0 var(--lx-s-7);
}

.lx-guide-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-paper);
}

.lx-guide-facts .lx-facts__item {
    padding: var(--lx-s-5);
    background: linear-gradient(180deg, var(--lx-fog), var(--lx-paper));
}

.lx-guide-facts .lx-facts__item + .lx-facts__item {
    border-inline-start: var(--lx-hairline);
}

.lx-guide-facts strong {
    color: var(--lx-ink);
    font-size: var(--lx-text-h4);
    font-weight: 700;
    line-height: var(--lx-lh-heading);
}

.lx-guide-facts span {
    color: var(--lx-body);
    font-size: var(--lx-text-small);
    line-height: var(--lx-lh-small);
}

.lx-guide-toc {
    background: var(--lx-wash-sky);
}

.lx-guide__body {
    gap: var(--lx-s-7);
}

.lx-guide-flow,
.lx-guide-section,
.lx-guide-contact {
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-paper);
    padding: var(--lx-s-7);
}

.lx-guide-flow {
    background: var(--lx-wash-mint);
}

.lx-guide-flow .lx-head {
    margin-bottom: var(--lx-s-5);
}

.lx-guide-flow__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
}

.lx-guide-flow__list .lx-steps-list__item {
    padding: var(--lx-s-5);
}

.lx-guide-flow__list .lx-steps-list__item::before {
    position: static;
    width: 40px;
    height: 40px;
    margin-bottom: var(--lx-s-3);
    background: var(--lx-deep);
    color: var(--lx-paper);
}

.lx-guide-flow__list .lx-steps-list__item:nth-child(even) {
    border-inline-start: var(--lx-hairline);
}

.lx-guide-flow__list .lx-steps-list__item:nth-child(n + 3) {
    border-block-start: var(--lx-hairline);
}

.lx-guide-section {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--lx-s-6);
    align-items: start;
    scroll-margin-block-start: calc(var(--lx-header-h) + var(--lx-s-4));
}

.lx-guide-section--mint {
    background: var(--lx-wash-mint);
}

.lx-guide-section--sky {
    background: var(--lx-wash-sky);
}

.lx-guide-section--paper {
    background: var(--lx-paper);
}

.lx-guide-section__copy {
    display: grid;
    gap: var(--lx-s-3);
}

.lx-guide-section__copy {
    grid-row: 1 / span 2;
}

.lx-guide-section__title,
.lx-guide-contact h2 {
    margin: 0;
    color: var(--lx-deep);
    font-size: var(--lx-text-h2);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    letter-spacing: var(--lx-track-heading);
}

.lx-guide-section__copy p,
.lx-guide-contact p {
    margin: 0;
}

.lx-guide-label {
    overflow: hidden;
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
}

.lx-guide-label th {
    width: 8em;
}

.lx-guide-list {
    display: grid;
    gap: var(--lx-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-guide-list li {
    position: relative;
    margin: 0;
    padding-inline-start: var(--lx-s-5);
}

.lx-guide-list li::before {
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--lx-link);
    content: "";
}

.lx-prose .lx-guide-tracking-links {
    display: grid;
    gap: var(--lx-s-2);
    margin: var(--lx-s-2) 0 0;
    padding: 0;
    list-style: none;
}

.lx-prose .lx-guide-tracking-links li {
    padding-inline-start: 0;
}

.lx-prose .lx-guide-tracking-links li + li {
    margin-block-start: 0;
}

.lx-prose .lx-guide-tracking-links li::before {
    content: none;
}

.lx-guide-tracking-links a {
    display: block;
    min-height: var(--lx-touch);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-small);
}



.lx-guide-route {
    align-self: stretch;
    min-height: 168px;
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
    color: var(--lx-deep);
}

.lx-guide-route svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lx-guide-route__rail,
.lx-guide-route__line {
    fill: none;
    stroke-linecap: round;
}

.lx-guide-route__rail {
    stroke: var(--lx-line);
    stroke-width: 2;
    stroke-dasharray: 6 8;
}

.lx-guide-route__line {
    stroke: var(--lx-amber);
    stroke-width: 3;
}

.lx-guide-route__dot {
    fill: var(--lx-paper);
    stroke: var(--lx-link);
    stroke-width: 2;
}

.lx-guide-route__parcel {
    fill: none;
    stroke: var(--lx-deep);
    stroke-width: 2;
    stroke-linejoin: round;
}

.lx-guide-payments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lx-s-3);
}

.lx-guide-payment {
    display: grid;
    gap: var(--lx-s-3);
    min-height: 152px;
    padding: var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
    color: var(--lx-ink);
}

.lx-guide-payment__mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--lx-radius-pill);
    background: var(--lx-mist);
    color: var(--lx-deep);
    font-family: var(--lx-font-mono);
    font-size: var(--lx-text-small);
    font-weight: 500;
}

.lx-guide-contact {
    display: grid;
    gap: var(--lx-s-3);
    background: var(--lx-wash-sky);
}

.lx-prose .lx-guide-contact__links {
    display: grid;
    gap: var(--lx-s-2);
    justify-items: start;
    margin: var(--lx-s-3) 0 0;
    padding: 0;
    list-style: none;
}

.lx-guide-contact__links li {
    margin: 0;
}

.lx-prose .lx-guide-contact__links li + li {
    margin-block-start: 0;
}

.lx-guide__cta {
    margin-top: 0;
}

@media (max-width: 1023px) {
    .lx-guide-facts,
    .lx-guide-flow__list,
    .lx-guide-section,
    .lx-guide-payments {
        grid-template-columns: 1fr 1fr;
    }

    .lx-guide-flow__list .lx-steps-list__item:nth-child(odd),
    .lx-guide-facts .lx-facts__item:nth-child(odd) {
        border-inline-start: 0;
    }

    .lx-guide-flow__list .lx-steps-list__item:nth-child(n + 3),
    .lx-guide-facts .lx-facts__item:nth-child(n + 3) {
        border-block-start: var(--lx-hairline);
    }
}

@media (max-width: 767px) {
    .lx-guide-facts,
    .lx-guide-flow__list,
    .lx-guide-section,
    .lx-guide-payments {
        grid-template-columns: 1fr;
    }

    .lx-guide-facts .lx-facts__item + .lx-facts__item,
    .lx-guide-flow__list .lx-steps-list__item + .lx-steps-list__item {
        border-inline-start: 0;
        border-block-start: var(--lx-hairline);
    }

    .lx-guide-flow,
    .lx-guide-section,
    .lx-guide-contact {
        padding: var(--lx-s-5);
    }

    .lx-guide-section__title,
    .lx-guide-contact h2 {
        font-size: var(--lx-text-h3);
    }

    .lx-guide-route {
        min-height: 136px;
    }

    .lx-guide-section__copy {
        grid-row: auto;
    }
}

/* ── Sitemap page ───────────────────────────────────────── */
.lx-sitemap {
    width: min(100% - (var(--lx-gutter) * 2), 1120px);
}

.lx-sitemap__head {
    max-width: 760px;
}

.lx-sitemap__grid {
    display: grid;
    gap: var(--lx-s-4);
}

.lx-sitemap__card {
    min-width: 0;
    display: grid;
    gap: var(--lx-s-5);
    padding: var(--lx-s-5);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-panel);
    background: var(--lx-paper);
}

.lx-sitemap__card--products {
    background: var(--lx-wash-mint);
}

.lx-sitemap__card--contact {
    background: var(--lx-wash-sky);
}

.lx-sitemap__card-head {
    display: grid;
    gap: var(--lx-s-2);
}

.lx-sitemap__label {
    margin: 0;
    color: var(--lx-link);
    font-family: var(--lx-font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.16em;
}

.lx-sitemap__card h2 {
    margin: 0;
    color: var(--lx-deep);
    font-size: var(--lx-text-h3);
    font-weight: 500;
    line-height: var(--lx-lh-heading);
    letter-spacing: var(--lx-track-heading);
}

.lx-sitemap__links {
    display: grid;
    gap: var(--lx-s-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lx-sitemap__links li {
    margin: 0;
}

.lx-sitemap__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lx-s-3);
    min-height: var(--lx-touch);
    padding: var(--lx-s-2) 0;
    border-bottom: var(--lx-hairline);
    color: var(--lx-ink);
    font-size: var(--lx-text-body);
    line-height: var(--lx-lh-small);
    text-decoration: none;
}

.lx-sitemap__links a::after {
    flex: none;
    margin-left: auto;
    color: var(--lx-muted);
    content: "→";
    transition: transform 180ms var(--lx-ease);
}

.lx-sitemap__links a:hover {
    color: var(--lx-link);
}

.lx-sitemap__links a:hover::after {
    transform: translateX(4px);
}

.lx-sitemap__links--featured {
    gap: var(--lx-s-3);
}

.lx-sitemap__links .lx-sitemap__primary-link,
.lx-sitemap__links .lx-sitemap__tone-link {
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-start;
    row-gap: var(--lx-s-1);
    padding: var(--lx-s-4);
    border: var(--lx-hairline);
    border-radius: var(--lx-radius-card);
    background: var(--lx-paper);
}

.lx-sitemap__links .lx-sitemap__tone-link {
    background: var(--lx-tone-tint, var(--lx-fog));
}

.lx-sitemap__tone-link::before {
    flex: none;
    align-self: center;
    order: 0;
}

.lx-sitemap__primary-link span,
.lx-sitemap__tone-link span {
    flex: 0 1 auto;
    min-width: 0;
    order: 1;
    white-space: nowrap;
    font-weight: 700;
}

.lx-sitemap__primary-link::after,
.lx-sitemap__tone-link::after {
    order: 2;
}

.lx-sitemap__primary-link small,
.lx-sitemap__tone-link small {
    flex: 0 0 100%;
    order: 3;
    min-width: 0;
    overflow-wrap: normal;
    word-break: auto-phrase;
    text-wrap-style: pretty;
    color: var(--lx-muted);
    font-size: var(--lx-text-small);
    font-weight: 400;
}

.lx-sitemap__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lx-s-4);
    margin-top: var(--lx-s-8);
}

@media (min-width: 768px) {
    .lx-sitemap__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lx-sitemap__card--products {
        grid-row: span 2;
    }
}

@media (min-width: 1024px) {
    .lx-sitemap__grid {
        grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* ---------- v3 award pass phase 3: 404 "lost parcel" (2026-10-05) ----------
   The brand's parcel has wandered off its route. Deep teal + kraft only (amber is reserved
   for actions); the parcel sways gently, still under reduced motion. */
.lx-error__art {
  width: min(300px, 82%);
  margin: 0 auto 4px;
}

.lx-error__art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lx-error__arc {
  fill: none;
  stroke: var(--lx-mist);
  stroke-width: 2;
}

.lx-error__route {
  fill: none;
  stroke: var(--lx-link);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
}

.lx-error__origin {
  fill: var(--lx-link);
}

.lx-error__home {
  fill: none;
  stroke: var(--lx-mist);
  stroke-width: 2;
}

/* static brand bar and footer: the 404 stays part of the site without the dynamic partials */
.lx-error__bar {
  display: flex;
  justify-content: center;
  padding: 14px var(--lx-gutter, 16px);
  border-bottom: 1px solid var(--lx-line);
  background: var(--lx-white, #fff);
}

.lx-error__logo img {
  display: block;
  width: 136px;
  height: auto;
}

.lx-error__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--lx-touch);
}

.lx-error__foot {
  padding: 24px var(--lx-gutter, 16px) 32px;
  border-top: 1px solid var(--lx-line);
  color: var(--lx-body);
  font-size: 14px;
  text-align: center;
}

.lx-error__foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 12px;
}

.lx-error__foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lx-touch);
  min-height: var(--lx-touch);
  color: var(--lx-link);
}

.lx-error__foot p {
  margin: 0;
}

.lx-error__parcel rect {
  fill: #cf9f66;
}

.lx-error__parcel .lx-error__tape {
  fill: #a97b45;
}

.lx-error__ask circle {
  fill: var(--lx-deep);
}

.lx-error__ask path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
  .lx-error__parcel {
    animation: lx-error-sway 3.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .lx-error__ask {
    animation: lx-error-bob 3.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@keyframes lx-error-sway {
  0%, 100% { rotate: -6deg; }
  50% { rotate: 4deg; }
}

@keyframes lx-error-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}