/* Company-v3 route additions. Original Qonduit globals remain in qonduit.css. */
.capability-addition { margin-top: clamp(38px, 6vw, 64px); padding-top: clamp(34px, 5vw, 54px); border-top: 1px solid var(--line); }
.capability-addition .grid { margin-top: 26px; }
.capability-boundary { max-width: 76ch; margin-top: 22px; color: var(--text-3); }
.route-hero { padding-block: clamp(62px, 9vw, 112px) clamp(50px, 7vw, 82px); }
.route-hero .display { max-width: 16ch; }
.route-hero .lede { margin-top: 24px; }
.status-line, .boundary-note { margin-top: 24px; max-width: 76ch; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 2px solid var(--cyan); border-radius: var(--radius); background: var(--panel); color: var(--text-2); }
.product-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; counter-reset: product-step; }
.product-flow > li { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--ink-2)); counter-increment: product-step; }
.product-flow > li::before { content: "0" counter(product-step); display: block; margin-bottom: 18px; font: 700 10px/1 var(--mono); letter-spacing: .16em; color: var(--cyan-hi); }
.product-flow h3 { font-size: 19px; font-weight: 700; }
.product-flow p { margin-top: 9px; color: var(--text-3); font-size: 14.5px; line-height: 1.55; }
.scope-grid, .deployment-grid, .evidence-grid, .consultation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.deployment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scope-card h3, .deployment-card h3, .evidence-card h3, .consultation-panel h2 { font-size: clamp(20px, 2vw, 25px); font-weight: 600; }
.scope-card p, .deployment-card p, .evidence-card p, .consultation-panel p { margin-top: 10px; color: var(--text-3); }
.definition-list { display: grid; gap: 1px; margin-top: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
.definition-list > div { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr); gap: 22px; padding: 18px 22px; background: var(--ink-2); }
.definition-list dt { font: 700 10px/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-hi); }
.definition-list dd { margin: 0; color: var(--text-2); }
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; align-items: stretch; }
.tier { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--ink-2)); }
.tier-featured { border-color: var(--violet); box-shadow: 0 0 34px rgba(167, 139, 250, .12); }
.tier-badge, .tier-chip { align-self: flex-start; font: 700 9.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; border-radius: 999px; }
.tier-badge { margin-bottom: 13px; padding: 8px 10px; color: var(--ink); background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.tier-featured .tier-badge { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.tier-chip { margin-bottom: 18px; padding: 7px 9px; color: var(--cyan-hi); border: 1px solid var(--line-3); }
.tier-name { font: 400 clamp(30px, 3vw, 42px)/1.05 var(--display); }
.tier-summary { min-height: 6.5em; margin-top: 14px; color: var(--text-3); font-size: 14.5px; }
.tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin-top: 22px; }
.tier-price strong { font: 700 clamp(28px, 3.2vw, 42px)/1 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.tier-price span, .tier-alt { color: var(--text-3); font-size: 13px; }
.tier-alt { margin-top: 8px; font-family: var(--mono); }
.feature-list, .detail-list { display: grid; gap: 9px; margin-top: 24px; }
.feature-list li, .detail-list li { position: relative; padding-left: 18px; overflow-wrap: anywhere; }
.feature-list li { color: var(--text-2); font-size: 14.5px; }
.detail-list { padding-top: 20px; border-top: 1px solid var(--line); }
.detail-list li { color: var(--text-4); font-size: 13px; }
.feature-list li::before, .detail-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.detail-list li::before { width: 4px; height: 4px; background: var(--violet); }
.tier-cta { margin-top: auto; padding-top: 28px; }
.btn-block { width: 100%; white-space: normal; text-align: center; }
.consultation-panel { min-width: 0; }
.consultation-panel .btn { margin-top: 24px; white-space: normal; text-align: center; }
.return-link { display: inline-flex; margin-top: 24px; color: var(--cyan-hi); text-decoration: underline; text-underline-offset: 4px; }
.route-page main { min-width: 0; }
@media (max-width: 900px) {
  .product-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deployment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-summary { min-height: 0; }
}
@media (max-width: 680px) {
  .product-flow, .scope-grid, .deployment-grid, .evidence-grid, .consultation-grid { grid-template-columns: 1fr; }
  .definition-list > div { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 430px) {
  .tier, .product-flow > li { padding: 22px; }
  .tier-price strong { font-size: clamp(24px, 9vw, 34px); }
}

/* company-v4: reflow containment for homepage company facts */
#company .grid.grid-2,
#company .grid.grid-2 > *,
#company .facts,
#company .fact,
#company .fact dd {
  min-width: 0;
  max-width: 100%;
}

#company .fact dd a {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 820px) {
  #company .grid.grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  #company .fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

/* company-v4: usable primary navigation when JavaScript is unavailable */
html.no-js .nav-toggle {
  display: none;
}

@media (max-width: 860px) {
  html.no-js .hdr {
    position: relative;
  }

  html.no-js .hdr-in {
    flex-wrap: wrap;
    padding-block: 12px;
  }

  html.no-js .nav {
    position: static;
    inset: auto;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
    padding: 8px 0 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    transition: none;
  }
}