/* ========================================
   SEO LANDING PAGES (/labels/ and future service pages)
   Scoped under .lp so it never touches the rest of the site.
   Uses brand tokens from main.css (--navy, --red, --font-display, --font-body).
   ======================================== */
.lp {
    --lp-ink: var(--black);
    --lp-ink-soft: #4a5468;
    --lp-line: #d9dee8;
    --lp-mist: var(--off-white);
    --lp-on-navy-soft: #c9d3e6;
    --lp-wrap: 1200px;
    color: var(--lp-ink);
    font-size: 0.95rem;
    line-height: 1.6;
}

.lp .lp-wrap { width: min(100% - 3rem, var(--lp-wrap)); margin-inline: auto; }
.lp :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.lp h1, .lp h2, .lp h3 { font-family: var(--font-display); font-weight: normal; line-height: 1.1; margin: 0 0 0.6em; color: inherit; }
.lp h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); text-transform: uppercase; }
.lp h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-transform: uppercase; color: var(--navy); }
.lp h3 { font-size: 1.2rem; }
.lp p { margin: 0 0 1em; max-width: 68ch; }
.lp a { text-decoration: underline; text-underline-offset: 2px; }

.lp-section { padding: 4rem 0; }
.lp-alt { background: var(--lp-mist); }
.lp-intro { max-width: 62ch; margin-bottom: 2.2rem; color: var(--lp-ink-soft); font-size: 1.05rem; }

/* Buttons */
.lp .lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.75rem 1.5rem;
    font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none; border-radius: 3px; border: 2px solid transparent; transition: background 0.2s; }
.lp-btn--red { background: var(--red); color: #fff; }
.lp-btn--red:hover { background: var(--red-hover); }
.lp-btn--ghost { border-color: currentColor !important; }
.lp-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.lp-btn--white { background: #fff; color: var(--red-hover); }
.lp-btn--white:hover { background: #f1f1f1; }
.lp-btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* Hero */
.lp-hero { background: var(--navy); color: #fff; overflow: hidden; }
.lp-hero .lp-wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; padding: 3.5rem 0 4rem; }
.lp-hero h1 { color: #fff; }
.lp-lede { font-size: 1.15rem; color: var(--lp-on-navy-soft); }
.lp-crumbs { font-size: 0.85rem; color: var(--lp-on-navy-soft); margin-bottom: 1.2rem; }
.lp-crumbs a { color: var(--lp-on-navy-soft); }
.lp-hero-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin-top: 2rem; font-family: var(--font-display); }
.lp-hero-facts li { display: flex; align-items: center; gap: 0.5rem; }
.lp-hero-facts li::before { content: ""; width: 10px; height: 10px; background: var(--red); border-radius: 50%; flex: none; }
.lp-hero-art { width: 100%; max-width: 460px; justify-self: end; }
.lp-hero-art svg { width: 100%; height: auto; display: block; }
.lp-hero-art .unwind { animation: lp-feed 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; transform-origin: left center; }
@keyframes lp-feed { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (max-width: 860px) {
    .lp-hero .lp-wrap { grid-template-columns: 1fr; padding: 2.5rem 0 3rem; }
    .lp-hero-art { justify-self: start; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) { .lp-hero-art .unwind { animation: none; } }

/* Quick answer block (featured snippets / AI overviews) */
.lp-answer { border-left: 6px solid var(--red); padding: 0.4rem 0 0.4rem 1.5rem; }
.lp-answer h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.lp-answer p { font-size: 1.08rem; }
.lp-facts { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; margin-top: 2.2rem; }
@media (max-width: 860px) { .lp-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-facts { grid-template-columns: 1fr; } }
.lp-facts div { padding: 1.1rem 0; border-top: 1px solid var(--lp-line); }
.lp-facts dt { font-family: var(--font-display); color: var(--navy); }
.lp-facts dd { margin: 0.2rem 0 0; color: var(--lp-ink-soft); }

/* Card grid shaped like die-cut labels */
.lp-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 960px) { .lp-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lp-types { grid-template-columns: 1fr; } }
.lp-types li { background: #fff; border: 2px solid var(--lp-line); border-radius: 18px; padding: 1.5rem 1.5rem 1.3rem; position: relative; }
.lp-types li::after { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--lp-line); border-radius: 13px; pointer-events: none; }
.lp-types h3 { color: var(--navy); }
.lp-types p { margin: 0; color: var(--lp-ink-soft); }
.lp-types a { color: var(--red); position: relative; z-index: 1; }

/* Three-column spec lists */
/* Subgrid lines up rows across the three columns */
.lp-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); column-gap: 2.5rem; }
.lp-mat-grid > div { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.lp-mat-grid ul { display: contents; }
@media (max-width: 860px) {
    .lp-mat-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.5rem; }
    .lp-mat-grid > div { display: block; }
}
.lp-mat-grid h3 { color: var(--navy); }
.lp-mat-grid li { padding: 0.55rem 0; border-bottom: 1px solid var(--lp-line); font-family: var(--font-display); }
.lp-mat-grid li span { display: block; font-family: var(--font-body); color: var(--lp-ink-soft); font-size: 0.9rem; }
.lp-callout { background: var(--navy); color: #fff; padding: 2.2rem 0; }
.lp-callout .lp-wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.lp-callout p { margin: 0; font-size: 1.08rem; max-width: 60ch; }

/* Two-column split */
.lp-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; } }

/* Numbered steps */
.lp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.8rem; list-style: none; }
.lp-steps li { counter-increment: step; border-top: 4px solid var(--navy); padding-top: 1rem; }
.lp-steps li::before { content: counter(step); font: 2.4rem/1 var(--font-display); color: var(--red); display: block; margin-bottom: 0.4rem; }
.lp-steps h3 { color: var(--navy); }
.lp-steps p { color: var(--lp-ink-soft); margin: 0; }

/* Staggered reveal: script adds .lp-animate, then .is-visible when in view */
/* Hidden state has no transition, so hiding is instant; only the reveal animates. */
.lp-steps.lp-animate li { opacity: 0; transform: translateY(24px); }
.lp-steps.lp-animate li::before { transform: scale(0.6); }
.lp-steps.lp-animate.is-visible li { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; }
.lp-steps.lp-animate.is-visible li::before { transform: none; transition: transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.lp-steps.is-visible li:nth-child(2), .lp-steps.is-visible li:nth-child(2)::before { transition-delay: 0.3s; }
.lp-steps.is-visible li:nth-child(3), .lp-steps.is-visible li:nth-child(3)::before { transition-delay: 0.6s; }
.lp-steps.is-visible li:nth-child(4), .lp-steps.is-visible li:nth-child(4)::before { transition-delay: 0.9s; }
.lp-steps.is-visible li:nth-child(5), .lp-steps.is-visible li:nth-child(5)::before { transition-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) {
    .lp-steps.lp-animate li, .lp-steps.lp-animate li::before { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Comparison table */
.lp-table-scroll { overflow-x: auto; }
.lp table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.lp th, .lp td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--lp-line); vertical-align: top; }
.lp thead th { font-family: var(--font-display); font-weight: normal; text-transform: uppercase; background: #e3e7ef; color: var(--lp-ink-soft); }
.lp thead th:first-child { background: transparent; border-bottom-color: transparent; }
.lp tbody th { font-family: var(--font-display); font-weight: normal; color: var(--navy); width: 28%; }

/* Highlight our column: red outline, tinted fill, check marks; competitor column muted */
.lp table { border-collapse: separate; border-spacing: 0; background: transparent; }
.lp tbody tr { background: #fff; }
.lp thead th:nth-child(2) { background: var(--red); color: #fff; font-size: 1.15rem; border: 3px solid var(--red); border-radius: 6px 6px 0 0; }
.lp tbody td:nth-child(2) { background: #fdf1f2; color: var(--lp-ink); font-family: var(--font-display); border-left: 3px solid var(--red); border-right: 3px solid var(--red); padding-left: 2.6rem; position: relative; }
.lp tbody td:nth-child(2)::before { content: "✓"; position: absolute; left: 1rem; top: 0.95rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.75rem; line-height: 1.2rem; text-align: center; }
.lp tbody tr:last-child td:nth-child(2) { border-bottom: 3px solid var(--red); }
.lp tbody td:nth-child(3) { color: #8a93a6; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* FAQ */
.lp-faq { max-width: 860px; }
.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative; font: 1.15rem/1.3 var(--font-display); color: var(--navy); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.9rem; font-size: 1.8rem; color: var(--red); transition: transform 0.2s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq-a { padding: 0 0 1.3rem; color: var(--lp-ink-soft); }

/* Proof */
.lp-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 0.6rem; }
@media (max-width: 860px) { .lp-proof { grid-template-columns: 1fr; } }
.lp blockquote { font-size: 1.12rem; border-left: 6px solid var(--red); padding-left: 1.5rem; }
.lp blockquote footer { margin-top: 0.8rem; font-size: 0.95rem; color: var(--lp-ink-soft); font-family: var(--font-display); }

/* Final CTA */
.lp-cta { background: var(--navy); color: #fff; text-align: center; padding: 4.5rem 0; }
.lp-cta h2 { color: #fff; }
.lp-cta p { font-size: 1.1rem; margin-inline: auto; }
.lp-cta .lp-btn-row { justify-content: center; }
.lp-cta .lp-btn--white { color: var(--navy); }
.lp-cta-small { margin-top: 1.8rem; font-size: 0.95rem !important; color: var(--lp-on-navy-soft); }