.tools_hero_area {
  padding: 180px 0 80px;
}

.tools_hero_content h1 {
  color: #fff;
  font-size: 62px;
  line-height: 1.05;
  margin-bottom: 24px;
}

.tools_eyebrow,
.tool_panel_label,
.tools_modal_tag,
.tool_card_tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #8dd3ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
}

.tools_hero_content p,
.tools_subtitle,
.tool_panel_shell p,
.tools_disclosure_box p,
.tool_card p,
.tool_form_note,
.result_hint,
.result_body p,
.tool_grade_feedback,
.result_chip,
.tool_empty_state p {
  color: rgba(255, 255, 255, 0.74);
}

.tools_hero_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.tools_hero_meta span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  padding: 10px 16px;
}

.tools_hero_panel,
.tool_panel_shell,
.tools_disclosure_box,
.tools_modal_dialog {
  background: linear-gradient(180deg, rgba(27, 31, 45, 0.95), rgba(12, 16, 27, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.tools_hero_panel {
  padding: 32px;
}

.tools_hero_panel h3,
.tools_disclosure_box h3,
.tool_empty_state h3,
.tools_modal_dialog h3 {
  color: #fff;
}

.tools_hero_panel li {
  color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tools_selector_area {
  padding: 20px 0 30px;
}

.tool_tier_section {
  margin-bottom: 48px;
}

.tool_tier_section:last-child {
  margin-bottom: 0;
}

.tool_tier_label {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(141, 211, 255, 0.3);
}

.tools_grid > [class*="col-"] {
  display: flex;
}

.tool_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  text-align: left;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(26, 30, 42, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tool_card h3 {
  color: #fff;
  font-size: 28px;
  margin: 18px 0 12px;
}

.tool_card p {
  margin-bottom: 0;
}

.tool_card:hover,
.tool_card:focus-visible,
.tool_card.is-active {
  transform: translateY(-6px);
  border-color: rgba(141, 211, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.sticky_tools_banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffa31a;
  border-radius: 18px;
  color: #111827;
  padding: 16px 22px;
  margin-bottom: 24px;
}

.sticky_tools_link {
  color: #111827;
  font-weight: 700;
}

.tool_panel_shell {
  padding: 36px;
}

.tool_panel_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.tool_panel_header h2,
.tool_result_cta p,
.result_score,
.result_grade,
.result_section_title,
.result_list_title,
.result_copy_btn,
.result_bullet_before,
.result_bullet_after,
.tool_input_label {
  color: #fff;
}

.tool_panel_status {
  border-radius: 999px;
  background: rgba(132, 56, 255, 0.18);
  color: #d6b8ff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  white-space: nowrap;
}

.tool_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tool_field,
.tool_results {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.tool_field {
  padding: 18px;
}

.tool_field.full {
  grid-column: 1 / -1;
}

.tool_input_label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.tool_input,
.tool_textarea {
  width: 100%;
  background: #0d1320;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #fff;
  padding: 14px 16px;
}

.tool_textarea {
  min-height: 200px;
  resize: vertical;
}

.tool_form_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.tool_form_note {
  max-width: 520px;
  margin-bottom: 0;
  font-size: 14px;
}

.tool_results {
  margin-top: 28px;
  padding: 28px;
}

.tool_empty_state {
  text-align: center;
  padding: 18px 0;
}

.result_grid,
.scorecard_grid,
.chip_list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.result_stat,
.scorecard_item,
.result_list,
.result_rewrite_item,
.result_callout {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 18px;
}

.result_stat {
  min-width: 180px;
}

.result_score {
  font-size: 42px;
  font-weight: 700;
}

.result_chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 14px;
  font-size: 14px;
}

.scorecard_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.result_grade {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
}

.result_rewrite_item + .result_rewrite_item,
.result_list + .result_list,
.result_callout {
  margin-top: 16px;
}

.result_table_wrap {
  overflow-x: auto;
}

.result_table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}

.result_table th,
.result_table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 8px;
}

.result_table th {
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
}

.result_accordion_item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px 16px;
  margin-top: 12px;
}

.result_accordion_item summary {
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.result_accordion_item p {
  margin-top: 10px;
}

.result_pdf_preview {
  position: relative;
  background: #f8fafc;
  border-radius: 20px;
  padding: 28px;
  color: #0f172a;
  overflow: hidden;
}

.result_pdf_preview h4 {
  color: #0f172a;
  margin-bottom: 14px;
}

.result_pdf_preview p {
  color: #0f172a;
}

.result_pdf_watermark {
  position: absolute;
  top: 45%;
  left: 10%;
  font-size: 48px;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.08);
  transform: rotate(-16deg);
  pointer-events: none;
}

.result_blur_gate {
  position: relative;
}

.result_blur_gate::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  border-radius: 18px;
}

.result_blur_gate > * {
  position: relative;
}

.result_bullet_before {
  color: #f8b4b4;
}

.result_bullet_after {
  color: #b6f3c3;
  margin: 12px 0;
}

.result_copy_btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 14px;
}

.tool_result_cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 28px;
  padding-top: 24px;
}

.tool_result_cta a {
  color: #8dd3ff;
  font-weight: 700;
}

.tools_disclosure_area {
  padding: 0 0 100px;
}

.tools_disclosure_box {
  padding: 28px;
}

.tools_modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.tools_modal_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.tools_modal_dialog {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 10vh auto 0;
  padding: 32px;
}

.tools_modal_close,
.tools_modal_later {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
}

.tools_modal_close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
}

.tools_modal_actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}

@media (max-width: 991px) {
  .tools_hero_content h1 {
    font-size: 46px;
  }

  .tool_fields,
  .scorecard_grid {
    grid-template-columns: 1fr;
  }

  .tool_panel_header,
  .tool_form_actions,
  .tool_result_cta,
  .sticky_tools_banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .tools_hero_area {
    padding: 140px 0 60px;
  }

  .tools_hero_content h1 {
    font-size: 38px;
  }

  .tool_panel_shell,
  .tool_results,
  .tools_modal_dialog {
    padding: 22px;
  }
}