/* ─── landing.css ──────────────────────────────────────────────────────────
   Shared shell for the free-tool calculators and SEO guides. Sits on
   site.css for tokens, header/footer, hero primitives, .faq, .final-cta
   and buttons.

   The pages this serves all follow the same skeleton:
     hero (eyebrow + h1 + sub + 2 CTAs)
     stats bar (3 quick value props)
     definition card (with an optional inline formula)
     calculator box (calculator pages only)
     feature grid (3-card explainer)
     compare cards (bad-vs-good pair)
     platform grid (4 broker links)
     FAQ + final CTA + footer
   ─────────────────────────────────────────────────────────────────────── */

/* HERO eyebrow pill --------------------------------------------------- */
.lp-badge {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(166, 128, 255, .08);
    border: 1px solid rgba(166, 128, 255, .25);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 22px;
}

/* STATS bar (3 columns) ---------------------------------------------- */
.lp-stats {
    max-width: 1080px;
    margin: 64px auto 0;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.lp-stat {
    padding: 22px 22px 20px;
    text-align: center;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--head);
    letter-spacing: -.5px;
    line-height: 1.05;
}
.lp-stat-label { font-size: 12.5px; color: var(--accent-2); margin-top: 6px; font-weight: 600; letter-spacing: .04em; }

/* SECTION primitives -------------------------------------------------- */
.lp-section { max-width: 1080px; margin: 96px auto 0; padding: 0 24px; }
.lp-section-head { text-align: center; margin-bottom: 40px; }
.lp-section-head .sec-label { margin-bottom: 14px; }
.lp-section-head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -1.1px; color: var(--head); margin-bottom: 14px; line-height: 1.12; }
.lp-section-head p { font-size: 16px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.6; }

/* DEFINITION card with optional formula ------------------------------ */
.lp-def {
    max-width: 760px; margin: 0 auto; padding: 30px 32px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-def p { font-size: 15.5px; color: var(--text); line-height: 1.7; margin-bottom: 14px; }
.lp-def p:last-child { margin-bottom: 0; }
.lp-def p strong { color: var(--head); font-weight: 600; }
.lp-formula {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(166, 128, 255, .07);
    border: 1px solid rgba(166, 128, 255, .25);
    color: var(--head);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
    text-align: center;
    letter-spacing: .01em;
}

/* CALCULATOR box ----------------------------------------------------- */
.lp-calc {
    max-width: 880px; margin: 0 auto; padding: 30px 32px 28px;
    border-radius: 22px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(166, 128, 255, .06), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(166, 128, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-calc-title { font-size: 18px; font-weight: 700; color: var(--head); margin-bottom: 4px; }
.lp-calc-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; line-height: 1.55; }

.lp-calc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.lp-calc-field { display: flex; flex-direction: column; }
.lp-calc-label { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; letter-spacing: .02em; }
.lp-calc-input,
.lp-calc-select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--head);
    font-family: inherit;
    transition: border-color .15s, background .15s;
    width: 100%;
}
.lp-calc-input:focus,
.lp-calc-select:focus {
    outline: none;
    border-color: rgba(166, 128, 255, .55);
    background: rgba(166, 128, 255, .04);
}

.lp-calc-result { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.lp-calc-res {
    padding: 16px 14px;
    text-align: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .05);
}
.lp-calc-res-val { font-size: 20px; font-weight: 800; color: var(--accent-2); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.lp-calc-res-lbl { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

.lp-calc-hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .05); }
.lp-calc-hint code {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 1px 6px;
    border-radius: 5px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--head);
}

/* FEATURE grid (3 cards) --------------------------------------------- */
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-feat {
    padding: 26px 24px 24px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s, transform .25s;
}
.lp-feat:hover { border-color: rgba(166, 128, 255, .32); transform: translateY(-3px); }
.lp-feat-ico {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(108, 99, 255, .12);
    border: 1px solid rgba(108, 99, 255, .25);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.lp-feat-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-feat h3 { font-size: 17px; font-weight: 700; color: var(--head); margin-bottom: 8px; letter-spacing: -.2px; }
.lp-feat p { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* COMPARE cards (bad vs good) ---------------------------------------- */
.lp-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lp-compare-card {
    padding: 26px 26px 26px;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lp-compare-card.good { border-color: rgba(166, 128, 255, .3); background-image: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(166, 128, 255, .06), transparent 70%), linear-gradient(180deg, #181818 0%, #0d0d0d 100%); }
.lp-compare-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.lp-compare-card.good .lp-compare-label { color: var(--accent-2); }
.lp-compare-title { font-size: 19px; font-weight: 700; color: var(--head); margin-bottom: 18px; letter-spacing: -.3px; }
.lp-compare-list { display: flex; flex-direction: column; gap: 11px; }
.lp-compare-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--text); line-height: 1.5;
}
.lp-compare-item svg { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-compare-card:not(.good) .lp-compare-item svg { stroke: #f87171; }
.lp-compare-card.good .lp-compare-item svg { stroke: var(--accent-2); }

/* PLATFORM cards (4 broker links) ------------------------------------ */
.lp-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-platform {
    display: flex; flex-direction: column;
    padding: 22px 22px 22px;
    text-decoration: none;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: border-color .25s, transform .25s;
}
.lp-platform:hover { border-color: rgba(166, 128, 255, .32); transform: translateY(-3px); }
.lp-platform-logo { height: 24px; width: auto; display: block; margin-bottom: 14px; }
.lp-platform-title { font-size: 16px; font-weight: 700; color: var(--head); margin-bottom: 6px; letter-spacing: -.2px; }
.lp-platform-desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; margin-bottom: 14px; }
.lp-platform-link { font-size: 12.5px; font-weight: 600; color: var(--accent-2); letter-spacing: .03em; }

/* GUIDE-specific blocks ---------------------------------------------- */
/* Numbered list of "what it records" / steps */
.lp-list-num {
    max-width: 760px; margin: 0 auto;
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
}
.lp-list-num > li {
    padding: 20px 22px;
    border-radius: 14px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .03), transparent 70%),
        linear-gradient(180deg, #181818 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 255, 255, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: flex-start;
}
.lp-list-num-mark {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(166, 128, 255, .1);
    border: 1px solid rgba(166, 128, 255, .35);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    margin-top: 2px;
}
.lp-list-num h3 { font-size: 16px; font-weight: 700; color: var(--head); margin-bottom: 6px; letter-spacing: -.2px; }
.lp-list-num p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* "Hub" grid - related-pages tiles (used on guides like /what-is-a-trading-journal) */
.lp-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-hub-tile {
    padding: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lp-hub-tile:hover { border-color: rgba(166, 128, 255, .35); background: rgba(166, 128, 255, .05); transform: translateY(-2px); }
.lp-hub-preview {
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .015);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
}
.lp-hub-body { padding: 16px 20px 20px; }
.lp-hub-tile h3 { font-size: 15px; font-weight: 700; color: var(--head); margin: 0 0 4px; }
.lp-hub-tile p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.lp-hub-tile-arrow { font-size: 12.5px; color: var(--accent-2); margin-top: 8px; display: inline-block; }

/* ─── Feature pages (/features/*) ─────────────────────────────────────── */
.feat-hero {
    text-align: center; max-width: 780px; margin: 0 auto; padding: 80px 24px 44px;
    position: relative; z-index: 1;
}
.feat-hero .sec-label { margin-bottom: 18px; }
.feat-hero h1 {
    font-size: clamp(36px, 5.5vw, 62px); font-weight: 800; letter-spacing: -2px;
    line-height: 1.06; color: var(--head); margin-bottom: 20px;
}
.feat-hero p {
    font-size: 17px; color: var(--muted); line-height: 1.65;
    max-width: 580px; margin: 0 auto 34px;
}
.feat-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }

/* Glow that sits between hero and app frame */
.feat-glow {
    position: relative; height: 0; z-index: 0;
    overflow: visible; pointer-events: none;
}
.feat-glow::after {
    content: ''; position: absolute; top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 240px;
    background: radial-gradient(ellipse at center, rgba(108, 99, 255, .22) 0%, transparent 68%);
}

/* Full-width app mockup showcase. The .app-frame > .app-window inside
   uses the same desktop-locked + transform-scaled treatment as the
   homepage demo, so feature mockups look like a desktop computer view
   at every viewport width. Padding 0 20px matches the homepage so the
   transform formula (100vw - 40px) lands the right scale. */
.feat-app-showcase { max-width: 1180px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }
.feat-app-showcase .app-frame {
    box-shadow: 0 40px 100px rgba(0, 0, 0, .55),
                0 0 80px rgba(108, 99, 255, .08);
}

/* ─── Alternating feature splits (Resend-style) ─── */
.feat-split {
    max-width: 1140px; margin: 120px auto 0; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.feat-split.reverse .feat-split-visual { order: -1; }
.feat-split-label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-2); margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
}
.feat-split-label::before { content: ''; width: 20px; height: 1px; background: var(--accent-2); display: block; flex-shrink: 0; }
.feat-split-text h2 {
    font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -1.2px;
    line-height: 1.1; color: var(--head); margin-bottom: 16px;
}
.feat-split-text p { font-size: 15.5px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.feat-split-checks { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.feat-split-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.5; }
.feat-split-checks li svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.feat-split-visual {
    background: linear-gradient(180deg, #1e1e21 0%, #131315 100%);
    border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
    padding: 22px; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* KPI 2×2 layout inside feat-split-visual */
.feat-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feat-kpi-full { grid-column: 1 / -1; }
/* Win/Loss ratio bar */
.feat-ratio-bar {
    height: 6px; background: rgba(239,68,68,.2); border-radius: 3px; margin: 18px 0 8px; overflow: hidden;
}
.feat-ratio-fill { height: 100%; background: var(--green); border-radius: 3px; }
.feat-ratio-note { font-size: 12.5px; color: var(--muted); }

/* Responsive */
/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 900px) {
    .lp-feat-grid { grid-template-columns: 1fr; }
    .lp-compare { grid-template-columns: 1fr; }
    .lp-platforms { grid-template-columns: repeat(2, 1fr); }
    .lp-calc-result { grid-template-columns: repeat(2, 1fr); }
    .lp-hub-grid { grid-template-columns: 1fr; }
    .feat-split { grid-template-columns: 1fr; gap: 40px; margin-top: 80px; }
    .feat-split.reverse .feat-split-visual { order: 0; }
    .feat-kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .lp-stats { grid-template-columns: 1fr; }
    .lp-platforms { grid-template-columns: 1fr; }
    .lp-calc-grid { grid-template-columns: 1fr; }
    .lp-calc-result { grid-template-columns: 1fr; }
    .lp-calc { padding: 24px 20px 22px; }
    .lp-section { margin-top: 64px; }
    .feat-split { margin-top: 60px; gap: 28px; }
    .feat-hero { padding: 60px 20px 36px; }
}