.paper.onboarding {
  max-width:750px;
  margin:auto;
  border-radius:24px;
}

.paper.onboarding .form_heading h1 {
  text-align:center;
  font-size:29px;
  font-family: "Inter";
  font-weight:700;
}

.paper.onboarding .form label {
  font-size:14px;
}

.paper.onboarding .form .form_button {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  font-size:14px;
}

svg.right_arrow {
  width:19px;
  height:auto;
}

.onboard_button_wrapper {
  display:flex;
  align-items:end;
  gap:10px;
  justify-content: space-between;
}

.onboard_button_wrapper .form_button {
  margin-top:0;
}

.onboarding .relevance-slider {
  margin-bottom:20px !important;
}

.skip_button a {
  font-size:12px;
  padding:4px 12px;
}

.onboarding textarea {
  margin-bottom:10px;
}

#company_details_known_for {
  margin-bottom:2px;
}

.onboarding_steps {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content: center;
  gap:15px;
  font-family:"Matter SemiMono", monospace;
  font-size:13px;
  margin-bottom:30px;
  white-space:nowrap;
  overflow-x:scroll;
}

.onboarding_step {
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--soft-grey);
}

.onboarding_step.active svg {
  stroke: var(--soft-black);
}

.onboarding_steps a, .onboarding_steps a:hover {
  color:inherit;
  text-decoration:none;
}

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

@media (min-width:900px) {
  .onboarding_steps {
    gap:40px;
  }
  .onboarding_step {
    gap:5px;
  }
}

svg.onboarding_icon {
  width:13px;
  height:auto;
}

.onboarding_step.active {
  color:var(--soft-black);
}

.competitors_steps {
  display:flex;
  flex-direction:row;
  gap:20px;
  font-family:"Matter SemiMono", monospace;
  justify-content: center;
  margin-top:40px;
}

.competitor_step {
  border:1px solid var(--gridline);
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content: center;
  font-size:12px;
  color:var(--soft-grey);
}

.competitor_step.active {
  color:var(--soft-black);
  border:1px solid var(--soft-black);
}

.onboarding_explainer_wrapper {
  margin-bottom:10px; 
}

.onboarding_explainer {
  padding:20px;
  background-color:var(--gentle-grey);
  border-bottom:1px solid var(--gridline);
  text-wrap:pretty;
  font-family: "Matter SemiMono", monospace;
  font-size:15px;
}

@media (min-width:900px) {
  .onboarding_explainer_wrapper {
    padding:32px;
    padding-bottom:10px;
    margin-bottom:0;
  }

  .onboarding_explainer {
    text-align:center;
    text-wrap:balance;
    border-radius:8px;
    border:1px solid var(--gridline);
  }
}

.alert_options {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:30px;
}

.alert_option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border:1px solid var(--gridline);
  border-radius:8px;
  cursor:pointer;
  transition:border-color 0.15s, transform 0.15s;
}

.alert_option:hover {
  border-color:var(--forest);
}

.alert_option:has(input:checked) {
  border:1px solid var(--forest);
  box-shadow:var(--box-shadow-combined);
  transform:scale(1.015);
  background-color:#108b6d0f;
}

.alert_option:has(input:checked) .alert_option_title {
  color:var(--forest);
}

.alert_option input[type="radio"] {
  margin-top:3px;
  flex-shrink:0;
  display:none;
}

.alert_option_content {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.alert_option_title {
  font-size:16px;
  font-weight:700;
}

.alert_option_description {
  font-size:15px;
  color:var(--soft-grey);
  font-family: "Matter SemiMono", monospace;
}

.char_counter_wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.char_counter_svg {
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
  flex-shrink: 0;
}

.char_counter__track {
  fill: none;
  stroke: #e1e0e0;
  stroke-width: 2.5;
}

.char_counter__arc {
  fill: none;
  stroke: #999;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear, stroke 0.15s ease;
}

.char_counter__arc--warn {
  stroke: var(--alert-red);
}

.char_counter {
  font-family: "Matter SemiMono", monospace;
  font-size: 12px;
  color: var(--soft-grey);
}

.char_counter--warn {
  color: var(--alert-red);
}

@keyframes char_counter_shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-2px); }
  40%       { transform: translateX(2px); }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px); }
}

.char_counter_wrapper--shake {
  animation: char_counter_shake 0.25s ease;
}