/* How JoberTrust Works. Loaded only by templates/pages/how_it_works.html.

   The Stitch export declared its own palette (primary #0B1527, accent
   #059669). That is not reintroduced here: everything maps onto the existing
   tokens in jobertrust.css, so the page cannot drift from the rest of the
   site. The greens are close enough that it reads as designed. */

.hw { padding-bottom: var(--jt-3xl); }

/* --- Breadcrumb --------------------------------------------------------- */

.hw-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--jt-md);
  font-size: 13px;
  color: var(--jt-on-surface-variant);
  min-width: 0;
}
.hw-crumbs a { color: inherit; text-decoration: none; }
.hw-crumbs a:hover { color: var(--jt-secondary); text-decoration: underline; }
.hw-crumbs .material-symbols-outlined { font-size: 16px; color: var(--jt-outline-variant); }
.hw-crumbs [aria-current] { color: var(--jt-on-surface); font-weight: 600; }

/* --- Hero --------------------------------------------------------------- */

.hw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jt-xl);
  align-items: center;
  padding-block: var(--jt-xl) var(--jt-2xl);
}
@media (min-width: 1024px) {
  .hw-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--jt-2xl);
    padding-block: var(--jt-2xl) var(--jt-3xl);
  }
}

.hw-hero-copy { min-width: 0; }

.hw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--jt-md);
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jt-on-secondary-container);
  background-color: var(--jt-success-soft);
  border: 1px solid var(--jt-success-line);
  border-radius: var(--jt-radius-full);
}
.hw-eyebrow .material-symbols-outlined { font-size: 14px; }

.hw-h1 {
  margin: 0 0 var(--jt-md);
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--jt-primary);
}
@media (min-width: 768px)  { .hw-h1 { font-size: 42px; } }
@media (min-width: 1024px) { .hw-h1 { font-size: 52px; } }

.hw-lede {
  margin: 0 0 var(--jt-md);
  max-width: 36rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--jt-on-surface-variant);
}
@media (min-width: 768px) { .hw-lede { font-size: 17px; } }

.hw-tagline {
  margin: 0 0 var(--jt-lg);
  font-size: 15px;
  font-weight: 700;
  color: var(--jt-secondary);
}

.hw-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jt-sm);
  margin-bottom: var(--jt-xl);
}
.hw-hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hw-hero-actions .btn { flex: 0 0 auto; } }

.hw-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .hw-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hw-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--jt-on-surface-variant);
}
.hw-points .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; color: var(--jt-secondary); }
.hw-points strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--jt-on-surface);
}

/* The artwork is 1024x1432 (portrait). Left to `height: auto` it renders
   ~780px tall in a 560px column, which swallows the viewport and strands the
   copy in a tall empty column.

   Capped with aspect-ratio + object-fit instead. The subject sits centre-top,
   so `object-position: center top` keeps her face and the trust card in frame
   while the crop takes from the bottom. */
.hw-hero-media { min-width: 0; }

.hw-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1024 / 1432;
  max-height: 380px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--jt-radius-2xl);
}
@media (min-width: 640px)  { .hw-hero-img { max-height: 440px; } }
@media (min-width: 1024px) { .hw-hero-img { max-height: 520px; } }
@media (min-width: 1280px) { .hw-hero-img { max-height: 560px; } }

/* --- Account cards ------------------------------------------------------ */

.hw-accounts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jt-md);
  margin-bottom: var(--jt-2xl);
}
@media (min-width: 768px) { .hw-accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hw-account-card {
  padding: var(--jt-lg);
  min-width: 0;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-xl);
  box-shadow: var(--jt-shadow-sm);
}
.hw-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  color: var(--jt-secondary);
  background-color: var(--jt-success-soft);
  border-radius: var(--jt-radius-lg);
}
.hw-account-icon .material-symbols-outlined { font-size: 24px; }
.hw-account-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--jt-primary); }
.hw-account-text { margin: 0 0 var(--jt-md); font-size: 14px; line-height: 1.55; color: var(--jt-on-surface-variant); }
.hw-account-actions { display: flex; flex-wrap: wrap; gap: var(--jt-sm); }
.hw-account-actions .btn { flex: 1 1 130px; }

/* --- Section furniture -------------------------------------------------- */

.hw-section { margin-bottom: var(--jt-2xl); min-width: 0; }
@media (min-width: 768px) { .hw-section { margin-bottom: var(--jt-3xl); } }

.hw-head { margin-bottom: var(--jt-lg); }
.hw-h2 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--jt-primary);
}
@media (min-width: 768px) { .hw-h2 { font-size: 30px; } }
.hw-h2-accent { color: var(--jt-secondary); }
.hw-sub { margin: 0; font-size: 15px; color: var(--jt-on-surface-variant); }

/* --- Numbered steps ----------------------------------------------------- */

.hw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: var(--jt-md);
  align-items: start;
  padding: var(--jt-md);
  margin-bottom: var(--jt-md);
  min-width: 0;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-xl);
  box-shadow: var(--jt-shadow-sm);
}
@media (min-width: 768px) { .hw-step { padding: var(--jt-xl); column-gap: var(--jt-md); } }
@media (min-width: 1024px) {
  /* Aside sits beside the body; the number keeps its own narrow column. */
  .hw-step { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--jt-xl); }
}

.hw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 700;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
  border-radius: var(--jt-radius-full);
}

.hw-step-body { min-width: 0; }
.hw-step-body > * + * { margin-top: 10px; }
.hw-step-body p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--jt-on-surface-variant); }
@media (min-width: 768px) { .hw-step-body p { font-size: 15px; } }

.hw-step-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--jt-primary);
  overflow-wrap: anywhere;
}
@media (min-width: 768px) { .hw-step-title { font-size: 22px; } }
.hw-step-kicker { font-weight: 600; color: var(--jt-on-surface) !important; }

/* Step 4 and 6 have no aside; let the body span the free column. */
.hw-step:not(:has(.hw-aside)) .hw-step-body { grid-column: 2 / -1; }

/* --- Inline notes ------------------------------------------------------- */

.hw-note {
  padding: 14px;
  min-width: 0;
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
.hw-note > * + * { margin-top: 8px; }
.hw-note-accent { background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }
.hw-note-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--jt-on-surface);
}
.hw-note-title .material-symbols-outlined { font-size: 18px; color: var(--jt-secondary); }
.hw-note-strong { font-weight: 600; color: var(--jt-on-surface) !important; }

.hw-caveat {
  padding-left: 12px;
  border-left: 3px solid var(--jt-warning-line);
  font-size: 13px !important;
  color: var(--jt-outline) !important;
}

/* --- Lists -------------------------------------------------------------- */

.hw-list-lead { font-weight: 600; color: var(--jt-on-surface) !important; }
.hw-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--jt-on-surface-variant); }
.hw-list li { margin-bottom: 2px; }
.hw-list-cols { columns: 1; }
@media (min-width: 768px) { .hw-list-cols { columns: 2; column-gap: var(--jt-xl); } }

.hw-check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hw-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--jt-on-surface-variant);
}
.hw-check-list .material-symbols-outlined { flex: 0 0 auto; font-size: 17px; color: var(--jt-secondary); }
@media (min-width: 640px) { .hw-check-list-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Split cards -------------------------------------------------------- */

.hw-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .hw-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hw-split-card {
  padding: 14px;
  min-width: 0;
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
.hw-split-card > * + * { margin-top: 8px; }
.hw-split-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--jt-on-surface-variant); }
.hw-split-card-accent { background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }

/* --- Verification states and tiers -------------------------------------- */

.hw-states { margin: 0; }
.hw-states > div + div { margin-top: 12px; }
.hw-states dt {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--jt-on-surface-variant);
  background-color: var(--jt-surface-container);
  border-radius: var(--jt-radius-full);
}
.hw-states dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--jt-on-surface-variant); }

.hw-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .hw-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hw-tier {
  padding: 14px;
  min-width: 0;
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
.hw-tier p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--jt-on-surface-variant); }
.hw-tier-title { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--jt-on-surface); }
.hw-tier-badge {
  display: inline-flex;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: var(--jt-radius-full);
}
.hw-tier-1 { color: #1e40af;                         background-color: var(--jt-info-soft);    border-color: var(--jt-info-line); }
.hw-tier-2 { color: #92400e;                         background-color: var(--jt-warning-soft); border-color: var(--jt-warning-line); }
.hw-tier-3 { color: var(--jt-on-secondary-container); background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }

/* --- Evidence columns --------------------------------------------------- */

.hw-evidence { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .hw-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-evidence-title { margin: 0 0 5px; font-size: 13px; font-weight: 700; color: var(--jt-on-surface); }

/* --- Quote -------------------------------------------------------------- */

.hw-quote {
  margin: 0;
  padding: var(--jt-md);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
  border-radius: var(--jt-radius-lg);
}
@media (min-width: 768px) { .hw-quote { font-size: 18px; padding: var(--jt-lg); } }

/* --- Aside mockups ------------------------------------------------------ */

.hw-aside {
  padding: 14px;
  min-width: 0;
  align-self: start;
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
}
@media (max-width: 1023px) { .hw-aside { grid-column: 2 / -1; } }

.hw-aside-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jt-outline);
}
.hw-aside-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--jt-outline); }

.hw-mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
}
.hw-mock-search .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; color: var(--jt-outline); }
.hw-mock-text {
  font-size: 13px;
  color: var(--jt-outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-mock-btn {
  display: block;
  margin-top: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-radius: var(--jt-radius);
}

.hw-score {
  margin: 0;
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  color: var(--jt-secondary);
  font-variant-numeric: tabular-nums;
}
.hw-score-label { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--jt-on-surface); }

/* --- Professional intro ------------------------------------------------- */

.hw-pro-intro { margin-bottom: var(--jt-md); }
.hw-pro-intro p { margin: 0 0 8px; font-size: 15px; line-height: 1.65; color: var(--jt-on-surface-variant); }
.hw-section > .hw-split { margin-bottom: var(--jt-lg); }
.hw-section > .hw-list-lead { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--jt-on-surface); }
.hw-section > .hw-list { margin-bottom: var(--jt-lg); }

/* --- Principle band ----------------------------------------------------- */

.hw-principle {
  padding-block: var(--jt-2xl);
  margin-bottom: var(--jt-2xl);
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
}
@media (min-width: 768px) { .hw-principle { padding-block: var(--jt-3xl); } }
.hw-principle-inner { max-width: 52rem; }
.hw-principle-title {
  margin: 0 0 var(--jt-md);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--jt-surface-bright);
}
@media (min-width: 768px) { .hw-principle-title { font-size: 30px; } }
.hw-principle p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--jt-on-primary-container); }

/* --- FAQ ---------------------------------------------------------------- */

.hw-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
@media (min-width: 768px) { .hw-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.hw-faq-item {
  padding: 14px var(--jt-md);
  min-width: 0;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
  transition: border-color var(--jt-transition), box-shadow var(--jt-transition);
}
.hw-faq-item[open] { border-color: var(--jt-secondary); box-shadow: var(--jt-shadow-sm); }

.hw-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--jt-on-surface);
  cursor: pointer;
  list-style: none;
}
.hw-faq-item summary::-webkit-details-marker { display: none; }
.hw-faq-item summary::after {
  content: "add";
  flex: 0 0 auto;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: 400;
  color: var(--jt-outline);
  transition: transform var(--jt-transition);
}
.hw-faq-item[open] summary::after { content: "remove"; color: var(--jt-secondary); }
.hw-faq-item summary:focus-visible { outline: 2px solid var(--jt-secondary); outline-offset: 3px; border-radius: var(--jt-radius-sm); }

.hw-faq-item p {
  margin: 10px 0 0;
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--jt-on-surface-variant);
  border-top: 1px solid var(--jt-outline-variant);
}

/* --- Closing CTA -------------------------------------------------------- */

.hw-cta { padding-block: var(--jt-xl); background-color: var(--jt-surface-container); }
.hw-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jt-md);
  text-align: center;
  min-width: 0;
}
@media (min-width: 900px) {
  .hw-cta-inner { flex-direction: row; align-items: center; text-align: left; gap: var(--jt-lg); }
  .hw-cta-copy { flex: 1 1 auto; min-width: 0; }
}

.hw-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  color: var(--jt-secondary);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-success-line);
  border-radius: var(--jt-radius-full);
}
.hw-cta-icon .material-symbols-outlined { font-size: 26px; }
.hw-cta-title { margin: 0 0 3px; font-size: 20px; font-weight: 800; color: var(--jt-primary); }
@media (min-width: 768px) { .hw-cta-title { font-size: 24px; } }
.hw-cta-text { margin: 0; font-size: 14px; color: var(--jt-on-surface-variant); }
.hw-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--jt-sm); flex: 0 0 auto; }
.hw-cta-actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hw-cta-actions .btn { flex: 0 0 auto; } }