@font-face{font-family:"Bebas Neue";src:url(/fonts/bebas-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --Black:#0a0a0a; --Gold:#e8b923; --White:#fff; --Grey:#b3b3b3;
  --Surface:#151515; --Surface-raised:#1f1f1f; --Line:#2a2a2a; --Line-strong:#6b6b6b; --Muted:#8c8c8c; --Alert:#ff6b5a;
  --font-display:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --control:54px; --gutter:20px; --w:480px;
  --ease:cubic-bezier(.22,1,.36,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--Black)}
body{margin:0;min-height:100svh;background:var(--Black);color:var(--White);font:400 16px/24px var(--font-sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--Muted)}

/* ambient glow + dot grid, very quiet */
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 40% at 85% -5%, rgba(232,185,35,.10), transparent 70%),
    radial-gradient(50% 35% at 0% 100%, rgba(232,185,35,.05), transparent 70%);
}
.glow::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%)}

.top,main,.foot{position:relative;z-index:1;width:100%;max-width:var(--w);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.top{display:flex;align-items:center;justify-content:space-between;padding-top:calc(18px + env(safe-area-inset-top,0px))}
.brand img{display:block;height:56px;width:auto}
.pill-hd{font:600 11px/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--Gold);height:28px;padding:0 12px;display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(232,185,35,.55)}
main{flex:1;display:flex;flex-direction:column}
.foot{padding-top:28px;padding-bottom:calc(24px + var(--safe-b));font-size:13px;line-height:18px;color:var(--Muted);text-align:center}
body[data-state="send"] .foot{padding-bottom:calc(112px + var(--safe-b))}

/* screens */
.screen{display:none;flex-direction:column}
body[data-state="idle"] .s-idle,body[data-state="send"] .s-send,body[data-state="done"] .s-done{display:flex;animation:enter .5s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.eyebrow{margin:30px 0 12px;font:600 12px/16px var(--font-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--Grey)}
.hero{margin:0;font:400 76px/.9 var(--font-display);letter-spacing:.005em;text-transform:uppercase;padding-top:4px}
.hero em{font-style:normal;color:var(--White);position:relative;white-space:nowrap}
.hero em::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:5px;border-radius:3px;background:var(--Gold);transform-origin:left;animation:sweep .7s .25s var(--ease) both}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-sm{font-size:68px}
.lede{margin:16px 0 0;max-width:34ch;color:var(--Grey);font-size:17px;line-height:26px}

/* dropzone */
.drop{position:relative;margin-top:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:208px;padding:24px 20px;border-radius:var(--radius-lg);background:linear-gradient(180deg,#171717,#121212);box-shadow:inset 0 0 0 1px var(--Line);cursor:pointer;text-align:center;transition:transform .2s var(--ease),box-shadow .2s ease;isolation:isolate;overflow:hidden}
.drop::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgba(232,185,35,.7),rgba(232,185,35,0) 40%,rgba(232,185,35,0) 70%,rgba(232,185,35,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:0}
.drop:active{transform:scale(.985)}
.drop.is-over{box-shadow:inset 0 0 0 2px var(--Gold)}
.drop:focus-within{outline:2px solid var(--Gold);outline-offset:3px}
.drop-disc{width:68px;height:68px;border-radius:50%;background:var(--Gold);color:var(--Black);display:grid;place-items:center;margin-bottom:12px;box-shadow:0 0 0 10px rgba(232,185,35,.08),0 0 0 22px rgba(232,185,35,.04);animation:breathe 3.2s ease-in-out infinite}
.drop-disc svg{width:30px;height:30px}
@keyframes breathe{50%{box-shadow:0 0 0 14px rgba(232,185,35,.10),0 0 0 30px rgba(232,185,35,.03)}}
.drop-title{font:400 34px/1 var(--font-display);letter-spacing:.03em;text-transform:uppercase;padding-top:3px}
.drop-sub{font-size:14px;line-height:20px;color:var(--Grey)}
.resume-hint{margin:14px 0 0;padding:12px 14px;border-radius:var(--radius-md);background:var(--Surface);box-shadow:inset 0 0 0 1px rgba(232,185,35,.5);font-size:14px;line-height:20px;color:var(--White)}
.resume-hint b{color:var(--Gold)}

.steps{list-style:none;display:flex;justify-content:space-between;gap:8px;margin:22px 4px 0;padding:0}
.steps li{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--Grey)}
.steps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font:400 16px/1 var(--font-display);padding-top:2px;color:var(--White);box-shadow:inset 0 0 0 1px var(--Line-strong)}

/* meter + ticker */
.meter{margin:28px calc(var(--gutter) * -1) 0;position:relative}
.ticker{height:76px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ticker-track{display:flex;align-items:center;gap:34px;width:max-content;height:100%;animation:ride 9s linear infinite;will-change:transform}
.ticker-track img{height:60px;width:auto;display:block;opacity:.95}
.ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--Line-strong);flex:none}
@keyframes ride{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
body.is-paused .ticker-track{animation-play-state:paused;opacity:.4}
body.is-complete .ticker-track{animation-duration:26s}

.meter-read{display:flex;align-items:flex-end;gap:16px;padding:18px var(--gutter) 12px}
.pct{font:400 88px/.8 var(--font-display);letter-spacing:-.005em;font-variant-numeric:tabular-nums;min-width:2.2ch}
.pct small{font-size:40px;color:var(--Gold);margin-left:2px}
.meter-meta{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;font-size:14px;line-height:20px;min-width:0}
.meter-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#meterSub{display:flex;align-items:center;gap:8px}
#meterSub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--Gold);flex:none;animation:pulse 1.4s ease-in-out infinite}
body.is-complete #meterSub::before{animation:none}
body.is-paused #meterSub::before{background:var(--Alert)}
@keyframes pulse{50%{opacity:.25}}
.bar{height:4px;margin:0 var(--gutter);border-radius:999px;background:var(--Surface-raised);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--Gold);border-radius:inherit;transition:width .35s linear}

/* file rows */
.files{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.file{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:var(--radius-md);background:var(--Surface);box-shadow:inset 0 0 0 1px var(--Line)}
.thumb{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--Surface-raised) center/cover no-repeat;display:grid;place-items:center;color:var(--Muted)}
.thumb svg{width:18px;height:18px}
.thumb.has-img svg{display:none}
.file-name{font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{font-size:13px;line-height:18px;color:var(--Muted)}
.file-state{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.file-state svg{width:26px;height:26px}
.ring{fill:none;stroke:var(--Surface-raised);stroke-width:3}
.ring-fill{fill:none;stroke:var(--Gold);stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .35s linear}
.file.is-done .file-state{background:var(--Gold);color:var(--Black)}
.file.is-done .file-state svg{width:14px;height:14px}
.file.is-error{box-shadow:inset 0 0 0 1px var(--Alert)}
.file.is-error .file-meta{color:var(--Alert)}
.file-x{appearance:none;border:0;background:none;color:var(--Muted);width:32px;height:32px;margin:-4px -6px -4px 0;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.add-more{align-self:flex-start;margin-top:6px;appearance:none;border:0;background:none;padding:10px 0;color:var(--Gold);font-size:14px;font-weight:600;cursor:pointer}

/* form */
.details{margin-top:18px;display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;line-height:20px;font-weight:600;display:flex;justify-content:space-between}
.opt{font-weight:400;color:var(--Muted);font-size:13px}
.control{display:flex;align-items:center;height:var(--control);border-radius:var(--radius-md);background:var(--Surface);box-shadow:inset 0 0 0 1px var(--Line-strong);transition:box-shadow .15s ease}
.control:focus-within{box-shadow:inset 0 0 0 2px var(--Gold)}
.control input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 16px;font-size:17px;color:var(--White)}
.control input::placeholder{color:var(--Muted)}
.at{padding-left:16px;color:var(--Grey);font-size:17px;font-weight:500}
.at + input{padding-left:2px}
.field.is-error .control{box-shadow:inset 0 0 0 2px var(--Alert)}
.err{margin:0;display:flex;align-items:center;gap:6px;color:var(--Alert);font-size:13px;line-height:18px}
.err::before{content:"!";width:16px;height:16px;border-radius:50%;background:var(--Alert);color:var(--Black);font:700 11px/16px var(--font-sans);text-align:center;flex:none}

.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--radius-md);background:var(--Surface);box-shadow:inset 0 0 0 1px var(--Line)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;font-size:15px;font-weight:600;color:var(--Grey);transition:background-color .2s ease,color .2s ease}
.seg input:checked + span{background:var(--Surface-raised);color:var(--White);box-shadow:inset 0 0 0 1px var(--Line-strong)}
.seg input:focus-visible + span{outline:2px solid var(--Gold);outline-offset:2px}

.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;font-size:15px;line-height:22px;padding:2px 0}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;width:26px;height:26px;margin-top:-2px;border-radius:var(--radius-sm);background:var(--Surface);box-shadow:inset 0 0 0 1.5px var(--Line-strong);display:grid;place-items:center;color:var(--Black);transition:background-color .15s ease,box-shadow .15s ease}
.box svg{width:15px;height:15px;opacity:0;transform:scale(.5);transition:opacity .15s ease,transform .25s cubic-bezier(.2,1.5,.4,1)}
.check input:checked + .box{background:var(--Gold);box-shadow:none}
.check input:checked + .box svg{opacity:1;transform:none}
.check input:focus-visible + .box{outline:2px solid var(--Gold);outline-offset:3px}
.check small{display:block;margin-top:3px;font-size:13px;line-height:18px;color:var(--Muted)}
.check.is-error .box{box-shadow:inset 0 0 0 2px var(--Alert)}

/* buttons */
.btn{appearance:none;border:0;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;border-radius:999px;background:var(--Gold);color:var(--Black);font:400 26px/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;padding-top:3px;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .12s ease,filter .15s ease}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--Gold);outline-offset:3px}
.btn[aria-disabled="true"]{background:var(--Surface-raised);color:var(--Grey)}
.btn .fill{position:absolute;inset:0;background:rgba(10,10,10,.14);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .35s linear}
.btn span{position:relative}
.btn-ghost{background:transparent;color:var(--White);box-shadow:inset 0 0 0 1px var(--Line-strong);font:600 16px/1 var(--font-sans);letter-spacing:0;text-transform:none;padding-top:0}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:14px var(--gutter) calc(14px + var(--safe-b));background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.92) 30%,var(--Black));}
.dock .btn{max-width:calc(var(--w) - 2 * var(--gutter));margin:0 auto}

/* sent */
.s-done{align-items:flex-start;padding-top:40px}
.s-done:focus{outline:none}
.tick{width:104px;height:104px;margin-bottom:26px}
.tick svg{width:100%;height:100%}
.tick circle{fill:var(--Gold);transform-origin:center;animation:pop .55s var(--ease) both}
.tick path{fill:none;stroke:var(--Black);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:draw .45s .35s var(--ease) forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.done-actions{margin-top:32px;width:100%;display:flex;flex-direction:column;gap:12px}

.toast{visibility:hidden;opacity:0;position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);z-index:10;max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:var(--Surface-raised);box-shadow:inset 0 0 0 1px var(--Line-strong),0 12px 32px rgba(0,0,0,.5);font-size:14px;line-height:20px;transition:transform .35s var(--ease),opacity .25s ease,visibility .35s}
.toast.show{visibility:visible;opacity:1;transform:translate(-50%,0)}

@media (min-width:600px){
  .eyebrow{margin-top:72px}
  .hero{font-size:96px}
  .dock{position:static;background:none;padding:6px 0 0}
  body[data-state="send"] .foot{padding-bottom:28px}
}
@media (max-width:360px){.hero{font-size:64px}.pct{font-size:72px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.ticker-track{animation:none}}
html:has(body[data-state="send"]){scroll-padding-bottom:calc(120px + var(--safe-b))}
/* the send screen holds the fixed dock: fade only, a transform would trap it */
body[data-state="send"] .s-send{animation-name:fade}
@keyframes fade{from{opacity:0}to{opacity:1}}
main{z-index:2}
@media (max-height:700px) and (max-width:599px){.eyebrow{margin-top:20px}.hero{font-size:64px}.drop{min-height:188px;margin-top:22px}.drop-disc{width:60px;height:60px;margin-bottom:8px}}