:root {
  color: #172026;
  background: #f4f7f6;
  --blue: #1f7ed8;
  --blue-light: #2f94f4;
  --blue-dark: #071b3c;
  --blue-mid: #0b3e73;
  --panel-border: #5ea7eb;
  --panel-glow: 0 0 0 1px rgba(94, 167, 235, 0.34), 0 16px 38px rgba(31, 126, 216, 0.16);
  font-family:
    Inter, ui-sans-serif, system-ui, Segoe UI, Arial, sans-serif;
  line-height: 1.45;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(244, 247, 246, 0.94), rgba(238, 243, 241, 0.98)),
    url("./assets/security_grid.svg");
  background-size: auto, 920px 620px;
  background-position: center top;
}

.topbar {
  align-items: center;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue-mid) 58%, #1766b1);
  border-bottom: 1px solid rgba(154, 207, 255, 0.42);
  box-shadow: 0 12px 30px rgba(7, 27, 60, 0.22);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-width: 0;
  padding: 16px clamp(18px, 4vw, 56px);
  position: sticky;
  top: 0;
  z-index: 3;
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 210px;
}

.brand img {
  background: #ffffff;
  border-radius: 8px;
  height: 36px;
  padding: 2px;
  width: 36px;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  color: #ffffff;
  font-size: 1rem;
}

.brand span {
  color: #c7e4ff;
  font-size: 0.78rem;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.tabs a {
  background: var(--blue-light);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(47, 148, 244, 0.24);
  color: #ffffff;
  font-weight: 800;
  min-width: 0;
  padding: 8px 12px;
  text-decoration: none;
}

.tabs a:hover {
  background: #58aaf7;
}

main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 clamp(18px, 4vw, 48px) 56px;
}

.home_hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(7, 27, 60, 0.96) 0%, rgba(7, 27, 60, 0.84) 37%, rgba(7, 27, 60, 0.18) 72%),
    url("./assets/hero_assurance_room.png");
  background-position: center;
  background-size: cover;
  color: #ffffff;
  display: grid;
  gap: 28px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(430px, 58vh, 560px);
  overflow: hidden;
  padding: clamp(48px, 8vw, 92px) clamp(22px, 6vw, 72px);
  position: relative;
}

.home_hero::after {
  background: linear-gradient(180deg, transparent, rgba(244, 247, 246, 0.08));
  bottom: 0;
  content: "";
  height: 120px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.hero_copy {
  max-width: 720px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.hero_copy .eyebrow {
  color: #9fd0ff;
}

.hero_copy h1 {
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 6rem);
  max-width: 760px;
  text-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.hero_copy p {
  color: #dceeff;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  max-width: 670px;
}

.hero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero_actions a {
  border-radius: 8px;
  color: #ffffff;
  font-weight: 900;
  padding: 13px 16px;
  text-decoration: none;
}

.hero_actions a:first-child {
  background: var(--blue-light);
  box-shadow: 0 0 28px rgba(47, 148, 244, 0.34);
}

.hero_actions a:last-child {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.site_footer {
  align-items: center;
  background: #071b3c;
  border-top: 1px solid rgba(154, 207, 255, 0.42);
  color: #dceeff;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  padding: 22px clamp(18px, 4vw, 56px);
}

.site_footer strong,
.site_footer span {
  display: block;
}

.site_footer strong {
  color: #ffffff;
  font-size: 1rem;
}

.site_footer span,
.site_footer p {
  color: #c7e4ff;
  font-size: 0.84rem;
}

.site_footer p {
  margin: 0;
}

.site_footer a {
  color: #ffffff;
  font-weight: 800;
  margin-left: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.site_footer a:hover {
  text-decoration: underline;
}

.overview {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  margin-top: 46px;
  min-height: 320px;
}

.status_panel {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--panel-glow);
  padding: clamp(24px, 5vw, 44px);
}

.eyebrow {
  color: #60746b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.04;
  margin-bottom: 30px;
}

h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.12;
}

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

.status_pill,
.response_panel button {
  border-radius: 8px;
  border: 0;
  color: #ffffff;
  font-weight: 800;
  padding: 12px 16px;
  text-transform: uppercase;
}

.urgent {
  background: #c9422c;
}

.score {
  text-align: right;
}

.score span {
  color: #c9422c;
  display: block;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 0.88;
}

.score small {
  color: #60746b;
  font-weight: 700;
  text-transform: uppercase;
}

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

.metric_grid article,
.loop_grid article,
.finding,
.backup_checks,
.response_panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--panel-glow);
}

.metric_grid article {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 150px;
  overflow: hidden;
  padding: 22px;
  position: relative;
}

.metric_grid strong {
  align-items: center;
  color: var(--blue-dark);
  display: flex;
  font-size: clamp(3.6rem, 5vw, 5.4rem);
  line-height: 1;
  justify-content: center;
  inset: 0;
  position: absolute;
  text-shadow: 0 0 22px rgba(7, 27, 60, 0.16);
}

.metric_grid span {
  color: var(--blue-light);
  font-size: clamp(0.78rem, 1.1vw, 0.9rem);
  font-weight: 900;
  position: relative;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}

.band,
.content_grid,
.split_band,
.response_panel,
.contact_band,
.evidence_band,
.story_band,
.client_value_band,
.start_band,
.process_band,
.position_band,
.devices_band,
.technical_band,
.build_band,
.security_band,
.benefit_band,
.feature_band {
  margin-top: 46px;
}

.section_head {
  margin-bottom: 18px;
  max-width: 720px;
}

.evidence_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evidence_grid article {
  min-height: 190px;
  padding: 22px;
}

.evidence_grid strong {
  color: var(--blue-dark);
  display: block;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1;
  margin-bottom: 16px;
}

.evidence_grid span {
  color: #26384b;
  display: block;
  font-weight: 800;
  margin-bottom: 14px;
}

.evidence_grid a {
  color: var(--blue-light);
  font-size: 0.84rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
}

.evidence_grid a:hover {
  text-decoration: underline;
}

.evidence_summary {
  color: #26384b;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 900;
  margin-top: 14px;
  padding: 20px;
}

.evidence_band .section_head {
  max-width: 820px;
}

.process_steps,
.benefit_grid,
.feature_columns,
.technical_stack,
.monitor_flow,
.security_boundary,
.device_mix,
.evidence_grid,
.story_grid,
.client_value_grid,
.start_steps,
.build_intro,
.implementation_grid,
.api_shape {
  display: grid;
  gap: 14px;
}

.process_steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.story_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.story_grid article,
.client_value_grid article,
.start_steps article {
  padding: 22px;
}

.story_grid article {
  min-height: 190px;
}

.story_grid strong,
.client_value_grid strong,
.start_steps strong {
  color: var(--blue-light);
  display: block;
  font-size: 0.98rem;
  line-height: 1.1;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.story_grid p,
.client_value_grid p,
.start_steps p {
  color: #5d6b66;
  margin: 0;
}

.client_value_grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.client_value_grid article {
  min-height: 210px;
}

.client_value_grid span,
.start_steps span {
  color: var(--blue-dark);
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 18px;
}

.start_steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.start_steps article {
  min-height: 230px;
}

.process_steps article,
.benefit_grid article,
.feature_columns div,
.technical_stack article,
.monitor_flow div,
.security_column,
.security_core,
.data_exit_panel,
.device_mix article,
.evidence_grid article,
.evidence_summary,
.story_grid article,
.client_value_grid article,
.start_steps article,
.network_diagram,
.proof_layer,
.build_intro div,
.implementation_grid article,
.login_blueprint,
.api_shape div,
.build_sequence {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--panel-glow);
}

.process_steps article {
  min-height: 210px;
  padding: 18px;
}

.technical_stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.build_intro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.build_intro div {
  min-height: 150px;
  padding: 22px;
}

.build_intro h3,
.implementation_grid h3,
.login_blueprint h3,
.build_sequence h3 {
  color: var(--blue-light);
  font-size: 1.05rem;
  line-height: 1.1;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.build_intro p,
.implementation_grid p,
.login_blueprint p,
.api_shape p,
.build_sequence li {
  color: #5d6b66;
  margin: 0;
}

.build_flow {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
}

.build_node {
  background: #ffffff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 126, 216, 0.1);
  display: grid;
  gap: 8px;
  min-height: 170px;
  padding: 18px;
  position: relative;
}

.build_node::after {
  background: var(--blue-light);
  content: "";
  height: 3px;
  opacity: 0.5;
  position: absolute;
  right: -13px;
  top: 48%;
  width: 14px;
}

.build_node:last-child::after {
  display: none;
}

.build_node small {
  color: #60746b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.build_node strong {
  color: var(--blue-dark);
  font-size: 1.35rem;
  line-height: 1;
}

.build_node span {
  color: #5d6b66;
  font-size: 0.9rem;
  font-weight: 700;
}

.build_node.auth {
  background: linear-gradient(160deg, rgba(7, 27, 60, 0.98), rgba(11, 62, 115, 0.96));
}

.build_node.auth small,
.build_node.auth span {
  color: #dceeff;
}

.build_node.auth strong {
  color: #ffffff;
}

.implementation_grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.implementation_grid article {
  min-height: 190px;
  padding: 22px;
}

.login_blueprint {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  margin-top: 18px;
  padding: 24px;
}

.login_options {
  display: grid;
  gap: 10px;
}

.login_options span {
  background: #f4f9ff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  color: #26384b;
  display: block;
  font-weight: 900;
  padding: 12px;
}

.api_shape {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.api_shape div {
  min-height: 160px;
  padding: 18px;
}

.api_shape strong {
  background: var(--blue-dark);
  border-radius: 8px;
  color: #ffffff;
  display: inline-block;
  font-size: 0.78rem;
  margin-bottom: 12px;
  padding: 6px 10px;
}

.api_shape span {
  color: var(--blue-light);
  display: block;
  font-weight: 900;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.build_sequence {
  margin-top: 18px;
  padding: 24px;
}

.build_sequence ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.technical_stack article {
  min-height: 190px;
  padding: 22px;
}

.technical_stack span {
  color: var(--blue-dark);
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 16px;
}

.process_steps span {
  color: var(--blue-dark);
  display: block;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 22px;
}

.process_steps strong,
.benefit_grid strong,
.feature_columns h3,
.technical_stack strong,
.monitor_flow strong {
  color: var(--blue-light);
  display: block;
  font-size: 0.98rem;
  line-height: 1.1;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.process_steps p,
.benefit_grid p,
.feature_columns p,
.technical_stack p,
.monitor_flow p,
.device_mix p,
.position_graphic p {
  color: #5d6b66;
  margin: 0;
}

.device_mix {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device_mix article {
  min-height: 190px;
  padding: 22px;
}

.device_mix strong {
  color: var(--blue-dark);
  display: block;
  font-size: clamp(2.6rem, 4vw, 4.4rem);
  line-height: 1;
  margin-bottom: 10px;
}

.device_mix span {
  color: var(--blue-light);
  display: block;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.network_diagram {
  display: grid;
  gap: 22px;
  margin-top: 18px;
  overflow: hidden;
  padding: clamp(20px, 4vw, 34px);
  position: relative;
}

.network_diagram::before {
  background:
    linear-gradient(90deg, transparent, rgba(47, 148, 244, 0.18), transparent),
    linear-gradient(180deg, transparent, rgba(47, 148, 244, 0.16), transparent);
  content: "";
  inset: 16px;
  pointer-events: none;
  position: absolute;
}

.diagram_top,
.diagram_middle,
.diagram_bottom {
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.diagram_top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagram_middle {
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr) minmax(0, 0.9fr);
}

.diagram_bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diagram_node {
  align-items: center;
  background: #ffffff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  color: #26384b;
  display: grid;
  font-weight: 900;
  justify-items: center;
  min-height: 78px;
  padding: 14px;
  text-align: center;
}

.diagram_node span {
  color: #5d6b66;
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 8px;
}

.diagram_node.proof {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue-mid));
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  min-height: 116px;
}

.diagram_note {
  background: #f4f9ff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  color: #26384b;
  font-weight: 800;
  padding: 16px;
  position: relative;
  z-index: 1;
}

.monitor_flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
}

.monitor_flow div {
  min-height: 150px;
  padding: 20px;
  position: relative;
}

.monitor_flow div::after {
  background: var(--blue-light);
  content: "";
  height: 3px;
  opacity: 0.42;
  position: absolute;
  right: -15px;
  top: 42px;
  width: 16px;
}

.monitor_flow div:last-child::after {
  display: none;
}

.security_boundary {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr) minmax(0, 1fr);
}

.security_column {
  padding: 24px;
}

.security_column h3,
.data_exit_panel h3 {
  color: var(--blue-light);
  font-size: 1.2rem;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.security_column ul {
  color: #5d6b66;
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}

.security_core {
  align-items: center;
  background: linear-gradient(160deg, rgba(7, 27, 60, 0.98), rgba(11, 62, 115, 0.96));
  color: #ffffff;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.security_core span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  color: #dceeff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 10px 12px;
  text-transform: uppercase;
  width: 100%;
}

.security_core strong {
  color: #ffffff;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  line-height: 1;
}

.data_exit_panel {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  margin-top: 18px;
  padding: 24px;
}

.data_exit_panel p {
  color: #5d6b66;
  margin: 0;
}

.exit_rules {
  display: grid;
  gap: 10px;
}

.exit_rules span {
  background: #f4f9ff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  color: #26384b;
  display: block;
  font-weight: 800;
  padding: 12px;
}

.position_graphic {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 247, 255, 0.82));
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--panel-glow);
  display: grid;
  gap: 22px;
  padding: clamp(20px, 4vw, 32px);
}

.tool_row,
.outcome_row {
  display: grid;
  gap: 10px;
}

.tool_row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.outcome_row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool_row span,
.outcome_row span {
  align-items: center;
  background: #ffffff;
  border: 1px solid #b7d7f5;
  border-radius: 8px;
  color: #23384c;
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  justify-content: center;
  min-height: 58px;
  padding: 10px;
  text-align: center;
}

.flow_lines {
  height: 38px;
  position: relative;
}

.flow_lines::before,
.flow_lines::after {
  background: var(--blue-light);
  content: "";
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.flow_lines::before {
  height: 38px;
  opacity: 0.42;
  top: 0;
  width: 3px;
}

.flow_lines::after {
  border-radius: 50%;
  bottom: 0;
  height: 12px;
  width: 12px;
}

.proof_layer {
  margin: 0 auto;
  max-width: 680px;
  padding: 26px;
  text-align: center;
}

.proof_layer small {
  color: #60746b;
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.proof_layer strong {
  color: var(--blue-dark);
  display: block;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  margin-bottom: 12px;
}

.benefit_grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.benefit_grid article,
.feature_columns div {
  min-height: 160px;
  padding: 22px;
}

.feature_columns {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.loop_grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.loop_grid article {
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 250px;
  padding: 28px;
}

.loop_number {
  color: var(--blue-dark);
  display: block;
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 0.88;
  text-shadow: 0 0 18px rgba(7, 27, 60, 0.14);
}

.loop_copy {
  align-self: start;
  display: contents;
  min-width: 0;
}

.loop_grid strong {
  align-self: start;
  color: var(--blue-light);
  display: block;
  font-size: clamp(1.12rem, 1.55vw, 1.4rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.loop_grid p,
.split_band p,
.response_panel p {
  color: #5d6b66;
}

.loop_grid article p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 26px;
}

.finding_list {
  display: grid;
  gap: 12px;
}

.finding {
  display: grid;
  gap: 16px;
  grid-template-columns: 140px minmax(0, 1fr) minmax(180px, 0.45fr);
  padding: 18px;
}

.finding strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.finding p,
.finding small {
  color: #5d6b66;
  display: block;
  margin: 0;
}

.badge {
  align-self: start;
  border-radius: 8px;
  border: 1px solid currentColor;
  color: #b63827;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 7px 9px;
  text-align: center;
  text-transform: uppercase;
}

.action {
  color: #263631;
  font-weight: 700;
}

.split_band {
  align-items: center;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
}

.backup_checks {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.backup_checks div {
  align-items: center;
  display: flex;
  font-weight: 800;
  gap: 10px;
}

.dot {
  border-radius: 50%;
  display: inline-block;
  height: 12px;
  width: 12px;
}

.dot.fail {
  background: #c9422c;
}

.dot.warn {
  background: #c9952c;
}

.response_panel {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: clamp(22px, 4vw, 34px);
}

.response_panel div,
.contact_band > div:first-child {
  max-width: 760px;
}

.response_panel button {
  background: var(--blue);
  box-shadow: 0 0 22px rgba(31, 126, 216, 0.28);
  min-width: 120px;
}

.contact_band {
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.9));
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--panel-glow);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  padding: clamp(24px, 4vw, 38px);
}

.contact_band p {
  color: #5d6b66;
  margin: 0;
}

.contact_actions {
  display: grid;
  gap: 10px;
}

.contact_actions a {
  background: var(--blue-light);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(47, 148, 244, 0.22);
  color: #ffffff;
  font-weight: 900;
  padding: 13px 14px;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact_actions a:nth-child(2) {
  background: var(--blue-dark);
}

.contact_actions a:hover {
  background: #58aaf7;
}

@media (max-width: 820px) {
  .topbar,
  .site_footer,
  .status_row,
  .response_panel {
    align-items: stretch;
    flex-direction: column;
  }

  .tabs {
    justify-content: flex-start;
    width: 100%;
  }

  .overview,
  .loop_grid,
  .split_band,
  .finding,
  .evidence_grid,
  .story_grid,
  .client_value_grid,
  .start_steps,
  .process_steps,
  .benefit_grid,
  .feature_columns,
  .technical_stack,
  .monitor_flow,
  .security_boundary,
  .data_exit_panel,
  .device_mix,
  .build_intro,
  .build_flow,
  .implementation_grid,
  .login_blueprint,
  .api_shape,
  .contact_band,
  .diagram_top,
  .diagram_middle,
  .diagram_bottom,
  .tool_row,
  .outcome_row,
  .site_footer {
    grid-template-columns: 1fr;
  }

  .metric_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score {
    text-align: left;
  }

  .process_steps article,
  .evidence_grid article,
  .story_grid article,
  .client_value_grid article,
  .start_steps article,
  .benefit_grid article,
  .feature_columns div,
  .technical_stack article,
  .monitor_flow div,
  .device_mix article {
    min-height: 0;
  }

  .monitor_flow div::after {
    display: none;
  }

  .build_node::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
    width: 100vw;
    max-width: 100vw;
  }

  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
  }

  .home_hero {
    min-height: 480px;
    width: 100vw;
    max-width: 100vw;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero_copy {
    width: 100%;
    max-width: 100%;
  }

  .hero_copy h1 {
    font-size: 2.35rem;
  }

  .hero_copy p {
    font-size: 0.98rem;
    max-width: 100%;
  }

  .hero_actions a {
    width: 100%;
  }

  .metric_grid {
    grid-template-columns: 1fr;
  }

  .tabs a {
    flex: none;
    font-size: 0.94rem;
    overflow-wrap: anywhere;
    text-align: center;
    width: 100%;
  }

}