.demo-page{--red: #c53030;--green: #1f8a5b;--green-bg: #e8f4ee;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.demo-page a{color:inherit;text-decoration:none}.demo-page .nav{position:sticky;top:0;z-index:50;background:#fafafae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}.demo-page .nav-inner{max-width:1280px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:32px}.demo-page .brand{display:inline-flex;align-items:center}.demo-page .brand-logo{display:block;height:32px;width:auto;max-width:min(180px,44vw)}.demo-page .nav-links{display:flex;gap:24px;font-size:13px;color:var(--ink-3)}.demo-page .nav-links a:hover{color:var(--ink)}.demo-page .nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}.demo-page .nav-cta .signin{font-size:13px;color:var(--ink-3);padding:8px 12px}.demo-page .nav-cta .signin:hover{color:var(--ink)}.demo-page .btn-primary{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:9px 16px;background:var(--ink);color:#fff;border-radius:999px;border:none;text-decoration:none}.demo-page .btn-primary:hover{background:var(--accent-deep)}.demo-page .btn-primary.is-current{opacity:.85;pointer-events:none}.demo-page .btn-ghost{display:inline-flex;align-items:center;font-size:13px;font-weight:500;padding:9px 16px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;text-decoration:none}.demo-page .btn-ghost:hover{background:#fff}.demo-main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px 64px;position:relative;overflow:hidden}.demo-main:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(145deg,var(--accent-deep) 0%,#243847 38%,var(--ink-2) 72%,#1a2834 100%);z-index:0}.demo-main:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 85%);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 85%);z-index:0;pointer-events:none}.demo-bg-accent{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(420px,55vw);opacity:.12;pointer-events:none;z-index:0}.demo-bg-accent svg{width:100%;height:auto;display:block}.demo-card{position:relative;z-index:1;width:100%;max-width:520px;background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px -16px #00000073,0 0 0 1px #ffffff0f}.demo-card-header{padding:32px 32px 28px;background:linear-gradient(135deg,var(--ink) 0%,var(--accent-deep) 100%);color:#fff;text-align:center}.demo-eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#ffffffa6;margin-bottom:12px}.demo-card-header h1{font-size:clamp(28px,5vw,36px);font-weight:600;letter-spacing:-.02em;margin-bottom:10px}.demo-card-intro{font-size:14px;line-height:1.55;color:#ffffffd1}.demo-card-intro a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px}.demo-card-intro a:hover{color:#ffffffe6}.demo-card-body{padding:28px 32px 32px}.demo-form .field{margin-bottom:18px}.demo-form label{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:6px}.demo-form label .req{color:var(--red, #c53030);margin-left:2px}.demo-form input,.demo-form textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink);background:var(--paper);transition:border-color .15s,box-shadow .15s}.demo-form textarea{min-height:120px;resize:vertical}.demo-form input::placeholder,.demo-form textarea::placeholder{color:var(--ink-4)}.demo-form input:focus,.demo-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #2f445424}.demo-form input.is-invalid,.demo-form textarea.is-invalid{border-color:#c53030}.demo-field-error{font-size:11px;color:#c53030;margin-top:4px}.demo-submit{width:100%;margin-top:6px;padding:12px 20px;font-size:14px;font-weight:500;border:none;border-radius:999px;background:var(--ink);color:#fff}.demo-submit:hover{background:var(--accent-deep)}.demo-submit:disabled{opacity:.6;cursor:not-allowed}.demo-legal{margin-top:18px;font-size:11px;line-height:1.55;color:var(--ink-4);text-align:center}.demo-legal a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}.demo-legal a:hover{color:var(--ink-2)}.demo-success{text-align:center;padding:12px 0 8px}.demo-success-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:var(--green-bg, #e8f4ee);color:var(--green, #1f8a5b);display:grid;place-items:center;font-size:22px;font-weight:600}.demo-success h2{font-size:20px;font-weight:600;margin-bottom:8px;color:var(--ink)}.demo-success p{font-size:14px;line-height:1.6;color:var(--ink-3)}.demo-success[hidden],.demo-form[hidden]{display:none}@media(max-width:640px){.demo-page .nav-inner{padding:12px 16px;gap:12px}.demo-page .nav-links{display:none}.demo-card-header,.demo-card-body{padding-left:20px;padding-right:20px}}