/* ==========================================================
   FoodLoot — Shared application-page shell
   Used by /careers/apply and /internship/apply.
   Same band DNA as the hubs: cream dot-grid header, pill
   buttons, eyebrow+dot, role-card rail, emerald success band.
   LowSide (fl-wordmark, watermark) renders LETTERS ONLY.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --dark:#0b1c1b; --emerald:#00615F; --emerald-deep:#004D4B; --em2:#007A77; --em-light:#E8F4F3;
  --em-ultra:#F0FAF9; --cream:#F8F0EC; --coral:#E05848; --coral-deep:#C84736; --slate:#64748B;
  --slate-deep:#334155; --border:rgba(0,97,95,0.10); --field-border:rgba(0,97,95,0.22);
  --radius:20px; --danger:#b91c1c;
}
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; color:var(--dark); background:var(--cream);
  line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--emerald); outline-offset:3px; }
.success-band a:focus-visible, footer.band-close a:focus-visible { outline-color:#fff; }

/* ── progress bar ── */
#pbar { position:fixed; top:0; left:0; height:3px; width:0; background:var(--coral); z-index:30; }

/* ── nav ── */
nav.topbar { position:sticky; top:0; z-index:10; background:rgba(248,240,236,0.85);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border); padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between;
  transition:transform .25s ease; }
@media (max-width:999px) { nav.topbar.nav-tuck { transform:translateY(-100%); } }
nav.topbar .fl-wordmark { font-size:30px; }
.nav-cta { font-weight:700; font-size:14px; color:var(--emerald-deep); padding:9px 18px; border-radius:999px;
  border:1px solid var(--border); transition:background .2s,border-color .2s; }
.nav-cta:hover { background:var(--em-light); border-color:var(--emerald); }

/* ── mobile sticky context bar ── */
.ctx-bar { position:fixed; top:0; left:0; right:0; z-index:15; background:rgba(248,240,236,0.96);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border); padding:11px 18px; font-size:13.5px; font-weight:700;
  color:var(--emerald-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transform:translateY(-110%); transition:transform .25s ease; }
.ctx-bar.show { transform:none; }
@media (min-width:1000px) { .ctx-bar { display:none; } }

/* ── header micro-band ── */
.apply-hero { position:relative; overflow:hidden; background-color:var(--cream);
  background-image:
    radial-gradient(circle at 84% -12%, rgba(224,88,72,.10), transparent 55%),
    radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:auto, 24px 24px;
  padding:clamp(34px,5vw,52px) 0 26px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,40px); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--emerald); margin-bottom:10px; }
.eyebrow .dot { width:9px; height:9px; border-radius:50%; background:var(--coral); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
.apply-hero h1 { font-family:var(--font-display,'Plus Jakarta Sans',sans-serif); font-size:clamp(30px,5vw,42px);
  font-weight:800; letter-spacing:-0.03em; line-height:1.05; color:var(--emerald-deep); }
.chips { margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--emerald-deep); }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--em2); flex-shrink:0; }

/* ── layout ── */
main.apply-main { max-width:1080px; margin:0 auto; padding:26px clamp(18px,4vw,40px) 64px; }
.apply-grid { display:grid; grid-template-columns:340px 1fr; gap:28px; align-items:start; }
@media (max-width:999px) { .apply-grid { grid-template-columns:1fr; gap:18px; } }

/* ── role-context rail ── */
.rail { position:sticky; top:88px; }
@media (max-width:999px) { .rail { position:static; } }
.rail-card { position:relative; overflow:hidden; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 22px 20px; }
.rail-card .num { position:absolute; top:14px; right:18px; font-size:56px; font-weight:800; letter-spacing:-0.04em;
  line-height:1; color:rgba(0,97,95,.07); pointer-events:none; }
.tag { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.tag.pt { background:rgba(224,88,72,.09); border:1px solid rgba(224,88,72,.28); color:#8F2A1C; }
.tag.ft { background:var(--emerald); color:#fff; }
.rail-card h3 { font-size:19px; font-weight:800; letter-spacing:-0.02em; color:var(--emerald-deep); padding-right:48px; }
.rail-card .rmeta { font-size:12.5px; color:var(--slate); margin-top:3px; font-weight:600; }
.rail-card .blurb { font-size:13.5px; color:var(--slate-deep); margin-top:10px; }
.rail-sep { border:0; border-top:1px dashed var(--border); margin:14px 0; }
.rail-h { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.rail-owns { list-style:none; }
.rail-owns li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--slate-deep); padding:2px 0; }
.rail-owns li::before { content:"✓"; color:var(--emerald); font-weight:800; flex-shrink:0; line-height:1.5; }
.rail-steps { list-style:none; }
.rail-steps li { position:relative; display:flex; align-items:flex-start; gap:12px; padding-bottom:12px; }
.rail-steps li:last-child { padding-bottom:0; }
.rail-steps li::before { content:""; position:absolute; left:11px; top:26px; bottom:2px; width:1px; background:rgba(0,97,95,.15); }
.rail-steps li:last-child::before { display:none; }
.rail-steps .n { width:22px; height:22px; border-radius:50%; background:var(--em-light); color:var(--emerald); font-size:11px;
  font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.rail-steps p { font-size:12.5px; color:var(--slate-deep); padding-top:1px; }
.rail-line { font-size:12.5px; color:var(--emerald-deep); background:var(--em-ultra); border:1px solid var(--em-light);
  border-radius:12px; padding:10px 13px; margin-top:14px; }
.rail-line a { color:#B23A2B; font-weight:700; } .rail-line a:hover { text-decoration:underline; }
details.rail-more summary { cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:var(--emerald);
  padding:12px 0; min-height:44px; display:flex; align-items:center; gap:6px; }
details.rail-more summary::-webkit-details-marker { display:none; }
details.rail-more summary::after { content:"▾"; font-size:12px; transition:transform .2s; }
details.rail-more[open] summary::after { transform:rotate(180deg); }
@media (min-width:1000px) { details.rail-more summary { display:none; } }
.rail-phone { margin-top:16px; display:none; }
@media (min-width:1000px) { .rail-phone { display:block; } }
.phone { width:180px; border-radius:24px; border:5px solid var(--emerald-deep); overflow:hidden;
  box-shadow:0 24px 48px -20px rgba(0,77,75,.45); }
.phone img { width:100%; height:auto; display:block; }
.rail-phone .cap { margin-top:8px; font-size:11.5px; font-weight:600; color:var(--slate); max-width:190px; }

/* ── form column ── */
.error-banner { background:#fef2f2; color:var(--danger); border:1px solid #fecaca; border-radius:12px;
  padding:13px 17px; font-size:14px; margin-bottom:16px; } .error-banner:empty { display:none; }
.draft-banner { background:var(--em-ultra); border:1px solid var(--em-light); border-radius:12px; padding:11px 15px;
  font-size:13px; color:var(--emerald-deep); margin-bottom:16px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.draft-banner button { background:none; border:none; color:#B23A2B; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; min-height:44px; padding:0 6px; }
.notice { background:#FFFBEB; border:1px solid #FDE68A; border-radius:12px; padding:11px 15px; font-size:13px;
  color:#854D0E; margin-bottom:16px; }

section.formsec { position:relative; overflow:hidden; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:20px 22px; margin-bottom:14px; }
.fs-num { position:absolute; top:10px; right:16px; font-size:52px; font-weight:800; letter-spacing:-0.04em;
  line-height:1; color:rgba(0,97,95,.05); pointer-events:none; }
.fs-head { display:flex; align-items:center; gap:11px; padding-bottom:12px; margin-bottom:16px;
  border-bottom:1px dashed var(--border); }
.fs-head .n { width:28px; height:28px; border-radius:50%; background:var(--em-light); color:var(--emerald); font-size:13px;
  font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fs-head h2 { font-size:18px; font-weight:800; letter-spacing:-0.01em; color:var(--emerald-deep); }
.fs-head .fs-note { font-size:12px; color:var(--slate); margin-left:auto; text-align:right; }
@media (max-width:480px) { .fs-head { flex-wrap:wrap; } .fs-head .fs-note { margin-left:39px; text-align:left; width:100%; } }
.field { margin-bottom:15px; } .field:last-child { margin-bottom:0; }
.field label { display:block; font-size:14px; font-weight:600; color:var(--emerald-deep); margin-bottom:6px; }
.field .hint { font-size:12.5px; color:var(--slate); margin-top:5px; }
.field .req { color:var(--coral); font-weight:700; }
.field-err { font-size:12.5px; color:var(--danger); margin-top:5px; display:none; }
.field-emph { background:var(--em-ultra); border:1px solid var(--em-light); border-radius:12px; padding:14px 14px 12px; margin:0 -2px 15px; }
.field-emph label { color:var(--emerald-deep); }
input[type="text"], input[type="email"], input[type="tel"], textarea, select { width:100%; padding:12px 14px;
  min-height:48px; border:1px solid var(--field-border); border-radius:12px; font-family:inherit; font-size:16px;
  background:#fff; color:var(--dark); transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--emerald); box-shadow:0 0 0 3px rgba(0,97,95,.12); }
textarea { resize:vertical; min-height:110px; line-height:1.5; }
select { background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1%201L6%206L11%201%22%20stroke%3D%22%2300615F%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
form.attempted input:invalid, form.attempted textarea:invalid, form.attempted select:invalid {
  border-color:var(--danger); box-shadow:0 0 0 3px rgba(185,28,28,.08); }

.radio-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.radio-row.three { grid-template-columns:1fr 1fr 1fr; }
.radio-row.tracks { grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); }
@media (max-width:480px) { .radio-row, .radio-row.three { grid-template-columns:1fr; } .radio-row.tracks { grid-template-columns:1fr 1fr; } .radio-row.tracks .radio-card:last-child:nth-child(odd) { grid-column:1 / -1; } }
.radio-card { position:relative; cursor:pointer; }
.radio-card input { position:absolute; opacity:0; pointer-events:none; }
.radio-card .rc-inner { display:flex; align-items:center; justify-content:center; min-height:48px; padding:11px 13px;
  border:1px solid var(--field-border); border-radius:12px; background:#fff; font-size:14.5px; font-weight:600;
  color:var(--slate-deep); transition:border-color .12s, background .12s, color .12s, transform .12s; text-align:center; }
.radio-card:hover .rc-inner { transform:translateY(-1px); border-color:rgba(0,97,95,.35); }
.radio-card input:checked + .rc-inner { border-color:var(--emerald); background:var(--em-light); color:var(--emerald-deep); }
.radio-card input:focus-visible + .rc-inner { box-shadow:0 0 0 3px rgba(0,97,95,.18); }

/* dropzone */
.file-wrap { display:block; cursor:pointer; padding:20px 18px; border:1.5px dashed var(--emerald); border-radius:14px;
  background:var(--em-ultra); color:var(--emerald-deep); text-align:center; font-size:14px; font-weight:600;
  transition:background .15s, border-color .15s; }
.file-wrap:hover { background:var(--em-light); }
.file-wrap.drag { background:var(--em-light); border-color:var(--coral); }
.file-wrap.has-file { background:#fff; border-style:solid; border-color:var(--emerald); }
.file-wrap input { display:none; }
.file-wrap .fw-icon { display:block; margin:0 auto 6px; }
.file-name { display:block; margin-top:6px; font-size:12px; color:var(--slate); word-break:break-all; }
.replace-link { display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700; color:#B23A2B; }
.cv-nudge { display:block; margin-top:6px; font-size:12px; color:#854D0E; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; min-height:48px;
  border-radius:999px; font-weight:700; font-size:15.5px; border:none; cursor:pointer; font-family:inherit;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-primary { background:var(--coral); color:#fff; box-shadow:0 6px 18px -6px rgba(224,88,72,.5); }
.btn-primary:hover:not(:disabled) { background:var(--coral-deep); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.55; cursor:wait; }
.btn-ghost { background:transparent; color:var(--emerald-deep); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--em-light); border-color:var(--emerald); }
.btn-white { background:#fff; color:var(--dark); }
.btn-white:hover { transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(0,0,0,.4); }
.btn .arr { font-weight:800; transition:transform .15s ease; }
.btn:hover .arr { transform:translateX(3px); }
.submit-row { margin-top:4px; }
.submit-row .btn { width:100%; }
.submit-note { font-size:12.5px; color:var(--slate-deep); margin-top:10px; }

/* ── success band ── */
.success-band { position:relative; overflow:hidden; background:var(--emerald-deep); border-radius:var(--radius);
  padding:44px 28px 52px; text-align:center; color:#fff; }
.success-band::after { content:"FoodLoot"; position:absolute; left:50%; bottom:-0.2em; transform:translateX(-50%);
  font-family:'LowSide','Plus Jakarta Sans',sans-serif; font-weight:400; font-size:clamp(90px,16vw,180px);
  letter-spacing:-0.02em; line-height:1; color:rgba(255,255,255,.05); white-space:nowrap; pointer-events:none; }
.success-band > * { position:relative; z-index:1; }
.success-band .tick { width:64px; height:64px; margin:0 auto 16px; background:var(--coral); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; }
@media (prefers-reduced-motion: no-preference) {
  .success-band .tick { animation:pop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes pop { 0%{transform:scale(.4);opacity:0} 100%{transform:scale(1);opacity:1} }
}
.success-band h2 { font-size:clamp(22px,4vw,30px); font-weight:900; letter-spacing:-0.5px; }
.success-band .s-sub { margin-top:8px; font-size:14.5px; color:rgba(255,255,255,.8); }
.succ-steps { list-style:none; max-width:420px; margin:22px auto 0; text-align:left; }
.succ-steps li { position:relative; display:flex; align-items:flex-start; gap:12px; padding-bottom:14px; }
.succ-steps li:last-child { padding-bottom:0; }
.succ-steps li::before { content:""; position:absolute; left:11px; top:26px; bottom:2px; width:1px; background:rgba(255,255,255,.25); }
.succ-steps li:last-child::before { display:none; }
.succ-steps .n { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:11px;
  font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.succ-steps .n.done { background:var(--coral); }
.succ-steps p { font-size:13.5px; color:rgba(255,255,255,.85); padding-top:1px; }
.succ-ctas { margin-top:24px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.succ-ctas .btn-ghost { color:#fff; border-color:rgba(255,255,255,.35); }
.succ-ctas .btn-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.hide { display:none !important; }

/* ── footer close band ── */
footer.band-close { position:relative; overflow:hidden; background:var(--emerald-deep); text-align:center;
  padding:34px 20px 72px; margin-top:40px; }
footer.band-close::after { content:"FoodLoot"; position:absolute; left:50%; bottom:-0.18em; transform:translateX(-50%);
  font-family:'LowSide','Plus Jakarta Sans',sans-serif; font-weight:400; font-size:clamp(80px,14vw,170px);
  letter-spacing:-0.02em; line-height:1; color:rgba(255,255,255,.05); white-space:nowrap; pointer-events:none; }
footer.band-close .foot-lines { position:relative; z-index:1; font-size:13px; color:rgba(255,255,255,.65); display:grid; gap:6px; }
footer.band-close .foot-lines a { color:#fff; font-weight:600; }
footer.band-close .foot-lines a:hover { text-decoration:underline; }

/* ── reveal (html.js gated — content never hidden without JS) ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .r { opacity:0; transform:translateY(14px);
    transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--d,0s), transform .5s cubic-bezier(.16,1,.3,1) var(--d,0s); }
  html.js .r.in { opacity:1; transform:none; }
}
.d1 { --d:.07s; } .d2 { --d:.14s; }