/* Competitor comparison pages.
 *
 * Loaded only by /hire-overseas-alternatives and the *-alternative pages. It
 * lives here rather than in the shell because the shell is homepage/index.html,
 * and editing that would change the reviewed homepage.
 *
 * Everything below is built on the site's own tokens (--ink, --action, --line,
 * --radius), so these pages inherit the design rather than introduce a second
 * one. The only colour decision made here is which side of a comparison row
 * carries the accent, and it is used once: on our column.
 */

/* The gaps down this hero were 30 / 14 / 0 / 14px: no rhythm, and the subhead
   sat flush against the buttons with nothing between them. Each one is set
   here, on the 26 pages that share this hero, with more room above the
   headline than below it so the heading groups with the text it introduces. */
.cmp-hero { max-width: 780px; }

.cmp-hero > .sw-badge { margin-bottom: 26px; }
.cmp-hero h1 { margin: 0 0 18px; }

.cmp-hero-sub {
  margin: 0 0 30px;
  color: var(--ink-soft);
  max-width: 62ch;
}
.cmp-hero .rd-ctas { margin-bottom: 18px; }
.cmp-hero .rd-micro { margin: 0; }

/* 24ch leaves a single word stranded on the second line of several of these
   headings. A little more room plus balanced wrapping keeps the two lines
   even instead. */
.cmp-h2 { margin: 8px 0 28px; max-width: 30ch; text-wrap: balance; }

/* --- the two definitions ------------------------------------------------ */

.cmp-what {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.cmp-what article {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 28px;
}

.cmp-what p:last-child { margin: 10px 0 0; color: var(--ink-soft); }

/* Our side is the one that carries the accent, and it carries it once. */
.cmp-what-ours { border-color: color-mix(in srgb, var(--action) 34%, var(--line)); }

/* --- at a glance -------------------------------------------------------- */

/* The table is wider than the text column on small screens, so it scrolls
   inside its own wrapper rather than pushing the page sideways. */
.cmp-table-wrap { overflow-x: auto; }

.cmp-table {
  min-width: 640px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.cmp-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}

.cmp-row:first-child { border-top: 0; }

.cmp-row.is-head {
  background: var(--bg-wash);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.cmp-row.is-head .cmp-cell { padding-block: 14px; }

.cmp-row-label {
  padding: 16px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.cmp-cell {
  padding: 16px 18px;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
}

.cmp-cell.is-ours { background: color-mix(in srgb, var(--tile-aqua) 42%, transparent); }

/* Each cell names its own column so the stacked phone layout still reads. */
.cmp-cell em {
  display: none;
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* --- cost --------------------------------------------------------------- */

.cmp-cost {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cmp-price {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--bg);
}

.cmp-price.is-ours {
  border-color: color-mix(in srgb, var(--action) 34%, var(--line));
  background: color-mix(in srgb, var(--tile-aqua) 42%, transparent);
}

.cmp-price-who {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cmp-price b {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
}

.cmp-cost-note { margin-top: 20px; color: var(--ink-soft); max-width: 70ch; }

/* --- who should choose -------------------------------------------------- */

.cmp-choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.cmp-choose-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--bg);
}

.cmp-choose-col.is-ours { border-color: color-mix(in srgb, var(--action) 34%, var(--line)); }

.cmp-choose-col h3 { margin: 0 0 14px; }

.cmp-choose-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmp-choose-col li {
  color: var(--ink-soft);
  padding-left: 26px;
  position: relative;
}

.cmp-choose-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

/* A positive/negative pair rather than two alternatives.
   On a comparison page the two columns are genuinely comparable, so they look
   alike. On /apply the pair is "what this is" against "what it is not", which
   are not equals: the second is a list of things that are not true, and a
   reader has to see that at a glance rather than by reading it. */
.cmp-choose-col.is-not {
  background: var(--bg-wash);
  border-style: dashed;
}
.cmp-choose-col.is-not h3 { color: var(--ink-soft); }
.cmp-choose-col.is-not li { color: var(--ink-faint); }
.cmp-choose-col.is-not li::before {
  content: "";
  top: 0.72em;
  left: 1px;
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-faint);
  opacity: 0.75;
}

/* Our column takes the brand check mark. The competitor's column keeps the
   neutral dot on purpose: a check mark beside their name reads as us
   endorsing them, and the two lists are meant to be distinguishable. */
.cmp-choose-col.is-ours li::before {
  top: 0.36em;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: url("/assets/check-mark.svg") center / contain no-repeat;
}


/* --- the hub ------------------------------------------------------------ */

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.cmp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cmp-card:hover {
  border-color: color-mix(in srgb, var(--action) 40%, var(--line));
  transform: translateY(-2px);
}

.cmp-card b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

.cmp-card span { color: var(--ink-soft); font-size: 0.94rem; }

.cmp-card-go {
  margin-top: auto;
  padding-top: 10px;
  color: var(--action);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .cmp-card { transition: none; }
  .cmp-card:hover { transform: none; }
}

/* --- phones ------------------------------------------------------------- */

@media (max-width: 860px) {
  .cmp-what,
  .cmp-cost,
  .cmp-choose { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  /* The table becomes one block per row: label, then each side labelled. */
  .cmp-table { min-width: 0; }
  .cmp-table-wrap { overflow-x: visible; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); }
  .cmp-row.is-head { display: none; }
  .cmp-row-label { padding-bottom: 0; }
  .cmp-cell { border-left: 0; padding-top: 8px; }
  .cmp-cell em { display: block; margin-bottom: 2px; font-size: 0.84rem; }
}

/* ------------------------------------------------------------------------
 * Landing page sections (build-landing.py).
 *
 * Shares this stylesheet with the comparison pages because both are built on
 * the same tokens and neither justifies a second file.
 * ---------------------------------------------------------------------- */

.lp-prose { max-width: 70ch; }

.lp-prose h2 { margin: 0 0 14px; }

.lp-prose p { margin: 0; color: var(--ink-soft); }

.lp-intro {
  /* The section h2 already carries a bottom margin; this sits under it, so it
     only needs to close part of that gap, not fight it. */
  margin: 10px 0 4px;
  max-width: 68ch;
  color: var(--ink-soft);
}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.lp-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--bg);
}

.lp-card h3 { margin: 0 0 10px; font-size: 1.08rem; }

.lp-card p { margin: 0; color: var(--ink-soft); }

/* --- steps --------------------------------------------------------------
 * Numbered because the content is genuinely sequential. The rule elsewhere in
 * this codebase is that a number has to carry information; here it does.
 * --------------------------------------------------------------------- */

.lp-steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  counter-reset: none;
}

.lp-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  background: var(--bg);
}

.lp-step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tile-aqua) 70%, transparent);
  color: var(--action-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lp-step h3 { margin: 0 0 8px; font-size: 1.06rem; }

.lp-step p { margin: 0; color: var(--ink-soft); }

@media (max-width: 700px) {
  .lp-step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.lp-statband-head {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--bg);
  text-align: center;
}

/* --- statements without a body -----------------------------------------
 * Sections that are a list of claims rather than titled cards. Rendering them
 * as cards with an empty paragraph reads as missing content.
 * -------------------------------------------------------------------- */

.lp-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px 28px;
}

.lp-point {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
}

.lp-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--action) 55%, transparent);
}

/* --- agent vignettes ----------------------------------------------------
 * The page's signature block: what a workflow was, and what it is now that an
 * agent runs it. The two rows are deliberately the same shape so the change
 * between them is what the eye picks up.
 * -------------------------------------------------------------------- */

.lp-vigs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.lp-vig {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--bg);
}

.lp-vig-label {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lp-vig-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.lp-vig-row span {
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.2em;
}

.lp-vig-row p { margin: 0; color: var(--ink-soft); }

.lp-vig-row.is-now {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lp-vig-row.is-now span { color: var(--action-deep); }

.lp-vig-row.is-now p { color: var(--ink); }

.lp-vig-out {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.lp-vig-out b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* "Apply for Jobs" sits in the top bar as a plain link rather than a dropdown:
   it is navigation for candidates, and it must not compete with Start Hiring,
   which is the page's one primary action. */
.nav-link.is-plain {
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-link.is-plain:hover { color: var(--action-deep); }

/* --- 404 ----------------------------------------------------------------- */

.nf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

.nf-oops {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
}

.nf-copy h1 { margin: 0; max-width: 15ch; }
.nf-copy .cmp-hero-sub { margin-top: 16px; }

.nf-art {
  width: 100%;
  height: auto;
  max-width: 520px;
  justify-self: end;
}

.nf-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.nf-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.nf-link:hover {
  border-color: color-mix(in srgb, var(--action) 42%, var(--line));
  transform: translateY(-2px);
}

.nf-link b { font-family: var(--font-display); color: var(--ink); }
.nf-link span { color: var(--ink-soft); font-size: 0.92rem; }

@media (prefers-reduced-motion: reduce) {
  .nf-link { transition: none; }
  .nf-link:hover { transform: none; }
}

@media (max-width: 860px) {
  .nf-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nf-art { justify-self: center; max-width: 380px; }
}