/* ══════════════════════════════════════════════════════════════════
   Inline demo/contact form — embedded in the dark ".final" CTA card.
   Scoped under .lp-root so it inherits the page design tokens
   (--on-primary, --tertiary-fixed-dim, --font-body …). Works on both
   landing.css (.final .card) and modpartsanalyse.css (aside.card).
   ══════════════════════════════════════════════════════════════════ */

.lp-root .demo-form { scroll-margin-top: 6rem; }

.lp-root .demo-form .demo-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.lp-root .demo-form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lp-root .demo-form .field label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.lp-root .demo-form .field label .opt {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.35);
}

.lp-root .demo-form .field input,
.lp-root .demo-form .field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--on-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 12px 14px;
    transition: border-color 200ms, background 200ms;
}

.lp-root .demo-form .field input::placeholder,
.lp-root .demo-form .field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.lp-root .demo-form .field input:focus,
.lp-root .demo-form .field textarea:focus {
    outline: none;
    border-color: var(--tertiary-fixed-dim);
    background: rgba(255, 255, 255, 0.10);
}

.lp-root .demo-form .field textarea {
    resize: vertical;
    min-height: 78px;
}

.lp-root .demo-form .field input.invalid,
.lp-root .demo-form .field textarea.invalid {
    border-color: #ffb4a8;
}

.lp-root .demo-form .validation-message {
    font-size: 12px;
    color: #ffb4a8;
    margin-top: 2px;
}

.lp-root .demo-form button.btn-gold {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    cursor: pointer;
}

.lp-root .demo-form button.btn-gold:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

.lp-root .demo-form .form-fineprint {
    margin: 6px 0 0;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

/* ── Error banner ────────────────────────────────────────────────── */
.lp-root .demo-form .demo-form-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 13px;
    color: #ffb4a8;
    background: rgba(255, 180, 168, 0.10);
    border: 1px solid rgba(255, 180, 168, 0.25);
}

.lp-root .demo-form .demo-form-error .ico {
    font-size: 18px;
}

/* ── Success state ───────────────────────────────────────────────── */
.lp-root .demo-form .demo-form-success {
    text-align: center;
    padding: 12px 4px;
}

.lp-root .demo-form .demo-form-success .ico {
    display: block;
    margin-bottom: 12px;
    font-size: 44px;
    color: var(--tertiary-fixed-dim);
}

.lp-root .demo-form .demo-form-success .legend {
    margin-bottom: 8px;
}

.lp-root .demo-form .demo-form-success .success-body {
    max-width: 34ch;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

/* Readable controls and feedback across every embedded enquiry form. */
.lp-root .demo-form .field label { font-size:12px; letter-spacing:0.08em; color:#d8dce3; }
.lp-root .demo-form .field label .opt { color:#b7c0cd; }
.lp-root .demo-form .field input,
.lp-root .demo-form .field textarea { font-size:16px; min-height:48px; }
.lp-root .demo-form .field input::placeholder,
.lp-root .demo-form .field textarea::placeholder { color:#aeb9c9; }
.lp-root .demo-form .form-fineprint { font-size:12px; line-height:1.7; color:#bec7d4; }
.lp-root .demo-form .demo-form-description { font-size:14px; line-height:1.6; color:#d0d6df; margin-bottom:20px; }
.lp-root .demo-form button:focus-visible,
.lp-root .demo-form a:focus-visible { outline:2px solid #e9c880; outline-offset:4px; }
.lp-root .demo-form .form-fineprint a,
.lp-root .demo-form .demo-form-error a { text-decoration:underline; text-underline-offset:3px; }
.lp-root .demo-form .demo-form-success:focus,
.lp-root .demo-form .demo-form-error:focus { outline:2px solid #e9c880; outline-offset:6px; }

/* Contact page uses the same paper, navy and gold system as booking. */
.contact-main { max-width:1180px; padding:72px 32px 88px; margin:0 auto; }
.contact-intro { max-width:740px; margin-bottom:44px; }
.contact-page h1,.contact-page h2,.contact-page h3 { font-family:var(--font-headline); font-weight:500; letter-spacing:-.025em; }
.contact-intro h1 { font-size:clamp(44px,5vw,66px); line-height:1.06; margin:0 0 24px; }
.contact-intro h1 em { color:var(--gold); font-weight:400; }
.contact-intro > p:last-child { max-width:60ch; color:var(--ink-soft); font-size:17px; line-height:1.75; }
.contact-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:start; }
.contact-options { padding-top:26px; }
.contact-page h2 { font-size:32px; line-height:1.15; margin:0 0 18px; }
.contact-options > p { font-size:15px; line-height:1.75; color:var(--ink-soft); }
.contact-options .btn { display:flex; justify-content:center; margin-top:24px; text-align:center; min-height:52px; }
.contact-page .contact-note { color:var(--ink-soft); font-size:13px; line-height:1.65; margin:12px 0 0; }
.contact-direct { border-top:1px solid var(--rule); margin-top:30px; padding-top:26px; }
.contact-direct h3 { font-size:25px; margin:0 0 10px; }
.contact-direct > a { font-size:22px; text-decoration:underline; text-underline-offset:5px; }
.contact-direct p { color:var(--ink-soft); line-height:1.7; font-size:14px; max-width:38ch; }
.contact-text-link { display:inline-flex; gap:12px; align-items:center; font-weight:600; font-size:13px; margin-top:16px; text-decoration:underline; text-underline-offset:4px; }
.lp-root.contact-page .contact-card { padding:32px; background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--gold); }
.contact-fields { display:flex; flex-direction:column; gap:20px; margin-top:26px; }
.contact-field { display:flex; flex-direction:column; gap:7px; }
.contact-field label { font-size:14px; font-weight:600; }
.contact-field label span { font-weight:400; color:var(--ink-soft); }
.contact-field .contact-note { margin:0; }
.contact-field input,.contact-field textarea { width:100%; min-height:48px; border:1px solid #a7afbb; padding:12px 14px; background:#fff; color:#182235; font:16px/1.5 var(--font-body); border-radius:0; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color:#616c7b; }
.contact-field textarea { min-height:130px; resize:vertical; }
.contact-field input:focus,.contact-field textarea:focus { outline:2px solid var(--ink); outline-offset:2px; }
.contact-field .invalid { border-color:#a52e23; }
.contact-field .validation-message { font-size:13px; color:#a52e23; }
.contact-field > div:empty { display:none; }
.contact-fields .btn { justify-content:center; min-height:52px; cursor:pointer; }
.contact-fields .btn:disabled { opacity:.65; cursor:wait; }
.contact-page .contact-note a,.contact-error a { text-decoration:underline; text-underline-offset:3px; }
.contact-error { background:#fff1ed; border:1px solid #b64a37; padding:16px; color:#80291d; font-size:14px; line-height:1.65; margin-top:22px; }
.contact-success > .ico { color:var(--gold); font-size:38px; margin-bottom:20px; }
.contact-success p { color:var(--ink-soft); font-size:15px; line-height:1.75; }
.contact-success:focus,.contact-error:focus { outline:2px solid var(--ink); outline-offset:6px; }
.contact-footer { max-width:1180px; margin:0 auto; }
.contact-footer nav { display:flex; flex-wrap:wrap; gap:20px; font-size:13px; }
@media(max-width:800px) {
    .contact-main { padding:44px 24px 64px; }
    .contact-grid { grid-template-columns:1fr; gap:32px; }
    .contact-options { padding-top:0; }
    .contact-options .btn { max-width:420px; }
    .lp-root.contact-page .contact-card { padding:26px 22px; }
    .contact-intro { margin-bottom:32px; }
}
@media(max-width:480px) {
    .contact-main { padding-inline:20px; }
    .contact-options .btn { font-size:11px; letter-spacing:.04em; padding-inline:12px; }
}

.lp-root .demo-form .field > div:empty { display:none; }