/* Additions to the design for the production pilot form. Same tokens as
   design.css: #161616 ink, #525252 secondary, #d8180b accent, square corners. */
[hidden]{display:none!important}
.pf-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.pf-note{margin:0;font-size:12px;line-height:1.6;color:#525252}
.pf-consents{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px}
#pf-consents{display:flex;flex-direction:column;gap:14px}
.pf-cons label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px;line-height:1.4;color:#161616}
.pf-cons input{flex:0 0 auto;width:20px;height:20px;margin:0;border:1px solid #161616;border-radius:0;background:#ffffff;-webkit-appearance:none;appearance:none;display:grid;place-content:center;cursor:pointer}
.pf-cons input::before{content:"";width:10px;height:10px;transform:scale(0);background:#d8180b;transition:transform .1s}
.pf-cons input:checked::before{transform:scale(1)}
.pf-cons input:focus-visible{outline:2px solid #161616;outline-offset:2px}
.pf-cons-b{margin:6px 0 0 32px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16px;line-height:1.6;color:#525252;max-height:9.6em;overflow:auto}
.btn[aria-busy=true]{cursor:progress}
@media (prefers-reduced-motion: reduce){.pf-cons input::before{transition:none}}

/* Buttons: the product's Penpot "Button" (clearintervals-ui src/lib/components/Button.svelte),
   so the site's actions look like the app's. brand = .btn-p, outline = .btn-t, dark = .btn-d.
   !important beats the inline sizes the design export puts on some buttons. */
.btn{justify-content:center!important;gap:8px!important;min-height:42px;height:auto!important;padding:11px 16px;border:1px solid transparent;border-radius:5px;font-family:'Roboto','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:15px;line-height:1.3;letter-spacing:-.45px;white-space:nowrap;transition:transform 140ms cubic-bezier(.16,1,.3,1)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn .arr{display:inline-block;transition:transform 140ms cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(3px)}
.btn-p,.btn-p:hover{background:#d8180b;color:#ffffff}
.btn-t,.btn-t:hover{background:#ffffff;color:#000000;box-shadow:none;border-color:#d6d6d6}
.btn-t:hover{border-color:#000000}
.btn-d,.btn-d:hover{background:#141414;color:#ffffff}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress}
.btn.nb{width:42px!important;min-width:0;padding:0!important}
.btn:focus-visible{outline:2px solid #000000;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.btn,.btn .arr{transition:none}}
.btn:hover .arr.dn{transform:translateY(3px)}

/* These arrow glyphs are absent from our font files. Use the system face
   directly so fallback does not download full Roboto/Plex fonts to find them. */
.arr,.btn.nb,.btn>span[aria-hidden="true"]{font-family:Arial,sans-serif}