/* ============================================================
   Bedrok Labs — Components
   Header, footer, buttons, cards, badges, workflow diagrams,
   Request Packet UI, phone frame, forms, CTA band, accordion.
   ============================================================ */

/* ============ Logo ============
   Official Bedrok Labs logo (PNG assets in assets/logos/).
   bedrok-labs-logo.png = dark-on-transparent for light surfaces;
   bedrok-labs-logo-teal.png = teal-accent white-wordmark variant for
   dark surfaces (header, footer, dark theme sections). */
.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  display: block;
  height: 40px;
  width: auto;
}

.theme-dark .logo img,
.theme-night .logo img,
.site-header .logo img,
.site-footer .logo img {
  content: url("../assets/logos/bedrok-labs-logo-teal.png");
}

/* ============ Header / navigation ============
   Dark navy header with the white logo, matching the app. Scoping the
   dark palette here means the nav links, action buttons, and the mobile
   drawer all adapt automatically (they reference semantic tokens). */
.site-header {
  --color-canvas: #0a151e;
  --color-text-primary: var(--raw-fog-100);
  --color-text-secondary: rgb(255 255 255 / 0.72);
  --color-surface: rgb(255 255 255 / 0.1);
  --color-surface-elevated: #102433;
  --color-primary: var(--raw-teal-300);
  --color-primary-strong: #2cc4a4;
  --color-primary-soft: rgb(53 212 178 / 0.16);
  --color-on-primary: #0a151e;
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.32);

  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 68px;
}

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  gap: var(--space-2);
}

.site-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.site-nav a:hover {
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.site-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.header-actions {
  display: none;
  gap: var(--space-3);
}

/* Mobile nav */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.nav-toggle .icon {
  width: 24px;
  height: 24px;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (min-width: 1024px) {
  .site-nav,
  .header-actions {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-canvas);
  padding: var(--space-4) var(--inset) var(--space-8);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav ul a {
  display: block;
  padding: var(--space-4) var(--space-2);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav ul a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.mobile-nav .mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  background: var(--color-primary-strong);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-text-primary);
  background: var(--color-surface);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
}

.btn-ghost:hover {
  background: var(--color-primary-soft);
}

.btn-sm {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
}

/* ============ Badges & chips ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-meta);
  font-weight: 600;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-primary {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  border-color: transparent;
}

.badge-success {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
  border-color: transparent;
}

.badge-urgent {
  background: color-mix(in srgb, var(--color-urgent) 12%, transparent);
  color: var(--color-urgent);
  border-color: transparent;
}

.badge-warn {
  background: color-mix(in srgb, var(--color-warn) 14%, transparent);
  color: var(--color-warn);
  border-color: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-meta);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* ============ Cards ============ */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

@media (min-width: 1024px) {
  .card {
    padding: var(--space-8);
  }
}

.card.is-interactive {
  transition: box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.card.is-interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Icon tile used at the top of product/audience cards */
.icon-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  margin-bottom: var(--space-5);
}

.icon-tile .icon {
  width: 26px;
  height: 26px;
}

.icon-tile.is-urgent {
  background: color-mix(in srgb, var(--color-urgent) 10%, transparent);
  color: var(--color-urgent);
}

.icon-tile.is-warn {
  background: color-mix(in srgb, var(--color-warn) 12%, transparent);
  color: var(--color-warn);
}

.icon-tile.is-info {
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-info);
}

/* Compact icon-tile sizes for inline UI rows / notification cards */
.icon-tile.is-sm {
  margin: 0;
  width: 38px;
  height: 38px;
}

.icon-tile.is-xs {
  margin: 0;
  width: 34px;
  height: 34px;
}

.icon-tile.is-xs .icon {
  width: 16px;
  height: 16px;
}

/* Product / audience / resource card internals */
.card > h3 {
  margin-bottom: var(--space-3);
}

.card > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.card > .link-arrow {
  margin-top: auto;
}

.card.is-flow {
  display: flex;
  flex-direction: column;
}

/* Feature checklist inside cards/sections */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.checklist .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-primary);
}

.checklist .icon-muted {
  color: var(--color-text-meta);
}

/* ============ Workflow diagram ============
   Horizontal steps on desktop, vertical on mobile. */
.workflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: step;
}

.workflow-step {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.workflow-step .icon-tile {
  margin-bottom: 0;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.workflow-step h4 {
  margin-bottom: 2px;
}

.workflow-step p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* Vertical connector (mobile) */
.workflow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--space-4) + 22px);
  top: calc(var(--space-4) + 48px);
  bottom: calc(-1 * var(--space-2) - 2px);
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-border) 0,
    var(--color-border) 4px,
    transparent 4px,
    transparent 9px
  );
}

@media (min-width: 900px) {
  .workflow {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-4);
  }

  .workflow-step {
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
  }

  /* Horizontal connector */
  .workflow-step:not(:last-child)::after {
    left: auto;
    right: calc(-1 * var(--space-4) + 2px);
    top: calc(var(--space-4) + 22px);
    bottom: auto;
    width: calc(var(--space-4) * 2 - 8px);
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--color-border) 0,
      var(--color-border) 4px,
      transparent 4px,
      transparent 9px
    );
  }
}

/* Compact inline flow: A → B → C in a pill row */
.flow-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
}

.flow-inline .flow-node {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.flow-inline .flow-arrow {
  color: var(--color-text-meta);
  flex-shrink: 0;
}

/* ============ Request Packet UI ============ */
.packet {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: var(--text-small);
}

.packet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.packet-header strong {
  font-size: var(--text-body);
}

.packet-body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
}

.packet-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
}

.packet-field dt {
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-meta);
  margin-bottom: 2px;
}

.packet-field dd {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-primary);
}

.packet-section-label {
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-meta);
  margin-bottom: var(--space-2);
}

.packet-summary {
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.packet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ============ Phone frame (product UI mockup) ============ */
.phone {
  width: min(320px, 100%);
  margin-inline: auto;
  border-radius: 42px;
  border: 10px solid var(--raw-ink-900, #1f2937);
  background: var(--raw-ink-900, #1f2937);
  box-shadow: 0 24px 60px rgb(15 27 24 / 0.35);
  overflow: hidden;
}

.phone-screen {
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-canvas);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  font-size: var(--text-meta);
}

.phone-statusbar {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5) var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.phone-content {
  flex: 1;
  padding: var(--space-2) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.phone-tabbar {
  display: flex;
  justify-content: space-around;
  padding: var(--space-3) var(--space-2);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.phone-tabbar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-meta);
}

.phone-tabbar span.is-active {
  color: var(--color-primary);
}

.phone-tabbar .icon {
  width: 18px;
  height: 18px;
}

/* Small in-phone UI rows */
.ui-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ui-row .avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.ui-row .ui-row-main {
  flex: 1;
  min-width: 0;
}

.ui-row .ui-row-main strong {
  display: block;
  font-size: 12px;
  color: var(--color-text-primary);
}

.ui-row .ui-row-main small {
  display: block;
  font-size: 11px;
  color: var(--color-text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Floating notification cards beside hero phone */
.notif-card {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-meta);
}

.notif-card strong {
  display: block;
  font-size: var(--text-small);
  color: var(--color-text-primary);
}

.notif-card small {
  color: var(--color-text-meta);
}

/* ============ Browser/dashboard frame ============ */
.browser {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
  font-size: var(--text-meta);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.browser-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border-strong);
  opacity: 0.5;
}

.browser-bar .browser-title {
  margin-left: var(--space-2);
}

.browser-body {
  padding: var(--space-5);
}

/* Stat tile inside dashboards */
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
}

.stat .stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-meta);
}

.stat .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.stat .stat-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-success);
}

.stat .stat-delta.is-down {
  color: var(--color-urgent);
}

/* ============ Image placeholder ============
   Clearly labeled stand-in until production photography exists. */
.img-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background:
    linear-gradient(135deg,
      var(--color-surface) 0%,
      var(--color-primary-soft) 100%);
  color: var(--color-text-meta);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-6);
}

/* ============ CTA band ============ */
.cta-band {
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.cta-band h2 {
  max-width: 640px;
  margin-inline: auto;
}

.cta-band .lead {
  max-width: 560px;
  margin: var(--space-5) auto 0;
}

.cta-band .cluster {
  justify-content: center;
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .cta-band {
    padding: var(--space-20) var(--space-12);
  }
}

/* ============ Forms ============ */
.form-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .form-grid.is-two-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid .form-field.is-full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-field .field-hint {
  font-size: var(--text-meta);
  color: var(--color-text-meta);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-text-secondary);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-urgent);
}

.field-error {
  display: none;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--color-urgent);
}

.form-field.has-error .field-error {
  display: block;
}

/* ============ FAQ accordion ============ */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  overflow: hidden;
}

.accordion-item + .accordion-item {
  border-top: 1px solid var(--color-border);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-weight: 600;
  color: var(--color-text-primary);
}

.accordion-trigger:hover {
  background: var(--color-surface);
}

.accordion-trigger .icon {
  transition: transform var(--dur-med) var(--ease-out);
  color: var(--color-text-meta);
}

.accordion-trigger[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}

.accordion-panel {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.6;
}

.accordion-panel[hidden] {
  display: none;
}

/* ============ Footer ============
   Dark navy footer with the white logo, matching the header. */
.site-footer {
  --color-canvas: #0a151e;
  --color-text-primary: var(--raw-fog-100);
  --color-text-secondary: rgb(255 255 255 / 0.72);
  --color-text-meta: rgb(255 255 255 / 0.5);
  --color-surface: rgb(255 255 255 / 0.1);
  --color-surface-elevated: #102433;
  --color-primary: var(--raw-teal-300);
  --color-primary-strong: #2cc4a4;
  --color-primary-soft: rgb(53 212 178 / 0.16);
  --color-on-primary: #0a151e;
  --color-border: rgb(255 255 255 / 0.12);
  --color-border-strong: rgb(255 255 255 / 0.32);

  background: var(--color-canvas);
  color: var(--color-text-primary);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-12);
  }
}

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 260px;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.footer-col h4 {
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-meta);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-text-primary);
}

.footer-newsletter {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.footer-newsletter .form-field {
  flex: 1;
}

.footer-newsletter .input {
  min-height: 44px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-meta);
  color: var(--color-text-meta);
}

.footer-bottom nav {
  display: flex;
  gap: var(--space-5);
}

.footer-bottom a:hover {
  color: var(--color-text-primary);
}

/* ============ Trust strip ============
   Logos centered in one row; label centered on its own line below. */
.trust-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
}

.trust-strip .trust-label {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.trust-strip .trust-name {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-meta);
}

.trust-logo img {
  display: block;
}

/* Logos designed with white/light art on a dark badge (e.g. a mark
   meant to sit on a dark background) get a small dark tile so their
   light-colored elements stay legible on this light section. */
.trust-logo.is-dark-tile {
  background: var(--raw-night-000, #141414);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  display: inline-flex;
  align-items: center;
}

/* ============ Before / after ============ */
.before-after {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .before-after {
    grid-template-columns: 1fr 1fr;
  }
}

.before-after .panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.before-after .panel.is-before {
  background: var(--color-surface);
}

.before-after .panel.is-after {
  background: var(--color-primary-soft);
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.before-after .panel-label {
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--color-text-meta);
}

.before-after .panel.is-after .panel-label {
  color: var(--color-primary-strong);
}

/* ============ Photography & layered media ============ */

/* Section with a full-bleed background photo + tinted overlay */
.photo-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.photo-section > .photo-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Warm wash for light sections — keeps ink text readable, lets the
   photo breathe on the right */
.photo-bg.is-warm::after {
  background: linear-gradient(
    100deg,
    rgb(250 249 246 / 0.97) 0%,
    rgb(250 249 246 / 0.92) 42%,
    rgb(250 249 246 / 0.55) 68%,
    rgb(250 249 246 / 0.18) 100%
  );
}

/* Deep-pine wash for dark bands */
.photo-bg.is-dark::after {
  background: linear-gradient(
    rgb(14 27 24 / 0.72),
    rgb(14 27 24 / 0.85)
  );
}

/* Left-weighted navy scrim for the dusk hero — keeps white copy
   legible on the left while the lit house stays rich on the right.
   Tuned to the header navy so the header flows into the hero. */
.photo-bg.is-dusk::after {
  mix-blend-mode: multiply;
  background:
    linear-gradient(
      100deg,
      rgb(14 27 24 / 0.95) 0%,
      rgb(14 27 24 / 0.86) 34%,
      rgb(14 27 24 / 0.56) 62%,
      rgb(14 27 24 / 0.34) 100%
    ),
    linear-gradient(
      rgb(14 27 24 / 0.55),
      rgb(14 27 24 / 0) 45%
    );
}

/* Header-navy scrim — matches the site header (#050f24 / #0e2143) so a
   full-bleed hero reads deep blue, not pine green. Richer than .is-dark
   so the photo doesn't wash out, with a soft center vignette that keeps
   centered white copy legible. */
.photo-bg.is-navy::after {
  /* Multiply so the photo texture reads through instead of a flat wash.
     Tone is a deep teal-navy (a touch of green in the blue) to sit on
     brand between the header navy and the teal accent. */
  mix-blend-mode: multiply;
  background:
    linear-gradient(
      180deg,
      rgb(18 46 52 / 0.74) 0%,
      rgb(11 32 41 / 0.90) 100%
    ),
    radial-gradient(
      135% 120% at 50% 40%,
      rgb(24 56 60 / 0) 34%,
      rgb(9 26 34 / 0.48) 100%
    );
}

/* Stronger bottom-weighted wash for CTA bands */
.photo-bg.is-dark-heavy::after {
  background: linear-gradient(
    rgb(14 27 24 / 0.72),
    rgb(14 27 24 / 0.94) 75%
  );
}

/* Rounded standalone photo figure */
.figure-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}

.figure-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.figure-photo.is-portrait img,
.figure-photo.is-fill img {
  height: 100%;
  object-fit: cover;
}

.figure-photo figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-meta);
  color: var(--color-text-meta);
  background: var(--color-surface-elevated);
}

/* Card with a photo half (audience cards, mockup style) */
.card.has-photo {
  padding: 0;
  overflow: hidden;
  display: grid;
}

.card.has-photo .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}

.card.has-photo .card-photo {
  position: relative;
  min-height: 200px;
}

.card.has-photo .card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .card.has-photo {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .card.has-photo .card-body {
    padding: var(--space-8);
  }

  .card.has-photo .card-photo {
    min-height: 260px;
  }
}

/* Layered media: photo base + UI mockup overlapping it */
.layered-media {
  position: relative;
}

.layered-media > .figure-photo {
  aspect-ratio: 16 / 10;
}

/* UI card floats centered on top of the photo */
.layered-media > .layer-ui {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 520px);
}

/* Stack instead of overlap on small screens — absolutely positioned
   tall UI cards would collide with surrounding content */
@media (max-width: 767.98px) {
  .layered-media > .layer-ui {
    position: static;
    transform: none;
    width: calc(100% - var(--space-4));
    margin-left: var(--space-4);
    margin-top: calc(-1 * var(--space-8));
  }
}

/* Image-based topographic washes (generated patterns).
   Layered under content; keep opacity low so copy stays crisp. */
.bg-topo-light::before,
.bg-topo-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 1200px auto;
  pointer-events: none;
}

.bg-topo-light,
.bg-topo-dark {
  position: relative;
}

.bg-topo-light::before {
  background-image: url("../assets/images/patterns/topo-light.jpg");
  opacity: 0.16;
  mix-blend-mode: multiply;
}

.bg-topo-dark::before {
  background-image: url("../assets/images/patterns/topo-dark.jpg");
  opacity: 0.5;
  mix-blend-mode: screen;
}

.bg-topo-light > *,
.bg-topo-dark > * {
  position: relative;
}

/* ============ Real product UI shots ============ */

/* Framed web-app screenshot */
.ui-shot {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card-hover);
  background: var(--color-surface-elevated);
}

.ui-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.ui-shot figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-meta);
  color: var(--color-text-meta);
  border-top: 1px solid var(--color-border);
}

/* Real device-framed phone screenshot (transparent corners) */
.phone-shot {
  margin: 0;
  width: min(360px, 92%);
  margin-inline: auto;
}

.phone-shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgb(15 27 24 / 0.35));
}

/* Two phones side by side, offset for depth */
.phone-duo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
}

.phone-duo .phone-shot {
  width: min(300px, 47%);
  margin-inline: 0;
}

.phone-duo .phone-shot:last-child {
  margin-top: var(--space-12);
}

/* ============ Carded workflow steps ============
   For steps sitting on dark/textured bands — each step gets a card
   so text never floats directly on the background. */
.workflow.is-cards .workflow-step {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.workflow.is-cards .workflow-step:not(:last-child)::after {
  display: none;
}

@media (min-width: 900px) {
  .workflow.is-cards {
    gap: var(--space-5);
  }
}

/* ============ Opportunity diagrams ============
   Reference-quality flow diagrams built from HTML + inline SVG (crisp
   vectors, fully responsive — columns stack on mobile). Styled light;
   drop inside a .diagram-panel to float on a dark section. */
.diagram-panel {
  /* Reset to the light palette so the diagram renders light even when
     the panel sits inside a .theme-dark section (e.g. a dark hero). */
  --color-primary: var(--raw-teal-600);
  --color-primary-strong: var(--raw-teal-700);
  --color-primary-soft: var(--raw-teal-050);
  --color-on-primary: var(--raw-white);
  --color-text-primary: var(--raw-ink-900);
  --color-text-secondary: var(--raw-ink-500);
  --color-text-meta: var(--raw-ink-400);
  --color-surface: var(--raw-gray-100);
  --color-surface-elevated: var(--raw-white);
  --color-border: var(--raw-gray-200);
  --color-border-strong: var(--raw-ink-400);

  background: var(--raw-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 70px rgb(4 12 30 / 0.28);
  padding: clamp(var(--space-6), 4vw, var(--space-16));
}

/* Rendered diagram image (replaces the coded .opp-flow on some pages) */
.opp-diagram {
  margin: 0;
}

.opp-diagram img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Image diagrams fill their panel: tighter frame + no width cap so the
   graphic reads large edge-to-edge instead of floating in white space. */
.diagram-panel:has(.opp-diagram) {
  padding: clamp(var(--space-4), 2.5vw, var(--space-8));
}

.opp-flow {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .opp-flow.is-3col {
    grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.3fr) auto minmax(0, 0.9fr);
    gap: var(--space-4);
  }
}

/* Column of source/output nodes */
.opp-col-title {
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--raw-ink-900);
  margin-bottom: var(--space-5);
}

.opp-nodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.opp-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.opp-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.opp-ic svg {
  width: 22px;
  height: 22px;
}

.opp-node-label {
  min-width: 0;
}

.opp-node-label strong {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--raw-ink-900);
  line-height: 1.25;
}

.opp-node-label small {
  display: block;
  font-size: var(--text-meta);
  color: var(--color-text-meta);
}

/* Output nodes get a card feel */
.opp-col.is-outputs .opp-node {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-card);
}

/* Connector between columns */
.opp-connect {
  display: grid;
  place-items: center;
  color: var(--color-border-strong);
}

.opp-connect svg {
  width: 34px;
  height: 34px;
}

@media (max-width: 899.98px) {
  .opp-connect svg {
    transform: rotate(90deg);
    width: 26px;
    height: 26px;
  }
}

/* Center system card with numbered pipeline */
.opp-core {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-card);
}

.opp-core-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.opp-core-head img {
  height: 26px;
  width: auto;
}

.opp-core-head strong {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--raw-ink-900);
  letter-spacing: -0.01em;
}

.opp-pipe {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), 1fr);
  gap: var(--space-2);
  position: relative;
}

/* connecting line behind the numbered circles */
.opp-pipe::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.45;
}

.opp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.opp-step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: var(--raw-white);
  color: var(--color-primary-strong);
  font-weight: 700;
  font-size: 1.05rem;
}

.opp-step svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary-strong);
}

.opp-step span {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--raw-ink-900);
}


/* ============================================================
   Packet diagram — Opportunity sources → structured Request Packet
   Used on the Solutions "The Output" section. Light on any surface.
   ============================================================ */
.packet-diagram {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .packet-diagram {
    grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.4fr);
    gap: var(--space-5);
  }
}

.packet-src-label,
.packet-badge {
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}
.packet-src-label {
  display: block;
  margin-bottom: var(--space-4);
}
.packet-src-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.packet-src-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-card);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--raw-ink-900);
}
.packet-src-list .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.packet-arrow {
  display: grid;
  place-items: center;
  color: var(--color-border-strong);
}
.packet-arrow .icon { width: 32px; height: 32px; }
@media (max-width: 899.98px) {
  .packet-arrow .icon { transform: rotate(90deg); width: 26px; height: 26px; }
}

/* ---- The packet document card ---- */
.packet-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-elevated);
  box-shadow: 0 30px 70px rgb(4 12 30 / 0.18);
  overflow: hidden;
}
.packet-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--raw-teal-050);
}
.packet-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--raw-teal-700);
}
.packet-status .icon { width: 16px; height: 16px; }

.packet-fields {
  display: grid;
  gap: 0;
  padding: var(--space-2) var(--space-5);
}
@media (min-width: 560px) {
  .packet-fields { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
.packet-fields > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
/* Drop the last row's rule on each column so the grid bottom is clean */
@media (min-width: 560px) {
  .packet-fields > div:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 559.98px) {
  .packet-fields > div:last-child { border-bottom: none; }
}
.packet-fields dt {
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}
.packet-fields dd {
  font-size: var(--text-small);
  color: var(--raw-ink-900);
}

.packet-assure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.packet-assure span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.packet-assure .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* ============================================================
   Disconnected → Structured diagram (home "What changes" section)
   Rendered as a flat image inside the .diagram-panel frame.
   ============================================================ */
.ds-diagram-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Legacy inline-SVG version (kept for reference; no longer in markup) */
.ds-diagram {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 980px) {
  .ds-diagram {
    grid-template-columns: minmax(0, 0.92fr) auto minmax(0, 1.22fr);
    gap: var(--space-4);
  }
}

.ds-side { display: flex; flex-direction: column; }

.ds-title {
  text-align: center;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #17324d;
  margin-bottom: var(--space-6);
}

/* ---- Disconnected SVG ---- */
.ds-disc-svg { width: 100%; height: auto; font-family: inherit; }
.ds-grid-label text {
  text-anchor: middle;
  font-size: 19px;
  font-weight: 600;
  fill: #1f2937;
}
.ds-outcomes text {
  text-anchor: start;
  font-size: 18px;
  font-weight: 600;
  fill: #5b6472;
}

/* ---- Processing node ---- */
.ds-node { display: flex; justify-content: center; }
.ds-node-svg { width: 118px; height: auto; }
@media (max-width: 979.98px) {
  .ds-node-svg { width: 82px; transform: rotate(90deg); }
}

/* ---- Structured pipeline ---- */
.ds-pipe {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
}
.ds-pipe::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 11%;
  right: 11%;
  border-top: 2px dotted #c3cad1;
  z-index: 0;
}
.ds-pipe-step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.ds-pipe-ring {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #1a7f71;
  background: #eef7f4;
  color: #14655a;
}
.ds-pipe-ring svg { width: 26px; height: 26px; }
.ds-pipe-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}

.ds-pipe-drop {
  width: 0;
  height: var(--space-8);
  margin: var(--space-3) auto 0;
  border-left: 2px dotted #c3cad1;
}

/* ---- Structured packet card ---- */
.ds-packet {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: 0 24px 55px rgb(4 12 30 / 0.14);
  padding: var(--space-1) var(--space-6);
}
.ds-packet-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid #eef0f2;
}
.ds-packet-row:last-child { border-bottom: none; }
.ds-packet-ic {
  display: grid;
  place-items: center;
  width: 22px;
  flex-shrink: 0;
  color: #1a7f71;
}
.ds-packet-ic svg { width: 20px; height: 20px; }
.ds-packet-key {
  width: 84px;
  flex-shrink: 0;
  font-size: var(--text-small);
  font-weight: 700;
  color: #1f2937;
}
.ds-packet-fill { flex: 1; min-width: 0; }
.ds-packet-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e6e8eb;
}
.ds-packet-row:nth-child(1) .ds-packet-bar { width: 72%; }
.ds-packet-row:nth-child(2) .ds-packet-bar { width: 88%; }
.ds-packet-row:nth-child(3) .ds-packet-bar { width: 56%; }
.ds-packet-row:nth-child(4) .ds-packet-bar { width: 78%; }
.ds-packet-row:nth-child(5) .ds-packet-bar { width: 46%; }