/* Page composition and local exceptions. Shared primitives: ../../design-system/. */
body {

   text-rendering: optimizeLegibility;
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0; background: var(--signal);
  z-index: 100; transition: width .06s linear;
}

/* ============================================================ Type primitives ============================================================ */

.h-section {

  text-wrap: balance;
}

/* ============================================================ Top bar / breadcrumb ============================================================ *//* ============================================================ COVER — depth slab ============================================================ */
.cover .inner {
  max-width: var(--content-std); margin: 0 auto;
  padding: 144px var(--gutter);
  position: relative; z-index: 2;
}
.cover h1 {

  --cover-title-size: clamp(40px, 4vw, 56px);
  --cover-title-leading: 1.05; --cover-title-tracking: -0.03em;

}
.cover .lede {

   max-width: var(--content-text);
  margin-top: var(--s-32);
}

/* ============================================================ SHIFT — bg slab ============================================================ */
.shift { background: var(--bg); }

.shift .top .eyebrow { margin-bottom: var(--s-16); }
.shift .top h2 { margin-bottom: var(--s-32); }
.shift .top p { font-size: var(--body-size); line-height: 1.7; color: var(--text-primary); text-wrap: pretty; }
.shift .top p + p { margin-top: var(--s-20); }

.shift .diagram {
  margin: var(--s-64) auto 0;
  max-width: var(--content-text);
}
.shift .diagram svg { width: 100%; height: auto; display: block; }
.shift .diagram .figure-caption { text-align: center; }

/* ============================================================ SHIPPED — sage slab, image + 3 cards ============================================================ */
.shipped { background: var(--sage); }

.shipped .top { max-width: var(--content-std); margin: 0 auto var(--s-48); text-align: center; }
.shipped .top .eyebrow { margin-bottom: var(--s-16); }
.shipped .top h2 { margin-bottom: var(--s-16); }
.shipped .top p { font-size: var(--body-size); line-height: 1.65; color: var(--text-primary); text-wrap: balance; }

.shipped .frame {
  max-width: var(--content-std);
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5),
              0 1px 2px rgba(0,0,0,0.04);
}
.shipped .frame img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  background: var(--bg);
}
.shipped .figure-caption { max-width: var(--content-std); margin: var(--s-48) auto 0; text-align: center; text-wrap: balance; }
.shipped .shot + .shot { margin-top: var(--s-64); }

.shipped .grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
  margin-bottom: var(--s-64);
}
.shipped .card {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--s-32);
  display: flex; flex-direction: column; gap: var(--s-16);
}
.shipped .card .n {
  font-family: var(--f-display); font-weight: 900;
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary);
}
.shipped .card h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.shipped .card p {
  font-size: 15px; line-height: 1.65; color: var(--text-primary); text-wrap: pretty;
}

/* ============================================================ TAKEAWAY — depth-soft slab ============================================================ */
.takeaway { background: var(--depth-soft); }
.takeaway .inner {
  max-width: var(--content-std); margin: 0 auto;
  padding: var(--s-80) var(--gutter);
  text-align: center;
}
.takeaway .lbl {
  font-family: var(--f-display); font-weight: 900;
  font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--quiet);
  margin-bottom: var(--s-20);
}
.takeaway p {
  font-family: var(--f-quote); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.5;
  color: var(--text-primary);
  text-wrap: balance;
}
.takeaway p + p { margin-top: var(--s-24); }
.takeaway .hiring-term { white-space: nowrap; }

/* ============================================================ NEXT CTA — depth slab ============================================================ */

/* ============================================================ Consolidated responsive overrides ============================================================ */
@media (max-width: 1024px) {

  .shipped .grid { grid-template-columns: 1fr; gap: var(--s-16); }
}
@media (max-width: 640px) {
  .cover h1 { --cover-title-size: clamp(36px, 9vw, 48px); }
}