html.pg-demo{--accent:var(--trn)}html.pg-demo .demo{background:radial-gradient(55% 80% at 90% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 62%),var(--surface);border-bottom:1px solid var(--line)}html.pg-demo .demo .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:44px;padding-block:56px 72px;display:grid}html.pg-demo .demo h1{letter-spacing:-.035em;text-wrap:balance;max-width:16ch;font-size:clamp(32px,4vw,50px);line-height:1.05}html.pg-demo .demo .lede{color:var(--muted);max-width:56ch;margin-top:14px;font-size:17px}html.pg-demo .dform{border:1px solid var(--line);background:#fff;border-radius:20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:26px;padding:24px;display:grid}html.pg-demo .dform label{color:var(--ink);flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}html.pg-demo .dform label.full{grid-column:1/-1}html.pg-demo .dform label small{color:var(--muted);font-weight:500}html.pg-demo .dform input,html.pg-demo .dform select,html.pg-demo .dform textarea{font:inherit;border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:12px;width:100%;min-width:0;padding:11px 13px;font-size:15.5px;font-weight:500}html.pg-demo .dform textarea{resize:vertical;min-height:96px}html.pg-demo .dform input:focus,html.pg-demo .dform select:focus,html.pg-demo .dform textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px;border-color:var(--accent)}html.pg-demo .dform .hp{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}html.pg-demo .dform .consent{color:var(--muted);flex-direction:row;grid-column:1/-1;align-items:flex-start;gap:10px;font-weight:500}html.pg-demo .dform .consent input{flex:none;width:18px;height:18px;margin-top:2px}html.pg-demo .dform .consent a{color:var(--accent)}html.pg-demo .dform .send{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:14px;display:flex}html.pg-demo .dform .send span{color:var(--muted);font-size:13.5px}html.pg-demo .done{border:1px solid var(--line);background:#fff;border-radius:20px;margin-top:26px;padding:26px}html.pg-demo .done h2{letter-spacing:-.02em;font-size:24px}html.pg-demo .done p{color:var(--muted);margin-top:8px}html.pg-demo .next{border:1px solid var(--line);background:#fff;border-radius:20px;padding:24px}html.pg-demo .next h2{letter-spacing:-.01em;font-size:19px}html.pg-demo .next ol{counter-reset:n;gap:16px;margin:16px 0 0;padding:0;list-style:none;display:grid}html.pg-demo .next li{counter-increment:n;grid-template-columns:32px 1fr;gap:12px;display:grid}html.pg-demo .next li:before{content:counter(n);background:color-mix(in srgb,var(--accent) 12%,#fff);width:32px;height:32px;color:var(--accent);border-radius:50%;place-items:center;font-weight:700;display:grid}html.pg-demo .next b{display:block}html.pg-demo .next li span{color:var(--muted);font-size:14.5px}html.pg-demo .aside{gap:16px;display:grid}html.pg-demo .aside .alt{border:1px dashed var(--line);color:var(--muted);border-radius:18px;padding:18px 20px;font-size:14.5px}html.pg-demo .aside .alt a{color:var(--accent);font-weight:600}@media (width<=860px){html.pg-demo .demo .wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:40px 56px}html.pg-demo .dform{grid-template-columns:minmax(0,1fr);padding:18px}}