/* "Your job hunt, all in one view." — Scan→Feed concept, ported to the landing.
   Fully scoped under .sf-section; every class/id/keyframe is sf-prefixed so the
   generic names (job/chip/panel/scene/feed/box/arrow/cursor/drop/resume…) can't
   collide with site styles. No :root / CSS-var redefinition — reuses the
   landing's tokens (--ink/--paper/--cream/--acid/--acid-deep/--coral/--muted
   and --font-sans/--font-display/--font-mono). Fonts already loaded by the page.
   Decorative layers (glow/grain/watermark) are absolute + clipped to the
   section so they can't bleed into neighbours. */

.sf-section{
  position:relative;overflow:hidden;
  background:var(--paper);color:var(--ink);
  padding:64px clamp(20px,5vw,88px) 72px;
  font-family:var(--font-sans);
}
.sf-section *{box-sizing:border-box}

/* ── atmosphere: acid glow + grain + ghost watermark (scoped to section) ── */
.sf-section .sf-glow{position:absolute;top:-18%;right:-12%;width:62%;height:120%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,255,61,.55),rgba(212,255,61,0));filter:blur(8px)}
.sf-section .sf-glow-b{top:auto;bottom:-22%;right:auto;left:-16%;width:48%;height:90%;
  background:radial-gradient(closest-side,rgba(255,107,71,.16),transparent)}
.sf-section .sf-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sf-section .sf-watermark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  font-family:var(--font-sans);font-weight:700;font-size:34vw;letter-spacing:-.05em;color:rgba(14,14,12,.035);white-space:nowrap}

.sf-section .sf-wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;text-align:center}

/* ── header ── */
.sf-section .sf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:8px 16px;box-shadow:3px 3px 0 var(--ink)}
.sf-section .sf-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--acid-deep);animation:sf-pulse 1.7s infinite}
@keyframes sf-pulse{0%,100%{opacity:1}50%{opacity:.2}}
.sf-section .sf-h1{font-size:clamp(25px,5vw,62px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:22px 0 0;
  white-space:nowrap}
.sf-section .sf-h1 .sf-em{display:inline-block;font-family:var(--font-display);font-style:italic;font-weight:400;background:var(--acid);
  padding:0 .14em;box-shadow:6px 7px 0 var(--ink);transform:rotate(-1.2deg)}
@media(max-width:560px){.sf-section .sf-h1{white-space:normal}}
.sf-section .sf-sub{font-size:clamp(15px,1.7vw,19px);color:#2e2c27;max-width:40em;margin:26px auto 0;line-height:1.55}
.sf-section .sf-sub b{font-weight:700;background:linear-gradient(transparent 62%,rgba(212,255,61,.7) 62%)}

/* ── flow ribbon (drives the concept) ── */
.sf-section .sf-ribbon{display:flex;align-items:flex-start;justify-content:center;gap:0;flex-wrap:wrap;margin:38px auto 0;max-width:960px}
.sf-section .sf-flow{display:flex;align-items:flex-start;gap:10px;background:none;border:none;cursor:pointer;font-family:var(--font-mono);
  padding:0}
/* forked entry: "Drop résumé" OR "Scan any posting" → same flow */
.sf-section .sf-flow .sf-stack{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.sf-section .sf-flow .sf-orlab{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.18em;color:var(--muted);
  text-transform:uppercase;text-align:center}
.sf-section .sf-flow .sf-alt{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border:2px dashed var(--coral);
  border-radius:12px;padding:9px 13px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);box-shadow:3px 3px 0 rgba(255,107,71,.45)}
.sf-section .sf-flow .sf-alt .sf-scan{color:var(--coral);font-size:14px;line-height:1}
.sf-section .sf-flow .sf-box{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ink);border-radius:13px;
  padding:11px 15px;box-shadow:4px 4px 0 var(--ink);transition:transform .18s,box-shadow .18s,background .2s}
.sf-section .sf-flow .sf-num{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ink);color:var(--acid);font-weight:700;
  font-size:11px;display:flex;align-items:center;justify-content:center}
.sf-section .sf-flow .sf-t{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.sf-section .sf-flow .sf-arrow{color:var(--coral);font-size:18px;font-weight:700;padding:0 4px;line-height:48px}
.sf-section .sf-flow.sf-on .sf-box{background:var(--acid);transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--ink)}
.sf-section .sf-flow.sf-on .sf-num{background:var(--ink);color:var(--acid)}
.sf-section .sf-flow.sf-done .sf-box{background:rgba(212,255,61,.32)}
@media(max-width:760px){.sf-section .sf-ribbon{flex-direction:column;gap:8px}.sf-section .sf-flow{justify-content:center}.sf-section .sf-flow .sf-arrow{transform:rotate(90deg)}}

/* ── hero panel on an acid platform ── */
.sf-section .sf-stagewrap{position:relative;margin:54px auto 0;max-width:900px}
.sf-section .sf-platform{position:absolute;inset:-26px -10px -34px;background:var(--acid);border:2px solid var(--ink);
  border-radius:26px;transform:rotate(-1.4deg);box-shadow:14px 16px 0 var(--ink);z-index:0}
.sf-section .sf-stage{position:relative;z-index:1}
.sf-section .sf-sticker{position:absolute;z-index:5;top:-30px;right:-6px;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--coral);color:#fff;border:2px solid var(--ink);
  border-radius:10px;padding:9px 14px;transform:rotate(4deg);box-shadow:4px 4px 0 var(--ink)}

.sf-section .sf-browser{background:var(--cream);border:2px solid var(--ink);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(14,14,12,.55)}
.sf-section .sf-chrome{display:flex;align-items:center;gap:12px;padding:11px 15px;background:var(--paper);border-bottom:2px solid var(--ink)}
.sf-section .sf-dots{display:flex;gap:6px}.sf-section .sf-dots i{width:11px;height:11px;border-radius:50%;background:rgba(14,14,12,.22)}
.sf-section .sf-urlbar{flex:1;font-family:var(--font-mono);font-size:11px;color:var(--muted);background:var(--cream);
  border:1.5px solid rgba(14,14,12,.18);border-radius:8px;padding:6px 12px;letter-spacing:.02em;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-section .sf-pin{width:26px;height:26px;flex:none;border-radius:7px;background:var(--ink);position:relative}
.sf-section .sf-pin::before{content:"";position:absolute;left:7px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--acid)}
.sf-section .sf-pin::after{content:"";position:absolute;right:6px;top:10px;width:8px;height:4px;border-bottom:2.5px solid var(--acid);border-radius:0 0 8px 8px}

.sf-section .sf-viewport{position:relative;height:540px;background:
  repeating-linear-gradient(0deg,transparent 0 27px,rgba(14,14,12,.03) 27px 28px),var(--cream);overflow:hidden;text-align:left}
/* the actual job posting on the page (left) — Klepify rides alongside it */
.sf-section .sf-posting{position:absolute;inset:0;padding:28px 32px;text-align:left}
.sf-section .sf-po-top{display:flex;align-items:center;gap:13px}
.sf-section .sf-po-logo{width:44px;height:44px;flex:none;border-radius:12px;background:var(--ink);color:var(--acid);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px}
.sf-section .sf-po-co{font-weight:700;font-size:15px;letter-spacing:-.01em}
.sf-section .sf-po-loc{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.sf-section .sf-po-apply{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid rgba(14,14,12,.3);border-radius:999px;padding:8px 17px;color:var(--muted)}
.sf-section .sf-po-title{font-size:27px;font-weight:700;letter-spacing:-.025em;margin:20px 0 13px;color:#1c1b18;max-width:14ch;line-height:1.08}
.sf-section .sf-po-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.sf-section .sf-po-tags span{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid rgba(14,14,12,.22);border-radius:999px;padding:5px 11px;color:#3a3833}
.sf-section .sf-po-sec{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px}
.sf-section .sf-po-ln{height:7px;border-radius:4px;background:rgba(14,14,12,.11);margin-bottom:9px}

.sf-section .sf-panel{position:absolute;top:0;right:0;bottom:0;width:344px;background:var(--cream);border-left:2px solid var(--ink);
  box-shadow:-20px 0 44px -24px rgba(14,14,12,.45);display:flex;flex-direction:column}
.sf-section .sf-p-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1.5px solid rgba(14,14,12,.14)}
.sf-section .sf-p-logo{font-weight:700;letter-spacing:-.02em;font-size:15px}.sf-section .sf-p-logo .sf-d{color:var(--coral)}
.sf-section .sf-p-state{margin-left:auto;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.sf-section .sf-p-state i{width:7px;height:7px;border-radius:50%;background:var(--acid-deep);animation:sf-pulse 1.7s infinite}
.sf-section .sf-p-body{flex:1;position:relative;overflow:hidden}

.sf-section .sf-scene{position:absolute;inset:0;padding:16px;opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.sf-section .sf-stage[data-scene="1"] .sf-sc1,.sf-section .sf-stage[data-scene="2"] .sf-sc2,
.sf-section .sf-stage[data-scene="3"] .sf-sc3,.sf-section .sf-stage[data-scene="4"] .sf-sc3{opacity:1;transform:none}

/* scene 1 — drop */
.sf-section .sf-drop{margin-top:40px;border:2.5px dashed rgba(14,14,12,.4);border-radius:16px;padding:38px 18px;text-align:center;background:#FFFDF7}
.sf-section .sf-drop .sf-ic{width:46px;height:46px;margin:0 auto 13px;border-radius:12px;background:var(--ink);position:relative}
.sf-section .sf-drop .sf-ic::before{content:"";position:absolute;left:50%;top:12px;width:3px;height:16px;background:var(--acid);transform:translateX(-50%)}
.sf-section .sf-drop .sf-ic::after{content:"";position:absolute;left:50%;top:12px;width:14px;height:14px;border-left:3px solid var(--acid);border-top:3px solid var(--acid);transform:translate(-50%,0) rotate(45deg)}
.sf-section .sf-drop h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.sf-section .sf-drop p{margin:6px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.sf-section .sf-filecard{margin:18px auto 0;max-width:236px;display:flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--ink);
  border-radius:12px;padding:11px 13px;box-shadow:5px 6px 0 var(--ink);opacity:0;transform:translateY(-34px) scale(.85)}
.sf-section .sf-stage[data-scene="1"] .sf-filecard{animation:sf-slam .7s cubic-bezier(.34,1.7,.5,1) .5s forwards}
@keyframes sf-slam{60%{opacity:1;transform:translateY(4px) scale(1.03)}100%{opacity:1;transform:none}}
.sf-section .sf-filecard .sf-fi{width:32px;height:40px;flex:none;background:var(--coral);border-radius:5px;position:relative}
.sf-section .sf-filecard .sf-fi::after{content:"PDF";position:absolute;left:0;right:0;bottom:5px;text-align:center;font-family:var(--font-mono);font-size:7px;font-weight:700;color:#fff}
.sf-section .sf-filecard b{font-size:12.5px;font-weight:700;display:block}.sf-section .sf-filecard span{font-family:var(--font-mono);font-size:9px;color:var(--muted)}

/* scene 2 — read */
.sf-section .sf-resume{margin-top:8px;background:#FFFDF7;border:2px solid var(--ink);border-radius:13px;padding:15px 16px;position:relative;overflow:hidden;box-shadow:5px 6px 0 var(--ink)}
.sf-section .sf-resume .sf-rn{font-size:14px;font-weight:700}
.sf-section .sf-resume .sf-rr{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.sf-section .sf-resume .sf-ln{height:6px;border-radius:4px;background:rgba(14,14,12,.1);margin-top:9px}
.sf-section .sf-scanline{position:absolute;left:0;right:0;height:46px;top:-50px;background:linear-gradient(180deg,transparent,rgba(212,255,61,.7),transparent);box-shadow:0 0 16px 2px rgba(191,232,45,.6)}
.sf-section .sf-stage[data-scene="2"] .sf-scanline{animation:sf-scan 1.5s ease-in-out .3s 2}
@keyframes sf-scan{0%{top:-50px}100%{top:175px}}
.sf-section .sf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.sf-section .sf-chip{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);
  border-radius:999px;padding:6px 12px;background:var(--acid);box-shadow:2px 2px 0 var(--ink);opacity:0;transform:scale(.6)}
.sf-section .sf-stage[data-scene="2"] .sf-chip{animation:sf-pop .4s cubic-bezier(.34,1.7,.5,1) forwards}
.sf-section .sf-stage[data-scene="2"] .sf-chip:nth-child(1){animation-delay:1.1s}
.sf-section .sf-stage[data-scene="2"] .sf-chip:nth-child(2){animation-delay:1.3s}
.sf-section .sf-stage[data-scene="2"] .sf-chip:nth-child(3){animation-delay:1.5s}
.sf-section .sf-stage[data-scene="2"] .sf-chip:nth-child(4){animation-delay:1.7s}
.sf-section .sf-stage[data-scene="2"] .sf-chip:nth-child(5){animation-delay:1.9s}
@keyframes sf-pop{to{opacity:1;transform:none}}
.sf-section .sf-parsetag{margin-top:16px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.sf-section .sf-parsetag b{color:#5d7a1a}

/* scene 3/4 — feed */
.sf-section .sf-feed-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 11px}
.sf-section .sf-feed-head .sf-ft{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sf-section .sf-feed-head .sf-fc{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:6px}
.sf-section .sf-feed-head .sf-fc i{width:6px;height:6px;border-radius:50%;background:var(--acid-deep);animation:sf-pulse 1.7s infinite}
.sf-section .sf-feed{display:flex;flex-direction:column;gap:9px}
.sf-section .sf-job{display:flex;align-items:center;gap:11px;background:#FFFDF7;border:2px solid var(--ink);border-radius:12px;padding:11px 13px;
  box-shadow:3px 4px 0 var(--ink);cursor:pointer;opacity:0;transform:translateX(26px)}
.sf-section .sf-stage[data-scene="3"] .sf-job,.sf-section .sf-stage[data-scene="4"] .sf-job{animation:sf-slide .42s cubic-bezier(.22,1,.36,1) forwards}
.sf-section .sf-stage[data-scene="3"] .sf-job:nth-child(1),.sf-section .sf-stage[data-scene="4"] .sf-job:nth-child(1){animation-delay:.12s}
.sf-section .sf-stage[data-scene="3"] .sf-job:nth-child(2),.sf-section .sf-stage[data-scene="4"] .sf-job:nth-child(2){animation-delay:.26s}
.sf-section .sf-stage[data-scene="3"] .sf-job:nth-child(3),.sf-section .sf-stage[data-scene="4"] .sf-job:nth-child(3){animation-delay:.4s}
.sf-section .sf-stage[data-scene="3"] .sf-job:nth-child(4),.sf-section .sf-stage[data-scene="4"] .sf-job:nth-child(4){animation-delay:.54s}
@keyframes sf-slide{to{opacity:1;transform:none}}
.sf-section .sf-job .sf-logo{width:30px;height:30px;flex:none;border-radius:8px;background:var(--ink);color:var(--acid);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.sf-section .sf-job .sf-who{flex:1;min-width:0}
.sf-section .sf-job .sf-who b{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-section .sf-job .sf-who span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:2px}
.sf-section .sf-job .sf-match{flex:none;text-align:center;font-family:var(--font-mono);font-weight:700;border-radius:9px;padding:6px 9px;background:var(--acid);outline:2px solid var(--ink)}
.sf-section .sf-job .sf-match b{font-size:14px;display:block;letter-spacing:-.02em}
.sf-section .sf-job .sf-match small{font-size:6.5px;letter-spacing:.14em;color:#5d7a1a;text-transform:uppercase}
.sf-section .sf-job.sf-lead{display:block}
.sf-section .sf-job.sf-lead .sf-exp{display:none}
.sf-section .sf-job.sf-lead .sf-toprow{display:flex;align-items:center;gap:11px}
.sf-section .sf-stage[data-scene="4"] .sf-job.sf-lead{outline:2px solid var(--ink);background:#fff;box-shadow:6px 7px 0 var(--acid-deep)}
.sf-section .sf-job.sf-lead .sf-exp{margin-top:11px;border-top:1.5px dashed rgba(14,14,12,.22);padding-top:11px}
.sf-section .sf-stage[data-scene="4"] .sf-job.sf-lead .sf-exp{display:block;animation:sf-slide .35s ease forwards;opacity:0;transform:none}
.sf-section .sf-exp .sf-tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.sf-section .sf-exp .sf-tag b{color:#5d7a1a}
.sf-section .sf-exp .sf-apply{margin-top:10px;display:block;text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:var(--acid);outline:2px solid var(--ink);border-radius:999px;padding:11px 0;color:var(--ink);box-shadow:3px 4px 0 var(--ink)}
.sf-section .sf-stage[data-scene="4"] .sf-exp .sf-apply{animation:sf-applypulse 1.1s ease-in-out 1.1s infinite}
@keyframes sf-applypulse{0%,100%{box-shadow:3px 4px 0 var(--ink)}50%{box-shadow:3px 4px 0 var(--ink),0 0 0 4px rgba(212,255,61,.5)}}

.sf-section .sf-cursor{position:absolute;width:22px;height:22px;z-index:30;opacity:0;pointer-events:none;color:var(--ink);filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.sf-section .sf-stage[data-scene="4"] .sf-cursor{animation:sf-cursor 1.5s ease forwards .5s}
@keyframes sf-cursor{0%{opacity:0;left:64%;top:80%}30%{opacity:1}68%{opacity:1;left:50%;top:60%}78%{transform:scale(.8)}88%{transform:scale(1)}100%{opacity:1;left:50%;top:60%}}

.sf-section .sf-foot{position:relative;z-index:2;margin:38px auto 0;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.sf-section .sf-replay{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:11px 22px;cursor:pointer;box-shadow:4px 4px 0 var(--acid)}
.sf-section .sf-replay:hover{background:var(--acid);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.sf-section .sf-footnote{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.sf-section .sf-footnote b{color:var(--coral)}

@media(prefers-reduced-motion:reduce){
  .sf-section *{animation:none!important;transition:none!important}
  .sf-section .sf-scene{opacity:1!important;transform:none!important}
}
@media(max-width:760px){
  .sf-section .sf-platform{display:none}
  .sf-section .sf-sticker{top:-22px;right:50%;transform:translateX(50%) rotate(4deg)}
  .sf-section .sf-panel{width:300px}
}