/* © 2026 Job Shift Careers. All rights reserved. */
/* Home page only: full-width bands, the offer-letter X-ray, the lamp,
   and the short welcome shown inside the installed app.
   The shared website look (header, bands, articles, footer) is in site.css.
   Everything is readable without motion; html.motion adds the animations. */

/* the home page runs full width: no app padding, no 680px column */
.land{max-width:none;padding:0;gap:0;display:block}
.land .row{gap:12px}

/* ---------- the offer letter and its X-ray ---------- */
.l-xray{display:grid;gap:clamp(26px,4vw,60px);align-items:center}
@media (min-width:900px){.l-xray{grid-template-columns:minmax(0,1fr) 340px}}
.xr-copy{display:grid;gap:14px;min-width:0}
.xr-notes{display:grid;gap:9px;list-style:none;padding:0;margin:0}
.xr-notes li{display:flex;gap:10px;align-items:center;color:var(--s-ink);font-size:calc(.95rem*var(--ts,1))}
html.site .xr-notes .pill{border-radius:0;font-family:var(--fb);font-weight:700;font-size:calc(.8rem*var(--ts,1));padding:3px 10px;
  background:transparent;border:1px solid var(--s-brass);color:var(--s-brass)}
.letter{position:relative;height:380px;max-width:330px;width:100%;justify-self:center}
.letter .paper,.letter .xlayer{position:absolute;inset:0;border-radius:2px;padding:24px 22px;overflow:hidden}
.letter .paper{background:#FBFAF6;box-shadow:0 34px 70px -28px rgba(0,0,0,.6)}
.letter .lh{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.letter .lh i{width:22px;height:22px;border-radius:2px;background:linear-gradient(135deg,#E8B04A,#9C6416)}
.letter .lh b{font:700 calc(.7rem*var(--ts,1)) var(--fb);letter-spacing:.14em;text-transform:uppercase;color:#5A6377}
.letter .ln{height:7px;border-radius:2px;background:#DADDE6;margin:10px 0}
.letter .ln.s{width:55%}.letter .ln.m{width:78%}.letter .ln.l{width:92%}
.letter .amt{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px;
  font-family:var(--s-serif);font-weight:400;color:#1B2233;font-size:calc(1.4rem*var(--ts,1))}
.letter .amt small{font:600 calc(.64rem*var(--ts,1)) var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#5A6377}
.letter .xlayer{background:radial-gradient(120% 80% at 50% 30%,#163F45,#0A1E22);display:grid;align-content:start;gap:15px;
  background-image:linear-gradient(rgba(70,194,174,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,194,174,.12) 1px,transparent 1px),radial-gradient(120% 80% at 50% 30%,#163F45,#0A1E22);background-size:24px 24px,24px 24px,auto}
.letter .xlayer .lh b{color:#7FC9BE}
.letter .xlayer .lh i{background:linear-gradient(135deg,#46C2AE,#163F45)}
.xr-ring{display:grid;place-items:center}
.xr-inh{color:var(--filmMute);font-size:calc(.85rem*var(--ts,1));text-align:center}
.xr-inh b{display:block;font-family:var(--s-serif);font-weight:400;font-size:calc(2rem*var(--ts,1));color:var(--filmAcc);font-variant-numeric:tabular-nums}
.xbar{display:flex;height:12px;border-radius:0;overflow:hidden;background:var(--filmSoft)}
.xbar i{width:var(--w);height:100%}
.letter .beam{position:absolute;left:-6px;right:-6px;top:-4px;height:8px;border-radius:0;background:#46C2AE;box-shadow:0 0 22px 6px rgba(70,194,174,.85);opacity:0;z-index:2}
.sticky{position:absolute;z-index:3;font-family:var(--fh);font-weight:700;line-height:1.15;padding:10px 12px;border-radius:2px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.7);font-size:calc(.92rem*var(--ts,1));max-width:150px}
.sticky.n1{right:-14px;top:84px;background:#FFE58A;color:#3A2A00;transform:rotate(3deg)}
.sticky.n2{left:-14px;bottom:26px;background:#FF9A86;color:#2A0008;transform:rotate(-3deg)}

/* ---------- the lamp and its smoke ---------- */
.s-lamp .lamp{width:100%;height:auto;display:block}
.smoke{position:absolute;left:84%;bottom:62%;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,231,168,.7),transparent 70%);opacity:0}

/* ---------- motion ---------- */
html.motion .smoke{animation:puff 3.4s ease-out infinite}
html.motion .smoke.s2{animation-delay:1.7s}
html.motion .s-lamp{animation:lampglow 2.4s ease-in-out infinite alternate}
html.motion .l-cta{position:relative;overflow:hidden}
html.motion .l-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out 2s infinite}

html.motion .letter:not(.go) .xlayer{clip-path:inset(0 0 100% 0)}
html.motion .letter:not(.go) .sticky{opacity:0}
html.motion .letter.go .xlayer{animation:reveal 1.6s ease-in-out .2s both}
html.motion .letter.go .beam{animation:beam3 1.6s ease-in-out .2s both}
html.motion .letter.go .sticky{animation:stick .45s cubic-bezier(.2,1.4,.4,1) both}
html.motion .letter.go .n1{animation-delay:2.1s}
html.motion .letter.go .n2{animation-delay:2.7s}
html.motion .letter.go .xbar i{animation:barin .9s cubic-bezier(.2,.8,.2,1) 1.7s both;transform-origin:left}
html.motion .spotn{animation:pulse 2.4s ease-in-out infinite}

@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translate(-10px,-70px) scale(3)}}
@keyframes lampglow{to{filter:drop-shadow(0 0 30px rgba(232,176,74,.8))}}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes beam3{0%{opacity:1;top:-4px}92%{opacity:1}100%{opacity:0;top:calc(100% - 6px)}}
@keyframes stick{from{opacity:0;transform:scale(.6)}to{opacity:1}}
@keyframes barin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{50%{opacity:.75}}
@media (prefers-reduced-motion:reduce){html.motion *{animation:none!important}}

/* ---------- the installed app's short welcome ---------- */
.aw{max-width:520px;gap:10px;padding-top:10px;min-height:calc(100dvh - 80px);align-content:start}
.aw-g{text-align:center;font-size:calc(1.2rem*var(--ts,1));margin:0}
.aw-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;outline:none}
.aw-track::-webkit-scrollbar{display:none}
.aw-s{scroll-snap-align:center;display:grid;justify-items:center;gap:10px;text-align:center;padding:4px 8px}
.aw-s h1{font-size:calc(1.7rem*var(--ts,1))}
.aw-dots{display:flex;gap:8px;justify-content:center}
.aw-dots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .3s,background .3s}
.aw-dots i.on{width:22px;background:var(--acc)}
.aw-btns{display:grid;gap:10px;margin-top:6px}
.aw .bezel{position:relative;width:min(220px,58vw);aspect-ratio:390/780;border-radius:34px;padding:8px;background:#0A0F24;border:1px solid #2C3870}
.aw .bezel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px;background:var(--bg)}
.aw .bezel .ph-l{display:none}
html.light .aw .bezel .ph-l{display:block}html.light .aw .bezel .ph-d{display:none}
.ctr{text-align:center}