/* Components CSS for Jobdrive Theme */

/* Buttons */
.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: var(--jd-radius-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Primary Button: MUST be ink (#0f172a) on sky (#38bdf8) per accessibility rule */
.jd-btn--primary {
  background-color: var(--jd-sky);
  color: var(--jd-contrast) !important;
  border-color: var(--jd-sky);
  box-shadow: 0 2px 4px rgba(56, 189, 248, 0.2);
}

.jd-btn--primary:hover {
  background-color: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
  box-shadow: var(--jd-shadow-sky);
  transform: translateY(-1px);
}

/* Secondary Button */
.jd-btn--secondary {
  background-color: transparent;
  color: var(--jd-contrast) !important;
  border-color: var(--jd-border);
}

.jd-btn--secondary:hover {
  border-color: var(--jd-sky-deep);
  color: var(--jd-sky-deep) !important;
  background-color: var(--jd-sky-wash);
}

/* Ghost Button */
.jd-btn--ghost {
  background-color: transparent;
  color: var(--jd-contrast) !important;
}

.jd-btn--ghost:hover {
  background-color: var(--jd-sky-wash);
  color: var(--jd-sky-deep) !important;
}

/* White Button */
.jd-btn--white {
  background-color: #ffffff;
  color: var(--jd-contrast) !important;
  border-color: #ffffff;
}

.jd-btn--white:hover {
  background-color: var(--jd-sky-tint);
  color: var(--jd-contrast) !important;
}

/* Card Component */
.jd-card {
  background-color: #ffffff;
  border: 1px solid var(--jd-border);
  border-radius: var(--jd-radius-lg);
  padding: 26px;
  box-shadow: var(--jd-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jd-card:hover {
  box-shadow: var(--jd-shadow-md);
}

.jd-card--dark {
  background-color: var(--jd-slate-800);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.jd-card--highlight {
  border-color: var(--jd-sky-soft);
  box-shadow: var(--jd-shadow-sky);
}

/* Eyebrow Header Tag */
.jd-eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jd-sky-deep);
  margin-bottom: 12px;
}

.jd-section--dark .jd-eyebrow {
  color: var(--jd-sky-brand);
}

/* Rating / Status Badges */
.jd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--jd-radius-full);
  font-size: 13px;
  font-weight: 600;
}

.jd-badge--excellent {
  background-color: #dcfce7;
  color: #16a34a;
}

.jd-badge--poor {
  background-color: #fee2e2;
  color: #b91c1c;
}

.jd-badge--metered {
  background-color: #fef3c7;
  color: #b45309;
}

.jd-badge--good {
  background-color: #e0f2fe;
  color: #0369a1;
}

.jd-badge--average {
  background-color: #f1f5f9;
  color: #475569;
}

/* Checklist */
.jd-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jd-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--jd-body);
}

.jd-checklist-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--jd-sky);
  margin-top: 2px;
}

/* Header & Navigation UI */
.jd-site-header {
  height: 72px;
  background: #ffffff;
  border-bottom: 1px solid var(--jd-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
}

.jd-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.jd-nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jd-nav-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--jd-contrast);
}

.jd-nav-item--active {
  color: var(--jd-sky-deep);
}

@media (max-width: 1023px) {
  .jd-nav-menu {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   FAQ: category chips + accordion
   Rebuilt from the prototype's DCLogic (FAQ.html); multiple items may be open.
   --------------------------------------------------------------------------- */
.jd-faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.jd-faq-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--jd-border);
  background: #fff;
  color: var(--jd-body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jd-faq-chip.jd-active {
  background: var(--jd-sky);
  color: var(--jd-contrast);
  border-color: var(--jd-sky);
  box-shadow: 0 3px 8px rgba(56, 189, 248, .32);
}

.jd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 36px 0 0;
}

.jd-faq-item {
  border: 1px solid var(--jd-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.jd-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.jd-faq-q {
  font-size: 16px;
  font-weight: 700;
  color: var(--jd-contrast);
}

.jd-faq-chevron {
  display: inline-flex;
  flex: none;
  color: var(--jd-sky-deep);
  transition: transform .2s ease;
}

.jd-faq-item.jd-accordion-open .jd-faq-chevron {
  transform: rotate(180deg);
}

.jd-faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height .45s ease, opacity .35s ease, padding .45s ease;
}

.jd-faq-item.jd-accordion-open .jd-faq-answer {
  max-height: 480px;
  opacity: 1;
  padding: 0 24px 22px;
}

.jd-faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--jd-body);
}

/* Accessibility: 44px minimum tap target on touch widths. */
@media (max-width: 767px) {
  .jd-faq-chip {
    min-height: 44px;
    padding: 10px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jd-faq-chevron,
  .jd-faq-answer {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Auth forms (Login / Signup)
   The prototype built these from design-system <x-import> components, which do
   not exist outside the design tool. Rebuilt as real fields on the same tokens.
   --------------------------------------------------------------------------- */
.jd-auth-form { display: flex; flex-direction: column; gap: 20px; }
.jd-field { display: flex; flex-direction: column; gap: 7px; }
.jd-label { font-size: 14px; font-weight: 600; color: #334155; }
.jd-input-wrap { position: relative; display: flex; align-items: center; }

.jd-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #f8f9fb;
  color: var(--jd-contrast);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.jd-input::placeholder { color: var(--jd-muted); }
.jd-input-wrap .jd-input { padding-right: 46px; }

.jd-eye {
  position: absolute;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--jd-faint);
  cursor: pointer;
}

.jd-eye:hover { color: var(--jd-sky-deep); }

/* Primary auth button: ink on sky, per the contrast rule in README.md. */
.jd-btn-auth {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: #49c8fb;
  color: var(--jd-contrast);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

.jd-btn-auth:hover { background: #3bb6e0; }
.jd-btn-auth[disabled] { opacity: .7; cursor: default; }

/* Auth split: hide the brand hero and stack below tablet. */
@media (max-width: 1023px) {
  .jd-hero { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Pricing: responsive behaviour
   ---------------------------------------------------------------------------
   Ported from the style block in Pricing.html. None of it survived the port,
   which is why the plan strip kept five columns down to phone width and the
   "Swipe to compare all plans" hint — a phone-only affordance — sat visible on
   every screen including desktop.
   --------------------------------------------------------------------------- */

/* One card per row below desktop. Enterprise is the odd one out at this width
   and the source drops it rather than leave a lone card hanging. */
@media (max-width: 1023px) {
  .jd-rgrid--plans {
    grid-template-columns: 1fr !important;
    row-gap: 34px !important;
  }

  .jd-rgrid--plans > * {
    display: block !important;
    grid-row: auto !important;
  }

  .jd-rgrid--plans > *:last-child {
    display: none !important;
  }

  /* Credit explainer: the copy column centres once it sits above the coin. */
  .jd-rgrid--split[style*="--jd-cols: 0.9fr 1.1fr"] > div:first-child {
    text-align: center !important;
  }

  .jd-rgrid--split[style*="--jd-cols: 0.9fr 1.1fr"] > div:first-child > h2,
  .jd-rgrid--split[style*="--jd-cols: 0.9fr 1.1fr"] > div:first-child > p,
  .jd-rgrid--split[style*="--jd-cols: 0.9fr 1.1fr"] > div:first-child > img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* The plan comparison table keeps its real width on phones and scrolls
   sideways, with the feature column pinned so row labels stay readable. */
.cmp-hint { display: none; }

@media (max-width: 767px) {
  .cmp-hint {
    display: block;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    margin: 22px 0 0;
  }

  .cmp-outer { position: relative; }

  .cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Beats the site-wide `table { display: block }` phone rule: this table
     scrolls in its wrapper instead, so the columns keep their widths. */
  .cmp-table {
    display: table !important;
    width: auto !important;
    min-width: 720px !important;
    margin-top: 12px !important;
  }

  .cmp-table th:first-child,
  .cmp-table td:not([colspan]):first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.12);
  }

  /* Right-edge fade hinting there is more to scroll. */
  .cmp-outer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------
   Pricing: billing segmented control + questions accordion
   The .pq-* rules are ported from the style block in the Pricing.html prototype.
   --------------------------------------------------------------------------- */
.jd-seg {
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--jd-body);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.jd-seg.jd-active { background: var(--jd-sky-deep); color: #fff; }

.pq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 36px auto 0; }
.pq-item { background: #fff; border: 1px solid var(--jd-border); border-radius: 14px; overflow: hidden; }

.pq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--jd-contrast);
  user-select: none;
}

.pq-q .pq-chev {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--jd-sky-deep);
  border-bottom: 2px solid var(--jd-sky-deep);
  transform: rotate(45deg);
  transition: transform .3s ease;
}

.pq-item.pq-open .pq-chev { transform: rotate(225deg); }
.pq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.pq-item.pq-open .pq-a { grid-template-rows: 1fr; }
.pq-a-in { overflow: hidden; min-height: 0; }
.pq-a-in p { font-size: 14px; line-height: 1.6; color: var(--jd-body); margin: 0; padding: 0 24px 22px; }
.pq-q:focus-visible { outline: 2px solid var(--jd-sky); outline-offset: -3px; border-radius: 12px; }

@media (max-width: 767px) {
  .jd-seg { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-chev, .pq-a, .jd-seg { transition: none; }
}

/* ---------------------------------------------------------------------------
   Header nav items
   The prototype computed these inline from an `active` prop; the active state
   is now derived from the current page in inc/nav.php.
   --------------------------------------------------------------------------- */
.jd-navitem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--jd-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.jd-navitem.jd-active { font-weight: 600; color: var(--jd-sky-mid); }
.jd-navitem:hover { color: var(--jd-sky-deep); }

/* ---------------------------------------------------------------------------
   Site header: dropdown menus and mobile drawer
   ---------------------------------------------------------------------------
   Ported from the style block in the SiteHeader.html prototype. None of it
   made it into the theme, so every nav dropdown and the whole drawer rendered
   expanded and stacked on top of the page at every width.

   The prototype toggled the drawer with a hidden checkbox and its own comment
   asked a real build to use JS. It now uses a button plus header-drawer.js,
   which owns aria-expanded and Esc-to-close.
   --------------------------------------------------------------------------- */
.jd-nav { position: relative; height: 72px; display: flex; align-items: center; }

.jd-menu {
  position: absolute;
  top: 62px;
  left: -14px;
  min-width: 232px;
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
  z-index: 60;
}

.jd-nav:hover .jd-menu,
.jd-nav:focus-within .jd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.jd-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}

.jd-menu a:hover { background: var(--jd-sky-wash, #eff8ff); color: var(--jd-sky-deep); }
.jd-menu a .jd-sub { display: block; font-size: 12px; font-weight: 500; color: var(--jd-muted); margin-top: 2px; }
.jd-menu a:hover .jd-sub { color: #7bb8dd; }

/* Desktop: no hamburger, no drawer. */
.jd-hamburger { display: none; }
.jd-drawer { display: none; }

@media (max-width: 1023px) {
  .jd-navwrap,
  .jd-right { display: none !important; }

  .jd-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex: none;
    border: 1px solid var(--jd-border);
    border-radius: 10px;
    background: #fff;
    color: var(--jd-contrast);
    cursor: pointer;
  }

  .jd-hamburger:focus-visible {
    outline: none;
    border-color: var(--jd-sky);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .20);
  }

  .jd-drawer {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--jd-border);
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    padding: 10px 16px 20px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .jd-drawer.jd-drawer-open { display: block; }

  .jd-drawer a {
    display: block;
    padding: 10px;
    min-height: 44px;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    border-radius: 10px;
  }

  .jd-drawer a:hover { background: var(--jd-sky-wash, #eff8ff); color: var(--jd-sky-deep); }
  .jd-drawer .jd-drow { display: flex; gap: 8px; margin-top: 2px; }
  .jd-drawer .jd-drow a { flex: 1; text-align: center; border: 1px solid var(--jd-border-soft); }

  .jd-dlabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jd-muted);
    padding: 10px 10px 2px;
  }

  .jd-dcta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--jd-border-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .jd-dcta a { text-align: center; border: 1px solid var(--jd-border); padding: 13px 10px; }

  .jd-dcta a.primary {
    background: var(--jd-sky);
    color: var(--jd-contrast);
    border-color: var(--jd-sky);
    box-shadow: 0 2px 6px rgba(56, 189, 248, .35);
  }
}

/* Below 860px the prototype hides Log In and tightens the nav gaps. */
@media (max-width: 859px) {
  .jd-login { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jd-menu { transition: none; }
}

/* ---------------------------------------------------------------------------
   Footer: phone column set
   ---------------------------------------------------------------------------
   The footer carries five link columns, which is right on desktop and far too
   much to scroll past on a phone. The source drops the Product and Solutions
   columns entirely below 768px and trims Company to its first two links,
   leaving the address block, a short Company list and the legal row.

   Ported verbatim: the markup already carried these classes, so every page was
   rendering all five columns stacked on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .jd-footer-product,
  .jd-footer-solutions {
    display: none !important;
  }

  .jd-footer-company > div:last-child > a:nth-child(n + 3) {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   High Volume Hiring: candidate-voice mock
   ---------------------------------------------------------------------------
   Ported from the style block in Solutions - High Volume Hiring.html. Below
   desktop the voice mock moves under its own copy (it is authored first in
   source order) and tightens up so it matches the height of the two mocks
   beside it. None of this survived the port, so the mock stayed pinned above
   its text and towered over its neighbours.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [data-hvh-voice] { order: 1 !important; }

  [data-hvh-voice] [style*="height: 84px"] { height: 40px !important; }
  [data-hvh-voice] [style*="padding: 28px 26px 22px"] { padding: 16px 20px 12px !important; }
  [data-hvh-voice] [style*="margin-top: 22px"] { margin-top: 10px !important; }
  [data-hvh-voice] [style*="padding: 14px 26px"] { padding: 8px 20px !important; }
  [data-hvh-voice] [style*="padding: 24px 26px"] { padding: 14px 20px !important; }
  [data-hvh-voice] [style*="margin-top: 20px"] { margin-top: 12px !important; }

  /* The transcript pair stays two-up inside the mock at every width. */
  [data-hvh-voice] .jd-rgrid[style*="--jd-cols: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  [data-hvh-voice] p[style*="line-height: 1.75"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ---------------------------------------------------------------------------
   Home: hero, "How it works" timeline, cost bars
   ---------------------------------------------------------------------------
   Ported from the style block in Home.html. None of it came across, so the
   hero copy stayed left-aligned once it stacked and the timeline kept its
   desktop zig-zag on phones — cards alternating left and right of a centred
   rail, in a column far too narrow for it.
   --------------------------------------------------------------------------- */

/* Hero copy centres as soon as the split stacks. */
@media (max-width: 1024px) {
  .jd-rgrid--split[style*="--jd-cols: 1.02fr .98fr"] > div:first-child {
    text-align: center !important;
  }

  .jd-rgrid--split[style*="--jd-cols: 1.02fr .98fr"] > div:first-child > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .jd-rgrid--split[style*="--jd-cols: 1.02fr .98fr"] > div:first-child > div[style*="display: flex"] {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  /* Price and its caption stack, and the desktop line break goes. */
  [data-jd-price] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  [data-jd-price] br { display: none !important; }

  /*
   * Timeline becomes a single left-hand rail with every card to its right.
   * On desktop the steps alternate sides of a centred rail, which is why the
   * odd-numbered ones are authored card-first; forcing grid-column and
   * grid-row keeps each number beside its own card whatever the DOM order.
   */
  [data-timeline-track],
  [data-timeline-fill] {
    left: 31px !important;
    transform: none !important;
  }

  /* The rail runs the full stacked height — JS sets a desktop pixel height
     that falls well short once the steps stack. */
  [data-timeline-track] {
    top: 8px !important;
    bottom: 8px !important;
    height: auto !important;
  }

  [data-step] {
    grid-template-columns: 62px 1fr !important;
    column-gap: 20px !important;
    align-items: center !important;
    padding-bottom: 40px !important;
  }

  [data-step] [data-cell="dot"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 62px !important;
  }

  [data-step] [data-cell="dot"] > div { flex: none !important; }

  [data-step] [data-cell="left"],
  [data-step] [data-cell="right"] {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
  }

  /* Each step leaves one side empty; an empty cell would still take a row. */
  [data-step] [data-cell="left"]:empty,
  [data-step] [data-cell="right"]:empty {
    display: none !important;
  }

  [data-step] [data-cell="left"] > div,
  [data-step] [data-cell="right"] > div {
    max-width: none !important;
    width: 100% !important;
  }

  /* End CTA spans from the rail to the end of the cards, not a centred pill. */
  [data-timeline-cta] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ---------------------------------------------------------------------------
   Product Overview: interview mock (step 3)
   ---------------------------------------------------------------------------
   Ported from the style block in Product Overview.html. This mock is authored
   at 16/11 while the two above it are 16/13, which reads fine side by side on
   desktop but leaves it noticeably taller than its neighbours once the steps
   stack. The source pulls it to 16/13 on phones and shrinks its contents to
   suit rather than letting them overflow.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  [style*="aspect-ratio: 16 / 11"] {
    aspect-ratio: 16 / 13 !important;
    overflow: hidden !important;
    padding: 16px !important;
  }

  [style*="aspect-ratio: 16 / 11"] > div { padding: 16px 18px 18px !important; }

  [style*="aspect-ratio: 16 / 11"] p {
    font-size: 12.5px !important;
    line-height: 1.38 !important;
    margin-top: 14px !important;
  }

  [style*="aspect-ratio: 16 / 11"] [style*="width: 72px"] {
    width: 46px !important;
    height: 46px !important;
  }

  [style*="aspect-ratio: 16 / 11"] [style*="margin-top: 26px"] { margin-top: 12px !important; }
  [style*="aspect-ratio: 16 / 11"] [style*="margin-top: 14px"] { margin-top: 6px !important; }
}

/* ---------------------------------------------------------------------------
   Resume Screening
   ---------------------------------------------------------------------------
   Ported from the style block in Resume Screening.html.

   The hero selector needed re-expressing rather than copying. The source keys
   on `1.05fr 0.95fr` while its markup says `.95fr` — the browser normalises the
   leading zero when it serialises a style attribute, so the selector matches at
   runtime. Custom properties are not normalised, so the port has to match the
   value exactly as the pattern writes it.
   --------------------------------------------------------------------------- */

/* Hero copy centres once the split stacks.
   Scoped to this page on purpose: the source keeps these rules in Resume
   Screening's own <style> block, and Home uses the same 1.05fr .95fr ratio for
   its step sections, which stay left-aligned there. Unscoped, this centred
   three of Home's step headings. */
@media (max-width: 1024px) {
  .jobdrive-pattern-page-resume-screening
    .jd-rgrid--split[style*="--jd-cols: 1.05fr .95fr"] > div:first-child {
    text-align: center !important;
  }

  .jobdrive-pattern-page-resume-screening
    .jd-rgrid--split[style*="--jd-cols: 1.05fr .95fr"] > div:first-child > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Closing CTA centres and gains side padding so it clears the edges. */
  [data-mc-cta] {
    align-items: center !important;
    text-align: center !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* The conveyor frame is authored at a wide 3.6/3.4 ratio. On a phone that is
   too short for the resume cards flying through it, which clipped them top and
   bottom, so the ratio is dropped for a floor height instead. */
@media (max-width: 767px) {
  [style*="aspect-ratio: 3.6 / 3.4"] {
    aspect-ratio: auto !important;
    min-height: 420px !important;
  }
}

/* ---------------------------------------------------------------------------
   AI Interviews
   ---------------------------------------------------------------------------
   Ported from the style block in AI Interviews.html. Both hooks are unique to
   this page, so no page scoping is needed.
   --------------------------------------------------------------------------- */

/* Hero copy centres once the split stacks. */
@media (max-width: 1024px) {
  .jd-rgrid--split[style*="--jd-cols: .88fr 1.12fr"] > div:first-child {
    text-align: center !important;
  }

  .jd-rgrid--split[style*="--jd-cols: .88fr 1.12fr"] > div:first-child > p {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* The hero visual is a fixed 4/3.2 box. On a phone that box ends up shorter
   than the mock inside it, and its own overflow:hidden then clipped the top
   of the pulsing ring. Size to content instead and let it show. */
@media (max-width: 767px) {
  [style*="aspect-ratio: 4 / 3.2"] {
    aspect-ratio: auto !important;
    overflow: visible !important;
    margin-top: 12px !important;
  }
}

/* ---------------------------------------------------------------------------
   Reports and Insights: app mock
   ---------------------------------------------------------------------------
   Ported from the style block in Reports and Insights.html. All hooks here are
   unique to this page.

   The mock is a real screenshot of the app, authored 650px tall. Its contents
   are far taller than that and the shell clips them, which is what makes it
   read as a screenshot. Without the caps below the shell simply grew to fit —
   1597px at 375 instead of 440 — so the "screenshot" stretched down the page
   instead of being a neat framed panel.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Drop the 650px floor so the cap can take effect. */
  [style*="min-height: 650px"] {
    min-height: 0 !important;
    max-height: 560px !important;
  }
}

@media (max-width: 767px) {
  [style*="min-height: 650px"] { max-height: 440px !important; }

  /* Interviews table: on phones show only Candidate and AI Rating, dropping
     AI Feedback, Status and Time. Both spellings of `flex: none` are matched
     because the source's runtime re-serialises it as `flex: 0 0 auto`; this
     port writes `flex: none`, so either may appear. */
  [style*="flex: 2.4 1 0"],
  [style*="width: 74px; flex: none"],
  [style*="width: 74px; flex: 0 0 auto"],
  [style*="width: 60px; flex: none"],
  [style*="width: 60px; flex: 0 0 auto"] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Startups: founder overlay card
   ---------------------------------------------------------------------------
   Ported from the style block in Solutions - Startups.html. The card is
   authored to hang off the left edge of the founder photo (left: -6%), which
   works beside the copy on desktop. Once the split stacks it has to come back
   inside the photo, so the source pins it to the bottom centre instead.

   The card carries the whole mini app mock, so without this rule every element
   inside it — rail logo, candidate row, Q&A, the lot — sat ~60px left of where
   the source puts them. Hook is unique to this page.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [data-founder-card] {
    top: auto !important;
    bottom: 4% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}