/* ===========================================================================
   PLUTOPRICE MARKETING DESIGN SYSTEM - GLOBAL .lp-* styles.
   Used by Landing.razor, TradifyAlternative.razor, and any future marketing
   page. Loaded globally via App.razor (was previously scoped to Landing only
   as Landing.razor.css; promoted to global when a second page needed it).
   All class names are .lp-* prefixed to avoid colliding with app.css.
   =========================================================================== */

.landing-root, .lp-wrap, .lp-nav, .lp-hero, .lp-built, .lp-s,
.lp-show, .lp-final, .lp-footer {
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    color: #1A1208;
}

.lp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.lp-serif {
    font-family: "Fraunces", serif;
    font-weight: 400;
    font-style: italic;
    color: #3D2E1F;
}

.lp-mono {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A6A57;
}

.lp-lead {
    font-size: 21px;
    line-height: 1.45;
    color: #3D2E1F;
    font-weight: 400;
    margin: 0 0 1em;
}

.lp-s-eyebrow {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    color: #155F3F;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* ---- NAV ---- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 243, 232, 0.88);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-nav-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 18px;
    color: #1A1208;
    text-decoration: none;
}

.lp-brand:hover { color: #1A1208; text-decoration: none; }

.lp-logo-mark {
    width: 26px;
    height: 26px;
    display: inline-flex;
    color: #1F8A5B;
    flex: none;
}

.lp-nav-links {
    display: flex;
    gap: 28px;
}

.lp-nav-links a {
    font-size: 14px;
    color: #3D2E1F;
    font-weight: 500;
    text-decoration: none;
}

.lp-nav-links a:hover { color: #1A1208; }

.lp-nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lp-signin {
    font-size: 14px;
    color: #3D2E1F;
    font-weight: 500;
    text-decoration: none;
}

.lp-signin:hover { color: #1A1208; }

/* ---- BUTTONS ---- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    background: #1A1208;
    color: #FFF3E8;
    border: 1px solid #1A1208;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform .15s ease;
}

.lp-btn-accent {
    background: #1F8A5B;
    border-color: #1F8A5B;
    color: #FFF3E8;
}

.lp-btn-ghost {
    background: transparent;
    border: 1px solid rgba(26, 18, 8, 0.12);
    color: #1A1208;
}

.lp-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: #FFF3E8;
}

.lp-btn-ghost:hover { color: #1A1208; }

.lp-btn-lg {
    padding: 14px 22px;
    font-size: 15px;
    border-radius: 10px;
}

.lp-arrow {
    display: inline-block;
    transition: transform .2s;
}

.lp-btn:hover .lp-arrow { transform: translateX(2px); }

/* ---- HEADINGS ---- */
.lp-hero h1, .lp-s h2, .lp-show h2, .lp-final-card h2 {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.lp-hero h1 {
    font-size: 64px;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.lp-s h2, .lp-show h2 { font-size: 44px; line-height: 1.02; letter-spacing: -0.035em; }
.lp-step h3, .lp-ben h3, .lp-price h3 { font-size: 22px; letter-spacing: -0.02em; }

.lp-hero h1 .lp-serif {
    font-style: italic;
    font-weight: 400;
    color: #3D2E1F;
}

/* ---- HERO ---- */
.lp-hero {
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

.lp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(26, 18, 8, 0.12);
    border-radius: 99px;
    background: #FFFFFF;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3D2E1F;
    margin-bottom: 28px;
}

.lp-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1F8A5B;
    box-shadow: 0 0 0 0 #1F8A5B;
    animation: lp-pulse 2s infinite;
}

@keyframes lp-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(31, 138, 91, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(31, 138, 91, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(31, 138, 91, 0);   }
}

.lp-sub {
    margin-top: 28px;
    max-width: 560px;
}

.lp-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.lp-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    font-size: 13px;
    color: #7A6A57;
    flex-wrap: wrap;
}

.lp-meta-row .lp-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7A6A57;
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

/* ---- DEVICE MOCKUP ---- */
.lp-device {
    position: relative;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 30px 80px -30px rgba(26, 18, 8, 0.25),
                0 12px 30px -16px rgba(26, 18, 8, 0.12);
    overflow: hidden;
    border: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-device-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #FAF6F1;
    border-bottom: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-device-bar .lp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E5DDCD;
}

.lp-device-bar .lp-url {
    flex: 1;
    text-align: center;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    color: #7A6A57;
    letter-spacing: 0.04em;
}

.lp-device-body {
    padding: 18px;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 14px;
    min-height: 340px;
}

.lp-dev-side {
    background: #FBF6EF;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-dev-side .lp-side-h {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    color: #7A6A57;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.lp-dev-side .lp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #3D2E1F;
}

.lp-dev-side .lp-item.active {
    background: #1A1208;
    color: #FFF3E8;
}

.lp-dev-side .lp-ic {
    width: 14px;
    height: 14px;
    display: inline-flex;
}

.lp-dev-side .lp-badge {
    margin-left: auto;
    font-size: 10px;
    font-family: "DM Mono", monospace;
    background: #1F8A5B;
    color: #FFF3E8;
    padding: 1px 6px;
    border-radius: 99px;
    letter-spacing: 0.05em;
}

.lp-dev-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.lp-dev-main h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.lp-sub-h {
    font-size: 11px;
    color: #7A6A57;
    font-family: "DM Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-upload {
    border: 1.5px dashed #1F8A5B;
    border-radius: 10px;
    padding: 14px;
    background: #F0F9F4;
    display: flex;
    gap: 12px;
    align-items: center;
}

.lp-upload .lp-file { flex: 1; }
.lp-upload .lp-fn { font-size: 13px; font-weight: 500; color: #1A1208; }
.lp-upload .lp-meta { font-size: 11px; color: #7A6A57; font-family: "DM Mono", monospace; letter-spacing: 0.06em; }
.lp-progress { width: 80px; height: 6px; background: #C9E6D5; border-radius: 99px; overflow: hidden; }
.lp-progress .lp-bar { height: 100%; width: 78%; background: #1F8A5B; border-radius: 99px; }

.lp-line-items {
    border: 1px solid rgba(26, 18, 8, 0.06);
    border-radius: 10px;
    overflow: hidden;
    background: #FFFFFF;
}

.lp-li-h {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.6fr 0.6fr;
    gap: 10px;
    padding: 9px 12px;
    background: #FBF6EF;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A6A57;
}

.lp-li-r {
    display: grid;
    grid-template-columns: 1.6fr 0.5fr 0.6fr 0.6fr;
    gap: 10px;
    padding: 10px 12px;
    font-size: 12px;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
    align-items: center;
}

.lp-li-r .lp-desc { display: flex; align-items: center; gap: 8px; }
.lp-li-r .lp-tick { width: 14px; height: 14px; border-radius: 50%; background: #C9E6D5; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp-li-r .lp-name { color: #1A1208; display: block; }
.lp-li-r .lp-src { display: block; font-size: 10px; color: #7A6A57; font-family: "DM Mono", monospace; letter-spacing: 0.04em; }
.lp-li-r .lp-num { font-variant-numeric: tabular-nums; color: #3D2E1F; }
.lp-li-r .lp-total { text-align: right; font-weight: 500; color: #1A1208; font-variant-numeric: tabular-nums; }

.lp-li-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #1A1208;
    color: #FFF3E8;
}

.lp-li-foot .lp-lbl {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    color: #C7B49A;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-li-foot .lp-amt {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.lp-anno {
    position: absolute;
    background: #1A1208;
    color: #FFF3E8;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-family: "DM Mono", monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lp-anno::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #1A1208;
    transform: rotate(45deg);
}

.lp-anno-tl { top: -14px; left: 18px; }
.lp-anno-tl::after { bottom: -3px; left: 18px; }
.lp-anno-br { bottom: -14px; right: 18px; }
.lp-anno-br::after { top: -3px; right: 24px; }

/* ---- BUILT FOR ---- */
.lp-built {
    padding: 48px 0;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
    border-bottom: 1px solid rgba(26, 18, 8, 0.06);
    background: #FFFFFF;
}

.lp-built-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 48px;
    align-items: center;
}

.lp-built-label {
    font-family: "DM Mono", monospace;
    font-size: 11px;
    color: #7A6A57;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    max-width: 140px;
}

.lp-built-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.lp-built-list .lp-t {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #1A1208;
    opacity: 0.7;
}

/* Trade names link to their /quoting-software-for-{trade} pages. Keep the
   chip look (no underline) and lift to forest on hover so they read as links. */
.lp-built-list a.lp-t {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.lp-built-list a.lp-t:hover {
    opacity: 1;
    color: #1F8A5B;
}

/* ---- SECTIONS ---- */
.lp-s {
    padding: 120px 0;
}

.lp-s-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
    align-items: end;
}

.lp-s-head h2 .lp-serif { color: #3D2E1F; }
.lp-right { padding-bottom: 8px; }

/* ---- HOW IT WORKS ---- */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lp-step {
    background: #FFFFFF;
    border: 1px solid rgba(26, 18, 8, 0.06);
    border-radius: 18px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 340px;
}

.lp-step .lp-n {
    font-family: "Fraunces", serif;
    font-size: 64px;
    line-height: 1;
    font-weight: 500;
    color: #1F8A5B;
    letter-spacing: -0.04em;
}

.lp-step h3 { margin: 0; }
.lp-step p { font-size: 15px; color: #3D2E1F; margin: 0; }

.lp-visual {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px dashed rgba(26, 18, 8, 0.12);
}

/* ---- PRODUCT SHOWCASE (dark) ---- */
.lp-show {
    background: #1A1208;
    color: #FFF3E8;
    padding: 120px 0;
}

.lp-show h2 { color: #FFF3E8; }
.lp-show h2 .lp-serif { color: #D6BE9A; }
.lp-show p { color: #D6C8B3; }
.lp-show .lp-s-eyebrow { color: #1F8A5B; }
.lp-show .lp-lead { color: #D6C8B3; }

.lp-show-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: center;
}

.lp-feat-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 32px;
}

.lp-feat {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
}

.lp-feat-ic {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #332417;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-feat-t {
    font-size: 16px;
    font-weight: 500;
    color: #FFF3E8;
}

.lp-feat-d {
    font-size: 14px;
    color: #A99578;
    margin-top: 2px;
}

/* ---- BENEFITS ---- */
.lp-bens {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lp-ben {
    background: #FFFFFF;
    border: 1px solid rgba(26, 18, 8, 0.06);
    border-radius: 18px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 240px;
}

.lp-ben h3 { margin: 0; color: #1A1208; line-height: 1.15; }
.lp-ben p { font-size: 15px; color: #3D2E1F; margin: 0; line-height: 1.5; }
.lp-ben-num { font-family: "DM Mono", monospace; font-size: 11px; color: #155F3F; letter-spacing: 0.12em; }

.lp-ben-big {
    grid-column: span 2;
    background: #1F8A5B;
    color: #FFF3E8;
    border-color: #1F8A5B;
}

.lp-ben-big h3, .lp-ben-big p { color: #FFF3E8; }
.lp-ben-big .lp-ben-num { color: #C9E6D5; }

.lp-ben-dark {
    background: #1A1208;
    color: #FFF3E8;
    border-color: #1A1208;
}

.lp-ben-dark h3 { color: #FFF3E8; }
.lp-ben-dark p { color: #A99578; }
.lp-ben-dark .lp-ben-num { color: #1F8A5B; }

/* ---- ROADMAP ---- */
.lp-roadmap {
    background: #FCEADC;
    border-radius: 24px;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: center;
}

.lp-roadmap h2 { font-size: 36px; margin: 0; }

.lp-road-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.lp-road-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(26, 18, 8, 0.06);
    position: relative;
}

.lp-road-card.lp-road-live {
    background: #1A1208;
    color: #FFF3E8;
}

.lp-road-card.lp-road-live .lp-road-stage { color: #1F8A5B; }
.lp-road-card.lp-road-live .lp-road-name { color: #FFF3E8; }
.lp-road-card.lp-road-live .lp-road-desc { color: #A99578; }

.lp-road-stage {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #7A6A57;
    text-transform: uppercase;
}

.lp-road-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #1A1208;
}

.lp-road-name .lp-pp { color: #1F8A5B; }

.lp-road-desc {
    font-size: 13px;
    color: #7A6A57;
    margin-top: auto;
    line-height: 1.45;
}

/* ---- PRICING ---- */
.lp-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lp-price-single {
    display: flex;
    justify-content: center;
}

.lp-price-single .lp-price {
    width: 100%;
    max-width: 480px;
}

.lp-price {
    background: #FFFFFF;
    border: 1px solid rgba(26, 18, 8, 0.06);
    border-radius: 18px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lp-price h3 { margin: 0; }

.lp-price-feat {
    background: #1A1208;
    color: #FFF3E8;
    position: relative;
}

.lp-price-feat h3, .lp-price-feat .lp-amt, .lp-price-feat li { color: #FFF3E8; }
.lp-price-feat .lp-desc { color: #A99578; }

.lp-price-tag {
    display: inline-block;
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1F8A5B;
}

.lp-amt {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #1A1208;
}

.lp-amt span {
    font-size: 16px;
    color: #7A6A57;
    font-weight: 400;
}

.lp-price-feat .lp-amt span { color: #A99578; }
.lp-price .lp-desc { font-size: 14px; color: #7A6A57; }

.lp-price ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-price li {
    font-size: 14px;
    color: #3D2E1F;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Higher specificity than .lp-price li so the dark featured tier wins. */
.lp-price.lp-price-feat li { color: #FFF3E8; }

.lp-price li svg { flex: none; margin-top: 3px; }

.lp-price .lp-btn {
    align-self: stretch;
    justify-content: center;
    margin-top: auto;
}

/* ---- FAQ ---- */
.lp-faq-section {
    background: #FFFFFF;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.lp-faq-list {
    display: flex;
    flex-direction: column;
}

.lp-faq-item {
    padding: 20px 0;
    border-bottom: 1px solid rgba(26, 18, 8, 0.12);
}

.lp-faq-item:first-child {
    border-top: 1px solid rgba(26, 18, 8, 0.12);
}

.lp-faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 17px;
    font-weight: 500;
    color: #1A1208;
    letter-spacing: -0.01em;
}

.lp-faq-item summary::-webkit-details-marker { display: none; }

.lp-plus {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(26, 18, 8, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #3D2E1F;
    transition: transform .2s, background .2s;
    flex: none;
}

.lp-faq-item[open] summary .lp-plus {
    transform: rotate(45deg);
    background: #1A1208;
    color: #FFF3E8;
    border-color: #1A1208;
}

.lp-ans {
    margin-top: 14px;
    font-size: 15px;
    color: #3D2E1F;
    line-height: 1.55;
}

/* ---- FINAL CTA ---- */
.lp-final { padding: 120px 0; }

.lp-final-card {
    background: #1A1208;
    color: #FFF3E8;
    border-radius: 24px;
    padding: 80px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lp-final-card h2 {
    color: #FFF3E8;
    font-size: 56px;
    margin: 0;
}

.lp-final-card h2 .lp-serif { color: #1F8A5B; }

.lp-final-card p {
    color: #A99578;
    max-width: 560px;
    margin: 18px auto 36px;
    font-size: 18px;
}

.lp-planet {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #E26D2C, #8A3D1A 70%, #4A1F0C);
    opacity: .6;
}

.lp-moon {
    position: absolute;
    right: 60px;
    bottom: 60px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #D6BE9A;
    opacity: .4;
}

/* ---- MINIMAL FOOTER (single-line) ---- */
.lp-footer-min {
    padding: 2rem 0 2.5rem;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.lp-footer-brand { font-size: 16px; }

.lp-footer-links {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 14px;
}
.lp-footer-links a {
    color: #3D2E1F;
    text-decoration: none;
    transition: color .12s ease;
}
.lp-footer-links a:hover { color: #1F8A5B; }
.lp-footer-links span { color: rgba(26, 18, 8, 0.25); }

.lp-footer-copy {
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #7A6A57;
}

/* ---- LEGACY FULL FOOTER (kept in case we restore it) ---- */
.lp-footer {
    padding: 60px 0 40px;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
}

.lp-foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.lp-foot-h {
    font-family: "DM Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7A6A57;
    margin-bottom: 14px;
}

.lp-foot-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-foot-col a {
    font-size: 14px;
    color: #3D2E1F;
    text-decoration: none;
}

.lp-foot-col a:hover { color: #1A1208; }

.lp-foot-brand p {
    font-size: 14px;
    color: #7A6A57;
    max-width: 280px;
    margin-top: 14px;
    line-height: 1.5;
}

.lp-foot-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    border-top: 1px solid rgba(26, 18, 8, 0.06);
    font-size: 12px;
    color: #7A6A57;
}

/* ---- Responsive ----
   Two breakpoints:
     ≤1000px — tablet/laptop. Stack the two-column layouts, shrink hero type.
     ≤640px  — phones. Tighten padding, scale the product mockup so it stops
                spilling past the viewport, line up the meta row vertically. */
@media (max-width: 1000px) {
    .lp-hero h1 { font-size: 44px; }
    .lp-s h2, .lp-show h2 { font-size: 32px; }
    .lp-final-card h2 { font-size: 36px; }
    .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-built-grid { grid-template-columns: 1fr; gap: 18px; }
    .lp-s-head { grid-template-columns: 1fr; gap: 14px; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-show-grid { grid-template-columns: 1fr; gap: 32px; }
    .lp-bens { grid-template-columns: 1fr; }
    .lp-ben-big { grid-column: auto; }
    .lp-roadmap { grid-template-columns: 1fr; padding: 40px; }
    .lp-road-grid { grid-template-columns: 1fr; }
    .lp-price-grid { grid-template-columns: 1fr; }
    .lp-faq { grid-template-columns: 1fr; gap: 24px; }
    .lp-final-card { padding: 48px 28px; }
    .lp-foot-grid { grid-template-columns: 1fr 1fr; }
    .lp-nav-links { display: none; }
}

@media (max-width: 640px) {
    /* Root layout — give the body a hard horizontal-overflow guard so
       any element that still wants to be too wide gets clipped rather
       than expanding the whole page. */
    .landing-root { overflow-x: hidden; }

    /* Container padding — 32px is too generous on a 375px phone */
    .lp-wrap { padding: 0 20px; }
    .lp-nav-in { padding: 12px 20px; }

    /* Hero — shrink the headline so it doesn't run off the edge,
       trim the vertical breathing room, stack the meta row vertically
       with the dot separators hidden (they look stranded between
       wrapped lines). */
    .lp-hero { padding: 48px 0 64px; }
    .lp-hero h1 { font-size: 36px; line-height: 1.05; }
    .lp-hero .lp-lead { font-size: 17px; }
    .lp-cta-row { gap: 10px; }
    .lp-cta-row .lp-btn-lg { flex: 1; justify-content: center; min-width: 0; }
    .lp-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 12px;
    }
    .lp-meta-row .lp-dot { display: none; }

    /* Product mockup — stack the sidebar above the main so the device
       fits the column width without overflow. Reduce min-height so it
       doesn't dominate the fold. */
    .lp-device-body {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        min-height: 0;
    }
    .lp-dev-side {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .lp-dev-side .lp-side-h { width: 100%; }
    .lp-dev-side .lp-item { padding: 4px 8px; font-size: 11px; }

    /* "Built for the trades" tag list — wrap cleanly with breathing room
       between tags so they don't run off the right edge. */
    .lp-built-list { gap: 8px 10px; flex-wrap: wrap; }
    .lp-built-list .lp-t {
        font-size: 14px;
        padding: 4px 10px;
        white-space: nowrap;
    }

    /* Section headings shrink one more notch */
    .lp-s h2, .lp-show h2 { font-size: 26px; }
    .lp-final-card h2 { font-size: 30px; }
    .lp-final-card { padding: 36px 22px; }

    /* Footer — single column at very narrow widths */
    .lp-foot-grid { grid-template-columns: 1fr; gap: 24px; }
    .lp-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}