.elementor-111 .elementor-element.elementor-element-a1f0c001{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ABOUTME: Flat-fee recruiting page CSS: the definition set as a quotable statement between two rules, and the models table's first column and its one tinted row. */

/* Every rule is scoped under .elementor, the document wrapper. Elementor emits each Global Class as ".elementor .<label>" at (0,2,0) in a sheet
   that loads AFTER this one, so a rule that overrides a class on the same element is lifted to (0,3,0) by a doubled class or a longer path. Rules
   every page needs (arrow links in a stack, source lines, the table component, the break-even equation plate) are the child theme's. */

/* ---------- Definition ---------- */
/* The page's most quotable sentence is set as a statement, not a notice: the callout class's gold ground, bar and radius are taken off (gold is the equation plate's), and what is
   left is type at the H2 scale (the H3 scale on phones, where the H2's 28px would run the sentence to ten lines) between two hairlines, with the level line's short fuchsia
   rule laid over the top one. The lines are balanced: a statement this large left on "pretty" broke "first-year" at its hyphen. The callout is found as the narrow container's child, which only the definition is. The rule is the box's ::after, because Elementor's own
   ::before on every container is its background overlay. */
.elementor .ffdh-container--narrow > .ffdh-callout.ffdh-callout {
  position: relative;
  padding: var(--sp-8) 0;
  border: 0;
  border-block: 1px solid var(--c-border-strong);
  border-radius: 0;
  background: none;
}
.elementor .ffdh-container--narrow > .ffdh-callout.ffdh-callout::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-fuchsia-600);
}
.elementor .ffdh-container--narrow > .ffdh-callout.ffdh-callout p {
  margin: 0;
  color: var(--c-ink-900);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .elementor .ffdh-container--narrow > .ffdh-callout.ffdh-callout p {
    font-size: var(--fs-h2);
    line-height: 1.3;
  }
}

/* ---------- Models table ---------- */
/* The model names are short labels and "What you pay" is the sentence, so the first column sizes to its names (a 1% column is as narrow as its widest cell allows, which
   the component caps at 26rem) and the second takes the rest of the frame instead of half of it. Where the frame is wide enough for the longest name (the pinned column's
   40% cap clears the longest, 277.5px with its padding, from about 764px of viewport, but only by 1.5px at 768px), a name stays on one line from 800px, where the cap
   clears it by 14px, so a slightly wider render does not overflow; below it the names wrap inside the cap, which keeps the table within its frame. */
.elementor .ffdh-table :is(th, td):first-child {
  width: 1%;
}
@media (min-width: 800px) {
  .elementor .ffdh-table tbody th {
    white-space: nowrap;
  }
}
/* The flat-fee row is the one the page argues for, so it is the one tinted row. It is the third row of the copy's table, and the tint outranks the component's own row
   and hover backgrounds, which sit at (0,2,2). */
.elementor .ffdh-table tbody tr:nth-child(3) > * {
  background: var(--c-fuchsia-50);
}/* End custom CSS */