:root {
  --tbc-ink: #102f42;
  --tbc-blue: #163f58;
  --tbc-copper: #a75f34;
  --tbc-paper: #f7f4ed;
  --tbc-line: #ccd8dc;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(16, 47, 66, .12);
}

.nav-links a[href="#apps"] {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .55rem .9rem;
}

.tbc-primary {
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

.tbc-primary > h2 {
  color: var(--tbc-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.025em;
}

.apps-panel {
  margin: clamp(2rem, 5vw, 4.5rem) auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
  background: var(--tbc-ink);
  border-radius: 20px;
}

.apps-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .65fr);
  gap: 2rem;
  align-items: end;
}

.apps-panel .eyebrow,
.apps-panel h2,
.apps-panel p { color: inherit; }
.apps-panel h2 { margin: .3rem 0 .7rem; font-size: clamp(2rem, 4vw, 3.3rem); }
.apps-panel__intro { color: #dbe8ed !important; max-width: 58ch; }

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.app-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  color: var(--tbc-ink);
  background: var(--tbc-paper);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
}

.app-card__meta { color: #5a6d76; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.app-card h3 { margin: .55rem 0 .4rem; font-size: 1.3rem; }
.app-card p { color: #36505f; }
.app-card__action {
  align-self: flex-start;
  margin-top: auto;
  padding: .75rem 1rem;
  color: #fff;
  background: var(--tbc-blue);
  border-radius: 8px;
  font-weight: 750;
  text-decoration: none;
}
.app-card__action:hover { background: #0d2b3e; }
.app-card__action:focus-visible { outline: 3px solid #f2b88f; outline-offset: 3px; }

.apps-panel__note { margin: 1rem 0 0; color: #c9d9df !important; font-size: .9rem; }

#tbc-lowes-storefront.supplier-strip {
  max-width: 1120px;
  margin: 2rem auto;
  padding: 1.25rem !important;
  text-align: left !important;
  background: #eef3f3 !important;
  border-left: 4px solid var(--tbc-copper);
  border-radius: 0 12px 12px 0;
}

@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .masthead .nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; padding-block: .75rem; }
  .masthead .brand { justify-self: start; }
  .nav-links { display: flex !important; flex-wrap: wrap; width: 100%; min-width: 0; max-width: 100%; gap: .35rem; overflow: visible; }
  .nav-links a { flex: 1 1 calc(50% - .35rem); width: auto; min-width: 0; max-width: 100%; min-height: 44px; padding-inline: .25rem !important; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: .78rem; line-height: 1.2; }
  .nav-links a[href="#apps"] { flex-basis: 100%; }
  .hero-copy h1 { max-width: 100%; font-size: 2.2rem; letter-spacing: -1px; overflow-wrap: normal; word-break: normal; }
  .catalog-hero, .hero-master, .hero-copy, .board { min-width: 0; max-width: 100%; }
  .tbc-primary-grid,
  .app-grid,
  .apps-panel__head { grid-template-columns: minmax(0, 1fr) !important; }
  .tbc-primary-card { width: 100%; min-width: 0; }
  .tbc-primary-card img { width: 100%; height: auto; }
  .apps-panel { margin-inline: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}