/* ============================================================
   SPARK JOBS - App access components
   The three doors (browser / iOS / Android), the header "Log in",
   and frames for the real in-app screenshots.

   Shared by students.html, employers.html and pricing.html.
   Load AFTER css/styles.css and css/deal.css.
   ============================================================ */

/* ---------- Header "Log in" ------------------------------------
   Deliberately NOT styled here. .nav__actions and .nav__login are
   defined exactly once, in css/styles.css, which every page links -
   that is what keeps the header identical on all 8 pages. This file
   used to mirror css/home.css and the two drifted apart.
   -------------------------------------------------------------- */

/* ---------- The three doors ------------------------------------
   Every place the site offers the app offers all three. The
   browser door leads, because it is the one that works today.
   -------------------------------------------------------------- */
.app-doors{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.app-doors--center{justify-content:center}

/* tactile skin for the store buttons */
.deal .store-btn{
  border:2.5px solid var(--navy);
  box-shadow:var(--shadow-hard-sm);
  font-family:var(--font-body);
  text-align:left;cursor:pointer;
}
.deal .store-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy)}
.deal .store-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}
.store-btn:focus-visible{outline:3px solid var(--spark);outline-offset:3px}

/* the browser door - first-class, brand green, never buried */
.deal .store-btn--web{background:var(--forest);color:#fff;border-color:var(--navy)}
.deal .store-btn--web .k{opacity:.92}
.deal .section--dark .store-btn--web{background:var(--app-green);color:#fff;border-color:#fff}

/* The Android door carries NO href until the Play closed-test join link is
   pasted into ANDROID_APP_URL in js/app.js. js/app.js keeps it keyboard
   operable (role=button, tabindex=0) and shows the note instead of
   navigating, then gives it a real href the moment the link exists.
   Styled as clearly "not yet", never as broken. */
.deal .store-btn.is-pending{
  border-style:dashed;
  box-shadow:none;
  opacity:.82;
}
.deal .store-btn.is-pending:hover,
.deal .store-btn.is-pending:active{transform:none;box-shadow:none}
.store-btn.is-pending{cursor:pointer}

/* the inline note the Android door reveals while the link is pending */
.app-doors__note,
.app-note{
  flex:1 0 100%;margin:2px 0 0;max-width:46ch;
  font-family:var(--font-mono);font-size:.72rem;line-height:1.5;
  letter-spacing:.02em;color:var(--slate-500);
}
.app-doors__note b,.app-note b{font-weight:700;color:var(--navy)}
.deal .section--dark .app-doors__note,
.deal .section--dark .app-note{color:rgba(223,238,228,.8)}
.deal .section--dark .app-doors__note b,
.deal .section--dark .app-note b{color:#fff}
.app-doors__note a,.app-note a{color:var(--forest);font-weight:700;text-decoration:underline}
.deal .section--dark .app-doors__note a,
.deal .section--dark .app-note a{color:var(--amber)}
.app-doors__note[hidden],.app-note[hidden]{display:none}

/* a compact one-line "or open it in your browser" for tight spots */
.web-inline{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  color:var(--forest);text-decoration:none;
  border-bottom:2.5px solid var(--forest);padding-bottom:1px;
}
.web-inline:hover{color:var(--spark);border-bottom-color:var(--spark)}
.web-inline svg{width:17px;height:17px;flex:none}
.deal .section--dark .web-inline{color:var(--amber);border-bottom-color:var(--amber)}

/* ---------- Real app screenshots -------------------------------
   Actual captures from the shipping app. Framed to match the
   tactile skin, never stretched, never cropped into a lie.
   -------------------------------------------------------------- */
.app-shot{
  position:relative;width:100%;max-width:278px;margin-inline:auto;
  border:2.5px solid var(--navy);border-radius:28px;
  box-shadow:var(--shadow-hard);background:#fff;overflow:hidden;
}
.app-shot img{display:block;width:100%;height:auto}
.app-shot--tilt{transform:rotate(-1.6deg)}
.app-shot--tilt2{transform:rotate(1.4deg)}

/* a strip: shows only the top band of a taller capture */
.app-strip{
  position:relative;width:100%;max-width:420px;margin-inline:auto;
  aspect-ratio:402/268;overflow:hidden;
  border:2.5px solid var(--navy);border-radius:20px;
  box-shadow:var(--shadow-hard);background:#fff;
}
.app-strip img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.app-strip--tilt{transform:rotate(1.2deg)}

/* small honest caption under a shot */
.app-shot-cap{
  margin-top:14px;text-align:center;
  font-family:var(--font-mono);font-size:.68rem;line-height:1.5;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--slate-500);
}
.deal .section--dark .app-shot-cap{color:rgba(223,238,228,.7)}

/* ---------- Honest number chips (real, from the live database) -- */
.fact-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.fact{
  display:inline-flex;align-items:baseline;gap:.5em;
  padding:.62em 1em;background:#fff;
  border:2.5px solid var(--navy);border-radius:999px;
  box-shadow:var(--shadow-hard-sm);
}
.fact b{
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--navy);
}
.fact span{
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500);
}
.deal .section--dark .fact{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);box-shadow:none}
.deal .section--dark .fact b{color:var(--amber)}
.deal .section--dark .fact span{color:rgba(223,238,228,.75)}
.fact-note{
  margin-top:12px;font-family:var(--font-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  color:var(--slate-500);
}
.deal .section--dark .fact-note{color:rgba(223,238,228,.66)}

/* ---------- Two-column honest contrast (replaces fake quotes) --- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,26px);margin-top:36px}
@media (max-width:760px){.contrast{grid-template-columns:1fr}}
.contrast__col{
  background:#fff;border:2.5px solid var(--navy);border-radius:20px;
  box-shadow:var(--shadow-hard);padding:26px 24px;
}
.contrast__col--spark{background:linear-gradient(165deg,#f4fbf5,#e8f5ec)}
.contrast__h{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate-500);
  margin-bottom:16px;
}
.contrast__col--spark .contrast__h{color:var(--forest)}
.contrast__list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.contrast__list li{
  position:relative;padding-left:26px;line-height:1.5;
  font-size:.96rem;color:#46515f;
}
.contrast__list li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:11px;height:11px;border:2px solid var(--navy);border-radius:3px;
  background:#fff;transform:rotate(45deg);
}
.contrast__col--spark .contrast__list li::before{background:var(--spark)}

@media (prefers-reduced-motion:reduce){
  .app-shot--tilt,.app-shot--tilt2,.app-strip--tilt{transform:none}
  .deal .store-btn,.deal .store-btn:hover,.deal .store-btn:active{transition:none;transform:none}
}