/* =========================================================================
   JobSteward — landing page styles
   Ported from the locked design (JobSteward Landing v2). Every value here
   comes from the design handoff; see README.md before changing any of them.
   Tokens come from tokens.css — prefer var(--…) over raw hex.
   ========================================================================= */

/* ---- Page shell ---------------------------------------------------------- */
html { scroll-behavior: smooth; }   /* prefers-reduced-motion resets this in tokens.css */
body { background: #fff; }

.page {
  background: #fff;
  color: var(--c-ink);
  font-family: var(--font-text);
  --gold: var(--c-gold-bright);   /* the page's only gold — trim, edge, marker */
  overflow-x: hidden;             /* the hero shot deliberately overhangs */
}

a { color: var(--c-navy); text-decoration: none; }
a:hover { color: var(--c-navy-deep); text-decoration: none; }

img { max-width: 100%; }

.container { max-width: var(--l-content-max); margin: 0 auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--c-navy); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-md) 0; font: 600 13px/1 var(--font-text);
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Shared type --------------------------------------------------------- */
.eyebrow {
  margin: 0 0 12px;
  font: 500 11px/1 var(--font-text);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-gold-deep);
}
.h2 {
  font-family: var(--font-display); font-weight: 600; margin: 0;
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.12;
  color: var(--c-navy); text-wrap: pretty;
}
.body {
  margin: 14px 0 0; font-size: 15px; line-height: 1.66;
  color: var(--c-ink-secondary);
}
.microcopy { font: 400 12px/1 var(--font-text); color: var(--c-ink-muted); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-navy); color: #fff;
  border: 2px solid var(--gold); border-radius: var(--r-md);
  font-family: var(--font-text); cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-standard);
}
.btn:hover { background: var(--c-navy-hover); color: #fff; }
.btn--nav   { min-height: 36px; padding: 0 16px; border: 0; font: 600 13px/1 var(--font-text); }
.btn--hero  { min-height: 46px; padding: 0 26px; font: 600 14px/1 var(--font-text); }
.btn--trial { min-height: 48px; padding: 0 28px; font: 600 15px/1 var(--font-text); }

/* ---- Sections ------------------------------------------------------------ */
.section {
  background: #fff;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 56px);
  scroll-margin-top: 76px;
}
.section--pipeline { padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 56px); }
.section--trial    { padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 56px) clamp(64px, 8vw, 104px); }

/* =========================================================================
   Nav — sticky
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--c-hairline);
  display: flex; align-items: center; gap: 10px;
  padding: 16px clamp(20px, 4vw, 56px);
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand:hover { color: inherit; }
.nav__mark { width: 24px; height: 24px; display: block; }
.nav__wordmark { font-family: var(--font-display); font-size: 19px; line-height: 1; }
.nav__wordmark i { font-style: normal; font-weight: 400; color: var(--c-ink-secondary); }
.nav__wordmark b { font-weight: 600; color: var(--c-navy); }

.nav__links {
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
  font: 400 13px/1 var(--font-text); color: var(--c-ink-secondary);
}
.nav__links a { color: inherit; }
.nav__links a:hover { color: var(--c-navy); }
.nav__links a.nav__login { font-weight: 500; color: var(--c-navy); }
.nav__links a.btn { color: #fff; }

.nav__burger {
  display: none; margin-left: auto; margin-right: -8px;
  padding: 8px; background: none; border: 0; cursor: pointer;
  color: var(--c-navy); line-height: 0;
}
.nav__sheet {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--c-hairline);
  box-shadow: var(--e-overlay);
  padding: 4px clamp(20px, 4vw, 56px) 16px;
  display: none;
}
.nav__sheet a {
  display: flex; align-items: center; min-height: var(--l-touch);
  font: 400 15px/1 var(--font-text); color: var(--c-ink-secondary);
  border-bottom: 1px solid var(--c-hairline);
}
.nav__sheet a:hover { color: var(--c-navy); }
.nav__sheet a.nav__login { border-bottom: 0; color: var(--c-navy); font-weight: 500; }
.nav__sheet .btn { margin-top: 14px; width: 100%; min-height: var(--l-touch); }
.nav__sheet .btn:hover { color: #fff; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; background: #fff; overflow: hidden; }
.hero__intro {
  text-align: center; position: relative; z-index: 2;
  padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 40px) 0;
}
.hero__title {
  font-family: var(--font-display); font-weight: 600; margin: 0 auto;
  font-size: clamp(31px, 5.4vw, 56px); line-height: 1.05; letter-spacing: -.015em;
  max-width: 860px; color: var(--c-navy); text-wrap: pretty;
}
.hero__lede {
  margin: clamp(14px, 2vw, 20px) auto 0; max-width: 560px;
  font-size: clamp(14px, 1.5vw, 16px); line-height: 1.62;
  color: var(--c-ink-secondary);
}
.hero__cta {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin-top: clamp(20px, 2.6vw, 26px);
}

/* The signature element: gold trim → navy panel → device, shot overhanging */
.hero__stage { position: relative; margin-top: clamp(36px, 6vw, 64px); }
.hero__trim {
  position: absolute;
  left: clamp(13px, 2.7vw, 32px); right: clamp(13px, 2.7vw, 32px);
  top: clamp(29px, 4.35vw, 56px); bottom: clamp(100px, 14vw, 190px);
  background: var(--gold); border-radius: clamp(17px, 2vw, 24px);
}
.hero__panel {
  position: absolute;
  left: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px);
  top: clamp(32px, 4.7vw, 60px); bottom: calc(clamp(100px, 14vw, 190px) + 4px);
  background: var(--c-navy-deep); border-radius: clamp(14px, 1.8vw, 20px);
}
.hero__device {
  position: relative; z-index: 2;
  width: min(880px, 78vw, calc(100vw - 190px));
  margin: 0 auto clamp(-190px, -14vw, -100px);
}
.device {
  background: #0A0A0C; border-radius: clamp(22px, 2.6vw, 30px);
  padding: clamp(9px, 1.2vw, 14px);
  box-shadow: 0 26px 64px rgba(6, 16, 30, .34);
}
.device__screen { background: #fff; border-radius: clamp(16px, 2vw, 22px); overflow: hidden; }

/* ---- Product shots ------------------------------------------------------- */
/* The desktop shot carries its real intrinsic height="1845" attribute, which
   lands as a presentational hint on `height` and would otherwise beat the
   aspect-ratio below; height:auto hands the box back to aspect-ratio. */
.shot { display: block; width: 100%; }
.shot--hero-wide { height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.shot--hero-tall { aspect-ratio: 3/4;  object-fit: cover; object-position: top center; }
.shot--pipe-wide { height: auto; aspect-ratio: 16/11; object-fit: cover; object-position: top left; }
.shot--pipe-tall { aspect-ratio: 3/2;  object-fit: cover; object-position: top center; }
.shot--band { height: clamp(180px, 24vw, 220px); object-fit: cover; object-position: top left; }
.only-wide { display: block; }
.only-tall { display: none; }

/* =========================================================================
   Connectors row
   ========================================================================= */
.connectors {
  position: relative; background: #fff;
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
  margin-top: clamp(20px, 3vw, 34px);          /* small breath under the hero shot */
  /* Symmetric padding centres the wordmark row between the two hairlines; the
     label is lifted out of the flow so it can sit just under the top line. */
  padding: clamp(38px, 5vw, 56px) clamp(20px, 4vw, 56px);
}
.connectors__label {
  position: absolute; top: clamp(9px, 1.1vw, 13px); left: 0; right: 0;
  text-align: center;
  font: 400 11px/1 var(--font-text); color: var(--c-ink-muted);
}
/* Wordmarks drift right to left. The track holds three identical groups and
   travels exactly one group width per cycle, so the loop has no visible seam. */
.connectors__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.connectors__track {
  display: flex; width: max-content;
  animation: connectors-drift 40s linear infinite;
}
.connectors__group {
  display: flex; align-items: center;
  gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px);
  font: 500 clamp(24px, 3.2vw, 36px)/1 var(--font-display);
  color: var(--c-ink);
}
@keyframes connectors-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .connectors__track { animation: none; }
}

/* =========================================================================
   Pipeline
   ========================================================================= */
.split {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
  max-width: var(--l-content-max); margin: 0 auto;
}
.pipeline__body { max-width: 460px; }
.pipeline__points { margin-top: clamp(24px, 3vw, 32px); }

.point {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px;
  padding: 18px 0; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--c-hairline);
  font: inherit; color: inherit;
}
.point:last-child { border-bottom: 1px solid var(--c-hairline); }
.point > svg { margin-top: 2px; }
.point__title { display: block; font: 600 15px/1.3 var(--font-text); color: var(--c-navy); margin-bottom: 5px; }
.point__text  { display: block; margin: 0; font-size: 13.5px; line-height: 1.56; color: var(--c-ink-secondary); }

/* Trimmed product panel: gold outer → navy → white screen */
.panel { background: var(--gold); border-radius: 20px; padding: 4px; }
.panel__inner { background: var(--c-navy-deep); border-radius: 16px; padding: 9px; }
.panel__screen { background: #fff; border-radius: 9px; overflow: hidden; }

/* =========================================================================
   Your AI
   ========================================================================= */
.ai__header { max-width: 660px; margin-left: auto; text-align: right; }
.band { margin-top: clamp(28px, 3.6vw, 36px); background: var(--gold); border-radius: 20px; padding: 4px; }
.band__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 34px);
  align-items: center; background: var(--c-navy-deep);
  border-radius: 16px; padding: clamp(20px, 3vw, 34px);
}
.band__screen { background: #fff; border-radius: 9px; overflow: hidden; }
.band__copy { text-align: left; }
.band__label {
  font: 500 11px/1 var(--font-text); letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin-bottom: 12px;
}
/* Mock of the app's agent input: a field with its send button, not a live control. */
.field {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; padding: clamp(15px, 1.9vw, 19px);
}
.field__text {
  font-family: var(--font-display); font-weight: 400; margin: 0;
  font-size: clamp(18px, 2.05vw, 22px); line-height: 1.32; color: #fff;
}
.field__foot { display: flex; justify-content: flex-end; margin-top: clamp(14px, 1.8vw, 18px); }
.field__send {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--c-navy);
  font: 600 13px/1 var(--font-text);
  padding: 10px 13px; border-radius: 8px;
}

.notes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px, 3.6vw, 36px); border-top: 1px solid var(--c-hairline);
}
.notes > * { padding: 22px 28px 0; border-left: 1px solid var(--c-hairline); }
.notes > *:first-child { padding: 22px 28px 0 0; border-left: 0; }
.notes > *:last-child  { padding: 22px 0 0 28px; }
.note__title { font: 600 15px/1.3 var(--font-text); color: var(--c-navy); margin-bottom: 6px; }
.note__text  { margin: 0; font-size: 13.5px; line-height: 1.56; color: var(--c-ink-secondary); }

/* =========================================================================
   Compare
   ========================================================================= */
.compare__header { text-align: center; margin-bottom: clamp(28px, 4vw, 40px); }
.compare__track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
}
.ccol--own { background: var(--gold); border-radius: 13px; padding: 3px; }
.ccol--own .ccol__inner { background: #fff; border-radius: 10px; overflow: hidden; }
.ccol--other { padding-top: 3px; }

.chead { height: 62px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; }
.chead img { width: 20px; height: 20px; display: block; }
.chead__name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--c-navy); }
.ccol--other .chead { font: 400 20px/1 var(--font-display); color: var(--c-ink-muted); }

.crow {
  height: 50px; display: flex; align-items: center; justify-content: center;
  padding: 0 14px; border-top: 1px solid var(--c-hairline);
  font: 400 13px/1.4 var(--font-mono); color: var(--c-ink);
}
.ccol--other .crow { padding: 0; color: var(--c-ink-secondary); }
/* the fixed glyph column is what keeps every tick aligned across the columns */
.ccell { display: grid; grid-template-columns: 22px 1fr; align-items: center; width: 250px; }
.tick  { color: var(--c-gold-deep); }
.cross { color: var(--c-ink-muted); }

.compare__dots { display: none; justify-content: center; gap: 10px; margin-top: 28px; }
.dot {
  position: relative; width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: var(--r-tag); background: var(--c-hairline-strong); cursor: pointer;
}
.dot::after { content: ""; position: absolute; inset: -12px; }  /* 32px touch target */
.dot[aria-selected="true"] { background: var(--c-navy); }

/* =========================================================================
   Trial journey
   ========================================================================= */
.trial__inner { max-width: 1000px; margin: 0 auto; }
.trial__header { text-align: center; }
.trial__lede { margin: 14px auto 0; max-width: 560px; }
.trial__price { font-family: var(--font-mono); margin: 16px 0 0; font-size: 14px; color: var(--c-navy); }

.timeline { margin-top: clamp(28px, 4vw, 40px); background: var(--gold); border-radius: 16px; padding: 3px; }
.timeline__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-radius: 13px; overflow: hidden;
}
.tstep { padding: clamp(26px, 3.2vw, 36px) 0 clamp(26px, 3.2vw, 36px) clamp(26px, 3.2vw, 36px); }
.tmarkers { display: flex; align-items: center; }
.tmarker {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-tag);
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.tconn {
  flex: 1; min-width: 16px; height: 3px;
  background-image: radial-gradient(circle, var(--gold) 1.5px, transparent 1.6px);
  background-size: 15px 3px; background-repeat: repeat-x; background-position: left center;
  margin-right: calc(-1 * clamp(26px, 3.2vw, 36px));
}
/* the line ends after Day 7 rather than running off the card */
.tstep:last-child .tconn { flex: 0 1 50%; margin-right: 0; }
.tbody { margin-top: 20px; padding-right: clamp(26px, 3.2vw, 36px); }
.tbody__title { font: 600 17px/1.3 var(--font-text); color: var(--c-navy); margin-bottom: 8px; }
.tbody__text  { margin: 0; font-size: 14px; line-height: 1.62; color: var(--c-ink-secondary); }
.trial__date  { font-weight: 600; color: var(--c-navy); }

.trial__cta {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: clamp(28px, 3.6vw, 36px);
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { border-top: 1px solid var(--c-hairline); padding: 24px clamp(20px, 4vw, 56px); background: #fff; }
.footer__inner {
  max-width: var(--l-content-max); margin: 0 auto;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--c-ink-muted);
}
.footer__inner img { width: 20px; height: 20px; display: block; }
.footer a { color: var(--c-ink-secondary); }

/* =========================================================================
   Tablet — ≤ 1000px
   ========================================================================= */
@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .pipeline__points { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
  .band__inner { grid-template-columns: 1fr; }

  /* compare: three columns become a one-at-a-time carousel */
  .compare__viewport { overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; }
  .compare__viewport:active { cursor: grabbing; }
  .compare__track {
    display: flex; gap: 0;
    transform: translateX(calc(var(--cmp, 0) * -100%));
    transition: transform var(--d-base) var(--ease-standard);
  }
  .compare__track > * { flex: 0 0 100%; min-width: 0; }
  .ccol--other { padding: 3px; }
  .chead { height: 58px; }
  .ccol--other .chead { font-size: 21px; }
  .crow { height: 48px; padding: 0; }
  .compare__dots { display: flex; }

  /* trial timeline turns vertical */
  .timeline__inner { grid-template-columns: 1fr; }
  .tstep {
    display: grid; grid-template-columns: 46px 1fr; column-gap: 18px;
    padding: 0 clamp(22px, 4vw, 32px);
  }
  .tstep:first-child { padding-top: clamp(26px, 3.2vw, 36px); }
  .tstep:last-child  { padding-bottom: clamp(26px, 3.2vw, 36px); }
  .tmarkers { flex-direction: column; align-self: stretch; }
  .tconn {
    width: 3px; height: auto; min-height: 28px; min-width: 0; margin: 0;
    background-size: 3px 15px; background-repeat: repeat-y; background-position: center top;
  }
  .tstep:last-child .tconn { flex: 0 0 26px; min-height: 26px; }
  .tbody { margin-top: 0; padding: 8px 0 clamp(24px, 4vw, 34px); grid-column: 2; }

  /* AI notes: 2 + 1 */
  .notes { grid-template-columns: 1fr 1fr; }
  .notes > *:nth-child(3) {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--c-hairline); margin-top: 22px;
  }
}

/* =========================================================================
   Phone — ≤ 700px
   ========================================================================= */
@media (max-width: 700px) {
  .pipeline__points { grid-template-columns: 1fr; gap: 0; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__sheet[data-open="true"] { display: block; }

  .notes { grid-template-columns: 1fr; }
  .notes > * { border-left: 0; padding-left: 0; padding-right: 0; }

  .only-wide { display: none; }
  .only-tall { display: block; }
}

/* =========================================================================
   404
   ========================================================================= */
.notfound { text-align: center; }
.notfound .body { max-width: 460px; margin-inline: auto; }