/* Landing / marketing page — light theme matching premiercodeinc.com
   (Inter, #00a0e3 primary, navy ink, soft shadows). Scoped under body.landing so
   it never touches the dark app UI. Design tokens live in tokens.css. */

body.landing {
    /* Aliases for legacy references; canonical values are in tokens.css. */
    --line: var(--border);
    --tint-2: var(--primary-50);

    margin: 0;
    background: #fff;
    color: var(--ink-soft);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: var(--lh-body);
}

/* Base element rules at ZERO specificity (:where) so component classes
   (.lp-btn-*, .lp-hero h1, .lp-cta h2) always win without !important. Without
   this, `body.landing a` (0,0,1,1) made the nav "Start free trial" button blue
   text on a blue fill, and `body.landing h1` (0,0,1,2) forced the hero/CTA
   headings navy on top of the dark gradient. */
body.landing :where(a) { color: var(--primary); text-decoration: none; }
body.landing :where(h1, h2, h3) { color: var(--ink); letter-spacing: -0.02em; line-height: var(--lh-tight); }
.lp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.lp-btn { display: inline-block; border-radius: var(--radius-pill); padding: var(--btn-pad); font-weight: 600; font-size: var(--btn-fs); cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .12s, background .12s; }
.lp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.lp-btn-lg { padding: 13px 26px; font-size: 16px; }
/* Toned-down depth: subtle neutral rest shadow, let the cyan fill carry it;
   a gentle lift + slightly stronger shadow appears only on hover. */
/* These keep their `body.landing` scope so the white/ink text beats the
   `body.landing :where(a)` base rule (specificity 0,1,1) — :where() zeroes only
   its own contents, so a bare `.lp-btn-primary` (0,1,0) would lose and the fill
   would show same-color text (invisible). Same trap as .lp-logo above. */
body.landing .lp-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(11, 47, 86, .12); }
body.landing .lp-btn-primary:hover { background: var(--primary-700); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 160, 227, .55); }
body.landing .lp-btn-white { background: #fff; color: var(--ink); }
body.landing .lp-btn-white:hover { background: #f1f7fd; color: var(--ink); }
body.landing .lp-btn-outline { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
body.landing .lp-btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lp-btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.lp-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* Keyboard focus rings. Dark contexts (hero / CTA banner) get a white ring so
   it stays visible on the navy mesh. */
body.landing a:focus-visible,
body.landing .lp-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lp-hero .lp-btn:focus-visible,
.lp-cta .lp-btn:focus-visible,
.lp-header .lp-btn-primary:focus-visible { outline-color: #fff; }

/* Header */
.lp-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); }
.lp-header .lp-wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
/* Scoped under body.landing so the two-tone logo (navy "SEO" + blue "Tool")
   beats the zero-ish `body.landing :where(a)` anchor rule above — :where()
   zeroes only its own contents, so that rule still has (0,1,1) specificity and
   would otherwise paint the whole logo blue. */
body.landing .lp-logo { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
body.landing .lp-logo em { color: var(--primary); font-style: normal; }
.lp-nav { display: flex; align-items: center; gap: 24px; }
.lp-nav a { color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.lp-nav a:hover { color: var(--primary); }

/* Signed-in user dropdown in the marketing header (mirrors the app header's
   .user-menu; scoped under body.landing so it beats the base anchor rules and
   works without style.css, which marketing pages don't load). */
body.landing .lp-nav .user-menu { position: relative; }
body.landing .user-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
body.landing .user-menu > summary::-webkit-details-marker { display: none; }
body.landing .user-menu > summary:hover { color: var(--primary); }
body.landing .user-menu .user-email { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.landing .user-menu .caret { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; flex: none; }
body.landing .user-menu[open] > summary .caret { transform: rotate(180deg); }
body.landing .user-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; z-index: 30; }
body.landing .user-menu-panel a, body.landing .user-menu-panel button { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 9px 12px; border-radius: 8px; }
body.landing .user-menu-panel a:hover, body.landing .user-menu-panel button:hover { background: var(--tint); color: var(--primary); text-decoration: none; }
body.landing .user-menu-panel .divider { height: 1px; background: var(--border); margin: 6px; }
/* Nav primary CTA: a subtle white ring + soft shadow keeps it legible against
   both the white (scrolled) header and the dark hero showing through the blur. */
.lp-header .lp-btn-primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 8px -2px rgba(11, 47, 86, .25); }
.lp-header .lp-btn-primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 6px 16px -6px rgba(0, 160, 227, .55); }

/* Hero — rich dark mesh so white text passes AA and it reads high-end. */
.lp-hero {
    background:
        radial-gradient(900px 520px at 80% -10%, rgba(0, 160, 227, .45), transparent 60%),
        radial-gradient(700px 620px at 0% 115%, rgba(113, 242, 223, .14), transparent 55%),
        #0a2540;
    color: #fff;
    padding: 84px 0 96px;
}
.lp-hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 800; margin: 0 0 18px; max-width: 16ch; line-height: 1.05; letter-spacing: -0.03em; }
.lp-hero p.lead { font-size: var(--fs-lead); color: rgba(255, 255, 255, .9); max-width: 56ch; margin: 0 0 28px; }
.lp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lp-hero-note { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .75); }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
/* Cyan eyebrow above the hero headline. */
.lp-hero-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--teal); margin: 0 0 16px; }

/* Hero preview card (a faux rank table) — elevated, premium glass-edged tile. */
.lp-preview { background: #fff; border-radius: 20px; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .7); padding: 18px 20px; color: var(--ink-soft); }
.lp-preview-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 8px; }
.lp-preview-head strong { color: var(--ink); }
.lp-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); background: var(--tint-2); padding: 4px 10px; border-radius: 999px; }
.lp-prow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid #f1f5fb; font-size: 14px; }
.lp-prow:last-child { border-bottom: none; }
.lp-prow .kw { font-weight: 600; color: var(--ink); }
.lp-prow .rank { font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-up { color: #0fae7a; font-weight: 700; font-size: 13px; }
.lp-down { color: #ef5b6b; font-weight: 700; font-size: 13px; }

/* Generic section */
.lp-section { padding: 80px 0; }
.lp-section.tint { background: var(--tint); }
.lp-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.lp-section-head h2 { font-size: 34px; margin: 0 0 12px; }
.lp-section-head p { color: var(--muted); font-size: 17px; margin: 0; }
.lp-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }

/* Feature grid */
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.lp-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lp-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #00a0e3, #0fb4c9); color: #fff; margin-bottom: 16px; }
.lp-ico svg { width: 26px; height: 26px; }
.lp-feature h3 { font-size: 19px; margin: 0 0 8px; }
.lp-feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* How it works */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.lp-step { position: relative; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.lp-step::before { counter-increment: step; content: counter(step); position: absolute; top: -18px; left: 24px; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 14px -4px rgba(0, 160, 227, .6); }
.lp-step h3 { font-size: 18px; margin: 10px 0 6px; }
.lp-step p { margin: 0; color: var(--muted); font-size: 15px; }

/* FAQ */
.lp-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 44px; max-width: 940px; margin: 0 auto; }
.lp-faq-item h3 { font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.lp-faq-item p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

/* Pricing */
.lp-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.lp-plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-md); }
.lp-plan.popular { border-color: var(--primary); box-shadow: var(--shadow-lg); position: relative; }
.lp-plan.popular .lp-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
.lp-plan h3 { font-size: 20px; margin: 0 0 6px; }
.lp-plan .desc { color: var(--muted); font-size: 14px; min-height: 40px; margin: 0 0 16px; }
.lp-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.lp-price .amt { font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.lp-price .per { color: var(--muted); font-size: 15px; }
.lp-price-year { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.lp-plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.lp-plan li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-soft); }
.lp-plan li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--primary); font-weight: 800; }
.lp-plan .lp-btn { margin-top: auto; text-align: center; }

/* CTA banner — same rich dark mesh as the hero so its white text passes AA. */
.lp-cta {
    background:
        radial-gradient(900px 520px at 80% -10%, rgba(0, 160, 227, .45), transparent 60%),
        radial-gradient(700px 620px at 0% 115%, rgba(113, 242, 223, .14), transparent 55%),
        #0a2540;
    border-radius: 22px;
    padding: 56px 40px;
    text-align: center;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.lp-cta h2 { color: #fff; font-size: 32px; margin: 0 0 10px; }
.lp-cta p { color: rgba(255, 255, 255, .9); font-size: 17px; margin: 0 0 26px; }

/* Legal / article pages */
.lp-legal { max-width: 760px; margin: 0 auto; padding: 64px 0 72px; }
.lp-legal h1 { font-size: 38px; margin: 0 0 6px; }
.lp-legal h2 { font-size: 22px; margin: 36px 0 10px; }
.lp-legal p, .lp-legal li { color: var(--ink-soft); font-size: 16px; }
.lp-legal ul { padding-left: 22px; margin: 12px 0; }
.lp-legal li { margin-bottom: 8px; }
.lp-legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 28px; }

/* The site footer lives in footer.css (shared by app + marketing pages). */

@media (max-width: 880px) {
    .lp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .lp-hero h1 { font-size: 38px; }
    .lp-grid-3, .lp-steps, .lp-pricing, .lp-faq { grid-template-columns: 1fr; }
    .lp-nav a:not(.lp-btn) { display: none; }
}