@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root { --accent:#f4a900; --ink:#18202a; --muted:#687281; --line:#e2e7ec; --surface:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#eef1f4; color:var(--ink); font-family:"Inter",system-ui,sans-serif; }
.demo-shell { display:grid; grid-template-columns:minmax(0,.85fr) minmax(420px,1fr); gap:18px; width:min(1100px,calc(100% - 32px)); margin:0 auto; padding:30px 0; }
.demo-intro,.demo-card { border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.demo-intro { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,64px); background:linear-gradient(145deg,#fff8e7,#fff); }
.eyebrow { margin:0 0 8px; color:#9b6c00; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2 { margin:0; letter-spacing:-.045em; }
h1 { font-size:clamp(2.2rem,5vw,4.4rem); line-height:1; }
h2 { font-size:1.6rem; }
.demo-intro>p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.demo-steps { display:grid; gap:10px; margin-top:22px; }
.demo-steps span { display:flex; align-items:center; gap:10px; color:#47515d; font-size:.86rem; font-weight:700; }
.demo-steps strong { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#fff0c1; color:#765300; }
.demo-card { padding:clamp(24px,4vw,42px); }
form { display:grid; gap:14px; margin-top:24px; }
label { display:grid; gap:7px; color:#404a56; font-size:.78rem; font-weight:700; }
label small { color:var(--muted); font-weight:500; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:11px; background:#fbfcfd; color:var(--ink); font:inherit; outline:none; }
input { min-height:47px; padding:0 13px; }
textarea { padding:12px 13px; resize:vertical; }
input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(244,169,0,.15); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.consent { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px; color:var(--muted); font-size:.72rem; line-height:1.5; }
.consent input { width:17px; min-height:17px; margin-top:2px; accent-color:var(--accent); }
.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
button { min-height:50px; border:0; border-radius:12px; background:var(--accent); color:#302400; cursor:pointer; font:inherit; font-weight:800; }
button:disabled { cursor:wait; opacity:.65; }
.form-message { display:none; padding:12px 14px; border-radius:10px; font-size:.78rem; font-weight:700; line-height:1.5; }
.form-message.success,.form-message.error { display:block; }
.form-message.success { background:#e8fbf3; color:#11734b; }
.form-message.error { background:#fff0f0; color:#9e3030; }
footer { display:flex; justify-content:center; padding:0 0 24px; }
footer img { width:120px; height:auto; opacity:.72; }
.is-embedded .demo-shell { width:calc(100% - 24px); padding:12px 0; }
.is-embedded footer { padding-bottom:12px; }
@media (max-width:760px) {
  .demo-shell { grid-template-columns:1fr; }
  .demo-intro { padding:28px; }
  .demo-steps { grid-template-columns:1fr; }
  .field-grid { grid-template-columns:1fr; }
}