/* typeform.css — the look of our own Typeform (typeform.js). Self-contained:
   everything is under .tf, so it sits on any page, the builder's preview
   included, without touching that page's own styles. */
.tf,.tf *{box-sizing:border-box}
.tf button{font-family:inherit}
.tf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.tf{position:relative;background:#fff;color:#262627;border-radius:18px;text-align:left;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;min-height:520px;display:flex;flex-direction:column;justify-content:center}
.tf-bar{position:absolute;left:0;right:0;top:0;height:4px;border-radius:18px 18px 0 0;overflow:hidden;background:rgba(38,38,39,.1)}
.tf-bar i{display:block;height:100%;width:0;background:#262627;transition:width .4s ease}
.tf-stage{padding:64px 72px 84px;position:relative}
@media(max-width:600px){.tf-stage{padding:52px 22px 84px}.tf{min-height:540px}}
fieldset.tf-step{border:0;min-width:0;margin:0;padding:0;display:none}
.tf-step.on{display:block}
.tf-step.up{animation:tfup .5s cubic-bezier(.2,.75,.25,1)}
.tf-step.down{animation:tfdown .5s cubic-bezier(.2,.75,.25,1)}
@keyframes tfup{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes tfdown{from{opacity:0;transform:translateY(-46px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tf-step.up,.tf-step.down{animation:none}}
.tf-q{display:flex;gap:10px;align-items:flex-start;margin-left:-34px}
@media(max-width:600px){.tf-q{margin-left:0}}
.tf-n{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;margin-top:7px;font-size:.95rem;color:#262627;min-width:24px;justify-content:flex-end}
.tf-n svg{width:11px;height:11px;fill:#262627}
.tf-qt{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:400;line-height:1.35;color:#262627;letter-spacing:-.01em}
.tf-qt i{font-style:normal;margin-left:2px}
.tf-d{margin-top:8px;font-size:1.05rem;color:rgba(38,38,39,.7);font-weight:400}
.tf-opts{display:grid;gap:8px;margin-top:28px;max-width:340px}
.tf-o{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 40px 7px 8px;border-radius:8px;background:#f0f0f0;box-shadow:0 0 0 1px rgba(0,0,0,.1);border:0;color:#000;font-family:inherit;font-size:1.125rem;line-height:1.3;font-weight:400;text-align:left;cursor:pointer;transition:background .12s,box-shadow .12s}
  background:rgba(38,38,39,.06);box-shadow:inset 0 0 0 1px rgba(38,38,39,.28);border:0;color:#262627;font-family:inherit;font-size:1.08rem;line-height:1.3;font-weight:400;text-align:left;cursor:pointer;transition:background .1s}
.tf-o:hover{background:#e5e5e5;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.tf-o .k{flex:0 0 auto;min-width:24px;height:24px;padding:0 4px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:#f6f6f6;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);color:#000}
.tf-o .ck{position:absolute;right:12px;width:16px;height:16px;fill:#262627;opacity:0}
.tf-o.sel{background:#d9d9d9;box-shadow:0 0 0 2px #000}
.tf-o.sel .k{background:#262627;color:#fff;box-shadow:none}
.tf-o.sel .ck{opacity:1}
.tf-o.blink{animation:tfblink .22s steps(1) 2}
@keyframes tfblink{50%{background:#f0f0f0}}
.tf-o:focus-visible{outline:2px solid #262627;outline-offset:2px}
.tf-in{display:block;width:100%;margin-top:28px;border:0;border-bottom:1px solid rgba(38,38,39,.3);background:transparent;color:#262627;font-family:inherit;font-size:clamp(1.25rem,2.8vw,1.75rem);line-height:1.4;font-weight:400;padding:0 0 8px;outline:none;resize:none;transition:border-color .15s,box-shadow .15s;border-radius:0}
.tf-in::placeholder{color:rgba(38,38,39,.3)}
.tf-in:focus{border-bottom-color:#262627;box-shadow:0 1px 0 #262627}
textarea.tf-in{overflow:hidden;min-height:48px}
.tf-lab{display:block;margin-top:24px;font-size:.92rem;color:#262627}
.tf-lab .tf-in{margin-top:6px}
.tf-sub{margin-top:8px;font-size:.74rem;color:rgba(38,38,39,.7)}
.tf-sub b{font-weight:600;color:#262627}
.tf-err{display:none;align-items:center;gap:6px;margin-top:16px;width:max-content;max-width:100%;padding:6px 10px;border-radius:3px;background:#fde8e7;color:#af0404;font-size:.86rem}
.tf-err svg{width:14px;height:14px;fill:#af0404;flex:0 0 auto}
.tf-err.on{display:inline-flex}
.tf-act{display:flex;align-items:center;gap:12px;margin-top:22px}
.tf-ok{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;background:#262627;color:#fff;font-family:inherit;font-size:1.12rem;line-height:1;font-weight:700;padding:10px 16px;border-radius:4px;box-shadow:0 3px 12px rgba(0,0,0,.1);transition:background .12s}
.tf-ok svg{width:16px;height:16px;fill:#fff}
.tf-ok:hover{background:#3d3d3f}
.tf-ok.submit{padding:12px 20px}
.tf-ok.submit svg{display:none}
.tf-hint{font-size:.78rem;color:rgba(38,38,39,.7)}
.tf-hint b{font-weight:700;color:#262627}
@media(hover:none){.tf-hint{display:none}}
.tf-nav{position:absolute;right:18px;bottom:18px;display:flex;gap:1px;border-radius:4px;overflow:hidden}
.tf-nav button{width:36px;height:32px;border:0;background:#262627;display:grid;place-items:center;cursor:pointer}
.tf-nav button:hover{background:#3d3d3f}
.tf-nav button[disabled]{background:rgba(38,38,39,.35);cursor:default}
.tf-nav svg{width:16px;height:16px;fill:#fff}
.tf-done{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:240px;color:#262627;font-size:1.1rem}
.tf-done.on{display:flex}
.tf-done .spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(38,38,39,.15);border-top-color:#262627;animation:spin .8s linear infinite}
.tf-act.hide{visibility:hidden}
.tf-many{margin-top:14px;font-size:.92rem;color:rgba(38,38,39,.7)}
.tf-opts.wide{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.tf-opts.wide{grid-template-columns:1fr}}
.tf-o .tx{flex:1}
.tf-o[aria-checked="true"]{background:#d9d9d9;box-shadow:0 0 0 2px #000}
.tf-o[aria-checked="true"] .k{background:#000;color:#fff;box-shadow:none}
.tf-o[aria-checked="true"] .ck{opacity:1}
/* the phone field: country button with its flag, then the number */
.tf-phone{position:relative;display:flex;align-items:flex-end;gap:10px;margin-top:28px}
.tf-phone .tf-in{margin-top:0;flex:1;min-width:0}
.tf-cc{display:flex;align-items:center;gap:6px;flex:0 0 auto;height:44px;padding:0 4px 8px;border:0;border-bottom:1px solid rgba(38,38,39,.3);background:transparent;cursor:pointer}
.tf-cc:hover,.tf-cc:focus-visible{border-bottom-color:#262627;outline:none}
.tf-cc svg{width:16px;height:16px;fill:#262627}
.tf-flag{width:24px;height:18px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08);display:block}
.tf-dd{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:min(360px,100%);background:#fff;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.18),0 0 0 1px rgba(38,38,39,.12);overflow:hidden}
.tf-dd[hidden]{display:none}
.tf-dd-q{width:100%;border:0;border-bottom:1px solid rgba(38,38,39,.15);padding:12px 14px;font:inherit;font-size:1rem;color:#262627;outline:none}
.tf-dd ul{list-style:none;margin:0;padding:4px;max-height:240px;overflow:auto}
.tf-dd li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;cursor:pointer;font-size:.95rem;color:#262627}
.tf-dd li span{flex:1}
.tf-dd li b{font-weight:400;color:rgba(38,38,39,.6)}
.tf-dd li.hi,.tf-dd li:hover{background:rgba(38,38,39,.08)}
.tf-dd li.sel{font-weight:600}
.tf-dd li.none{cursor:default;color:rgba(38,38,39,.5)}