.demo-page{max-width:1680px;padding:var(--space-6) var(--gutter) var(--space-7);grid-template-columns:minmax(0,1.2fr) minmax(340px,.85fr);align-items:start;gap:clamp(50px,8vw,120px);margin:auto;display:grid}.demo-intro{padding-top:0}.demo-intro h1,.campaign-copy h1,.demo-success h2{font-family:var(--font-rhymes), Georgia, serif;font-weight:300;font-size:var(--type-display);line-height:var(--leading-heading);letter-spacing:var(--tracking-hero);text-wrap:balance}.demo-intro h1{font-size:var(--type-hero)}.demo-intro .eyebrow{margin-bottom:var(--space-3);color:var(--muted)}.demo-intro h1>span{display:block}.demo-intro-description{max-width:390px;margin-top:var(--space-3);color:var(--muted);text-wrap:pretty}.demo-intro-note{max-width:340px;margin-top:var(--space-5);font-size:var(--type-small);color:var(--dim)}.demo-intro-note a{color:var(--text)}.demo-form-panel{--demo-focus-duration:.22s;--demo-ease:cubic-bezier(.22, 1, .36, 1);background:0 0;min-width:0;padding:0}.demo-form-panel>h2{font-size:var(--type-subhead);letter-spacing:var(--tracking-feature)}.demo-form-intro{color:var(--muted);font-size:var(--type-small);text-wrap:pretty;margin-top:8px;margin-bottom:22px}.demo-fields{gap:0;display:grid}.demo-field-control{--demo-line-active:var(--text);position:relative}.demo-field-control:after{content:"";pointer-events:none;background:var(--demo-line-active);opacity:0;height:1px;transition:opacity var(--demo-focus-duration) var(--demo-ease), transform var(--demo-focus-duration) var(--demo-ease), background-color var(--demo-focus-duration) var(--demo-ease);position:absolute;inset:auto 0 0;transform:scaleX(.98)}.demo-field-control:focus-within:after{opacity:1;transform:scaleX(1)}.demo-field label{color:var(--muted);transform-origin:0 0;transition:transform var(--demo-focus-duration) var(--demo-ease), color var(--demo-focus-duration) var(--demo-ease);cursor:text;font-size:16px;line-height:1.4;display:block;position:absolute;top:24px;left:0}.demo-field label span{color:var(--dim)}.demo-field :is(input,textarea){border:0;border-bottom:1px solid var(--line);width:100%;min-height:64px;color:var(--text);font:inherit;transition:border-color var(--demo-focus-duration) var(--demo-ease);background:0 0;border-radius:0;padding:28px 0 12px;font-size:16px;line-height:1.4}.demo-field textarea{resize:vertical;min-height:98px;max-height:280px;display:block}.demo-field :is(input,textarea)::placeholder{color:#0000}.demo-field :is(input,textarea):focus{outline:none}.demo-field:focus-within label{transform:translateY(-20px)scale(.8125)}.demo-field:has(:is(input,textarea):not(:placeholder-shown)) label{transform:translateY(-20px)scale(.8125)}.demo-field:has(input:autofill) label{transform:translateY(-20px)scale(.8125)}.demo-field:focus-within label{color:var(--text)}.demo-field-control[data-invalid]{--demo-line-active:var(--form-error,#e4a497)}.demo-field [aria-invalid=true]{border-color:var(--form-error,#e4a497)}.demo-field input:autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 100px var(--background) inset;caret-color:var(--text)}@media (hover:hover){.demo-field-control:hover :is(input,textarea):not([aria-invalid=true]):not(:focus){border-color:color-mix(in srgb, var(--muted) 55%, var(--line))}}.demo-field-error,.demo-form-error{color:var(--form-error,#e4a497);font-size:var(--type-small);margin-top:8px}.demo-form-error:empty{display:none}.demo-field-error{opacity:0;min-height:24px;transition:opacity .18s var(--demo-ease);margin:0;padding-top:4px;font-size:12px;line-height:20px}.demo-field-error[data-visible]{opacity:1}.demo-submit{min-height:36px;margin-top:24px}.demo-submit:disabled{opacity:.45;cursor:not-allowed}.demo-submit:disabled:hover{background:var(--button-background)}.demo-form-panel[data-status=sending] .demo-submit{opacity:.75;cursor:progress}.demo-submit-label{display:grid}.demo-submit-label>span{text-align:center;opacity:0;transition:opacity .16s var(--demo-ease);grid-area:1/1}.demo-submit-label>[data-visible=true]{opacity:1}.demo-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-form-panel[data-status=success]>.demo-success{animation:demo-success-enter .24s var(--demo-ease) both}@keyframes demo-success-enter{0%{opacity:0}to{opacity:1}}.demo-privacy{color:var(--dim);text-wrap:pretty;margin-top:18px;font-size:11px;line-height:1.6}.demo-privacy a,.demo-availability a{text-underline-offset:3px;text-decoration:underline}.demo-availability{color:var(--muted);font-size:var(--type-small);text-wrap:pretty;margin-top:20px}.demo-availability a{color:var(--text)}.demo-honeypot{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.demo-success{padding-block:20px}.demo-success-mark{--check-opacity-dur:.24s;--check-rotate-dur:.24s;--check-rotate-from:0deg;--check-bob-dur:.24s;--check-y-amount:0px;--check-blur-dur:.24s;--check-blur-from:0px;--check-path-dur:.36s;--check-path-delay:60ms;border:1px solid var(--muted);border-radius:50%;place-items:center;width:40px;height:40px;margin-bottom:40px;display:grid}.demo-success .eyebrow{color:var(--muted);margin-bottom:18px}.demo-success h2{font-size:var(--type-section);outline:none}.demo-intro h1 em,.demo-success h2 em{font-weight:inherit;font-synthesis:none}.demo-success>p:not(.eyebrow){color:var(--muted);text-wrap:pretty;max-width:390px;margin-block:24px}.demo-thanks-page{max-width:640px;min-height:650px;padding:var(--space-6) var(--gutter);margin:auto}.demo-thanks-page .demo-success h2{font-size:var(--type-display)}@media (max-width:900px){.demo-page{padding-block:var(--space-5);grid-template-columns:1fr 1fr;gap:36px}.demo-intro h1{font-size:var(--type-hero)}}@media (max-width:746.98px){.demo-page{padding-block:44px var(--space-5);grid-template-columns:minmax(0,1fr);gap:36px}.demo-intro{padding-top:0}.demo-intro h1{max-width:490px}.demo-intro-note{margin-top:22px}.demo-privacy{font-size:12px}.demo-thanks-page{min-height:560px;padding-block:var(--space-5)}}@media (prefers-reduced-motion:reduce){.demo-field label,.demo-field :is(input,textarea),.demo-field-control:after,.demo-field-error,.demo-submit-label>span{transition:none}.demo-form-panel[data-status=success]>.demo-success{animation:none}}:root{--check-opacity-dur:.5s;--check-rotate-dur:.5s;--check-rotate-from:80deg;--check-bob-dur:.5s;--check-y-amount:40px;--check-blur-dur:.5s;--check-blur-from:10px;--check-path-dur:.5s;--check-path-delay:80ms;--check-ease-out:cubic-bezier(.22, 1, .36, 1);--check-ease-opacity:cubic-bezier(.22, 1, .36, 1);--check-ease-rotate:cubic-bezier(.22, 1, .36, 1);--check-ease-bob:cubic-bezier(.34, 1.35, .64, 1);--check-ease-path:cubic-bezier(.22, 1, .36, 1)}.t-success-check{transform-origin:50%;opacity:0;will-change:transform, opacity, filter;display:inline-block}.t-success-check svg{display:block;overflow:visible}.t-success-check svg path{stroke-dasharray:20;stroke-dashoffset:20px}.t-success-check[data-state=in]{animation:t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards, t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards}.t-success-check[data-state=in] svg path{animation:t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay,0s) forwards}@keyframes t-check-fade{0%{opacity:0}to{opacity:1}}@keyframes t-check-rotate{0%{transform:rotate(var(--check-rotate-from))}to{transform:rotate(0)}}@keyframes t-check-blur{0%{filter:blur(var(--check-blur-from))}to{filter:blur()}}@keyframes t-check-bob{0%{translate:0 var(--check-y-amount)}to{translate:0}}@keyframes t-check-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.t-success-check{opacity:1;animation:none!important}.t-success-check svg path{stroke-dashoffset:0!important;animation:none!important}}
