/*
 * YADOWORK — high-impact recruitment LP theme
 * Inspired by the reference's urgency, contrast and conversion rhythm,
 * while preserving YADOWORK's original content and form behavior.
 */

:root {
  --primary: #e60012;
  --primary-dark: #a9000c;
  --navy: #171717;
  --accent: #ff3b18;
  --sky: #ffca00;
  --sky-light: #fff08a;
  --bg: #fff8e9;
  --card: #fff;
  --text: #1d1d1d;
  --muted: #6d625b;
  --line: #e8ddd1;
  --danger: #d90012;
  --radius: 10px;
  --shadow: 0 10px 0 rgba(27, 27, 27, .1);
  --shadow-sm: 0 4px 0 rgba(27, 27, 27, .09);
}

* { box-sizing: border-box; }

body {
  color: var(--text);
  background: var(--bg);
}

/* Bold, compact header modeled on direct-response recruitment pages. */
header {
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 4px solid var(--primary) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
}

.header-inner { min-height: 70px; }

.logo,
header .logo {
  position: relative;
  padding-left: 26px;
  color: #202020 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  font-style: italic;
  letter-spacing: -.06em !important;
  text-shadow: 2px 2px 0 rgba(255, 202, 0, .28);
}

.logo::before,
header .logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 19px;
  height: 29px;
  background: linear-gradient(145deg, #ffd800 0 48%, var(--primary) 49% 100%);
  clip-path: polygon(55% 0, 100% 0, 67% 39%, 96% 39%, 18% 100%, 39% 54%, 0 54%);
  transform: translateY(-50%) skewX(-8deg);
}

.logo .b,
header .logo .b { color: var(--primary) !important; }

.header-tag,
header .tag {
  color: #161616 !important;
  background: #fff3ad !important;
  border: 1px solid #f0ce1e;
  border-radius: 3px !important;
  font-weight: 900 !important;
}

.header-cta {
  border-radius: 5px !important;
  color: #171717 !important;
  background: linear-gradient(#ffe95b, #ffc400) !important;
  border: 2px solid #171717;
  box-shadow: 0 4px 0 #171717 !important;
  letter-spacing: .03em;
}

.header-cta:hover { transform: translateY(2px) !important; box-shadow: 0 2px 0 #171717 !important; }

/* First view: red velocity field, dark photo edge and oversized benefit copy. */
.hero {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(120, 0, 8, .98) 0%, rgba(207, 0, 14, .94) 43%, rgba(213, 0, 15, .38) 72%, rgba(16, 16, 16, .22) 100%),
    url("images/hero-bg.png") 82% center / cover no-repeat !important;
  border-bottom: 8px solid #171717;
}

.hero::before { display: none !important; }

.hero::after { display: none !important; }

.hero-inner {
  min-height: 535px;
  padding: 64px 20px 72px !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero .inner { text-align: left; }

.hero .sub {
  position: relative;
  color: #171717 !important;
  background: #ffda00 !important;
  border: 3px solid #171717 !important;
  border-radius: 0 !important;
  padding: 7px 22px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  transform: skewX(-7deg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .32);
}

.hero h1 {
  max-width: 700px;
  margin-top: 8px !important;
  font-size: clamp(35px, 4.2vw, 58px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .32), 0 8px 20px rgba(0, 0, 0, .22);
}

.hero h1 .hl {
  color: #ffe100 !important;
  background: none !important;
  -webkit-text-stroke: 0 !important;
  text-decoration: none !important;
  text-shadow: 0 2px 0 #720008;
}

.hero h1 .hero-line { display: block; }

.hero h1 .hero-key {
  display: inline-block;
  font-size: 1.12em;
  font-weight: 1000;
  letter-spacing: .025em;
  text-shadow: 0 2px 0 #720008, 0 6px 16px rgba(65, 0, 5, .38) !important;
}

.hero .lead {
  max-width: 660px !important;
  margin: 8px 0 0 !important;
  padding: 9px 14px;
  color: #171717;
  background: rgba(255, 255, 255, .94);
  border-left: 6px solid #ffda00;
  font-size: 16px !important;
  font-weight: 800;
}

.hero .badges { justify-content: flex-start !important; gap: 8px !important; }

.hero .badge {
  color: #171717 !important;
  background: #fff !important;
  border: 2px solid #171717 !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #ffcf00;
  font-weight: 900 !important;
}

.hero .badge .material-symbols-outlined { color: var(--primary); font-weight: 700; }

.hero-cta {
  min-width: min(420px, 100%);
  color: #171717 !important;
  background: linear-gradient(#fff175, #ffca00) !important;
  border: 3px solid #171717;
  border-radius: 6px !important;
  box-shadow: 0 7px 0 #171717, 0 16px 26px rgba(0, 0, 0, .25) !important;
  font-size: 21px !important;
  letter-spacing: .03em;
}

.hero-cta:hover { transform: translateY(3px) !important; box-shadow: 0 4px 0 #171717 !important; }

.trust-band {
  margin-top: 0;
  background: #202020 !important;
  border: 0 !important;
}

.trust-grid { gap: 8px !important; padding: 18px 0 22px !important; }

.trust-grid .t,
.trust .t {
  border: 2px solid #171717 !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 #e60012 !important;
}

.trust-grid b,
.trust b { color: var(--primary) !important; letter-spacing: -.04em; }

@media (max-width: 719px) {
  .header-inner { min-height: 60px; }
  .logo, header .logo { font-size: 21px !important; }
  .header-cta { padding: 8px 12px !important; font-size: 12px !important; }
  .hero { background-position: 68% center !important; }
  .hero-inner { min-height: 540px; padding: 34px 18px 44px !important; justify-content: flex-end; }
  .hero .inner { padding: 38px 20px 42px !important; }
  .hero h1 { max-width: 92%; font-size: clamp(30px, 8.6vw, 42px) !important; }
  .hero .lead { font-size: 14px !important; }
  .hero .badges { gap: 6px !important; }
  .hero .badge { padding: 6px 8px !important; font-size: 11px !important; }
}

@media (max-width: 480px) {
  .hero-inner { min-height: 510px; }
  .hero h1 { max-width: 100%; font-size: 31px !important; }
  .hero .sub { padding: 5px 12px !important; font-size: 12px !important; }
  .trust-grid .t { padding: 13px 4px !important; }
}

/* Section rhythm and graphic headlines. */
section.block { padding: 68px 0 !important; }

section.block:nth-of-type(even) {
  background-color: rgba(255, 255, 255, .72);
}

.sec-head { margin-bottom: 38px !important; }

.sec-head .eyebrow {
  position: relative;
  color: #fff !important;
  background: var(--primary) !important;
  border: 2px solid #171717;
  border-radius: 0 !important;
  padding: 6px 20px !important;
  box-shadow: 4px 4px 0 #ffcf00;
  letter-spacing: .12em !important;
  transform: skewX(-6deg);
}

.sec-head h2 {
  color: #171717 !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.04em !important;
}

.sec-head h2 .hl {
  color: var(--primary) !important;
  background: linear-gradient(transparent 68%, #ffdf24 68%);
  padding: 0 .08em;
}

.sec-head p { color: #665d57 !important; font-size: 14px !important; }

.problem {
  position: relative;
  max-width: 820px !important;
  border: 3px solid #171717 !important;
  border-radius: 7px !important;
  box-shadow: 10px 10px 0 #ffce00 !important;
  padding: 34px !important;
}

.problem::before {
  content: "CHECK";
  position: absolute;
  top: -17px;
  left: 24px;
  padding: 4px 13px;
  color: #fff;
  background: #171717;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.problem li {
  border: 1px solid #eadccf !important;
  border-left: 7px solid var(--primary) !important;
  border-radius: 3px !important;
  background: #fff9ee !important;
  font-size: 15px !important;
}

.problem .arrow { color: var(--primary) !important; filter: drop-shadow(0 3px 0 #ffd500); }

.problem .solve {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  color: #171717 !important;
  background: #ffda00;
  border: 2px solid #171717;
  font-size: 18px !important;
}

.reasons { gap: 22px !important; }

.reason,
.job,
.voice,
.flow .c,
.faq details {
  border: 2px solid #171717 !important;
  border-radius: 6px !important;
  box-shadow: var(--shadow-sm) !important;
}

.reason { position: relative; overflow: hidden; padding: 26px 22px 30px !important; }

.reason::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  background: #ffdc28;
  transform: rotate(35deg);
  opacity: .22;
}

.reason:hover,
.job:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 0 rgba(23, 23, 23, .15) !important; }

.reason .num {
  width: 42px !important;
  height: 42px !important;
  border: 2px solid #171717;
  border-radius: 4px !important;
  color: #171717 !important;
  background: #ffda00 !important;
  box-shadow: 3px 3px 0 var(--primary);
  font-size: 18px !important;
}

.reason .ic {
  color: #fff !important;
  background: var(--primary) !important;
  border: 2px solid #171717;
  border-radius: 50% !important;
}

.reason h3 { font-size: 18px !important; }

.jobs { gap: 16px !important; }

.job {
  padding: 26px 12px !important;
  background: linear-gradient(#fff 0 68%, #fff1b9 68% 100%) !important;
}

.job .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto;
  color: #fff !important;
  background: var(--primary);
  border: 3px solid #171717;
  border-radius: 50%;
  box-shadow: 4px 4px 0 #ffcf00;
}

.job b { margin-top: 15px !important; font-size: 16px !important; }

.flow .step { gap: 20px !important; }

.flow .step:not(:last-child)::before {
  left: 24px !important;
  width: 4px !important;
  background: repeating-linear-gradient(#171717 0 8px, #ffcf00 8px 16px) !important;
}

.flow .n {
  border: 3px solid #171717;
  color: #171717 !important;
  background: #ffcf00 !important;
  box-shadow: 4px 4px 0 var(--primary) !important;
}

.flow .c { padding: 18px 22px !important; }
.flow .c h3 { color: var(--primary) !important; font-size: 17px !important; }

.voice { position: relative; border-top: 8px solid var(--primary) !important; }
.voice .stars { color: #e60012 !important; }
.voice .ava { color: #171717 !important; background: #ffda00 !important; border: 2px solid #171717; }

.faq { gap: 14px !important; }
.faq details[open] { box-shadow: 6px 6px 0 #ffcf00 !important; }
.faq summary { padding: 18px 20px !important; font-size: 15px !important; }
.faq summary .q { color: #171717 !important; background: #ffcf00 !important; border: 2px solid #171717; border-radius: 3px !important; }
.faq summary .mk { color: var(--primary) !important; font-weight: 900 !important; }

/* Repeated conversion band. */
.cta-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #171717 !important;
  border-top: 8px solid var(--primary);
  border-bottom: 8px solid var(--primary);
}

.cta-band::before,
.cta-band::after { display: none !important; }

.cta-band .wrap { position: relative; z-index: 1; padding: 60px 20px !important; }
.cta-band h2 { font-size: clamp(28px, 3vw, 39px) !important; }

.cta-band .btn-big {
  min-width: min(430px, 100%);
  color: #171717 !important;
  background: linear-gradient(#fff27a, #ffc900) !important;
  border: 3px solid #fff;
  border-radius: 6px !important;
  outline: 3px solid #171717;
  box-shadow: 0 7px 0 #870008, 0 14px 24px rgba(0, 0, 0, .34) !important;
}

.cta-band .btn-big small { color: #493c1e !important; }
.cta-band .btn-big:hover { transform: translateY(3px) !important; box-shadow: 0 4px 0 #870008 !important; }

/* Form has the visual gravity of a final offer panel. */
.form-section {
  padding: 70px 0 90px !important;
  background: #f4efe8;
}

.form-card {
  max-width: 680px !important;
  border: 4px solid #171717 !important;
  border-radius: 7px !important;
  box-shadow: 12px 12px 0 rgba(230, 0, 18, .88) !important;
}

.form-card .fhead {
  position: relative;
  padding: 28px 24px !important;
  color: #171717 !important;
  background: #ffcf00 !important;
  border-bottom: 4px solid #171717;
}

.form-card .fhead::before {
  content: "ENTRY";
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
}

.form-card .fhead h2 { font-size: 26px !important; }
.form-body { padding: 34px !important; }

.field label { color: #171717 !important; font-size: 15px !important; }

.field label .req {
  border-radius: 2px !important;
  background: var(--primary) !important;
}

.field label .opt-tag { border-radius: 2px !important; }

.field input,
.field select {
  min-height: 54px;
  border: 2px solid #bcb2a9 !important;
  border-radius: 4px !important;
  background-color: #fff !important;
}

.field input:focus,
.field select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(230, 0, 18, .12) !important;
}

.btn-submit {
  border: 3px solid #171717 !important;
  border-radius: 5px !important;
  color: #171717 !important;
  background: linear-gradient(#fff175, #ffca00) !important;
  box-shadow: 0 7px 0 #171717 !important;
  font-size: 19px !important;
}

.btn-submit:hover { transform: translateY(3px) !important; box-shadow: 0 4px 0 #171717 !important; }
.secure { color: #57504a !important; font-weight: 700; }

.sticky-cta {
  padding: 9px 12px 13px !important;
  background: rgba(23, 23, 23, .96) !important;
  border-top: 4px solid var(--primary) !important;
}

.sticky-cta a {
  border: 2px solid #171717 !important;
  border-radius: 5px !important;
  color: #171717 !important;
  background: linear-gradient(#fff175, #ffca00) !important;
  box-shadow: 0 4px 0 #8f000b !important;
}

footer {
  color: #d8d0c8 !important;
  background: #171717 !important;
  border-top: 7px solid var(--primary);
}

footer .upd { color: #171717 !important; background: #ffcf00 !important; border-radius: 3px !important; }
footer .fname { font-size: 19px !important; font-style: italic; }

.modal { border: 3px solid #171717; border-radius: 6px !important; }
.modal-head { color: #171717; background: #ffcf00; border-bottom: 3px solid #171717 !important; }

/* Step-style LP: same campaign language, tuned for a 480px funnel. */
.wrap > header .tag { margin-left: auto; }

#introScreen .hero {
  min-height: 540px;
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(0deg, rgba(112, 0, 8, .98) 0%, rgba(190, 0, 14, .88) 53%, rgba(143, 0, 10, .38) 76%, rgba(20, 20, 20, .08) 100%),
    url("images/hero-bg.png") 57% center / cover no-repeat !important;
}

#introScreen .hero .inner {
  width: 100%;
  padding: 40px 24px 34px !important;
  background: transparent !important;
}

#introScreen .hero h1 {
  max-width: 100%;
  margin: 14px 0 12px !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  text-align: left;
}

#introScreen .hero h1 .hero-line {
  display: block;
  white-space: nowrap;
}

#introScreen .hero h1 .hero-line-last { font-size: .92em; }
#introScreen .hero h1 .hero-break-mobile { display: none; }

#introScreen .hero .lead {
  width: 100%;
  margin-top: 0 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.65;
}

#introScreen .hero .badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 14px !important;
}

#introScreen .hero .badge {
  justify-content: center;
  min-width: 0;
  padding: 7px 5px !important;
  font-size: 11px !important;
}

/* Desktop step funnel: same vertical rhythm as the long-form LP. */
@media (min-width: 1100px) {
  body.step-lp {
    background: #fff8e9 !important;
  }

  .step-lp .wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .step-lp .wrap > header {
    min-height: 76px;
    padding: 15px max(40px, calc((100% - 1200px) / 2)) !important;
  }

  .step-lp .wrap > header .logo { font-size: 25px !important; }
  .step-lp .wrap > header .tag {
    padding: 7px 13px !important;
    font-size: 12px !important;
  }

  .step-lp #introScreen {
    display: block;
    min-height: auto !important;
    padding: 0 !important;
    background: #fff8e9 !important;
    overflow: hidden !important;
  }

  .step-lp #introScreen::before { display: none !important; }

  .step-lp #introScreen .hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 650px !important;
    align-items: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 8px solid #171717 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(90deg, rgba(112, 0, 8, .98) 0%, rgba(194, 0, 14, .94) 45%, rgba(178, 0, 13, .48) 66%, rgba(18, 18, 18, .08) 100%),
      url("images/hero-bg.png") 82% 38% / cover no-repeat !important;
  }

  .step-lp #introScreen .hero .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 82px 20px 88px !important;
  }

  .step-lp #introScreen .hero .sub {
    margin-bottom: 20px !important;
    padding: 8px 22px !important;
    font-size: 15px !important;
  }

  .step-lp #introScreen .hero h1 {
    max-width: 760px !important;
    margin: 14px 0 18px !important;
    font-size: clamp(38px, 3.5vw, 50px) !important;
    line-height: 1.25 !important;
  }

  .step-lp #introScreen .hero .lead {
    max-width: 680px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .step-lp #introScreen .hero .lead br { display: none !important; }

  .step-lp #introScreen .hero .badges {
    max-width: 680px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px !important;
    gap: 9px !important;
  }

  .step-lp #introScreen .hero .badge {
    padding: 10px 7px !important;
    font-size: 12px !important;
  }

  .step-lp #introScreen .intro {
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 48px 20px 60px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .step-lp #introScreen .intro .q {
    font-size: 30px !important;
    line-height: 1.35;
  }

  .step-lp #introScreen .intro .note {
    margin: 7px 0 26px;
    font-size: 14px;
  }

  .step-lp #introScreen .cta-row {
    display: flex !important;
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
  }

  .step-lp #introScreen .cta-row .cta {
    width: auto !important;
    min-height: 82px;
    margin: 0 !important;
    padding: 16px 38px 16px 20px !important;
    font-size: 18px !important;
  }

  .step-lp #introScreen .trust {
    max-width: 760px;
    margin: 34px auto 0 !important;
  }

  .step-lp #introScreen .trust .t {
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0;
    padding: 14px 8px !important;
  }

  .step-lp #introScreen .trust .tt { align-items: center !important; }
  .step-lp #introScreen .trust b { font-size: 20px !important; }
  .step-lp #introScreen .trust span { font-size: 11px !important; }
  .step-lp #introScreen .trust .t .material-symbols-outlined { font-size: 32px !important; }

  .step-lp #formScreen,
  .step-lp #doneScreen {
    width: 100% !important;
    max-width: 760px !important;
    margin: 56px auto !important;
    border: 3px solid #171717;
    border-radius: 9px !important;
    box-shadow: 10px 10px 0 rgba(230, 0, 18, .86) !important;
    overflow: hidden;
  }

  .step-lp #formScreen .progress { position: static !important; }
  .step-lp #formScreen .step { padding: 36px 48px 8px !important; }
  .step-lp #formScreen .opts:not(.two) { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step-lp #formScreen .opts:not(.two) .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .step-lp .wrap > footer {
    padding: 30px max(40px, calc((100% - 1200px) / 2)) !important;
  }
}

/* Tablet landscape keeps the compact step layout instead of squeezing two columns. */
@media (min-width: 900px) and (max-width: 1099px) {
  body.step-lp { background: #f4eee6 !important; }

  .step-lp .wrap {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    background: #fff8e9 !important;
    box-shadow: 0 0 48px rgba(23, 23, 23, .13) !important;
  }

  .step-lp .wrap > header { padding: 13px 20px !important; }
  .step-lp .wrap > header .logo { font-size: 21px !important; }
  .step-lp .wrap > header .tag { font-size: 10.5px !important; }

  .step-lp #introScreen {
    display: block;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .step-lp #introScreen::before { display: none !important; }

  .step-lp #introScreen .hero {
    width: 100% !important;
    max-width: none !important;
    min-height: 540px !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  .step-lp #introScreen .hero .inner { padding: 40px 24px 34px !important; }
  .step-lp #introScreen .hero .sub { margin-bottom: 16px !important; font-size: 13px !important; }
  .step-lp #introScreen .hero h1 { margin: 14px 0 12px !important; font-size: 28px !important; }
  .step-lp #introScreen .hero .lead { font-size: 12px !important; }
  .step-lp #introScreen .hero .lead br { display: inline !important; }

  .step-lp #introScreen .intro {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px 20px 42px !important;
    background: #fff8e9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .step-lp #introScreen .cta-row { display: block !important; }
  .step-lp #introScreen .cta-row .cta { width: 100% !important; margin: 11px 0 !important; }
  .step-lp #introScreen .trust .t { flex-direction: column !important; gap: 4px !important; }
  .step-lp #introScreen .trust .tt { align-items: center !important; }

  .step-lp #formScreen,
  .step-lp #doneScreen {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .step-lp .wrap > footer { padding: 26px 20px !important; }
}

.intro {
  position: relative;
  padding: 30px 20px 42px !important;
  background: #fff8e9;
}

.intro .q { font-size: 22px !important; }

.cta,
.btn-next {
  border: 3px solid #171717 !important;
  border-radius: 5px !important;
  color: #171717 !important;
  background: linear-gradient(#fff175, #ffca00) !important;
  box-shadow: 0 6px 0 #171717 !important;
}

.cta.alt { color: #fff !important; background: linear-gradient(#f52a39, #c90010) !important; }
.cta:hover { transform: translateY(3px) !important; box-shadow: 0 3px 0 #171717 !important; }

.progress {
  top: 58px !important;
  background: rgba(255, 248, 233, .97) !important;
  border-bottom: 3px solid #171717 !important;
}

.progress .bar { height: 12px !important; border: 2px solid #171717; background: #fff !important; }
.progress .fill { background: repeating-linear-gradient(135deg, #e60012 0 10px, #ffca00 10px 20px) !important; }
.progress .fill::after { display: none; }
.progress .meta b { color: var(--primary) !important; }

.form-area .step { padding: 34px 20px 12px !important; }
.form-area .step h2 { font-size: 23px !important; }

.opt {
  min-height: 66px;
  border: 2px solid #171717 !important;
  border-radius: 5px !important;
  box-shadow: 4px 4px 0 rgba(23, 23, 23, .14) !important;
}

.opt .ic { border-radius: 4px !important; background: #fff0a5 !important; }
.opt:hover { border-color: var(--primary) !important; background: #fff9df !important; }
.opt.sel { border-color: #171717 !important; background: #fff0a5 !important; box-shadow: 5px 5px 0 var(--primary) !important; }
.opt.sel .ic { color: #171717 !important; background: #ffca00 !important; }

.btn { border: 2px solid #171717 !important; border-radius: 5px !important; }
.btn-back { background: #e9e3dc !important; color: #504944 !important; }
.form-area .btn-submit { line-height: 1.35; }

.done .check { color: #171717 !important; background: #ffcf00 !important; border: 4px solid #171717; border-radius: 50% !important; box-shadow: 6px 6px 0 var(--primary) !important; }

/* Preview selector page. */
body > .cards .card {
  border: 3px solid #171717 !important;
  border-radius: 6px !important;
  box-shadow: 8px 8px 0 rgba(230, 0, 18, .82) !important;
}

body > .cards .card:hover { transform: translate(-2px, -2px) !important; box-shadow: 11px 11px 0 rgba(230, 0, 18, .82) !important; }
body > .cards .badge { color: #171717 !important; background: #ffcf00 !important; border: 2px solid #171717; border-radius: 2px !important; }
body > .cards .go { color: var(--primary) !important; }

@media (max-width: 719px) {
  section.block { padding: 52px 0 !important; }
  .sec-head { margin-bottom: 30px !important; }
  .sec-head h2 { font-size: 27px !important; }
  .problem { padding: 30px 17px 22px !important; box-shadow: 7px 7px 0 #ffce00 !important; }
  .problem li { font-size: 14px !important; }
  .problem .solve { font-size: 15px !important; }
  .jobs { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .job { padding: 20px 8px !important; }
  .job .material-symbols-outlined { width: 52px; height: 52px; font-size: 31px !important; }
  .cta-band .wrap { padding: 48px 20px !important; }
  .form-section { padding: 52px 0 80px !important; }
  .form-card { box-shadow: 7px 7px 0 rgba(230, 0, 18, .88) !important; }
  .form-body { padding: 26px 18px 30px !important; }
}

@media (max-width: 479px) {
  .header-tag { display: none !important; }
  .sec-head h2 { font-size: 24px !important; }
  .flow .step { gap: 13px !important; }
  .flow .c { padding: 15px !important; }
  .form-card { border-left-width: 2px !important; border-right-width: 2px !important; }
  #introScreen .hero { min-height: 515px; }
  #introScreen .hero .inner { padding: 34px 20px 28px !important; }
  #introScreen .hero h1 { font-size: clamp(23px, 6.7vw, 28px) !important; }
}

@media (max-width: 419px) {
  #introScreen .hero { min-height: 535px; }
  #introScreen .hero h1 .hero-break-mobile { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* First-choice hierarchy: one dominant action with a quiet secondary option. */
#introScreen .hero h1 .hero-audience { white-space: normal; }

.step-lp #introScreen .cta-row {
  flex-direction: column;
  align-items: center;
  max-width: 680px;
}

.step-lp #introScreen .cta-row .cta-primary {
  width: min(100%, 620px) !important;
  min-height: 104px;
  padding: 22px 52px 22px 28px !important;
  font-size: 24px !important;
  box-shadow: 0 8px 0 #171717 !important;
}

.step-lp #introScreen .cta-row .cta-primary small {
  margin-top: 5px;
  font-size: 13px;
}

.step-lp #introScreen .cta-row .cta-secondary {
  width: auto !important;
  min-height: auto;
  margin-top: 4px !important;
  padding: 11px 40px 11px 22px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 2px 7px rgba(43,18,16,.08) !important;
  font-size: 14px !important;
}

.step-lp #introScreen .cta-row .cta-secondary:hover {
  transform: translateY(-1px) !important;
  border-color: var(--sky) !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(43,18,16,.10) !important;
}

@media (max-width: 819px) {
  .step-lp #introScreen .cta-row .cta-primary {
    width: 100% !important;
    min-height: 90px;
    padding: 19px 44px 19px 20px !important;
    font-size: 20px !important;
  }

  .step-lp #introScreen .cta-row .cta-secondary {
    width: auto !important;
    margin: 5px auto 0 !important;
    padding: 10px 36px 10px 18px !important;
    font-size: 13px !important;
  }
}