/* ==========================================================================
   JETLAGO — site styles
   Implements brand/BRAND.md. Tokens come from brand/brand.css, which is
   linked first and kept pristine as the source of truth.

   Paper is the ground. Ink does the structural work and the reversed
   frame (masthead + footer). Signal is a signal: the mark's centre
   stripe, the wordmark rule, the driving bars on the duty grid, focus.
   It is never a large fill and never carries body copy.
   ========================================================================== */

/* Archivo 900 — BRAND.md §10 recommendation. Self-hosted so the page makes
   no third-party requests. SIL OFL, licence in /fonts/archivo-OFL.txt */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Accessibility corrections to the brand palette.
   Each of these failed a WCAG check against BRAND.md §13.10; they are tonal
   steps within the existing greys, not a fourth colour. Reported to brand.
   -------------------------------------------------------------------------- */
:root {
  /* brand --jl-slate #6B7280 is 4.43:1 on Bond — just under AA for body */
  --jl-slate: #626973; /* 5.54:1 paper · 5.09:1 bond */
  /* no token existed for secondary type on reversed grounds */
  --jl-slate-rev: #9ba2ad; /* 6.93:1 on ink */
  /* --jl-rule is 1.44:1 — fine as a divider, too weak as a control border */
  --jl-field: #8e8b82; /* 3.41:1 paper · 3.12:1 bond */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--jl-paper);
  color: var(--jl-ink);
  font-family: var(--jl-body);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

p {
  margin: 0 0 1.15rem;
}

/* --------------------------------------------------------------------------
   Type roles — BRAND.md §10
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--jl-display);
  font-weight: 900;
  letter-spacing: var(--jl-display-tracking);
  line-height: var(--jl-display-leading);
  text-transform: uppercase;
  margin: 0;
}

h1 {
  font-size: clamp(2.7rem, 6.6vw, 5.3rem);
}

h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
}

h3 {
  font-size: 1.28rem;
  line-height: 1.04;
}

.u-data {
  font-family: var(--jl-data);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wrap {
  max-width: var(--jl-wrap);
  margin: 0 auto;
  padding-inline: var(--jl-gutter);
}

.wrap--narrow {
  max-width: 760px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--jl-ink);
  color: var(--jl-paper);
  padding: 14px 22px;
  font-family: var(--jl-data);
  font-weight: 700;
  z-index: 300;
}
.skip:focus {
  left: 14px;
  top: 14px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--jl-signal);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Sections — one padding rule; modifiers only change ground.
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--jl-pad-section);
}

.section--paper {
  background: var(--jl-paper);
  color: var(--jl-ink);
}

.section--bond {
  background: var(--jl-bond);
  color: var(--jl-ink);
}

.section--ink {
  background: var(--jl-ink);
  color: var(--jl-paper);
}

@media (max-width: 720px) {
  :root {
    --jl-gutter: 20px;
    --jl-pad-section: 66px;
  }
}

/* --------------------------------------------------------------------------
   The lockup — BRAND.md §8.
   Mark height = 1.4 x cap height. Gap = 1 cap height. Rule = cap/8 and runs
   the exact width of the word, never wider.
   -------------------------------------------------------------------------- */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.62em; /* ~1 cap height at the wordmark's size */
  text-decoration: none;
  font-size: 1.62rem;
}

.lockup__mark {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

.wordmark {
  display: inline-block;
}

.wordmark__word {
  display: block;
  font-family: var(--jl-display);
  font-weight: 900;
  font-size: 1em;
  letter-spacing: var(--jl-display-tracking);
  line-height: var(--jl-display-leading);
  text-transform: uppercase;
  color: var(--jl-ink);
}

.wordmark__rule {
  display: block;
  height: 0.125em; /* cap / 8 */
  margin-top: 0.14em; /* cap / 7 below baseline */
  background: var(--jl-signal);
}

.section--ink .wordmark__word,
.masthead .wordmark__word,
.foot .wordmark__word {
  color: var(--jl-paper);
}

/* --------------------------------------------------------------------------
   Masthead — a reversed ground, per §9
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--jl-ink);
}

.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 84px;
  padding-block: 14px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav a {
  font-family: var(--jl-data);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jl-slate-rev);
  text-decoration: none;
  padding: 12px 15px;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.nav a:hover {
  color: var(--jl-paper);
}

.nav a[aria-current="page"] {
  color: var(--jl-paper);
  box-shadow: inset 0 -2px 0 var(--jl-signal);
}

/* Must out-specify `.nav a[aria-current="page"]` (0-2-1) or the label
   inherits the wrong colour on the filled chip. */
.nav a.nav__cta,
.nav a.nav__cta[aria-current="page"] {
  background: var(--jl-paper);
  color: var(--jl-ink);
  font-weight: 700;
  box-shadow: none;
}

.nav a.nav__cta:hover {
  background: var(--jl-bond);
  color: var(--jl-ink);
}

.nav__short {
  display: none;
}

/* --------------------------------------------------------------------------
   Buttons — brand.css: primary action is solid Ink on Paper.
   Signal is reserved for the mark, the rule and small indicators.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--jl-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 30px;
  border: 1px solid transparent;
  background: var(--jl-ink);
  color: var(--jl-paper);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
  background: #000;
}

.btn--ghost {
  background: transparent;
  color: var(--jl-ink);
  border-color: var(--jl-field);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--jl-ink);
}

/* on reversed grounds */
.section--ink .btn,
.foot .btn {
  background: var(--jl-paper);
  color: var(--jl-ink);
}

.section--ink .btn:hover {
  background: var(--jl-bond);
}

.section--ink .btn--ghost {
  background: transparent;
  color: var(--jl-paper);
  border-color: var(--jl-rule-ink);
}

.section--ink .btn--ghost:hover {
  border-color: var(--jl-paper);
}

.btn__arrow {
  transition: transform 0.16s ease;
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--jl-paper);
  padding-block: 96px 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--jl-signal-deep);
  margin: 0 0 30px;
}

.hero__eyebrow::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--jl-signal);
  flex: none;
}

/* Scoped away from the centred hero, whose h1 is the subtitle and sets its
   own measure below. Unscoped, `.hero h1` (0-1-1) silently beats it. */
.hero:not(.hero--center) h1 {
  max-width: 16ch;
}

.hero__lede {
  max-width: 52ch;
  color: var(--jl-slate);
  font-size: clamp(1.06rem, 1.5vw, 1.26rem);
  margin: 32px 0 40px;
}

.hero__lede strong {
  color: var(--jl-ink);
  font-weight: 400;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 92px;
}

/* Centred hero: the lockup leads, the positioning line drops to a subtitle. */
.hero--center {
  text-align: center;
  padding-block: 84px 0;
}

.hero__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  margin-bottom: 44px;
}

.hero__mark {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

.hero__wordmark .wordmark__word {
  font-size: 1em;
  color: var(--jl-ink);
}

.hero__subtitle {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  /* `ch` is unusable here: Archivo's "0" is far narrower than its caps, so
     30ch resolved to 292px against a 1124px line. `em` tracks the caps. */
  max-width: 20em;
  margin: 0 auto;
  color: var(--jl-ink);
}

.hero--center .hero__lede {
  margin-inline: auto;
  max-width: 58ch;
}

.hero--center .hero__actions {
  justify-content: center;
}

@media (max-width: 620px) {
  .hero__lockup {
    flex-direction: column;
    gap: 0.24em;
    margin-bottom: 34px;
  }
}

.hero--inner {
  padding-block: 76px 0;
}

.hero--inner h1 {
  max-width: 20ch;
}

/* interior heroes have no action row to carry the bottom rhythm */
.hero__pad {
  padding-bottom: 76px;
}

/* --------------------------------------------------------------------------
   Signature — hours-of-service duty grid. Endorsed by BRAND.md §11 as the
   figure to use in place of filler imagery.
   -------------------------------------------------------------------------- */
.hos {
  border: 1px solid var(--jl-rule);
  background: var(--jl-paper);
  padding: 28px 28px 24px;
}

.hos__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 26px;
}

.hos__cap b {
  font-family: var(--jl-data);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--jl-ink);
}

.hos__cap span {
  font-family: var(--jl-data);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jl-slate);
}

.hos__scale {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-left: 104px; /* must equal .hos__name width or the scale lies */
  border-bottom: 1px solid var(--jl-ink);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.hos__scale i {
  font-family: var(--jl-data);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--jl-slate);
  font-style: normal;
}

.hos__row {
  display: flex;
  align-items: stretch;
  min-height: 36px;
}

.hos__name {
  width: 104px;
  flex: none;
  font-family: var(--jl-data);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--jl-slate);
  display: flex;
  align-items: center;
  padding-right: 12px;
  white-space: nowrap; /* a wrapped label desyncs the row from its track */
}

.hos__track {
  position: relative;
  flex: 1;
  border-top: 1px solid var(--jl-rule);
  background-image: repeating-linear-gradient(
    to right,
    var(--jl-rule) 0 1px,
    transparent 1px 12.5%
  );
}

.hos__row:last-child .hos__track {
  border-bottom: 1px solid var(--jl-rule);
}

.hos__bar {
  position: absolute;
  top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: var(--jl-signal);
}

.hos__bar--quiet {
  background: #c9c6bf;
}

.hos__note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--jl-rule);
  font-size: 0.97rem;
  color: var(--jl-slate);
}

.hos__note b {
  color: var(--jl-signal-deep);
  font-family: var(--jl-data);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .hos {
    padding: 20px 18px 18px;
  }
  .hos__scale {
    margin-left: 0;
    grid-template-columns: repeat(4, 1fr);
  }
  .hos__row {
    display: block;
    min-height: 0;
    margin-bottom: 14px;
  }
  .hos__name {
    width: auto;
    padding: 0 0 5px;
  }
  .hos__track {
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   Editorial
   -------------------------------------------------------------------------- */
.lede-block {
  max-width: 62ch;
}

.lede-block h2 {
  margin-bottom: 22px;
}

.lede-block p {
  color: var(--jl-slate);
  font-size: 1.1rem;
}

.eyebrow {
  display: block;
  font-family: var(--jl-data);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jl-signal-deep);
  margin-bottom: 22px;
}

.section--ink .eyebrow {
  color: var(--jl-signal);
}

/* `.closer` sits ON the same element as `.section--ink`, so a descendant
   selector (`.section--ink .closer`) never matches. Compound, not descendant. */
.section--ink .lede-block p,
.section--ink.closer p,
.section--ink .closer p {
  color: var(--jl-slate-rev);
}

/* promises */
.promises {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 56px;
  background: var(--jl-rule);
  border: 1px solid var(--jl-rule);
}

.promise {
  background: var(--jl-paper);
  padding: 38px 34px 40px;
}

.section--bond .promise {
  background: var(--jl-bond);
}

.promise h3 {
  margin-bottom: 14px;
}

.promise p {
  color: var(--jl-slate);
  font-size: 1rem;
  margin: 0;
}

.promise__tag {
  display: block;
  font-family: var(--jl-data);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jl-signal-deep);
  margin-bottom: 18px;
}

@media (max-width: 780px) {
  .promises {
    grid-template-columns: 1fr;
  }
  .promise {
    padding: 30px 24px 32px;
  }
}

/* statement — the one editorial claim on the page, set as a pull quote */
.statement {
  max-width: 68ch;
}

.statement__lead {
  font-family: var(--jl-display);
  font-weight: 900;
  letter-spacing: var(--jl-display-tracking);
  line-height: var(--jl-display-leading);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.5vw, 2.7rem);
  color: var(--jl-ink);
  margin: 0 0 28px;
  padding-bottom: 28px;
  border-bottom: 3px solid var(--jl-signal);
  display: inline-block;
}

.statement__body {
  color: var(--jl-slate);
  font-size: 1.1rem;
  margin: 0;
}

/* ladder — retained: the markup currently lives in snippets/ */
.ladder {
  margin-top: 54px;
  border-top: 2px solid var(--jl-ink);
}

.rung {
  display: grid;
  grid-template-columns: 92px 1fr 1.35fr;
  gap: 30px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--jl-rule);
}

.rung__step {
  font-family: var(--jl-data);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--jl-signal-deep);
  font-weight: 700;
}

.rung h3 {
  font-size: 1.5rem;
}

.rung p {
  color: var(--jl-slate);
  font-size: 1rem;
  margin: 0;
}

@media (max-width: 800px) {
  .rung {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0;
  }
}

/* split + facts */
.split {
  display: grid;
  gap: 66px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}

.facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
}

.facts li {
  padding: 22px 0;
  border-top: 1px solid var(--jl-rule);
  color: var(--jl-slate);
  font-size: 1.02rem;
}

.facts li:last-child {
  border-bottom: 1px solid var(--jl-rule);
}

.facts b {
  display: block;
  font-family: var(--jl-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: 1.04rem;
  color: var(--jl-ink);
  margin-bottom: 6px;
}

.section--ink .facts li {
  border-color: var(--jl-rule-ink);
  color: var(--jl-slate-rev);
}

.section--ink .facts b {
  color: var(--jl-paper);
}

/* --------------------------------------------------------------------------
   Postings
   -------------------------------------------------------------------------- */
.posting {
  border-top: 1px solid var(--jl-rule);
  padding: 44px 0 48px;
}

.posting:first-of-type {
  border-top: 2px solid var(--jl-ink);
}

.posting:last-of-type {
  border-bottom: 1px solid var(--jl-rule);
}

.posting__top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.posting h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
}

.posting__state {
  font-family: var(--jl-data);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jl-signal-deep);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
}

.posting__state::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--jl-signal);
  flex: none;
}

.posting__state--closed {
  color: var(--jl-slate);
}

.posting__state--closed::before {
  background: var(--jl-field);
}

.posting__intro {
  color: var(--jl-slate);
  max-width: 68ch;
  font-size: 1.05rem;
}

.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  padding: 16px 0;
  margin: 26px 0 30px;
  border-top: 1px solid var(--jl-rule);
  border-bottom: 1px solid var(--jl-rule);
}

.spec div {
  font-family: var(--jl-data);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jl-slate);
}

.spec b {
  display: block;
  color: var(--jl-ink);
  margin-top: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.duties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  margin-bottom: 34px;
}

@media (max-width: 780px) {
  .duties {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.duties h4 {
  font-family: var(--jl-data);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jl-signal-deep);
  margin: 0 0 18px;
}

.duties ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.duties li {
  color: var(--jl-slate);
  font-size: 1rem;
  padding: 0 0 12px 22px;
  position: relative;
}

.duties li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 2px;
  background: var(--jl-signal);
}

.referral {
  margin-top: 54px;
  background: var(--jl-bond);
  border-left: 4px solid var(--jl-signal);
  padding: 36px 36px;
}

.referral h3 {
  margin-bottom: 14px;
}

.referral p {
  color: var(--jl-slate);
  margin: 0;
  max-width: 74ch;
}

.eeo {
  margin-top: 46px;
  color: var(--jl-slate);
  font-size: 0.95rem;
  max-width: 84ch;
}

.eeo b {
  color: var(--jl-ink);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 76px;
  align-items: start;
}

@media (max-width: 940px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
}

.field {
  margin-bottom: 26px;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

@media (max-width: 560px) {
  .pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

label {
  display: block;
  font-family: var(--jl-data);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jl-ink);
  margin-bottom: 10px;
}

label .req {
  color: var(--jl-signal-deep);
}

.opt {
  color: var(--jl-slate);
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  font-family: var(--jl-body);
  font-size: 1.02rem;
  color: var(--jl-ink);
  background: var(--jl-paper);
  border: 1px solid var(--jl-field);
  border-radius: 0;
  padding: 15px 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--jl-slate);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--jl-ink) 50%),
    linear-gradient(135deg, var(--jl-ink) 50%, transparent 50%);
  background-position: calc(100% - 21px) 52%, calc(100% - 15px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

textarea {
  min-height: 138px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--jl-slate);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--jl-ink);
  box-shadow: inset 0 -3px 0 var(--jl-signal);
}

/* file upload: the native control is replaced by a label button, but the
   input keeps its own focus ring for keyboard users. */
.upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.upload__btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--jl-data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jl-ink);
  background: var(--jl-paper);
  border: 1px solid var(--jl-field);
  padding: 14px 22px;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.upload__btn:hover {
  border-color: var(--jl-ink);
  background: var(--jl-bond);
}

.upload input[type="file"]:focus-visible + .upload__btn {
  outline: 2px solid var(--jl-signal);
  outline-offset: 3px;
}

.upload__name {
  font-family: var(--jl-body);
  font-size: 0.95rem;
  color: var(--jl-slate);
  overflow-wrap: anywhere;
}

.upload__hint {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--jl-slate);
  max-width: 60ch;
}

.upload__err {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--jl-ink);
  font-weight: 700;
}

.upload__err:empty {
  display: none;
}

.consent {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 30px 0;
  padding: 22px;
  background: var(--jl-bond);
  border: 1px solid var(--jl-rule);
}

.consent input {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  accent-color: var(--jl-ink);
}

.consent label {
  font-family: var(--jl-body);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--jl-slate);
  margin: 0;
  line-height: 1.6;
}

.consent a {
  color: var(--jl-signal-deep);
}

.hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.result {
  display: none;
  margin-top: 26px;
  padding: 26px;
  border-left: 4px solid var(--jl-signal);
  background: var(--jl-bond);
  font-size: 1rem;
  color: var(--jl-slate);
}

.result.is-ok,
.result.is-err {
  display: block;
}

.result.is-err {
  border-left-color: var(--jl-ink);
}

.result b {
  font-family: var(--jl-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
  color: var(--jl-ink);
}

.result a {
  color: var(--jl-signal-deep);
}

/* aside */
.aside__block {
  border-top: 1px solid var(--jl-rule);
  padding: 26px 0 34px;
}

.aside__block:first-child {
  border-top: 2px solid var(--jl-ink);
}

.aside__block h3 {
  margin-bottom: 20px;
  font-size: 1.08rem;
}

.aside__block p {
  color: var(--jl-slate);
  font-size: 0.98rem;
  margin: 0;
}

.steps {
  list-style: none;
  counter-reset: s;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 16px 42px;
  color: var(--jl-slate);
  font-size: 0.98rem;
}

.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--jl-data);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--jl-signal-deep);
  font-weight: 700;
}

.reach {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--jl-rule);
}

.reach dt {
  font-family: var(--jl-data);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jl-slate);
}

.reach dd {
  margin: 0;
  text-align: right;
}

.reach a,
.reach span {
  color: var(--jl-ink);
  text-decoration: none;
  font-weight: 700;
}

.reach a:hover {
  color: var(--jl-signal-deep);
}

/* --------------------------------------------------------------------------
   Prose (legal)
   -------------------------------------------------------------------------- */
.prose h2 {
  font-size: 1.2rem;
  margin: 52px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--jl-rule);
}

.prose h3 {
  font-size: 0.9rem;
  margin: 32px 0 12px;
  color: var(--jl-signal-deep);
  letter-spacing: 0.02em;
}

.prose p,
.prose li {
  color: var(--jl-slate);
  font-size: 1.02rem;
}

.prose ul {
  padding-left: 22px;
}

.prose li {
  margin-bottom: 10px;
}

.prose a {
  color: var(--jl-signal-deep);
}

.prose strong {
  color: var(--jl-ink);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Closer + footer
   -------------------------------------------------------------------------- */
.closer h2 {
  max-width: 18ch;
  margin-bottom: 22px;
}

.closer p {
  color: var(--jl-slate);
  max-width: 50ch;
  font-size: 1.08rem;
  margin-bottom: 36px;
}

.foot {
  background: var(--jl-ink);
  color: var(--jl-slate-rev);
  padding: 64px 0 34px;
}

.foot__top {
  display: flex;
  flex-wrap: wrap;
  gap: 46px;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--jl-rule-ink);
}

.foot__brand {
  max-width: 38ch;
}

.foot__brand p {
  color: var(--jl-slate-rev);
  font-size: 0.97rem;
  margin-top: 20px;
}

.foot__cols {
  display: flex;
  gap: 58px;
  flex-wrap: wrap;
}

.foot__cols h4 {
  font-family: var(--jl-data);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jl-paper);
  margin: 0 0 18px;
}

.foot__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot__cols li {
  margin-bottom: 12px;
}

.foot__cols a,
.foot__cols span {
  color: var(--jl-slate-rev);
  text-decoration: none;
  font-size: 0.97rem;
}

.foot__cols a:hover {
  color: var(--jl-paper);
}

.foot__bot {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  font-family: var(--jl-data);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jl-slate-rev);
}

.foot__bot a {
  color: var(--jl-slate-rev);
  text-decoration: none;
}

.foot__bot a:hover {
  color: var(--jl-paper);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body {
    font-size: 17px;
  }
  .masthead__in {
    min-height: 68px;
  }
  .lockup {
    font-size: 1.24rem;
  }
  .nav a {
    padding: 10px 11px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }
  .nav__home,
  .nav__full {
    display: none;
  }
  .nav__short {
    display: inline;
  }
  .hero {
    padding-top: 58px;
  }
  .hero__actions {
    padding-bottom: 62px;
  }
  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .referral {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}