/* Careers in the current platinumcommerce.com design.
   Loads after shared.css. Two jobs:
   1. Re-declare shared.css's tokens with the site's navy palette, so the role
      table, apply rail and job description go dark without restyling each one.
   2. Carry the site header and footer (.top / .foot), copied from the marketing
      site's site.css + figma-look.css. Keep in step with that repo. */

html:has(.careers-b), body:has(.careers-b) { background: #091225; }

/* shared.css re-declares the dark tokens on .hero-dark and footer, so those
   scopes are listed too or they keep the old lavender accent. */
.careers-b,
.careers-b .hero-dark,
.careers-b footer {
  --surface: #091225;
  --surface-2: #050b1c;
  --surface-3: #050b1c;
  --surface-4: #0d1a33;
  --panel-blue: #0d1a33;
  --accent: #4ea8ff;
  --accent-light: #7cc0ff;
  --accent-dim: rgba(78, 168, 255, 0.10);
  --accent-border: rgba(78, 168, 255, 0.25);
  --on-accent: #04101f;
  --on-bg: #ffffff;
  --body: #c9ced6;
  --muted: #8f99a8;
  --faint: #6f7886;
  --border: rgba(120, 160, 255, 0.14);
  --border-strong: rgba(120, 160, 255, 0.24);
  --shadow-card: none;
  --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.35);
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
}
.careers-b {
  color: var(--body);
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 700px at 15% -10%, #142a52 0%, transparent 60%),
    radial-gradient(1000px 800px at 100% 40%, #10224a 0%, transparent 60%),
    #091225;
}

/* Sections sit on the page colour; shared.css paints them white or dark. */
.careers-b section,
.careers-b .hero,
.careers-b .hero-dark { background: transparent; }
.careers-b .glow { display: none; }

/* Heroes: left-aligned like every other page, headline in the site's scale. */
.careers-b .hero { padding: 120px 0 36px; text-align: left; }
.careers-b .hero .container.center,
.careers-b .cta-block .container.center { text-align: left; }
.careers-b .hero .eyebrow.center,
.careers-b .cta-block .eyebrow.center { justify-content: flex-start; }
.careers-b .eyebrow.center::after { display: none; }
.careers-b .eyebrow { color: var(--muted); letter-spacing: 0; text-transform: none; font: 500 13px var(--font-body); }
.careers-b .eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.careers-b h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.035em; }
.careers-b h2 { letter-spacing: -0.03em; }
.careers-b .hero .lead,
.careers-b .cta-block .lead { margin-left: 0; margin-right: 0; }
.careers-b .lead { color: var(--body); }
.careers-b .rolechips,
.careers-b .cta-block .hero-ctas { justify-content: flex-start; }
.careers-b .cta-block { padding: 90px 0 110px; }

.careers-b .crumb { margin-bottom: 28px; color: var(--muted); font-size: 14px; }
.careers-b .crumb a:hover { color: #fff; }

/* Buttons: the site's pills. */
.careers-b .btn { border-radius: 999px; }
.careers-b .btn-primary { background: var(--accent); color: var(--on-accent); }
.careers-b .btn-primary:hover { background: var(--accent-light); box-shadow: none; }
.careers-b .btn-secondary,
.careers-b .btn-tertiary { background: rgba(5, 11, 28, 0.6); border: 1px solid var(--border-strong); color: #fff; }

/* Cards and rows: near-black on navy. */
.careers-b .railcard { background: #050b1c; border-color: var(--border); }
.careers-b .jrow:hover { background: rgba(78, 168, 255, 0.06); }
.careers-b .fpill.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---- Header (site.css .top + figma-look.css overrides) ---- */
.careers-b .top { position: sticky; top: 0; z-index: 20; background: rgba(6, 12, 28, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.careers-b .top .bar { max-width: 1240px; margin: 0 auto; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px, 4vw, 32px); position: relative; }
.careers-b .top-logo img { height: 34px; width: auto; display: block; }
.careers-b .top nav { display: flex; align-items: center; gap: 4px; font: 500 14px var(--font-body); }
.careers-b .top nav a { color: #c9ced6; padding: 8px 12px; border-radius: 6px; }
.careers-b .top nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.careers-b .top .actions { display: flex; gap: 10px; align-items: center; }
.careers-b .btn-accent { display: inline-flex; align-items: center; background: #3f9ef8; color: #04101f; font: 600 13px var(--font-body); padding: 8px 16px; border-radius: 999px; }
.careers-b .btn-accent:hover { background: #63b2ff; }
.careers-b .menu-btn { display: none; background: none; border: 1px solid #1c2430; color: #fff; font: 500 14px var(--font-body); padding: 7px 12px; border-radius: 6px; cursor: pointer; }
@media (max-width: 1180px) { .careers-b .top nav { gap: 0; } .careers-b .top nav a { padding: 8px 9px; font-size: 13.5px; } }
@media (max-width: 1000px) {
  .careers-b .top nav { display: none; }
  .careers-b .menu-btn { display: block; }
  .careers-b .top nav.open { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #091225; border-bottom: 1px solid #1c2430; padding: 10px 16px 16px; }
  .careers-b .top nav.open a { padding: 12px; font-size: 16px; }
}
@media (max-width: 640px) { .careers-b .top-logo img { height: 28px; } }

/* ---- Footer (site.css .foot) ---- */
.careers-b .foot { border-top: 1px solid rgba(255, 255, 255, 0.06); background: #060d1c; padding: 0; }
.careers-b .foot .frame { max-width: 1240px; margin: 0 auto; }
.careers-b .foot .pad { padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.careers-b .foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; font-size: 14px; }
.careers-b .foot img { height: 34px; width: auto; display: block; }
@media (max-width: 640px) { .careers-b .foot img { height: 28px; } }
.careers-b .foot .foot-blurb { margin-top: 16px; max-width: 22em; color: #6f7886; font-size: 14px; }
.careers-b .foot h4 { font: 600 13px var(--font-body); letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.careers-b .foot a { display: block; color: #a9b0bb; padding: 4px 0; }
.careers-b .foot a:hover { color: #fff; }
.careers-b .foot .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; color: #6f7886; }
.careers-b .foot .base a { display: inline; margin-left: 16px; padding: 0; }
@media (max-width: 1000px) { .careers-b .foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .careers-b .foot .cols { grid-template-columns: 1fr; }
  .careers-b .hero { padding: 72px 0 24px; }
}

/* shared.css paints every `body > section` as a white band. OS's toast container
   (sonner, <section aria-label="Notifications ...">) sits there too, so it showed
   as a ~220px white strip under the footer on /careers and /events. */
body > section[aria-label^="Notifications"] { background: transparent; padding: 0; margin: 0; border: 0; min-height: 0; }