/* For Heads of Sales — Figma v4 (RzeLtCm9OafORGhYPS7w1d), frame 22:348 (1440 x 5163).
   Sections that are the same component as the For CROs page (stack orbit, FAQ,
   testimonial band) reuse the .cro-* rules in cros.css rather than restating
   them; only the parts this page changes live here. */

.hos-page .blog-nav-holder { position: absolute; top: 0; left: 0; width: 1440px; z-index: 2; }

/* ---- Hero (22:349) — 1440 x 799, sky blue ---- */
.hos-hero {
  position: relative;
  height: 799px;
  background: var(--sky-blue);
  overflow: hidden;
}

/* Exported already clipped to the hero frame, so it drops in at its own box. */
.hos-hero__lines {
  position: absolute;
  top: 244px;
  left: 0;
  width: 1440px;
  height: 504px;
  pointer-events: none;
}

.hos-hero__content {
  position: absolute;
  top: 88px;            /* below the nav band */
  left: 0;
  width: 1440px;
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.hos-hero__eyebrow {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift-inter));
}

.hos-hero h1 {
  width: 900px;
  margin: 0;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  color: var(--obsidian);
}

/* Figma sets these lines nowrap inside a 900px box and lets them run past it;
   left to wrap, line two breaks after "a" and pushes the marker line down. */
.hos-hero h1 span { display: block; white-space: nowrap; transform: translateY(var(--figma-baseline-shift)); }

/* Third line: an off-white marker painted behind the words. The wrap is 76px
   tall but the marker and the text both sit at its top edge, so the extra 12px
   is trailing space in the design, not padding around the text.
   The marker is sized from the text rather than pinned at the design's 609px,
   so the Spanish and Catalan headlines get a marker that fits them too. */
.hos-hero h1 span.hos-hero__marker {
  position: relative;
  display: inline-block;
  height: 76px;
  transform: none;
}

.hos-hero__marker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 8px);
  height: 68px;
  background: var(--off-white);
}

.hos-hero__marker b {
  position: relative;
  display: block;
  font-weight: 500;
  line-height: 1;
  transform: translateY(var(--figma-baseline-shift));
}

.hos-hero__sub {
  width: 580px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.hos-hero .btn { padding: 16px 28px; font-family: var(--font-inter); }
.hos-hero .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }

/* Two of the three line-art labels; the third is inside hero-lines.svg. */
.hos-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 12px 16px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--muted);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--obsidian);
  white-space: nowrap;
}

.hos-node > span { transform: translateY(var(--figma-baseline-shift-mono)); }
.hos-node--q    { top: 675px; left: 1137px; width: 50px; }
.hos-node--start { top: 596px; left: 590px; }

/* ---- Pain cards (22:373) — 1440 x 709, off white ---- */
.hos-pain {
  height: 709px;
  background: var(--off-white);
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.hos-pain h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

/* Same card component as the For CROs grid — .cro-card carries the fills. */
.hos-pain__grid {
  display: grid;
  grid-template-columns: repeat(4, 320px);
  width: 1280px;
  height: 363px;
}

/* ---- System diagram (2049:659) — 1440 x 828, off white ---- */
.hos-system {
  position: relative;
  height: 828px;
  background: var(--off-white);
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.hos-system__head { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.hos-system__head p:first-child {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

.hos-system__head p:last-child {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.hos-system__body { position: relative; width: 1280px; height: 560px; }

.hos-flow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hos-flow__pill {
  width: 195px;
  padding: 12px 24px;
  border-radius: 100px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--obsidian);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--obsidian);
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.hos-flow__pill > span { display: block; transform: translateY(var(--figma-baseline-shift-inter)); }
.hos-flow__wire { width: 80px; height: 1px; background: var(--obsidian); }

.hos-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--obsidian);
  filter: drop-shadow(0 8px 8px rgba(17, 17, 17, 0.04));
}

.hos-hub__logo { width: 172px; height: 40.937px; object-fit: contain; }
/* Dashed in the design, not solid — shipped as the 376x1 export so the dash
   metrics are the designer's rather than the browser's. */
.hos-hub__rule { display: block; width: 376px; height: 1px; }
/* The six tool tiles are logo rasters with their own rounded borders; one
   export keeps them at the design's exact spacing. */
.hos-hub__tools { width: 376px; height: 56px; }

.hos-system__drop {
  position: absolute;
  top: 177px;
  left: 638px;
  width: 2px;
  height: 85px;
  background: var(--obsidian);
}

.hos-deliverables {
  position: absolute;
  top: 262px;
  left: 0;
  right: 0;
  height: 250px;
  display: flex;
  box-shadow: inset 0 0 0 2px var(--obsidian);
}

.hos-deliverable {
  flex: 1 0 0;
  min-width: 0;
  height: 250px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--white);
  box-shadow: inset -2px 0 0 var(--obsidian);
  box-sizing: border-box;
}

.hos-deliverable:last-child { box-shadow: none; }

.hos-deliverable b {
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--orange);
  transform: translateY(var(--figma-baseline-shift));
}

.hos-deliverable h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--obsidian);
  transform: translateY(var(--figma-baseline-shift));
}

.hos-deliverable p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  transform: translateY(var(--figma-baseline-shift));
}

/* Straddles the top edge of the cards row, as in the design. */
.hos-system__chip {
  position: absolute;
  top: 436px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 100px;
  background: var(--lime);
  box-shadow: inset 0 0 0 1px var(--obsidian);
  font-family: var(--font-inter);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--obsidian);
  white-space: nowrap;
}

/* ---- Testimonial band (22:407) — the For CROs block on sky blue ---- */
.cro-quote.hos-quote { background: var(--sky-blue); }


/* ---- Booking (22:295) — 1440 x 600, muted ---- */
.hos-booking {
  position: relative;
  overflow: hidden;
  height: 600px;
  background: var(--muted);
  box-shadow: inset 0 2px 0 var(--obsidian);
  padding: 120px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* 1085 x 1530 photo, centred 3.5px right of and 193px below the section centre;
   the section clips the rest. */
.hos-booking__bg {
  position: absolute;
  top: -272px;
  left: 181px;
  width: 1085px;
  height: 1530px;
  pointer-events: none;
}

.hos-booking__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }

.hos-booking__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgb(93, 93, 88) 0%, rgba(93, 93, 88, 0) 49.519%),
    linear-gradient(270deg, rgba(93, 93, 88, 0) 64.904%, rgb(93, 93, 88) 96.87%);
}

.hos-booking__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--off-white);
}

.hos-booking__copy h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.1;
  transform: translateY(var(--figma-baseline-shift));
}

.hos-booking__copy p {
  width: 600px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  transform: translateY(var(--figma-baseline-shift));
}

.hos-booking .btn {
  position: relative;
  padding: 14px 28px;
  font-family: var(--font-inter);
  color: var(--off-white);
}

.hos-booking .btn > span { transform: translateY(var(--figma-baseline-shift-inter)); }