/* Styles for /fix-my-website-miami only. Every rule is scoped under .lp-fix
   so the rest of the site is unaffected. */
.lp-fix {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.lp-fix a:not(.btn) { color: inherit; }
.lp-fix .lp-eyebrow {
    font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-warm-text);
    margin: 0 0 0.75rem;
}
.lp-fix h2.lp-h2 {
    font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.25rem);
    line-height: 1.15; margin: 0 0 0.5rem; color: var(--text-primary);
}
.lp-fix .lp-lead { font-family: var(--font-sans); color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 40rem; }

/* Hero */
.lp-fix .lp-hero {
    position: relative; overflow: hidden;
    border-radius: 24px; padding: clamp(2rem, 6vw, 4rem);
    background:
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent-hot) 28%, transparent), transparent 45%),
        radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--positive) 22%, transparent), transparent 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent-warm) 22%, transparent), color-mix(in srgb, var(--accent-warm) 5%, transparent));
    border: 1px solid var(--accent-warm-border);
}
.lp-fix .lp-hero h1 {
    font-family: var(--font-serif); font-size: clamp(2.1rem, 6vw, 3.5rem);
    line-height: 1.05; margin: 0 0 1.25rem; color: var(--text-primary); max-width: 18ch;
}
.lp-fix .lp-hero h1 em { font-style: normal; color: var(--accent-warm-text); }
.lp-fix .lp-hero p { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary); max-width: 36rem; margin: 0 0 2rem; }
.lp-fix .lp-hola { font-family: var(--font-serif); font-size: 1.25rem; color: var(--accent-warm-text); margin: 0 0 0.75rem; }
.lp-fix .lp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.lp-fix .lp-btn-ghost {
    font-family: var(--font-sans); font-weight: 600; text-decoration: none;
    color: var(--text-primary); border-bottom: 2px solid var(--accent-warm); padding-bottom: 2px;
}
.lp-fix .lp-trust { font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text-muted); margin: 2rem 0 0; }


/* Checklist: each card reveals its fix when ticked */
.lp-fix .lp-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; align-items: start; }
@media (min-width: 640px) { .lp-fix .lp-checklist { grid-template-columns: 1fr 1fr; } }
.lp-fix .lp-check {
    border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-card);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lp-fix .lp-check label {
    display: flex; gap: 0.875rem; align-items: flex-start; cursor: pointer;
    padding: 1rem 1.125rem;
    font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; color: var(--text-primary);
}
.lp-fix .lp-check input { appearance: none; -webkit-appearance: none; flex: none; width: 1.375rem; height: 1.375rem; margin: 0.05rem 0 0; border-radius: 6px; border: 2px solid var(--accent-warm); background: var(--bg-secondary); display: grid; place-content: center; cursor: pointer; }
.lp-fix .lp-check input::after { content: "✓"; font-size: 0.9rem; font-weight: 800; color: var(--on-warm); transform: scale(0); transition: transform 0.12s ease; }
.lp-fix .lp-check input:checked { background: var(--accent-warm); }
.lp-fix .lp-check input:checked::after { transform: scale(1); }
.lp-fix .lp-check input:focus-visible { outline: 3px solid var(--accent-hot); outline-offset: 2px; }
.lp-fix .lp-check.is-match,
.lp-fix .lp-check:has(input:checked) { border-color: var(--accent-warm); background: var(--accent-warm-soft); box-shadow: 0 0 0 3px var(--accent-warm-soft); }
.lp-fix .lp-check small { display: block; color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.2rem; }
/* The fix sits under the problem text (checkbox width + gap + label padding). */
.lp-fix .lp-fixdetail { padding: 0 1.125rem 1.125rem 3.4rem; }
.lp-fix .lp-fixdetail h3 { font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 0.35rem; color: var(--text-primary); }
.lp-fix .lp-fixdetail p { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.55; margin: 0; }
@supports selector(:has(*)) {
    .lp-fix .lp-check:not(:has(input:checked)) .lp-fixdetail { display: none; }
    .lp-fix .lp-check:has(input:checked) .lp-fixdetail { animation: lp-reveal 0.2s ease-out; }
}
@keyframes lp-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lp-fix .lp-tally { font-family: var(--font-sans); font-size: 1rem; margin: 1.25rem 0 0; color: var(--text-secondary); min-height: 1.5em; }
.lp-fix .lp-tally strong { color: var(--accent-warm-text); }

.lp-fix .lp-match { margin-top: 1rem; padding: 1.25rem; border-radius: 18px; border: 1px solid var(--accent-warm); background: var(--accent-warm-soft); }
.lp-fix .lp-match[hidden] { display: none; }
.lp-fix .lp-match-title { font-family: var(--font-serif); font-size: 1.35rem; color: var(--text-primary); margin: 0 0 1rem; }

/* Inline prompt between sections */
.lp-fix .lp-inline { display: grid; gap: 0.9rem; justify-items: center; text-align: center; }
.lp-fix .lp-inline p { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.2; color: var(--text-primary); }

/* Personal */
.lp-fix .lp-me { display: flex; gap: 1.5rem; align-items: center; }
.lp-fix .lp-me-img { flex: none; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid var(--accent-warm); }
@media (max-width: 639px) { .lp-fix .lp-me { flex-direction: column; text-align: center; } }

/* Before / after (illustrative mockups): one phone with a toggle on mobile,
   side by side on desktop. The radios are real inputs, so it works without JS. */
.lp-fix .lp-ba { display: grid; gap: 1.25rem; }
.lp-fix .lp-ba-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lp-fix .lp-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem;
    width: 100%; max-width: 20rem; margin: 0.75rem auto 0;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-secondary);
}
.lp-fix .lp-seg label {
    display: flex; align-items: center; justify-content: center; min-height: 44px;
    border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 0.9375rem;
    color: var(--text-secondary); transition: background 0.2s ease, color 0.2s ease;
}
#ba-before:checked ~ .lp-seg label[for="ba-before"] { background: var(--text-primary); color: var(--bg-primary); }
#ba-after:checked ~ .lp-seg label[for="ba-after"] { background: var(--positive); color: var(--on-positive); }
#ba-before:focus-visible ~ .lp-seg label[for="ba-before"],
#ba-after:focus-visible ~ .lp-seg label[for="ba-after"] { outline: 3px solid var(--accent-hot); outline-offset: 2px; }
.lp-fix .lp-ba-stage { display: grid; }
.lp-fix .lp-ba-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }
#ba-before:checked ~ .lp-ba-stage .lp-ba-before,
#ba-after:checked ~ .lp-ba-stage .lp-ba-after { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.lp-fix .lp-ba-h { display: none; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem; }
.lp-fix .lp-ba-before .lp-ba-h { color: var(--text-muted); }
.lp-fix .lp-ba-after .lp-ba-h { color: var(--positive); }
@media (min-width: 640px) {
    .lp-fix .lp-seg { display: none; }
    .lp-fix .lp-ba-stage { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .lp-fix .lp-ba-pane { grid-area: auto; opacity: 1; visibility: visible; }
    .lp-fix .lp-ba-h { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-fix .lp-ba-pane, .lp-fix .lp-seg label { transition: none; }
    .lp-fix .lp-check:has(input:checked) .lp-fixdetail { animation: none; }
}
.lp-fix .lp-phone {
    border-radius: 28px; padding: 1rem; border: 2px solid var(--border-strong);
    background: var(--bg-secondary); max-width: 300px; margin: 0 auto; min-height: 340px;
    display: flex; flex-direction: column; gap: 0.6rem; font-family: var(--font-sans);
}
.lp-fix .lp-ba-after .lp-phone { border-color: var(--positive); }
.lp-fix .lp-bar { height: 0.6rem; border-radius: 4px; background: var(--border-color); opacity: 0.6; }
.lp-fix .lp-bar.w40 { width: 40%; } .lp-fix .lp-bar.w60 { width: 60%; } .lp-fix .lp-bar.w80 { width: 80%; } .lp-fix .lp-bar.w95 { width: 95%; }
.lp-fix .lp-tiny { font-size: 0.55rem; color: var(--text-muted); line-height: 1.3; }
.lp-fix .lp-blob { height: 90px; border-radius: 8px; background: repeating-linear-gradient(45deg, var(--border-color) 0 6px, transparent 6px 12px); opacity: 0.5; }
.lp-fix .lp-mock-name { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text-primary); }
.lp-fix .lp-mock-tag { font-size: 0.8rem; color: var(--text-secondary); }
.lp-fix .lp-mock-btn { border-radius: 999px; padding: 0.65rem; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--on-positive); background: var(--positive); }
.lp-fix .lp-mock-btn.alt { background: transparent; color: var(--text-primary); border: 1.5px solid var(--positive); }
.lp-fix .lp-mock-row { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-secondary); border-top: 1px solid var(--border-color); padding-top: 0.45rem; }
.lp-fix .lp-mock-stars { color: var(--accent-warm-text); font-size: 0.85rem; letter-spacing: 1px; }
.lp-fix .lp-notes { list-style: none; padding: 0; margin: 1rem auto 0; max-width: 300px; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text-secondary); display: grid; gap: 0.4rem; }
.lp-fix .lp-ba-before .lp-notes li::before { content: "✗ "; color: var(--text-muted); font-weight: 700; }
.lp-fix .lp-ba-after .lp-notes li::before { content: "✓ "; color: var(--positive); font-weight: 700; }
.lp-fix .lp-disclaimer { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-muted); margin: 1rem 0 0; text-align: center; }

/* Steps */
.lp-fix .lp-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .lp-fix .lp-steps { grid-template-columns: repeat(4, 1fr); } }
.lp-fix .lp-steps li { counter-increment: s; font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.5; }
.lp-fix .lp-steps li::before { content: counter(s); display: grid; place-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-warm-soft); color: var(--accent-warm-text); font-weight: 800; margin-bottom: 0.6rem; }
.lp-fix .lp-steps strong { display: block; color: var(--text-primary); margin-bottom: 0.2rem; }

/* Proof */
.lp-fix .lp-proof { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.6; }

.lp-fix .lp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.lp-fix .lp-chips .work-tag { white-space: nowrap; font-size: 0.8125rem; }

/* FAQ */
.lp-fix .lp-faq { display: grid; gap: 0.75rem; }
.lp-fix .lp-faq details { border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-card); }
/* Padding lives on the summary so the whole row is the tap target. */
.lp-fix .lp-faq summary { padding: 1rem 1.25rem; min-height: 44px; cursor: pointer; font-family: var(--font-serif); font-size: 1.2rem; color: var(--text-primary); list-style: none; }
.lp-fix .lp-faq summary::-webkit-details-marker { display: none; }
.lp-fix .lp-faq summary::after { content: "+"; float: right; color: var(--accent-warm-text); font-family: var(--font-sans); font-weight: 700; }
.lp-fix .lp-faq details[open] summary::after { content: "–"; }
.lp-fix .lp-faq h3 { display: inline; font: inherit; margin: 0; }
.lp-fix .lp-faq p { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.6; margin: 0; padding: 0 1.25rem 1rem; }

/* Final CTA */
.lp-fix .lp-cta {
    text-align: center; border-radius: 24px; padding: clamp(2rem, 6vw, 3.5rem);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-warm) 20%, transparent), color-mix(in srgb, var(--accent-hot) 15%, transparent));
    border: 1px solid var(--accent-warm-border);
}
.lp-fix .lp-cta .lp-lead { margin-left: auto; margin-right: auto; }
.lp-fix .lp-cta .lp-actions { justify-content: center; }
.lp-fix .lp-small { font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-secondary); margin: 1rem 0 0; }
.lp-fix .lp-small a { display: inline-block; padding: 0.7rem 0.25rem; margin-block: -0.7rem; }

/* Contact form */
.lp-fix .lp-form { display: grid; gap: 1rem; text-align: left; max-width: 36rem; margin: 0 auto; }
.lp-fix .lp-form[hidden] { display: none; }
.lp-fix .lp-form-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .lp-fix .lp-form-row { grid-template-columns: 1fr 1fr; } }
.lp-fix .lp-form label { display: grid; gap: 0.35rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.lp-fix .lp-form input, .lp-fix .lp-form textarea {
    font: 400 1rem var(--font-sans); color: var(--text-primary); background: var(--bg-secondary);
    border: 1px solid var(--border-strong); border-radius: 12px; padding: 0.8rem 0.9rem; width: 100%; box-sizing: border-box;
}
.lp-fix .lp-form input:focus, .lp-fix .lp-form textarea:focus { outline: 3px solid var(--accent-warm-soft); border-color: var(--accent-warm); }
.lp-fix .lp-form .btn { justify-self: start; cursor: pointer; }
.lp-fix .lp-form .btn:disabled { opacity: 0.6; cursor: wait; }
.lp-fix .lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-fix .lp-form-note { font-family: var(--font-sans); font-size: 0.9rem; color: var(--accent-warm-text); margin: 0; }
.lp-fix .lp-form-note[hidden] { display: none; }
.lp-fix .lp-form-status { font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-secondary); margin: 0; min-height: 1.2em; }
.lp-fix .lp-form-status.is-error { color: var(--danger); }
.lp-fix .lp-thanks { max-width: 36rem; margin: 0 auto; padding: 1.5rem; border-radius: 18px; border: 2px solid var(--positive); background: var(--positive-soft); }
.lp-fix .lp-thanks[hidden] { display: none; }
.lp-fix .lp-thanks h3 { font-family: var(--font-serif); font-size: 1.5rem; margin: 0 0 0.5rem; color: var(--text-primary); }
.lp-fix .lp-thanks p { font-family: var(--font-sans); color: var(--text-secondary); margin: 0; }
.lp-fix .lp-cta .lp-form .btn { justify-self: center; }

.lp-fix #contact { scroll-margin-top: 5rem; }
.lp-fix .lp-hero .lp-trust { margin: 2rem 0 0; }

/* Mobile: the site root is 20px on phones, so scale this page down. */
@media (max-width: 639px) {
    /* The site root is 20px on mobile, which makes every rem oversized here.
       Scale this page down. */
    :root:has(.lp-fix) { font-size: 16px; }
    :root:has(.lp-fix) main { padding: 4.5rem 1rem 2rem; }
    :root:has(.lp-fix) .footer { padding-bottom: 2rem; }
    .lp-fix { gap: 2.5rem; }
    .lp-fix h2.lp-h2 { font-size: 1.5rem; }
    .lp-fix .lp-lead { font-size: 1rem; margin-bottom: 1.25rem; }
    .lp-fix .lp-hero { padding: 1.5rem 1.125rem; border-radius: 18px; }
    .lp-fix .lp-hero h1 { font-size: 1.85rem; margin-bottom: 1rem; }
    .lp-fix .lp-hero p { font-size: 1rem; margin-bottom: 1.5rem; }
    .lp-fix .lp-hero .lp-trust { margin-top: 1.5rem; font-size: 0.875rem; }
    .lp-fix .btn { width: 100%; font-size: 1rem; padding: 0.8rem 1.25rem; }
    .lp-fix .lp-checklist, .lp-fix .lp-steps { gap: 0.625rem; }
    .lp-fix .lp-check label { padding: 0.8rem 0.9rem; gap: 0.75rem; font-size: 0.9375rem; }
    .lp-fix .lp-fixdetail { padding-left: 3.275rem; }
    .lp-fix .lp-fixdetail h3 { font-size: 1.15rem; }
    .lp-fix .lp-inline p { font-size: 1.2rem; }
    .lp-fix .lp-match-title { font-size: 1.2rem; }
    .lp-fix .lp-faq summary { font-size: 1.05rem; padding: 0.875rem 1rem; }
    .lp-fix .lp-faq p { padding: 0 1rem 0.875rem; }
    .lp-fix .lp-cta { padding: 1.5rem 1.125rem; border-radius: 18px; }
    .lp-fix .lp-me { gap: 1rem; }
    .lp-fix .lp-me-img { width: 96px; height: 96px; }
}