/* polish224 transfer portal: dark, yellow accents, matches pixelpmedia.com */
:root{--bg:#070b12;--surface:#111925;--surface2:#0c121c;--border:rgba(0,229,255,.16);--border2:rgba(0,229,255,.3);--text:#f4f7fb;--muted:#a8b4c4;--dim:#6e7c90;
--yellow:#fcee0a;--yellow2:#ffe94a;--cyan:#00e5ff;--red:#ff7a90;--green:#5df2a2;--r:12px;--fd:"Orbitron",system-ui,sans-serif;--fs:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -200px,rgba(0,229,255,.08),transparent),var(--bg);color:var(--text);font:16px/1.5 var(--fs);min-height:100vh;min-height:100dvh}
a{color:var(--cyan)}a:hover{color:#5ef0ff}
.xf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border);background:rgba(7,11,18,.85)}
.xf-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font:600 .82rem/1 var(--fd);letter-spacing:.12em}
.xf-mark{width:26px;height:26px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#fff 0%,var(--cyan) 35%,transparent 70%),radial-gradient(circle at 70% 70%,#7b5cff 0%,transparent 55%);box-shadow:0 0 14px rgba(0,229,255,.5)}
.xf-nav a{font-size:.9rem;color:var(--muted);text-decoration:none;margin-left:1rem}.xf-nav a:hover,.xf-nav a[aria-current]{color:var(--yellow)}
main{max-width:760px;margin:0 auto;padding:1.6rem 1.1rem 3rem}
h1{font:700 clamp(1.45rem,4.6vw,2.1rem)/1.2 var(--fd);margin:.2rem 0 .5rem;letter-spacing:.02em}
h1 span{color:var(--yellow)}h2{font:600 1.02rem/1.3 var(--fd);letter-spacing:.04em;margin:0 0 .7rem}
.lead{color:var(--muted);margin:0 0 1.4rem}
.card{background:linear-gradient(180deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;margin:0 0 1.1rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
label.lbl{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem}
input[type=text],input[type=password],input[type=number]{font:inherit;color:var(--text);background:#0a1018;border:1px solid var(--border2);border-radius:8px;padding:.7rem .8rem;min-width:0}
input:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.code{flex:1 1 15rem;font:600 1.15rem/1 var(--fd)!important;letter-spacing:.14em;text-transform:uppercase}
.btn{font:600 .95rem/1 var(--fs);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.78rem 1.15rem;border-radius:999px;cursor:pointer;border:1px solid var(--yellow);text-decoration:none;
background:linear-gradient(180deg,var(--yellow2) 0%,var(--yellow) 45%,#e6c200 100%);color:#0a0d12;min-height:44px}
.btn:hover{filter:brightness(1.06)}.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--yellow)}.btn.small{padding:.45rem .8rem;min-height:34px;font-size:.85rem}.btn.danger{border-color:var(--red);color:var(--red);background:transparent}
.msg{min-height:1.4em;margin:.6rem 0 0;color:var(--muted);font-size:.93rem}.msg.err{color:var(--red)}.msg.ok{color:var(--green)}
.note{display:flex;gap:.7rem;align-items:flex-start;border:1px solid rgba(252,238,10,.35);background:rgba(252,238,10,.06);border-radius:10px;padding:.8rem .9rem;font-size:.93rem;color:#e9edf3;margin:0 0 1rem}
.note b{color:var(--yellow)}
.drop{border:2px dashed var(--border2);border-radius:var(--r);padding:1.6rem 1rem;text-align:center;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--yellow);background:rgba(252,238,10,.05)}.drop p{margin:.5rem 0 0;color:var(--muted);font-size:.9rem}
.files{list-style:none;margin:1rem 0 0;padding:0}
.file{border:1px solid var(--border);border-radius:10px;padding:.75rem .85rem;margin:.55rem 0;background:#0a1018}
.file-top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.fname{font-weight:600;word-break:break-all}.fsize{color:var(--muted);font-size:.85rem;white-space:nowrap}
.bar{height:8px;border-radius:99px;background:#1a2433;overflow:hidden;margin:.55rem 0 .35rem}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ffd400);transition:width .3s}
.file.done .bar i{background:var(--green)}.file.err .bar i{background:var(--red)}
.fstat{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.fstat .acts{display:flex;gap:.4rem}.file.done .fst{color:var(--green)}.file.err .fst{color:var(--red)}
.priv{color:var(--muted);font-size:.9rem;text-align:center;margin-top:1.4rem}.priv b{color:var(--text)}
.muted{color:var(--muted)}.small{font-size:.86rem}[hidden]{display:none!important}
.ts{margin-top:.5rem}
table.adm{width:100%;border-collapse:collapse;font-size:.92rem}table.adm td,table.adm th{text-align:left;padding:.45rem .4rem;border-bottom:1px solid var(--border);vertical-align:top}
.ccode{font:600 .95rem/1.2 var(--fd);color:var(--yellow);letter-spacing:.08em;white-space:nowrap}
@media (max-width:560px){main{padding:1.1rem .85rem 2.4rem}.card{padding:1rem .9rem}.xf-nav a{margin-left:.7rem}.xf-logo span:last-child{display:none}.row>.btn{flex:1 1 auto}}
@media (max-height:620px){main{padding-top:.8rem}h1{margin-bottom:.3rem}.lead{margin-bottom:.8rem}.card{padding:.9rem;margin-bottom:.8rem}.drop{padding:1rem .8rem}}

/* polish237: accepted-media icon row (Phosphor Icons, MIT, inline SVG). Fixed sizes so nothing shifts. */
.xf-media{list-style:none;display:flex;justify-content:center;gap:clamp(.9rem,4vw,1.8rem);margin:0 0 1rem;padding:0}
.xf-media li{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:3.4rem;color:var(--cyan);font:600 .62rem/1 var(--fd);letter-spacing:.12em;text-transform:uppercase}
.xf-media svg{width:28px;height:28px;flex:none;filter:drop-shadow(0 0 6px rgba(0,229,255,.35))}
.xf-media span{color:var(--muted)}
.xf-media li:nth-child(even) svg{color:var(--yellow);filter:drop-shadow(0 0 6px rgba(252,238,10,.25))}
.xf-media.sm{justify-content:flex-start;gap:1rem;margin:-.6rem 0 1.3rem}.xf-media.sm li{width:auto;flex-direction:row;gap:.4rem}.xf-media.sm svg{width:20px;height:20px}

/* polish238: /upload hero (AI-generated, decorative). Fixed 16:9 frame so nothing shifts while it loads. */
.xf-hero{aspect-ratio:16/9;max-width:560px;margin:-.4rem auto 1.2rem;border-radius:var(--r);overflow:hidden;background:#05080d;border:1px solid var(--border);box-shadow:0 0 40px rgba(0,229,255,.08)}
.xf-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-height:620px){.xf-hero{max-width:420px;margin-bottom:.8rem}}

/* polish239: "not digital yet?" note under the hero. Secondary (cyan outline) so the yellow buttons stay the focus. */
.xf-dig{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin:0 0 1.1rem;padding:.8rem 1rem;border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:var(--r);background:rgba(0,229,255,.04)}
.xf-dig p{margin:0;flex:1 1 15rem;color:var(--muted);font-size:.92rem;line-height:1.45}.xf-dig b{color:var(--text);font-weight:600}
.btn.xf-dig-btn{flex:none;background:transparent;color:var(--cyan);border-color:rgba(0,229,255,.55);box-shadow:none;min-height:44px;font-size:.88rem;padding:.55rem 1rem;text-decoration:none}
.btn.xf-dig-btn:hover{background:rgba(0,229,255,.08);color:#5ef0ff}
@media (max-width:600px){.btn.xf-dig-btn{width:100%;justify-content:center}}

/* polish244: small Sign out button */
#xf-switch{flex:none}

/* polish247: original-files tip (compact; "No scanner?" folds away on phones) */
.xf-orig{margin:.75rem .1rem 0;line-height:1.45}.xf-orig p{margin:0}.xf-orig details{margin-top:.3rem}.xf-orig summary{cursor:pointer;color:var(--cyan,#00e5ff);display:inline-block;min-height:28px;line-height:28px}.xf-orig details p{margin-top:.2rem}.xf-orig-narrow{display:none}
@media (max-width:640px){.xf-orig-wide{display:none}.xf-orig-narrow{display:block}}
/* polish247c: phone-setup guide */
.xf-phone{margin-top:.7rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(0,229,255,.045),rgba(0,229,255,.01));overflow:hidden}
.xf-phone>summary{list-style:none;display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;min-height:48px;cursor:pointer;color:var(--text);font-weight:600;font-size:.92rem;-webkit-tap-highlight-color:transparent}
.xf-phone>summary::-webkit-details-marker{display:none}
.xf-phone>summary:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:14px}
.xf-ph-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(252,238,10,.1);color:var(--yellow);flex:none}
.xf-ph-ic svg{width:18px;height:18px}.xf-ph-t{flex:1}
.xf-caret{width:18px;height:18px;color:var(--muted);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.xf-phone[open] .xf-caret{transform:rotate(180deg)}
.xf-ph-body{overflow:hidden}.xf-ph-in{padding:.1rem .85rem .95rem}
.xf-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--border);margin:.15rem 0 .9rem}
.xf-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--yellow);box-shadow:0 2px 12px rgba(252,238,10,.25);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.xf-seg[data-on=sam] .xf-seg-thumb{transform:translateX(100%)}
.xf-seg button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:40px;border:0;background:none;font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);cursor:pointer;border-radius:9px;transition:color .2s;-webkit-tap-highlight-color:transparent}
.xf-seg button svg{width:18px;height:18px}
.xf-seg button[aria-selected=true]{color:#0b0f17}
.xf-seg button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.xf-steps{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.xf-steps[hidden]{display:none}
.xf-steps.xf-in{animation:xfFade .28s ease both}
@keyframes xfFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.xf-steps li{display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:.6rem;padding:.6rem .7rem;border-radius:12px;background:var(--surface2,#0c121c);border:1px solid rgba(255,255,255,.05)}
.xf-chip{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--yellow);color:#0b0f17;font-weight:700;font-size:.78rem;line-height:1;margin-top:1px}
.xf-st-ic{display:grid;place-items:center;width:24px;height:24px;color:var(--cyan,#00e5ff);margin-top:1px}.xf-st-ic svg{width:20px;height:20px}
.xf-st-tx{color:var(--text);font-size:.9rem;line-height:1.45}.xf-st-tx b{color:var(--yellow);font-weight:600}
.xf-st-tx small{display:block;margin-top:.15rem;color:var(--muted);font-size:.8rem}
.xf-ph-tip{display:flex;gap:.55rem;align-items:flex-start;margin:.8rem 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}
.xf-ph-tip svg{width:18px;height:18px;flex:none;color:var(--yellow);margin-top:1px}
@media (min-width:700px){.xf-steps li{padding:.65rem .85rem}.xf-seg{max-width:340px}}
@media (prefers-reduced-motion:reduce){.xf-caret,.xf-seg-thumb,.xf-seg button{transition:none}.xf-steps.xf-in{animation:none}}
/* polish298 /quote intake. WHY: Wesley wants customers to tap choices or describe the job, see example wording, and send files in one easy step */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.q-n{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;margin-right:.55rem;border-radius:50%;background:var(--yellow);color:#0a0d12;font-size:.85rem;vertical-align:1px}
.q-tip{margin:-.3rem 0 .7rem}.q-opt{text-transform:none;letter-spacing:0;color:var(--muted);font:400 .82rem var(--fs)}
.q-chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.q-chip{position:relative;cursor:pointer}.q-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.q-chip span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .95rem;border-radius:999px;border:1px solid var(--border2);background:#0a1018;color:var(--text);font-size:.93rem;transition:background .15s,border-color .15s}
.q-chip input:checked+span{background:var(--yellow);border-color:var(--yellow);color:#0a0d12;font-weight:600}
.q-chip input:checked+span::before{content:"✓";margin-right:.4rem}
.q-chip input:focus-visible+span{outline:2px solid var(--yellow);outline-offset:2px}
textarea,input[type=email],input[type=tel]{font:inherit;color:var(--text);background:#0a1018;border:1px solid var(--border2);border-radius:8px;padding:.7rem .8rem;min-width:0;width:100%;box-sizing:border-box}
textarea{resize:vertical;min-height:6.5rem}textarea:focus-visible,input[type=email]:focus-visible,input[type=tel]:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.q-grid input{width:100%;box-sizing:border-box}.q-grid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media (min-width:620px){.q-grid{grid-template-columns:1fr 1fr}}
.q-exw{margin-top:.7rem}.q-exw summary{cursor:pointer;color:var(--cyan);min-height:44px;display:flex;align-items:center}
.q-exs{display:grid;gap:.5rem;margin-top:.3rem}
.q-ex{font:inherit;font-size:.9rem;text-align:left;color:#d6dee8;background:rgba(0,229,255,.06);border:1px dashed var(--border2);border-radius:10px;padding:.65rem .8rem;cursor:pointer;min-height:44px}
.q-ex:hover{border-color:var(--cyan)}
.q-limits{margin:.8rem 0 0;padding-left:1.1rem}.q-limits li{margin:.15rem 0}
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-send{width:100%;margin-top:1.1rem;font-size:1.05rem;min-height:52px}
.q-done{text-align:center;padding:2rem 1.2rem}.q-done:focus{outline:none}
.q-check{width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#06210f;font:700 1.8rem/1 var(--fs)}
.q-done-big{font:600 1.15rem/1.4 var(--fs);color:var(--yellow);margin:.2rem 0 .6rem}
.q-bad{border-color:var(--red)!important}

/* polish299: optional add-on chips on /quote (two-line chip: name + its own price). Small text stays >=4.5:1 both unticked and ticked. */
.q-addons{margin-top:1rem}.q-addl{font-size:.93rem;font-weight:600;color:var(--text);margin-bottom:.5rem;padding:0}
.q-add span{flex-direction:column;align-items:flex-start;padding:.45rem .95rem;border-radius:14px;text-align:left}
.q-add small{font-size:.8rem;color:#c9d4e2;font-weight:400;line-height:1.3}
.q-add input:checked+span small{color:#1b1f26}
.q-add input:checked+span::before{position:absolute;right:.7rem;top:.45rem;margin:0}
.q-add span{position:relative;padding-right:1.9rem}
.q-addn{margin:.5rem 0 0}