/* Inter, carried by this site rather than borrowed from Google.

   A stylesheet link to fonts.googleapis.com makes every visitor fetch the
   face from Google, which tells Google their address and which page they
   were reading. The privacy policy on this same site says that opening a
   page does not report anybody to anyone, and the app itself has bundled
   its font since the day a slow Google request printed a proposal in the
   wrong typeface. The marketing site was the last one still borrowing.

   Only latin and latin-ext are here. Google also serves cyrillic, greek and
   vietnamese; a browser fetches a file only when a page actually uses a
   character from its range, and none of these pages ever will.
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jockey — jockey.team
   The app's own tokens, so the page and the screenshots on it match.

   Sections carry their own padding; .inner only centres. Keeping those two
   jobs apart is deliberate — a section's padding shorthand used to wipe out
   the page gutter when both sat on the same element. */

:root {
  --blue: #2563EB;
  --blue-dark: #1D4ED8;
  --blue-tint: #EFF6FF;
  --blue-line: #BFDBFE;
  --ink: #1B2430;
  --body: #313B47;
  --grey: #6B7280;
  --faint: #9CA3AF;
  --rule: #E5E7EB;
  --paper: #F9FAFB;
  --amber: #B45309;
  --amber-line: #FDE68A;
  --amber-bg: #FFFBEB;
  --gut: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3 { margin: 0; text-wrap: pretty; }
p { margin: 0; }
img { display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

.sec { padding-left: var(--gut); padding-right: var(--gut); }
.inner { max-width: 1296px; margin: 0 auto; }

/* ---------- header ---------- */

.top { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 76px; }
.top nav { display: flex; align-items: center; gap: 26px; font-size: 13.5px; font-weight: 500; }
.top nav a { color: var(--grey); }
.top nav a.btn { color: #fff; }
.logo { height: 30px; width: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--blue); color: #fff;
  border-radius: 6px; font-size: 15px; font-weight: 600;
}
.btn:hover { background: var(--blue-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--body); border: 1px solid var(--rule); }
.btn-ghost:hover { background: var(--paper); color: var(--body); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 13.5px; }

/* ---------- hero ---------- */

.hero { padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid var(--rule); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--grey); }
.hero h1 {
  font-size: 54px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  color: var(--ink); margin-top: 22px;
}
.hero .lede { font-size: 18px; line-height: 1.6; color: var(--grey); max-width: 62ch; margin-top: 22px; }
.acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.price { font-size: 13.5px; color: var(--grey); }

/* the tools it replaces, and the one screen that replaces them */
.swap { display: grid; grid-template-columns: 3fr 1fr 8fr; gap: 28px; align-items: center; margin-top: 48px; }
.today { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.tools { display: flex; flex-direction: column; gap: 9px; }
.tool {
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
  padding: 13px 16px; font-size: 13.5px; color: var(--faint);
}
.tool:nth-child(1) { transform: rotate(-1.4deg); }
.tool:nth-child(2) { transform: rotate(.8deg); }
.tool:nth-child(3) { transform: rotate(-.6deg); }
.tool:nth-child(4) { transform: rotate(1.2deg); }
.tool:nth-child(5) { transform: rotate(-1deg); }
.arrow { display: flex; align-items: center; justify-content: center; color: var(--blue-line); }

.shot { background: var(--blue-tint); border-radius: 14px; padding: 20px; }
.shot .plate {
  border: 1px solid var(--rule); border-radius: 10px; background: #fff; padding: 6px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .13);
}
.shot img { width: 100%; height: auto; border-radius: 7px; }

/* a slot for a screenshot that does not exist yet */
.slot {
  aspect-ratio: 1500 / 765; background: #F3F4F6; border: 1px dashed var(--blue-line); border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 20px;
}
.slot b { font-size: 14.5px; font-weight: 600; color: var(--blue); }
.slot span { font-size: 12px; color: var(--grey); }

/* ---------- the eight stages ---------- */

.stages { padding-top: 48px; padding-bottom: 48px; background: #fff; border-bottom: 1px solid var(--rule); }
.stages h2 { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.track div { display: flex; flex-direction: column; gap: 7px; }
.track i { display: block; height: 3px; border-radius: 99px; background: var(--blue); }
.track span { font-size: 12.5px; color: var(--body); }
.stages p { font-size: 13.5px; color: var(--grey); margin-top: 18px; }

/* ---------- the steps ---------- */

.steps { padding-top: 8px; padding-bottom: 40px; }
.step { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; padding: 48px 0; }
.step + .step { border-top: 1px solid var(--rule); }
.step.flip { grid-template-columns: 7fr 5fr; }
.step.flip .words { order: 2; }
.words { display: flex; flex-direction: column; gap: 14px; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--blue); }
.step h2 { font-size: 29px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.step p { font-size: 15.5px; line-height: 1.65; color: var(--grey); }
.replaces {
  font-size: 13.5px; line-height: 1.55; color: var(--amber);
  padding-left: 13px; border-left: 2px solid var(--amber-line);
}

/* ---------- closeout ---------- */

.closeout { padding-top: 84px; padding-bottom: 84px; background: var(--ink); }
.closeout .inner { display: grid; grid-template-columns: 5fr 7fr; gap: 52px; align-items: center; }
.closeout .kicker { color: var(--blue-line); }
.closeout h2 { font-size: 36px; font-weight: 600; letter-spacing: -.024em; line-height: 1.12; color: #fff; }
.closeout ul {
  list-style: none; margin: 16px 0; padding: 16px 0;
  border-top: 1px solid #313B47; border-bottom: 1px solid #313B47;
  display: flex; flex-direction: column; gap: 7px;
}
.closeout li { font-size: 14px; color: var(--faint); }
.closeout li:last-child { font-weight: 600; color: #fff; }
.closeout p { font-size: 15.5px; line-height: 1.65; color: var(--faint); }
.closeout .replaces { color: var(--amber-line); border-left-color: var(--amber); }
.closeout .shot { background: #111820; }
.closeout .shot .plate { background: #111820; border-color: #313B47; }

/* ---------- founder ---------- */

.why { padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid var(--rule); }
.why .inner { display: grid; grid-template-columns: 4fr 8fr; gap: 52px; align-items: center; }
.why .portrait { aspect-ratio: 4 / 5; border-radius: 10px; }
.why blockquote { margin: 0; font-size: 25px; line-height: 1.45; color: var(--ink); }
.why p { font-size: 17px; line-height: 1.6; color: var(--grey); margin-top: 22px; }
.sig { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; }
.sig b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.sig span { font-size: 13px; color: var(--faint); }

/* ---------- closing ---------- */

.end { padding-top: 84px; padding-bottom: 84px; background: var(--blue-tint); border-top: 1px solid var(--blue-line); }
.end .inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.end h2 { font-size: 36px; font-weight: 600; letter-spacing: -.026em; line-height: 1.12; color: var(--ink); max-width: 20ch; }
.end p { font-size: 16px; line-height: 1.6; color: var(--grey); margin-top: 14px; max-width: 60ch; }
.end .price { margin-top: 14px; font-size: 14px; }
.end .act { display: flex; flex-direction: column; gap: 10px; }
.end .act small { font-size: 12.5px; color: var(--grey); text-align: center; }

.foot { padding-top: 40px; padding-bottom: 40px; }
.foot .inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot span { font-size: 12px; color: var(--faint); }
.foot img { height: 21px; width: auto; }
.foot .left { display: flex; align-items: center; gap: 16px; }

/* ---------- narrower than the design ---------- */

@media (max-width: 1080px) {
  :root { --gut: 32px; }

  .swap { grid-template-columns: 1fr; gap: 24px; }
  .arrow { transform: rotate(90deg); }
  .step, .step.flip, .closeout .inner, .why .inner { grid-template-columns: 1fr; gap: 28px; }
  .step.flip .words { order: 0; }
  .track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
  .why .portrait { max-width: 320px; }
}

@media (max-width: 720px) {
  :root { --gut: 20px; }

  .top { height: 64px; }
  .top nav a:not(.btn) { display: none; }

  .hero { padding-top: 44px; padding-bottom: 48px; }
  .hero h1 { font-size: 35px; letter-spacing: -.026em; }
  .hero .lede { font-size: 16.5px; }
  .acts .btn { width: 100%; }

  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step h2, .closeout h2, .end h2 { font-size: 25px; }
  .why blockquote { font-size: 21px; }
  .closeout, .why, .end { padding-top: 52px; padding-bottom: 52px; }
  .end .act, .end .act .btn { width: 100%; }
  .foot .inner { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* shrinking a screenshot to phone width makes its text unreadable,
     so it keeps its size and scrolls sideways instead */
  .shot { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot .plate { width: 760px; max-width: none; }
}

/* ---------- the legal pages ----------

   privacy.html and terms.html. A narrower column than the rest of the site
   because these are read as prose rather than scanned as a page, and prose
   past about 70 characters a line loses the reader at the turn. Everything
   else — the header, the footer, the colours — is the site's own.
*/

.legal { max-width: 700px; margin: 0 auto; padding: 8px 0 72px; }
.legal h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--ink); }
.legal .dateline { font-size: 14px; color: var(--faint); margin: 0 0 30px; }
.legal h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
/* the first heading has the dateline above it already */
.legal h2.first { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p { font-size: 15.5px; line-height: 1.68; color: var(--body); margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { font-size: 15.5px; line-height: 1.68; color: var(--body); margin-bottom: 7px; }
.legal b { font-weight: 600; color: var(--ink); }
.legal a { color: var(--blue); }
.legal a:hover { color: var(--blue-dark); }

@media (max-width: 720px) {
  .legal h1 { font-size: 27px; }
}

/* ---------- the sign-in box ----------

   Jockey is one copy per company, so there is no single front door to send
   somebody to. This asks which company they are and hands them to their own
   address, where they sign in.

   It deliberately does NOT ask for an email or a password. This site is
   static files on a CDN — it has no idea who anybody's users are, and a form
   here taking a password to pass to another domain is the shape phishing
   takes. The password belongs on the site that owns the account.
*/

dialog.signin {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  box-shadow: 0 24px 48px rgba(15, 20, 30, .16), 0 6px 14px rgba(15, 20, 30, .08);
  color: var(--body);
}
dialog.signin::backdrop { background: rgba(17, 24, 39, .45); }
.signin-form { padding: 26px 26px 22px; }
.signin-form h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.signin-form .sub { margin: 0 0 18px; font-size: 14px; color: var(--grey); line-height: 1.55; }
.signin-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

.signin-form input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--btnbd, #CBD2DB);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.signin-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-tint);
}
.signin-form .hint { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.signin-form .err { margin: 10px 0 0; font-size: 13px; color: #B91C1C; }
.signin-form .row { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.signin-form .row .btn { flex: 1; justify-content: center; text-align: center; }

.signin-form .shut {
  border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--grey); cursor: pointer; padding: 8px 4px;
}
.signin-form .shut:hover { color: var(--ink); }