:root {
  --pad: 20px;
  --radius: 14px;
  --font-sans: "Whitney-Book", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight-book: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --border: #d7e0e7;
  --border-strong: #c3d0db;
  --muted: #555;
  --text: #222;
  --brand-navy: #002145;
  --brand-blue: #2f5d7c;
  --brand-link-hover: #005580;
  --brand-red: #ab1f2e;
  --brand-red-soft: #f2dede;
  --panel: #ffffff;
  --panel-soft: #f5f5f5;
  --shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

/* * {
  box-sizing: border-box;
} */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-book);
  line-height: 1.55;
  color: var(--text);
  background: #ccc;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
}

a:hover {
  color: var(--brand-link-hover);
  text-decoration: underline;
}

/* Unit editable CSS */

/** Unit Bar background gradient and box shadow **/
#ubc7-unit {
   background: #2F5D7C;
}

/** Social Icon **/
#ubc7-unit-social-icons i {
    color: #002145;
}

#ubc7-unit-social-icons a:hover i {
    color: #2F5D7C;
}

.footer-newsletter-btn {
  margin-top: 10px;
}

.site-container {
  background: #fff;
}

.content {
  box-sizing: border-box;
  padding-right: var(--pad);
  padding-left: var(--pad);
}

.page-shell {
  padding: 34px 0 10px;
}

.hero-block,
section {
  padding: 22px 0;
}

.hero-card,
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hero-card {
  padding: 28px;
}

.card {
  padding: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.card-shop {
  border-color: #b9ccd6;
  background: #dee8ed;
}

.card.soft {
  background: var(--panel-soft);
}

h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -0.6px;
}

h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.2px;
}

h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
}

.section-heading {
  margin-top: 18px;
}

p {
  margin: 0 0 10px;
  color: var(--text);
}

.lead {
  margin: 0 0 10px;
  max-width: 85ch;
}

.sublead,
.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.btnrow,
.pillrow,
.selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  align-items: center;
}

.btn,
.pill,
.seg {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--brand-navy);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: center;
  white-space: normal;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.btn.primary,
.seg[aria-pressed="true"] {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}

#ubc7-unit .navbar .btn-navbar {
  box-sizing: content-box;
  max-width: none;
}

.btn.utility {
  color: var(--brand-navy);
  background: #fff;
}

.btn:hover,
.pill:hover,
.seg:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  text-decoration: none;
}

.btn.primary:hover,
.seg[aria-pressed="true"]:hover {
  background-color: var(--brand-navy);
  border-color: var(--brand-navy);
}

.pill {
  color: var(--brand-blue);
}

.bullets,
.steps,
.inline-list {
  margin: 10px 0 0 20px;
  padding: 0;
}

.bullets li,
.steps li,
.inline-list li {
  margin: 6px 0;
}

.cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 12px;
}

.mini {
  grid-column: span 6;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.mini p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.offer-label {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-red);
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer-matrix {
  display: grid;
  grid-template-columns: 1.15fr repeat(4, 1fr);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}

.offer-matrix > div {
  min-height: 58px;
  padding: 12px;
  background: #fff;
}

.offer-matrix .head {
  color: var(--brand-navy);
  font-weight: var(--weight-bold);
  background: var(--panel-soft);
}

.offer-matrix .stage {
  font-weight: var(--weight-semibold);
}

.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.journey-step,
.intent-item,
.map-node {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
}

.journey-step strong,
.intent-item strong,
.map-node strong {
  display: block;
  color: var(--brand-navy);
}

.journey-step span,
.intent-item span,
.map-node span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.visual-map {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
}

.map-core {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  border: 2px solid var(--brand-navy);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel-soft);
}

.map-nodes {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--brand-blue);
  background: #fff;
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
}

.compact-card .mini {
  grid-column: span 4;
}

.tab-demo {
  margin-top: 14px;
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-button {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--brand-navy);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.tab-button[aria-selected="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.tab-button:focus-visible {
  outline: 3px solid var(--brand-red-soft);
  outline-offset: 2px;
}

.tab-panels {
  margin-top: 14px;
}

.tab-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
}

.tab-panel h3 {
  margin-bottom: 8px;
}

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

.intent-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.placeholder-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.placeholder-figure-shop {
  border-color: #b9ccd6;
  background: #dee8ed;
}

.placeholder-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

.equipment-figure img {
  width: calc(100% - 32px);
  margin: 16px 16px 0;
  border-radius: 8px;
}

.placeholder-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  color: var(--brand-navy);
}

.placeholder-figure figcaption span {
  color: var(--brand-navy);
}

.placeholder-figure figcaption .btn {
  margin-top: 8px;
}

.equipment-label {
  align-self: flex-start;
  padding: 4px 8px;
  border: 1px solid #9db6c4;
  border-radius: 999px;
  color: #25495d;
  background: #f2f6f8;
  font-size: 0.76rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.placeholder-eyebrow {
  font-size: 0.78rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
}

.embed-frame {
  position: relative;
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  box-shadow: var(--shadow);
}

.embed-frame::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.pricing-table-wrap table {
  position: relative;
  z-index: 1;
}

.pricing-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--pricing-highlight-width, 0px);
  border: 2px solid rgba(171, 31, 46, 0.3);
  background: transparent;
  pointer-events: none;
  transform: translateX(var(--pricing-highlight-left, 0px));
  transition:
    transform 0.28s ease,
    width 0.28s ease;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  background: var(--panel);
  font-size: 0.95rem;
}

tbody tr:nth-child(odd) td {
  background: #f5f5f5;
}

th.is-pricing-focus,
td.is-pricing-focus,
tbody tr:nth-child(odd) td.is-pricing-focus {
  background: #fff7e6;
}

th.is-pricing-focus {
  color: var(--brand-navy);
}

.focus-col,
.focus-head {
  background: inherit;
}

.fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
}

input,
textarea,
select {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ccc;
  font: inherit;
  background: var(--panel);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.help,
.note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

.kv {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.kv .item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.news-feed {
  display: grid;
  gap: 14px;
}

.news-feed__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.news-feed__header h2 {
  margin-bottom: 4px;
}

.news-feed__status {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.news-feed__status[data-state="ready"] {
  border-color: var(--border-strong);
  color: var(--brand-navy);
}

.news-feed__status[data-state="error"] {
  border-color: var(--brand-red-soft);
  background: #fff7f7;
  color: #6d1b24;
}

.news-feed__list {
  display: grid;
  gap: 12px;
}

.news-item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.news-item h3 {
  margin-bottom: 8px;
}

.news-item p {
  margin-bottom: 0;
  color: var(--muted);
}


@media (max-width: 979px) {
  body {
    background: #fff;
  }

  .site-container {
    box-sizing: border-box;
    margin-right: calc(var(--pad) * -1);
    margin-left: calc(var(--pad) * -1);
    padding-right: 0;
    padding-left: 0;
    width: auto;
  }

  .site-container > #ubc7-global-menu .container,
  .site-container > #ubc7-header .container,
  .site-container > #ubc7-unit .container,
  .site-container > #ubc7-unit-menu .container,
  .site-container > #ubc7-footer .container {
    box-sizing: border-box;
    padding-right: var(--pad);
    padding-left: var(--pad);
  }
}

/* @media (max-width: 860px) {
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .mini {
    grid-column: span 12;
  }

  .journey,
  .map-nodes,
  .tab-panels,
  .intent-list {
    grid-template-columns: 1fr;
  }

  .offer-matrix {
    display: block;
  }

  .offer-matrix > div {
    border-bottom: 1px solid var(--border);
  }

  .map-core,
  .map-nodes,
  .compact-card .mini {
    grid-column: span 12;
  }

  .fieldgrid {
    grid-template-columns: 1fr;
  }
  .news-feed__header {
    display: grid;
  }
  table {
    min-width: 640px;
  }
} */