:root{--page-background: #f8fafc;--page-text: #0f172a;--page-muted: #475569;--surface: rgba(255, 255, 255, 0.85);--surface-border: rgba(15, 23, 42, 0.08)}*{box-sizing:border-box}body.form-patterns-page{margin:0;min-height:100vh;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;color:var(--page-text);background:radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 32%),linear-gradient(180deg, #fff, var(--page-background))}.page-shell{width:min(1100px,100% - 2rem);margin:0 auto;padding:3rem 0 4rem}.page-header{max-width:56rem;margin-bottom:2rem}.eyebrow,.demo-label{margin:0 0 .6rem;color:#1d4ed8;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,h2,p,span{margin:0}h1{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}h2{font-size:1.45rem}.page-copy,.demo-copy{margin-top:.9rem;color:var(--page-muted);line-height:1.7}.demo-grid{display:grid;gap:1.25rem}.demo-card{display:grid;gap:1.2rem;padding:1.5rem;border:1px solid var(--surface-border);border-radius:1.25rem;background:var(--surface);box-shadow:0 20px 35px rgba(15,23,42,.08)}.panel-container{background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:4px;font-size:90%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;max-width:400px}.panel-container strong{line-height:20px}.ratings-container{display:flex;margin:20px 0}.rating{flex:1;cursor:pointer;padding:20px;margin:10px 5px}.rating:hover,.rating.active{border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}.rating img{width:40px}.rating small{color:#555;display:inline-block;margin:10px 0 0}.rating:hover small,.rating.active small{color:#111}.fp-btn{background-color:#302d2b;color:#fff;border:0;border-radius:4px;padding:12px 30px;cursor:pointer}.fp-btn:focus{outline:0}.verify-container{text-align:center}.code-container{display:flex;align-items:center;justify-content:center;margin:40px 0;flex-wrap:wrap}@media(max-width: 600px){.code-container{flex-wrap:wrap}}.code{caret-color:rgba(0,0,0,0);border-radius:5px;font-size:75px;height:120px;width:100px;border:1px solid #eee;margin:1%;text-align:center;font-weight:300;-moz-appearance:textfield;appearance:textfield}.code::-webkit-outer-spin-button,.code::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.code:valid{border-color:#3498db;box-shadow:0 10px 10px -5px rgba(0,0,0,.25)}@media(max-width: 600px){.code{font-size:60px;height:80px;max-width:70px}}.info{background-color:#eaeaea;display:inline-block;padding:10px;line-height:20px;max-width:400px;color:#777;border-radius:5px}.fieldset__base{margin-top:32px;width:100%;position:relative}.fieldset__message{position:absolute;bottom:0;left:0;font-size:1.0625rem;line-height:1.4375rem;font-weight:400;letter-spacing:.03125rem;transform:translateY(50%);color:#dc3545;visibility:hidden}.error .fieldset__message{visibility:visible}.input__input{padding:16px;border-radius:3px;margin-bottom:16px;width:100%;border:1px solid #777}.input__input:focus{border-color:#7c7b9c;outline:0;box-shadow:0 .125rem .625rem rgba(0,0,0,.3)}.input__label{font-size:.9375rem;line-height:1.25rem;font-weight:400;letter-spacing:.03125rem;margin-bottom:8px;display:inline-block}