/* ================================================================
   Meili Machining — paid-traffic landing pages (/lp/*)
   Builds on css/brand.css. Pages are noindex and keep navigation
   minimal so the visitor's next step is the embedded RFQ form.
   ================================================================ */

/* ── Minimal header ── */
.lp-top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.lp-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px }
.lp-top img { height: 34px; width: auto; display: block }
.lp-top-actions { display: flex; align-items: center; gap: 18px }
.lp-top-wa { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none }
.lp-top-wa:hover { color: var(--blue) }
.lp-top .btn { padding: 11px 18px; font-size: 14px }

/* ── Hero with form ── */
.lp-hero { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); border-bottom: 1px solid var(--line) }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: start; padding: 56px 0 72px }
.lp-hero .eyebrow { margin-bottom: 16px }
.lp-hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; font-size: clamp(34px, 4.2vw, 54px); color: var(--navy); margin-bottom: 18px }
.lp-hero h1 em { font-style: normal; color: var(--blue) }
.lp-hero .lead { max-width: 54ch; margin-bottom: 26px }
.lp-offers { list-style: none; display: grid; gap: 12px; margin: 0 0 28px; padding: 0 }
.lp-offers li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px }
.lp-offers svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue); stroke: #fff; fill: none; stroke-width: 3; margin-top: 1px }
.lp-offers strong { display: block; font-size: 15px; color: var(--navy) }
.lp-offers span { font-size: 13.5px; color: var(--mid); line-height: 1.5 }
.lp-proof-photo { position: relative; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft) }
.lp-proof-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.lp-proof-photo figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.95); color: var(--navy); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 4px }

/* ── Embedded RFQ form (mirrors get-a-quote) ── */
.lp-form-card { position: sticky; top: 84px }
.quote-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 30px 60px -36px rgba(16,40,68,.45) }
.lp-form-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy); margin-bottom: 4px }
.lp-form-sub { font-size: 13.5px; color: var(--mid); margin-bottom: 18px }
.form-row { margin-bottom: 16px }
.form-row label { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--ink) }
.form-input, .form-select, .form-textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: var(--font-body); color: var(--ink); background: #fff; transition: border-color .2s }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(6,75,250,.1) }
.form-textarea { resize: vertical; min-height: 84px }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.upload-area { border: 2px dashed #C9D1DC; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s }
.upload-area:hover, .upload-area.dragging { border-color: var(--blue); background: rgba(6,75,250,.04) }
.upload-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(6,75,250,.08); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center }
.upload-icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2 }
.upload-text { font-size: 14px; color: var(--mid) }
.upload-text strong { color: var(--blue); font-weight: 600 }
.upload-formats { font-size: 11.5px; color: var(--dim); margin-top: 6px }
.confidential { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--mid); line-height: 1.5 }
.confidential svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px }
.confidential a, .rfq-consent a { color: var(--blue) }
.more-details { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px }
.more-details summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink) }
.more-details[open] summary { margin-bottom: 10px }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important }
.turnstile-wrap { display: flex; justify-content: center; margin: 14px 0 6px; min-height: 65px }
.rfq-consent { font-size: 11.5px; color: var(--mid); line-height: 1.55; margin: 10px 0; text-align: center }
.form-submit { width: 100%; padding: 15px; font-size: 15.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: var(--font-body) }
.form-submit:hover { background: var(--blue-hover) }
.form-submit:disabled { opacity: .65; cursor: wait }
.rfq-status { border-radius: 8px; padding: 12px 14px; margin-top: 12px; font-size: 13px; line-height: 1.5 }
.rfq-status.loading { background: #eef4fb; color: #24476b }
.rfq-status.success { background: #edf8f0; color: #1d6a35 }
.rfq-status.error { background: #fdeeee; color: #8a2424 }
.lp-reply { font-size: 12.5px; color: var(--mid); text-align: center; margin-top: 12px }
.lp-reply strong { color: var(--navy) }

/* ── Content sections ── */
.lp-section { padding: 88px 0 }
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.lp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column }
.lp-card-img { aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden }
.lp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.lp-card-body { padding: 18px 20px 22px }
.lp-card h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 650; color: var(--navy); margin-bottom: 6px }
.lp-card p { font-size: 14px; color: var(--mid); line-height: 1.6 }
.lp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--navy) }
.lp-list > div { padding: 22px 22px 24px 0; border-bottom: 1px solid var(--line) }
.lp-list > div:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--line) }
.lp-list h3 { font-family: var(--font-display); font-size: 17px; font-weight: 650; color: var(--navy); margin-bottom: 6px }
.lp-list p { font-size: 14px; color: var(--mid); line-height: 1.6 }
.lp-band { background: var(--navy); color: #fff }
.lp-band .wrap { padding-top: 72px; padding-bottom: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap }
.lp-band h2 { color: #fff; max-width: 24ch }
.lp-band p { color: rgba(255,255,255,.75); margin-top: 10px; max-width: 60ch; line-height: 1.7 }
.lp-foot { background: #0A1A31; color: rgba(255,255,255,.6); font-size: 13px }
.lp-foot .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.lp-foot a { color: rgba(255,255,255,.8); text-decoration: none }

@media (max-width: 1000px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 36px }
  .lp-form-card { position: static }
  .lp-proof-photo { display: none }
  .lp-cards, .lp-list { grid-template-columns: 1fr 1fr }
  .lp-list > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: none }
  .lp-list > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--line) }
}
@media (max-width: 640px) {
  .lp-top-wa { display: none }
  .lp-hero-grid { padding: 36px 0 56px }
  .lp-cards, .lp-list, .form-grid { grid-template-columns: 1fr }
  .lp-list > div, .lp-list > div:nth-child(even) { padding-left: 0; border-left: none }
  .quote-form { padding: 20px }
  .lp-section { padding: 64px 0 }
}

/* ── Proof sections (batch 1, Oct 2026) ── */
.lp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.lp-case { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s }
.lp-case:hover { border-color: var(--blue); box-shadow: 0 18px 40px -28px rgba(16,40,68,.5) }
.lp-part-img { position: relative; aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden }
.lp-part-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.lp-qty { position: absolute; left: 10px; top: 10px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 4px }
.lp-case-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 }
.lp-case h3, .lp-part h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 650; color: var(--navy); margin-bottom: 6px }
.lp-case p { font-size: 14px; color: var(--mid); line-height: 1.6; flex: 1 }
.lp-case-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--blue) }
.lp-case-link .arrow { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2 }
.lp-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.lp-part { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.lp-part figcaption { padding: 14px 16px 18px }
.lp-mat { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px }
.lp-part h3 { font-size: 16px }
.lp-part p { font-size: 13.5px; color: var(--mid); line-height: 1.55 }
.lp-note { margin-top: 18px; font-size: 13.5px; color: var(--mid) }
.lp-person { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 48px; align-items: center }
.lp-person > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block }
.lp-role { font-size: 14px; font-weight: 600; color: var(--mid); margin: 6px 0 14px }
.lp-person p { color: var(--mid); line-height: 1.7; max-width: 62ch }
.lp-facts { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px }
.lp-facts li { border-left: 3px solid var(--blue); padding: 2px 0 2px 14px }
.lp-facts strong { display: block; font-size: 14.5px; color: var(--navy) }
.lp-facts span { font-size: 13.5px; color: var(--mid); line-height: 1.55 }
.lp-person-links { font-size: 14px }
.lp-person-links a { color: var(--blue); font-weight: 600; text-decoration: none }
.lp-batch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center }
.lp-batch p { color: var(--mid); line-height: 1.7; margin: 12px 0 24px; max-width: 58ch }
.lp-batch-chart { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 26px }
.lp-batch-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 14px }
.lp-batch-row span { font-weight: 700; color: var(--navy) }
.lp-batch-row div { height: 14px; background: #fff; border-radius: 7px; overflow: hidden; border: 1px solid var(--line) }
.lp-batch-row i { display: block; height: 100%; background: var(--blue); min-width: 6px }
.lp-batch-row b { font-weight: 600; color: var(--mid); font-size: 13px }
.lp-batch .lp-batch-note { font-size: 13px; margin: 6px 0 0 }
.lp-faq { max-width: 860px; border-top: 2px solid var(--navy) }
.lp-faq-item { border-bottom: 1px solid var(--line); padding: 18px 0 }
.lp-faq-item summary { cursor: pointer; font-family: var(--font-display); font-weight: 650; font-size: 16.5px; color: var(--navy) }
.lp-faq-item p { margin-top: 10px; color: var(--mid); line-height: 1.7; font-size: 14.5px }
@media (max-width: 1000px) {
  .lp-cases { grid-template-columns: 1fr 1fr }
  .lp-parts { grid-template-columns: 1fr 1fr }
  .lp-person, .lp-batch { grid-template-columns: 1fr; gap: 28px }
  .lp-person > img { max-width: 280px }
}
@media (max-width: 640px) {
  .lp-cases { grid-template-columns: 1fr }
  .lp-parts { gap: 12px }
  .lp-batch-row { grid-template-columns: 48px minmax(0, 1fr) 84px }
  .lp-batch-chart { padding: 18px }
}