/* Ported from the Anders Group design repo: templates/job-page.html
   Scoped to .anders-design and re-indented on the way in; the rules
   themselves are verbatim. Do not hand-edit — a re-port overwrites this
   file. Change the design repo and re-run:
     node tools/port-design.js
   See JOB-TEMPLATES-PLAN.md. */

/* =========================================================================
   Job page — page-specific styles. Mobile-first: base = 375px baseline,
   widened at the canonical 640 / 768 / 1024 breakpoints (see tokens.css).
   All colors come from tokens; reusable pieces live in components.css.
   ========================================================================= */
.anders-design .page {
  background: var(--card);
  min-height: 100vh;
  overflow-x: clip;
}

.anders-design .skip-link {
  position: absolute;
  left: var(--s-3);
  top: -56px;
  z-index: 60;
  background: var(--accent);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 500;
  transition: top .15s ease;
}

.anders-design .skip-link:focus {
  top: var(--s-3);
}

/* ---------- Header ---------- */
/* The logo image is shorter than the header bar; stretch the link itself
   to the header's full height so the tap target isn't limited to the
   smaller image (WCAG/44px touch-target minimum). */

/* ---------- Breadcrumb ---------- */
.anders-design .breadcrumb-band {
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}

.anders-design .breadcrumb {
  font-size: 13px;
  color: var(--muted);
}

.anders-design .breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.anders-design .breadcrumb ol::-webkit-scrollbar {
  display: none;
}

.anders-design .breadcrumb li {
  display: flex;
  align-items: center;
}

.anders-design .breadcrumb li+li::before {
  content: "›";
  margin-right: 6px;
  color: var(--muted);
}

.anders-design .breadcrumb a,
.anders-design .breadcrumb [aria-current="page"] {
  display: inline-block;
  padding: 13px 2px;
}

.anders-design .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.anders-design .breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.anders-design .breadcrumb [aria-current="page"] {
  color: var(--slate);
  font-weight: 500;
}

/* Condensed mobile breadcrumb: Home › CT Tech Jobs › 1373326. Full
   hierarchy returns at 768px and always lives in the BreadcrumbList JSON-LD. */
.anders-design .bc-mid {
  display: none;
}

/* ---------- Layout ---------- */
.anders-design .layout {
  padding-top: var(--s-6);
  padding-bottom: var(--s-section);
}

/* Named container so components inside the main column can respond to the
   column's width instead of the viewport's — it loses 368px to the sticky
   apply rail from 1024px up. */
.anders-design .layout > main {
  min-width: 0;
  width: 100%;
  container: main / inline-size;
}

/* ---------- Job header + fact rail ---------- */
.anders-design h1 {
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.015em;
}

.anders-design .job-meta {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

/* Fact rail is a canvas card so the key assignment details stand out from
   the surrounding page. */
.anders-design .fact-rail {
  margin-top: var(--s-card);
  padding: var(--s-4);
  background: var(--canvas);
  border: 1px solid var(--action-line);
  border-radius: var(--r);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.anders-design .fact-item {
  flex: 1 1 50%;
  min-width: 0;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--action-line);
}

.anders-design .fact-item:nth-child(odd) {
  padding-right: var(--s-4);
}

.anders-design .fact-item:nth-child(even) {
  padding-left: var(--s-4);
  border-left: 1px solid var(--action-line);
}

.anders-design .fact-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.anders-design .fact-item dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-1);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Values wrap rather than run past their cell: specialty names get long
   ("Labor and Delivery", "Certified Surgical Technologist") and a nowrap value
   in a min-width:0 flex cell overflows onto the divider. */
.anders-design .fact-item dd {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  hyphens: auto;
  overflow-wrap: break-word;
}

.anders-design .fact-item dd small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 2px;
}

/* The pay figure never breaks mid-number; a range still wraps at its spaces. */
.anders-design .fact-item--pay dd {
  font-size: 25px;
  color: var(--emph);
  letter-spacing: -.01em;
  overflow-wrap: normal;
  word-break: keep-all;
}

.anders-design .fact-item--pay dd small {
  font-size: 13px;
}

.anders-design .fact-item dd,
.anders-design .sim-pay,
.anders-design .bar-pay strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* The rail goes four-across on the width it actually has, not the width of the
   window: from 1024px the sticky apply rail takes 368px, leaving the main
   column near 580px, and four cells in that space shred every label and value
   onto three lines. A container query keeps the 2×2 grid there and switches to
   the single row once the column can carry it — at 768–1023 (no sidebar yet)
   and again past ~1200. */
@container main (min-width: 660px) {
  .anders-design .fact-rail {
    flex-wrap: nowrap;
    padding: var(--s-4) var(--s-6);
  }

  /* flex:1 — not the content-sized 1 1 auto, which bases each cell on its
       widest content (the letterspaced uppercase label) and squeezes the pay
       figure. Equal cells keep the dividers on a regular rhythm; min-width:0 from
       the base rule stays in force, so a long value wraps inside its quarter
       rather than pushing the row wider. */
  .anders-design .fact-item,
  .anders-design .fact-item:nth-child(odd),
  .anders-design .fact-item:nth-child(even) {
    flex: 1;
    padding: 0 var(--s-6);
    border-bottom: none;
    border-left: 1px solid var(--action-line);
  }

  .anders-design .fact-item:first-child {
    padding-left: 0;
    border-left: none;
  }

  .anders-design .fact-item dd {
    font-size: 20px;
  }

  .anders-design .fact-item--pay dd {
    font-size: 28px;
  }
}

.anders-design .under-facts {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}

.anders-design .similar-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  white-space: nowrap;
}

.anders-design .similar-link:hover {
  text-decoration: underline;
}

/* ---------- Sticky section jump navigation ---------- */
.anders-design .jump-nav {
  position: sticky;
  top: var(--h-header);
  z-index: 30;
  margin-top: var(--s-6);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.anders-design .jump-nav ul {
  list-style: none;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.anders-design .jump-nav ul::-webkit-scrollbar {
  display: none;
}

.anders-design .jump-nav a {
  display: block;
  padding: 13px var(--s-3);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.anders-design .jump-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* Anchor targets clear the sticky header + jump nav */
/* Clears the sticky stack: the header plus the jump nav beneath it, with a
   little room so a heading doesn't land flush against the nav's edge. */
.anders-design #about-job,
.anders-design #benefits,
.anders-design #faqs,
.anders-design #why-anders,
.anders-design #similar,
.anders-design #other-details {
  scroll-margin-top: calc(var(--h-header) + 61px);
}

/* ---------- Content sections ---------- */
.anders-design .job-description {
  padding-top: var(--s-8);
}

.anders-design .job-description h2,
.anders-design .section h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: var(--s-4);
}

.anders-design .job-description p,
.anders-design .section p {
  max-width: 76ch;
  margin-bottom: 14px;
  color: var(--slate);
}

/* Section divider: hairline + generous gap, same weight as the sim-row
   dividers below — separates major sections without borrowing the jump
   nav's elevated shadow (reserved for sticky/raised surfaces). */
.anders-design .section {
  margin-top: var(--s-section);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* Similar Jobs already ends in its own row hairline — a second divider
   line right after it (plus the full section gap on both sides) reads as
   a redundant extra line and gap. Drop the line, tighten the gap. */
.anders-design #similar + .section {
  border-top: none;
  margin-top: var(--s-6);
}

.anders-design .section p:last-child {
  margin-bottom: 0;
}

/* Subheading inside a section/job-description (e.g. Requirements, the two
   Other Details modules). The FAQ's questions are not subheadings: they are
   summary elements styled by the accordion component. */
.anders-design .sub-h {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  margin: var(--s-6) 0 var(--s-3);
}

.anders-design .req-list,
.anders-design .benefit-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.anders-design .req-list li,
.anders-design .benefit-list li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 15px;
}

.anders-design .icon-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--canvas);
  border: 1px solid var(--action-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.anders-design .icon-check svg {
  width: 11px;
  height: 11px;
}

/* FAQ accordion: shared component — see css/components.css */

/* Why Anders Group — navy editorial trust band */
.anders-design .why-anders {
  margin-top: var(--s-section);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy);
  padding: var(--s-6);
  position: relative;
}

.anders-design .why-anders::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--action);
}

.anders-design .why-anders h2 {
  color: var(--on-dark);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: var(--s-4);
}

.anders-design .why-anders p {
  max-width: 76ch;
  margin-bottom: 14px;
  color: var(--on-dark-2);
}

.anders-design .why-anders p:last-of-type {
  margin-bottom: 0;
}

.anders-design .why-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: var(--s-card);
  padding-top: var(--s-card);
  border-top: 1px solid var(--line-on-dark);
}

.anders-design .why-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark);
}

.anders-design .why-points .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  flex: none;
}

/* ---------- Similar Jobs — scalable rows ----------
   Supports up to eight rows without redesign. The design's .row-distance field
   is held back until phase II, so a row is title / pay / shift / CTA; the rules
   for that field come back with it. */
.anders-design .section-head h2 {
  margin-bottom: 0;
}

.anders-design .sim-list {
  border-top: 1px solid var(--line);
}

.anders-design .sim-row {
  position: relative;
  padding: 14px 116px 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.anders-design .sim-title {
  min-width: 0;
}

.anders-design .sim-title .t {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.anders-design .sim-pay,
.anders-design .sim-shift {
  display: inline-block;
  margin: 6px 14px 0 0;
  font-size: 13px;
  white-space: nowrap;
}

.anders-design .sim-pay {
  font-weight: 700;
  color: var(--emph);
}

.anders-design .sim-pay small {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}

.anders-design .sim-shift {
  color: var(--slate);
}

.anders-design .sim-cta {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.anders-design .sim-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: 1.5px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 10px 10px;
  white-space: nowrap;
}

.anders-design .sim-cta a:hover {
  border-color: var(--accent);
  text-decoration: none;
}

.anders-design .sim-all {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  white-space: nowrap;
}

.anders-design .sim-all:hover {
  text-decoration: underline;
}

/* ---------- Quick Apply card (desktop rail + mobile sheet) ---------- */
.anders-design .apply-rail {
  display: none;
}

.anders-design .apply-card {
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.anders-design .apply-head {
  background: var(--navy);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-card);
}

.anders-design .apply-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.anders-design .apply-head h2 {
  font-size: 19px;
  color: var(--on-dark);
  font-weight: 700;
  letter-spacing: -.01em;
}

.anders-design .apply-head p {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--on-dark-2);
  line-height: 1.4;
}

.anders-design .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.anders-design .attach-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
  padding: 10px 0;
  position: relative;
  width: fit-content;
}

/* The row is a label plus its hint, and neither reads as a phrase once it
   breaks mid-way: keep each part whole and let the hint drop to its own line
   in a card too narrow for both. The hint is written short enough that this
   does not happen in the apply card at any supported width. */
.anders-design .attach-line > span {
  white-space: nowrap;
}

.anders-design .attach-line:hover {
  text-decoration: underline;
}

.anders-design .attach-line:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.anders-design .attach-line input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.anders-design .attach-meta {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

/* .consent is a component; only the spacing to the button below it is local. */
.anders-design .consent {
  margin-bottom: 11px;
}

.anders-design .apply-rating {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.anders-design .apply-rating .stars {
  color: var(--star);
  font-size: 13px;
  letter-spacing: 1px;
}

.anders-design .apply-rating strong {
  color: var(--ink);
  font-weight: 700;
}

.anders-design .apply-rating .rating-note {
  white-space: nowrap;
}

/* "Have a question?" divider between the Apply and Ask an Expert CTAs */
.anders-design .ask-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--s-4) 0;
}

.anders-design .ask-divider::before,
.anders-design .ask-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.anders-design .ask-divider span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.anders-design .apply-phone-line {
  margin-top: 9px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Invisible expanded hit area (negative margin offsets the padding) so the
   tap-to-call number clears the 44px touch-target minimum without
   changing its visual size or the paragraph's layout. */
.anders-design .apply-phone-line a {
  display: inline-block;
  color: var(--accent);
  font-weight: 700;
  padding: 15px 4px;
  margin: -15px -4px;
}

.anders-design .apply-success {
  padding: 30px var(--s-6);
  text-align: center;
}

.anders-design .success-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--action-line);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.anders-design .apply-success h2 {
  font-size: 19px;
  margin-bottom: var(--s-2);
}

.anders-design .apply-success p {
  font-size: 14px;
  color: var(--muted);
  max-width: 32ch;
  margin: 0 auto var(--s-4);
}

.anders-design .success-links {
  display: grid;
  gap: var(--s-2);
}

.anders-design .success-links a,
.anders-design .success-links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 16px;
}

.anders-design .success-links .primary {
  background: var(--accent);
  color: var(--on-dark);
  border: none;
}

.anders-design .success-links .primary:hover {
  background: var(--accent-d);
}

.anders-design .success-links .secondary {
  background: var(--card);
  color: var(--accent);
  border: 1.5px solid var(--accent-line);
}

.anders-design .success-links .secondary:hover {
  border-color: var(--accent);
}

/* ---------- Mobile fixed apply bar + bottom sheet ---------- */
/* The fixed mobile apply bar sits over the bottom of the page, so the last
   footer line needs to clear it (plus the phone's home indicator). The bar is
   hidden from 1024px, where the normal footer padding is enough. */
.anders-design .foot-bottom {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.anders-design .mobile-apply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-md);
}

.anders-design .bar-pay {
  line-height: 1.15;
}

.anders-design .bar-pay strong {
  display: block;
  font-size: 19px;
  color: var(--emph);
  font-weight: 700;
}

.anders-design .bar-pay span {
  font-size: 11px;
  color: var(--muted);
}

.anders-design .mobile-apply-bar .btn {
  flex: 1;
  border-radius: var(--r-btn);
  padding: 13px 16px;
  font-size: 16px;
}

.anders-design .sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 48;
  border: none;
  cursor: pointer;
}

.anders-design .apply-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  transform: translateY(105%);
  transition: transform .28s ease;
  max-height: 88%;
  display: flex;
  flex-direction: column;
}

body.anders-design.sheet-open .apply-sheet {
  transform: translateY(0);
}

body.anders-design.sheet-open .sheet-backdrop {
  display: block;
}

/* Background page scroll is locked while the sheet is open */
body.anders-design.sheet-open {
  overflow: hidden;
}

.anders-design .apply-sheet .apply-card {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: none;
  overflow-y: auto;
}

/* Sheet header stays pinned while the form scrolls, keeping the close
   control visible at all times */
.anders-design .apply-sheet .apply-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

.anders-design .sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--on-dark-3);
  margin: 0 auto var(--s-2);
}

.anders-design .sheet-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anders-design .sheet-close {
  display: grid;
  place-items: center;
  font: inherit;
  color: var(--on-dark);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: none;
  margin: -7px -10px -7px 0;
}

.anders-design .sheet-close:hover {
  background: var(--line-on-dark);
}

/* ---------- "Ask an Expert" question modal ---------- */
.anders-design .ask-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 58;
  border: none;
  cursor: pointer;
}

.anders-design .ask-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}

body.anders-design.ask-open .ask-backdrop,
body.anders-design.ask-open .ask-modal {
  display: flex;
}

body.anders-design.ask-open {
  overflow: hidden;
}

.anders-design .ask-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.anders-design .ask-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--muted);
}

.anders-design .ask-close:hover {
  background: var(--accent-soft);
  color: var(--accent-d);
}

.anders-design .ask-card h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-right: var(--s-section);
}

.anders-design .ask-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--slate);
}

/* Job identifier pill — first part of the job title only, no job number */
.anders-design .job-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--s-4);
  padding: 7px 12px;
  background: var(--accent-soft);
  color: var(--accent-d);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
}

.anders-design .job-pill svg {
  flex: none;
  color: var(--accent);
}

.anders-design #ask-form {
  margin-top: var(--s-4);
}

/* The textarea is styled by the .field component (css/components.css) like
   every other control in the form. It used to be overridden here, and because
   an id outranks a class those rules also cancelled the floating label's
   padding and the shared focus ring. */

/* ---------- Footer ---------- */
/* Brand guide: on dark backgrounds the wordmark appears within its green brand
   block — the supplied asset. Rendered directly on the navy footer. */
/* Bottom clearance so the fixed mobile bar never covers the legal line */

/* =========================================================
   640px — large phone / small tablet
========================================================== */
@media (min-width: 640px) {
  .anders-design .benefit-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3) 40px;
  }
}

/* =========================================================
   768px — tablet: full nav, sim grid (the fact rail switches on its own
   container width, above)
========================================================== */
@media (min-width: 768px) {
  .anders-design .breadcrumb ol {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
  }

  .anders-design .bc-mid {
    display: flex;
  }

  .anders-design h1 {
    font-size: 34px;
  }

  .anders-design .why-anders {
    padding: var(--s-8);
  }

  /* Similar Jobs: single row — title, pay, shift, CTA — vertically centered.
       Same row padding as the original two-line layout (14px); one line of
       content now reads as more open at that height. The design's distance
       track (88px, between title and pay) returns with .row-distance in phase
       II. Must scale to eight rows without redesign. */
  .anders-design .sim-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 80px 94px auto;
    column-gap: var(--s-3);
    align-items: center;
    padding: 14px 0;
  }

  .anders-design .sim-cta {
    position: static;
    transform: none;
    text-align: right;
  }

  .anders-design .sim-pay,
  .anders-design .sim-shift {
    display: block;
    margin: 0;
  }
}

/* =========================================================
   1024px — desktop: two-column layout with sticky apply rail
========================================================== */
@media (min-width: 1024px) {
  .anders-design .layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 368px;
    gap: var(--s-8);
    align-items: start;
    padding-top: var(--s-8);
    padding-bottom: var(--s-hero);
  }

  .anders-design .apply-rail {
    display: block;
    position: sticky;
    top: 88px;
    align-self: start;
  }

  .anders-design .mobile-apply-bar {
    display: none;
  }

  .anders-design .foot-bottom {
    padding-bottom: var(--s-4);
  }
}