:root {
    --lm-grad: linear-gradient(135deg, #8a4fff 0%, #b44cff 50%, #ff4ecd 100%);
    --lm-grad-h: linear-gradient(90deg, #b44cff, #ff4ecd);
    --lm-card-bg: rgba(255,255,255,0.04);
    --lm-card-border: rgba(255,255,255,0.1);
    --lm-text-2: rgba(255,255,255,0.78);
    --lm-text-3: rgba(255,255,255,0.55);
    --lm-purple: #8a4fff;
}

/* Remove dot background for this page — solid dark base instead */
body {
    background-image: none !important;
    background-color: #0d0d1a !important;
}

.lm-shell { max-width: 860px; margin: 0 auto; padding: 0 18px 130px; }

/* --- Badge (12 → 14px, padding up 15%) --- */
.lm-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 15px; border-radius: 999px;
    background: var(--lm-grad); color: #fff;
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* --- H1: unchanged per request --- */
.lm-h1 {
    font-size: 34px; line-height: 1.12;
    margin: 14px 0 10px; font-weight: 800;
    letter-spacing: -0.03em;
}

.lm-grad-text {
    background: var(--lm-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Lede (16 → 18px) --- */
.lm-lede { color: var(--lm-text-2); font-size: 18px; max-width: 44rem; margin: 0; }

.lm-hero-actions { display: flex; gap: 12px; margin-top: 21px; flex-wrap: wrap; }

/* --- Buttons (14 → 16px, padding up 15%) --- */
.lm-btn-primary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 23px; border-radius: 14px; font-weight: 700;
    text-decoration: none; border: none;
    background: var(--lm-grad); color: #fff;
    cursor: pointer; font-size: 16px;
    box-shadow: 0 8px 24px rgba(138,79,255,0.3);
}
.lm-btn-primary:hover { color: #fff; opacity: 0.92; }

.lm-btn-secondary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 23px; border-radius: 14px; font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: #f1f1f1;
    cursor: pointer; font-size: 16px;
}
.lm-btn-secondary:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* --- Sections --- */
.lm-section { padding: 25px 0; }

/* --- H2 (22 → 25px) --- */
.lm-h2 { font-size: 25px; font-weight: 700; margin: 0 0 9px; letter-spacing: -0.02em; }

/* --- Section intro (15 → 17px) --- */
.lm-section-intro { color: rgba(255,255,255,0.7); margin: 0 0 18px; font-size: 17px; }

/* --- Tool card (padding up 15%) --- */
.lm-tool-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px; padding: 23px;
    position: relative; overflow: hidden;
}
.lm-tool-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 4px; background: var(--lm-grad);
}

/* --- Tool card heading (prominent, gradient) --- */
.lm-tool-heading {
    font-size: 26px; font-weight: 800; margin: 0 0 10px;
    letter-spacing: -0.02em;
    background: var(--lm-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lm-tool-heading i {
    -webkit-text-fill-color: initial;
    background: none;
}

/* --- Label (11 → 13px) --- */
.lm-label {
    display: block; margin-bottom: 12px;
    color: var(--lm-text-3); text-transform: uppercase;
    letter-spacing: 0.05em; font-size: 13px; font-weight: 700;
}
.lm-label-accent { color: var(--lm-purple) !important; }

.lm-chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* --- Chips (13 → 15px, padding up 15%) --- */
.lm-chip {
    appearance: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px;
    font-size: 15px; font-weight: 500; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
    transition: all 0.18s ease;
}
.lm-chip.active {
    border-color: rgba(138,79,255,0.9);
    background: rgba(138,79,255,0.32);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(138,79,255,0.4), 0 4px 16px rgba(138,79,255,0.25);
}

/* --- Pattern standalone block (prominent, outside tool card) --- */
.lm-pattern-standalone {
    margin-top: 16px;
    background: rgba(138,79,255,0.13);
    border: 1px solid rgba(138,79,255,0.4);
    border-radius: 18px; padding: 24px;
    display: none;
    position: relative; overflow: hidden;
}
.lm-pattern-standalone::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--lm-grad);
}
.lm-pattern-standalone.show { display: block; animation: lmFade 0.25s ease; }

.lm-pattern-body {
    margin: 0; color: rgba(255,255,255,0.82);
    font-size: 16px; line-height: 1.65;
}
.lm-pattern-hook {
    margin: 12px 0 0; color: rgba(255,255,255,0.82);
    font-size: 16px; line-height: 1.65;
}
.lm-pattern-hook strong { color: #fff; }

/* --- Kicker (11 → 13px) --- */
.lm-kicker {
    font-size: 13px; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--lm-purple); font-weight: 800;
}

/* --- Pattern title (17 → 22px, bigger as standalone) --- */
.lm-pattern-title { margin: 6px 0 10px; font-size: 22px; font-weight: 800; }

/* --- Dream block — more visible --- */
.lm-dream-block {
    margin-top: 16px;
    background: rgba(180,76,255,0.08);
    border: 1px solid rgba(180,76,255,0.35);
    border-radius: 18px; padding: 24px;
    position: relative; overflow: hidden;
    display: none;
}
.lm-dream-block.show { display: block; animation: lmFade 0.25s ease; }
.lm-dream-block::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--lm-grad-h);
}

/* --- Dream block typography --- */
.lm-dream-heading {
    margin: 6px 0 8px; font-size: 20px; font-weight: 700; color: #f1f1f1;
}
.lm-dream-intro {
    margin: 0 0 18px; color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.6;
}

/* --- Large CTA button --- */
.lm-btn-lg {
    padding: 17px 32px; font-size: 18px; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(138,79,255,0.4);
}
.lm-btn-primary:disabled {
    opacity: 0.7; cursor: not-allowed;
}

/* --- Button loading spinner --- */
.lm-btn-spinner {
    display: inline-block;
    width: 17px; height: 17px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lm-spin 0.7s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}
@keyframes lm-spin {
    to { transform: rotate(360deg); }
}

/* --- Textarea (14 → 16px, min-height up 15%) --- */
.lm-textarea {
    width: 100%; min-height: 150px; border-radius: 14px;
    background: rgba(138,79,255,0.06); color: #f1f1f1;
    border: 1.5px solid rgba(138,79,255,0.5);
    padding: 16px; resize: vertical;
    font-family: inherit; font-size: 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lm-textarea:focus {
    border-color: #b44cff;
    box-shadow: 0 0 0 3px rgba(138,79,255,0.22), 0 0 16px rgba(180,76,255,0.18);
}
.lm-textarea::placeholder { color: var(--lm-text-3); }

/* --- Grids (gap up 15%) --- */
.lm-grid { display: grid; gap: 14px; }
.lm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- Panels (padding up 15%, 13 → 15px body, 15 → 17px heading) --- */
.lm-panel {
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-card-border);
    border-radius: 16px; padding: 18px;
}
.lm-panel h3 { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.lm-panel p { margin: 0; color: rgba(255,255,255,0.7); font-size: 15px; }

/* --- Icon boxes (40 → 46px, icon 18 → 21px) --- */
.lm-icon-box {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px; font-size: 21px;
}
.lm-icon-box.red    { background: rgba(234,102,102,.14); color: #ea6666; }
.lm-icon-box.amber  { background: rgba(234,183,102,.14); color: #eab766; }
.lm-icon-box.blue   { background: rgba(138,79,255,.14);  color: #8a4fff; }
.lm-icon-box.violet { background: rgba(180,76,255,.14);  color: #b44cff; }
.lm-icon-box.green  { background: rgba(102,200,130,.14); color: #66c882; }

/* Full-width panel in a 2-col grid */
.lm-panel--wide { grid-column: 1 / -1; }

/* --- Tags (13 → 15px, padding up 15%) --- */
.lm-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.lm-tag {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--lm-card-bg); color: rgba(255,255,255,0.7);
    border: 1px solid var(--lm-card-border);
    border-radius: 12px; padding: 10px 14px; font-size: 15px;
}

/* --- Reflection block (padding up 15%) --- */
.lm-reflection {
    background: rgba(138,79,255,0.1);
    border: 1px solid rgba(138,79,255,0.25);
    border-left: 3px solid var(--lm-purple);
    border-radius: 0 16px 16px 0; padding: 18px;
    margin-top: 16px;
}

/* --- Trust items (padding up 15%, font up 15%) --- */
.lm-trust-item {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-card-border);
    border-radius: 16px; padding: 15px 18px;
}
.lm-trust-item i { color: var(--lm-purple); font-size: 21px; margin-top: 2px; flex-shrink: 0; }
.lm-trust-item strong { color: #f1f1f1; font-size: 16px; }
.lm-trust-item p { margin: 3px 0 0; color: rgba(255,255,255,0.65); font-size: 15px; }

/* --- FAQ (padding up 15%, font up 15%) --- */
.lm-faq-item {
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-card-border);
    border-radius: 16px; padding: 18px;
    margin-bottom: 12px; cursor: pointer;
}
.lm-faq-header {
    display: flex; justify-content: space-between;
    align-items: center; gap: 14px;
}
.lm-faq-header h3 { margin: 0; font-size: 17px; font-weight: 600; color: #f1f1f1; }
.lm-faq-header i {
    color: rgba(255,255,255,0.45); flex-shrink: 0;
    transition: transform 0.2s;
}
.lm-faq-item.open .lm-faq-header i { transform: rotate(180deg); }
.lm-faq-body {
    display: none; margin-top: 12px;
    color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.6;
}
.lm-faq-item.open .lm-faq-body { display: block; }

/* --- Related link cards (font up 15%, padding up 15%) --- */
.lm-link-card {
    display: block; text-decoration: none;
    background: var(--lm-card-bg);
    border: 1px solid var(--lm-card-border);
    border-radius: 16px; padding: 18px; color: #f1f1f1;
}
.lm-link-card:hover { color: #fff; border-color: rgba(255,255,255,0.18); }
.lm-link-card strong { display: block; margin-bottom: 5px; font-size: 16px; }
.lm-link-card p { margin: 0; color: rgba(255,255,255,0.65); font-size: 15px; }

.lm-link-card--soon {
    opacity: 0.55;
    cursor: default;
    position: relative;
}
.lm-link-card--soon:hover { border-color: var(--lm-card-border); }
.lm-soon-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(138,79,255,0.25);
    color: rgba(255,255,255,0.7);
    padding: 3px 10px; border-radius: 999px;
    margin-bottom: 8px;
}

/* --- Sticky bar (font up 15%, padding up 15%) --- */
.lm-sticky {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    padding: 12px 23px 16px;
    background: linear-gradient(to top, rgba(13,13,26,.98), rgba(13,13,26,.88));
    border-top: 1px solid rgba(255,255,255,0.08);
}
.lm-sticky-inner {
    max-width: 860px; margin: 0 auto;
    display: flex; align-items: center;
    justify-content: center; gap: 12px; flex-wrap: wrap;
}
.lm-sticky small { color: rgba(255,255,255,0.5); font-size: 14px; }

@keyframes lmFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .lm-grid-2 { grid-template-columns: 1fr; }
    .lm-h1 { font-size: 26px; }
    .lm-hero-actions { flex-direction: column; }
    .lm-sticky-inner { flex-direction: column; text-align: center; }
    .lm-textarea { min-height: 225px; }

    /* 10% text scale-up on mobile (excludes buttons and h1) */
    .lm-section-intro,
    .lm-pattern-body,
    .lm-pattern-hook,
    .lm-dream-intro,
    .lm-panel p,
    .lm-panel li,
    .lm-textarea,
    .lm-pattern-title,
    .lm-dream-heading,
    .lm-tool-heading { font-size: calc(var(--fs, 1em) * 1.1); }

    .lm-section-intro { --fs: 17px; font-size: calc(17px * 1.1); }
    .lm-pattern-body  { --fs: 16px; font-size: calc(16px * 1.1); }
    .lm-pattern-hook  { --fs: 16px; font-size: calc(16px * 1.1); }
    .lm-dream-intro   { --fs: 16px; font-size: calc(16px * 1.1); }
    .lm-textarea      { font-size: calc(16px * 1.1); }
    .lm-pattern-title { font-size: calc(22px * 1.1); }
    .lm-dream-heading { font-size: calc(20px * 1.1); }
    .lm-tool-heading  { font-size: calc(26px * 1.1); }
    .lm-chip          { font-size: calc(15px * 1.1); }
    .lm-label, .lm-kicker { font-size: calc(13px * 1.1); }
}