@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/base.css";
@import "tokens/landing.css";
@import "status.css";
@import "chrome.css";
@import "pocket.css";

/* ============================================================
   The hub page (index.html), from the landing page handoff v3.

   One fluid layout for every width. Sizes scale with the page
   width through cqi units on .hub; grids are auto-fit, and the
   platform diagram switches to a vertical flow at 700px.
   Background order: dark · white · grey · white · grey · dark ·
   white · dark.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--ink-900);
  color: var(--ink-900);
}

.hub {
  container-type: inline-size;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}

.hub section[id],
.hub [id] {
  scroll-margin-top: 16px;
}

.hub a:hover {
  text-decoration: none;
}

.hub :focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 8cqi, 120px) clamp(20px, 5cqi, 80px);
}

.ground-dark { background: var(--ink-900); color: var(--text-on-dark); }
.ground-white { background: var(--white); }
.ground-grey { background: var(--grey-50); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-700);
}

.on-dark .eyebrow { color: var(--cyan-500); }

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4cqi, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.on-dark .h2 { color: var(--white); }

.lead {
  margin: 0;
  font-size: 18px;
  color: var(--text-lead-light);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
}

/* ── Hero ────────────────────────────────────────────────── */

.hero-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 5cqi, 80px) clamp(20px, 5cqi, 80px) clamp(56px, 6cqi, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4cqi, 64px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1120px;
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.2cqi, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--white);
}

.hero-copy p {
  margin: 0;
  max-width: 680px;
  font-size: clamp(17px, 1.45cqi, 20px);
  line-height: 1.55;
  color: var(--text-soft-dark);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-copy .btn-row { padding-top: 8px; }

/* The chain keeps its labels legible on a phone by keeping a minimum width
   and scrolling inside its own box; the page itself never scrolls sideways. */
.chain-scroll {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.chain {
  margin: 0;
  position: relative;
  min-width: 640px;
  container-type: inline-size;
}

.chain svg {
  display: block;
  width: 100%;
  height: auto;
}

.chain__zone {
  position: absolute;
  top: 21%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
}

.chain__zone b {
  font-weight: 500;
  font-size: clamp(13px, 1.5cqi, 18px);
  letter-spacing: 0.1em;
  color: var(--white);
}

.chain__zone span {
  font-size: clamp(10px, 1cqi, 12px);
  letter-spacing: 0.08em;
  color: var(--text-muted-dark);
}

.chain__nodes {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.05cqi, 13px);
  letter-spacing: 0.06em;
  color: var(--text-soft-dark);
}

.chain__nodes span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ── Audiences ───────────────────────────────────────────── */

.stack-48 {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.audiences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 20px;
}

.audience {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 24px;
  border: 1px solid var(--line-card);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink-900);
  text-decoration: none;
}

.audience:hover {
  border-color: var(--cyan-700);
  color: var(--ink-900);
}

.audience h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: 0;
}

.audience p {
  margin: 0;
  color: var(--text-muted-light);
  flex-grow: 1;
}

.icon-tile {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--grey-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.chips span {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--ink-900);
  color: var(--white);
}

.chips small {
  font-size: inherit;
  font-weight: 400;
  color: var(--text-soft-dark);
}

/* ── Platform ────────────────────────────────────────────── */

.platform {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.platform__chain {
  display: flex;
  align-items: stretch;
}

.platform__block {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: 12px;
}

.platform__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.platform__block p {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted-light);
}

.platform__block .system-tag {
  padding: 2px 8px;
  font-size: 12px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.platform__arrow {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-700);
}

.platform__arrow .down { display: none; }

@container (max-width: 700px) {
  .platform__chain { flex-direction: column; }
  .platform__block { flex: none; }
  .platform__arrow { flex: none; min-height: 40px; }
  .platform__arrow .right { display: none; }
  .platform__arrow .down { display: block; }
}

.platform__return {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--blue-300);
  border-radius: 10px;
  color: var(--slate-700);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.platform__return svg { flex: none; }

.platform__qms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--blue-300);
  border-radius: 12px;
}

.platform__qms b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}

.platform__qms b span {
  font-weight: 500;
  color: var(--text-muted-light);
}

.platform__qms div {
  font-size: 15px;
  color: var(--text-muted-light);
}

.platform__core {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  background: var(--ink-900);
  border-radius: 12px;
  color: var(--text-on-dark);
}

.platform__core-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.platform__core-head b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
}

.platform__core-head span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cyan-500);
}

.platform__core ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.platform__core li {
  padding: 6px 12px;
  border: 1px solid var(--cyan-500);
  border-radius: 6px;
}

.platform__interfaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 12px 24px;
  border-top: 1px solid var(--blue-300);
  border-bottom: 1px solid var(--blue-300);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-700);
}

.platform__interfaces b {
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-900);
}

.glossary {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 6px 32px;
  font-size: 13px;
  color: var(--text-muted-light);
}

.glossary div { display: flex; gap: 10px; }
.glossary dt { flex: 0 0 44px; font-family: var(--font-mono); color: var(--ink-900); }
.glossary dd { margin: 0; }

/* ── Products ────────────────────────────────────────────── */

.products-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.products-head .section-head {
  flex: 1 1 520px;
}

.status-legend {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted-light);
}

.status-legend div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-legend dt { flex: 0 0 136px; }
.status-legend dd { margin: 0; }

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 20px;
  align-items: start;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 12px;
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: 12px;
}

.product-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.product-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.product-card__tags { display: flex; gap: 6px; }

.product-card__byline {
  font-size: 15px;
  color: var(--text-muted-light);
}

.product-card__purpose {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
}

.product-card__tally {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted-light);
}

.product-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-row);
}

.feature__text {
  flex: 1 1 180px;
  font-size: 15px;
  line-height: 22px;
}

.feature__aside,
.feature__details {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.feature__aside { color: var(--cyan-800); }
.feature__details { color: var(--cyan-700); }
.feature__aside:hover,
.feature__details:hover { text-decoration: underline; }

.feature:target {
  background: var(--cyan-50);
  box-shadow: -12px 0 0 var(--cyan-50), 12px 0 0 var(--cyan-50);
}

.feature-group {
  padding: 14px 0 6px;
  border-top: 1px solid var(--line-row);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cyan-700);
}

.product-card__explore {
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan-700);
}

.product-card__explore:hover { text-decoration: underline; }

.product-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 48px;
  background: var(--grey-50);
}

.product-card--wide .icon-tile { background: var(--white); }

.product-card__intro {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 16px;
}

.product-card--wide .product-card__features {
  flex: 2 1 420px;
  min-width: 0;
}

.product-card--wide .feature { border-top-color: var(--line-row-sunken); }

/* ── How it connects ─────────────────────────────────────── */

.connects {
  border-top: 1px solid var(--line-dark);
}

.connects .wrap {
  padding-top: clamp(72px, 8cqi, 112px);
  padding-bottom: clamp(72px, 8cqi, 112px);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tabs[hidden] { display: none; }

.tab {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-dark-zone);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft-dark);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.tab:hover { color: var(--white); border-color: var(--blue-300); }

.tab[aria-selected="true"] {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  color: var(--ink-900);
}

.journey {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.journey[hidden] { display: none; }

.sponsor-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border: 1px solid var(--blue-300);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--blue-300);
}

.sponsor-bar svg { flex: none; }

.sponsor-bar b {
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.12em;
  margin-right: 0.6em;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px 0;
}

.step {
  --zone: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 24px;
}

.step--plan { --zone: var(--cyan-200); }
.step--make { --zone: var(--cyan-500); }
.step--care { --zone: var(--text-on-dark); }
.step--logistics { --zone: var(--blue-300); }

.step__zone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--zone);
}

.step__zone b { font-weight: 500; color: var(--white); letter-spacing: 0.12em; }
.step__zone b + span { font-weight: 400; }

.step__line { display: flex; align-items: center; }

.step__line::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--zone);
}

.step--care .step__line::before { background: var(--zone); }

.step__line::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--zone);
}

.step:last-child .step__line::after { opacity: 0.35; }

.step__num {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--zone);
  font-family: var(--font-mono);
  font-size: 13px;
}

.step p { margin: 0; color: var(--text-on-dark); }

.step__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted-dark);
}

.step__handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft-dark);
}

/* ── Workshop ────────────────────────────────────────────── */

.workshop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}

.workshop .section-head {
  flex: 1 1 520px;
  min-width: 0;
  gap: 18px;
  max-width: 760px;
}

.workshop.wrap {
  padding-top: clamp(72px, 8cqi, 112px);
  padding-bottom: clamp(72px, 8cqi, 112px);
}


/* ── Ask your data ───────────────────────────────────────── */

.ai-band {
  border-top: 1px solid var(--line-dark);
}

.ai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 72px;
}

.ai__copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ai__lead {
  margin: 0;
  font-size: 18px;
  color: var(--text-soft-dark);
}

.ai__questions {
  flex: 1 1 420px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai__questions li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line-dark-zone);
  border-left: 3px solid var(--cyan-500);
  border-radius: 10px;
  background: rgba(161, 187, 211, 0.04);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.ai__kind {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-500);
}