/* Contakt umbrella site — components specific to the company/portfolio page.
   Builds on site.css (tokens, chrome, footer) and refresh.css (page-refresh
   layout primitives). Nothing here overrides a brand token; it only assembles
   the three-product register, the thesis map and the status system. */

:root {
  --ct-hairline-dashed: #c8ccd2;
  --reg-ink: #16181b;
  --reg-ink-2: #1d2024;
  --reg-line-dark: #333a41;
}

/* ------------------------------------------------------------------ *
 * Hero — company register index (right column of the home hero)
 * ------------------------------------------------------------------ */

.home-hero__register {
  display: flex;
  flex-direction: column;
  align-self: center;
  border: 1px solid var(--refresh-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow-float);
}

.register-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--refresh-rule);
  background:
    linear-gradient(180deg, #fbfbfa 0%, var(--ct-surface) 100%);
}

.register-index__head span {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--refresh-muted);
}

.register-index__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 16px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--refresh-rule);
  color: var(--ct-text);
  transition: background .15s ease;
}

.register-index__row:last-child { border-bottom: 0; }
.register-index__row:hover { background: #fafbfc; color: var(--ct-text); }

.register-index__label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.register-index__label b {
  font: 600 1.0625rem/1.15 var(--ct-font-display);
  letter-spacing: -.01em;
}

.register-index__label small {
  font: 500 11px/1.3 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--refresh-muted);
}

/* ------------------------------------------------------------------ *
 * Status pills — shared brand vocabulary
 * ------------------------------------------------------------------ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--ct-hairline);
  border-radius: var(--ct-pill);
  background: var(--ct-surface);
  font: 600 11px/1.2 var(--ct-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ct-text);
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ct-text-tertiary);
}

.status-pill--live::before { background: var(--ct-success); }
.status-pill--beta::before { background: var(--ct-warning); }
.status-pill--research {
  border-style: dashed;
  border-color: var(--ct-hairline-dashed);
}
.status-pill--research::before {
  background: transparent;
  border: 1.5px solid var(--ct-text-tertiary);
}

/* Product lockup (mark + wordmark), light + dark */
.product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ct-text);
  font: 500 1.0625rem/1.2 var(--ct-font-display);
  letter-spacing: .02em;
  white-space: nowrap;
}
.product-lockup img { flex: 0 0 auto; width: 18px; height: 18px; }
.product-lockup > span > span { color: var(--ct-text-secondary); font-weight: 400; }
.product-lockup--dark { color: #ebedef; }
.product-lockup--dark > span > span { color: #9aa2ab; }

/* ------------------------------------------------------------------ *
 * The register — three detailed product cards
 * ------------------------------------------------------------------ */

.register {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 44px;
}

.register-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  border: 1px solid var(--refresh-rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow);
}

.register-card__copy {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 46px);
}

.register-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--refresh-rule);
}

.register-card__track {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--refresh-muted);
}

.register-card__track b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ct-text-tertiary);
}

.register-card h3 {
  max-width: 22ch;
  margin: 0 0 16px;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.06;
}

.register-card__lede {
  margin: 0 0 14px;
  color: var(--ct-text-secondary);
  font-size: 1rem;
}

.register-card__status-line {
  margin: 0 0 auto;
  padding-bottom: 26px;
  color: var(--ct-text);
  font-weight: 500;
}

.register-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--refresh-rule);
}

/* Evidence side */
.register-card__evidence {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(120% 120% at 80% 0%, #eef0f3 0%, var(--refresh-paper) 60%);
  border-left: 1px solid var(--refresh-rule);
}

.device-browser {
  border: 1px solid var(--refresh-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow-float);
}

.device-browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--refresh-rule);
  background: #fbfbfc;
}

.device-browser__dots {
  display: flex;
  gap: 6px;
}
.device-browser__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #d6dade;
}

.device-browser__label {
  font: 500 11px/1.2 var(--ct-font-mono);
  letter-spacing: .04em;
  color: var(--ct-text-tertiary);
}

.device-browser img { display: block; width: 100%; height: auto; }

.evidence-phones {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.device-phone {
  width: 44%;
  max-width: 158px;
  border: 1px solid var(--refresh-rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow-float);
}
.device-phone img { display: block; width: 100%; height: auto; }

.evidence-caption {
  margin: 0;
  font: 500 11.5px/1.4 var(--ct-font-mono);
  letter-spacing: .02em;
  color: var(--ct-text-tertiary);
  text-align: center;
}

/* ---- Vision dark exception ---- */
.register-card--vision {
  border-color: #2b3138;
  background: var(--reg-ink);
  box-shadow: 0 24px 60px rgba(10, 12, 14, .35);
}
.register-card--vision .register-card__meta,
.register-card--vision .register-card__actions {
  border-color: var(--reg-line-dark);
}
.register-card--vision h3 { color: #f4f6f7; }
.register-card--vision .register-card__lede { color: #b9c0c7; }
.register-card--vision .register-card__status-line { color: #ebedef; }
.register-card--vision .register-card__track { color: #8b939c; }
.register-card--vision .register-card__track b { color: #6f7780; }
.register-card--vision .status-pill {
  background: transparent;
  border-color: #4a525c;
  color: #ebedef;
}
.register-card--vision .text-link { color: #61ed6a; }
.register-card--vision .text-link:hover { color: #fff; }
.register-card--vision .register-card__evidence {
  background:
    radial-gradient(120% 120% at 80% 0%, #23282e 0%, var(--reg-ink) 60%);
  border-left-color: var(--reg-line-dark);
}
.register-card--vision .device-browser,
.register-card--vision .device-phone {
  border-color: #333a41;
  background: #0e1013;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.register-card--vision .device-browser__bar {
  background: #14171a;
  border-color: #2b3138;
}
.register-card--vision .device-browser__dots i { background: #3a424a; }
.register-card--vision .device-browser__label { color: #8b939c; }
.register-card--vision .evidence-caption { color: #8b939c; }

/* ---- Challenge research file ---- */
.register-card--research { grid-template-columns: 1fr; }
.register-card--research .register-card__copy {
  background: var(--refresh-warm);
}
.register-card--research .register-card__meta,
.register-card--research .register-card__actions {
  border-color: #ddd8cb;
}
.register-gap {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid #ddd8cb;
  color: #6c6858;
  font-size: .95rem;
}
.register-gap strong { color: #47443a; }

/* ------------------------------------------------------------------ *
 * Thesis map — one word, two meanings
 * ------------------------------------------------------------------ */

.thesis-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.thesis-core {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 24px;
  border: 1px solid var(--refresh-rule);
  border-radius: 14px;
  background: var(--refresh-ink);
  color: #f4f6f7;
  text-align: center;
}
.thesis-core span {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8b939c;
}
.thesis-core strong {
  font-family: var(--ct-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.thesis-core em { color: #61ed6a; font-style: normal; }

.thesis-arm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  border: 1px solid var(--refresh-rule);
  border-radius: 14px;
  background: var(--ct-surface);
}
.thesis-arm span {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-green-mid);
}
.thesis-arm h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.thesis-arm p {
  margin: 0;
  color: var(--ct-text-secondary);
  font-size: .95rem;
}

/* ------------------------------------------------------------------ *
 * Readiness — status definitions
 * ------------------------------------------------------------------ */

.status-defs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.status-def {
  padding: 26px 24px;
  border: 1px solid var(--refresh-rule);
  border-radius: 12px;
  background: var(--ct-surface);
}
.status-def h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 600;
}
.status-def h3::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ct-text-tertiary);
}
.status-def--live h3::before { background: var(--ct-success); }
.status-def--beta h3::before { background: var(--ct-warning); }
.status-def--research h3::before {
  background: transparent;
  border: 1.5px solid var(--ct-text-tertiary);
}
.status-def p { margin: 0; color: var(--ct-text-secondary); font-size: .95rem; }

/* Two-up variant of the ported trust-grid (for paired cards) */
.trust-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .trust-grid--two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Contact routes (reuses trust-grid rhythm)
 * ------------------------------------------------------------------ */

.route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--refresh-rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ct-surface);
  margin-top: 8px;
}
.route-grid article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  border-right: 1px solid var(--refresh-rule);
}
.route-grid article:last-child { border-right: 0; }
.route-grid span {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--refresh-muted);
}
.route-grid h3 { margin: 2px 0 2px; font-size: 1.2rem; font-weight: 600; }
.route-grid p { margin: 0 0 auto; color: var(--ct-text-secondary); font-size: .92rem; }
.route-grid .text-link { padding-top: 12px; font-size: .9rem; }
.route-grid .route-sub {
  margin-top: 12px;
  font: 500 11px/1.4 var(--ct-font-mono);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ct-text-tertiary);
}
.route-grid .route-sub b { display: block; color: var(--ct-text-secondary); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Products page — spec sheets
 * ------------------------------------------------------------------ */

.spec-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

.spec-file {
  border: 1px solid var(--refresh-rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ct-surface);
  box-shadow: var(--ct-shadow);
}

.spec-file__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 24px clamp(22px, 3vw, 36px);
  border-bottom: 1px solid var(--refresh-rule);
  background: linear-gradient(180deg, #fbfbfa 0%, var(--ct-surface) 100%);
}

.spec-file__id {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.spec-file__id .track {
  font: 600 11px/1.3 var(--ct-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-text-tertiary);
}

.spec-file dl {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 0;
  margin: 0;
}

.spec-file dt {
  padding: 18px clamp(22px, 3vw, 36px);
  border-top: 1px solid var(--refresh-rule);
  font: 600 11px/1.4 var(--ct-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--refresh-muted);
}

.spec-file dd {
  margin: 0;
  padding: 18px clamp(22px, 3vw, 36px);
  border-top: 1px solid var(--refresh-rule);
  border-left: 1px solid var(--refresh-rule);
  color: var(--ct-text);
  font-size: .98rem;
}

.spec-file dt:first-of-type,
.spec-file dd:first-of-type { border-top: 0; }

.spec-file--vision {
  border-color: #2b3138;
  background: var(--reg-ink);
  box-shadow: 0 24px 60px rgba(10, 12, 14, .3);
}
.spec-file--vision .spec-file__head {
  background: #14171a;
  border-color: var(--reg-line-dark);
}
.spec-file--vision .spec-file__id .track { color: #6f7780; }
.spec-file--vision dt { color: #8b939c; border-color: var(--reg-line-dark); }
.spec-file--vision dd { color: #e7eaec; border-color: var(--reg-line-dark); }
.spec-file--vision .status-pill { background: transparent; border-color: #4a525c; color: #ebedef; }
.spec-file--vision .text-link { color: #61ed6a; }
.spec-file--vision .text-link:hover { color: #fff; }

.spec-file--research .spec-file__head { background: var(--refresh-warm); border-color: #ddd8cb; }
.spec-file--research dt,
.spec-file--research dd { border-color: #e6e1d6; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1120px) {
  .register-card { grid-template-columns: 1fr; }
  .register-card__evidence { border-left: 0; border-top: 1px solid var(--refresh-rule); }
  .register-card--vision .register-card__evidence { border-top-color: var(--reg-line-dark); }
  .route-grid { grid-template-columns: repeat(2, 1fr); }
  .route-grid article:nth-child(2) { border-right: 0; }
  .route-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--refresh-rule); }
}

@media (max-width: 900px) {
  .home-hero__register { align-self: stretch; }
  .thesis-map,
  .status-defs { grid-template-columns: 1fr; }
  .register-card__meta { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 700px) {
  .spec-file dl { grid-template-columns: 1fr; }
  .spec-file dt { border-bottom: 0; padding-bottom: 4px; }
  .spec-file dd { border-left: 0; border-top: 0; padding-top: 6px; }
  .spec-file dt:first-of-type { border-top: 0; }
  .spec-file dd { border-top: 0; }
  .spec-file dt { border-top: 1px solid var(--refresh-rule); }
  .spec-file--vision dt { border-color: var(--reg-line-dark); }
  .spec-file--research dt { border-color: #e6e1d6; }
}

@media (max-width: 620px) {
  .route-grid { grid-template-columns: 1fr; }
  .route-grid article { border-right: 0; border-bottom: 1px solid var(--refresh-rule); }
  .route-grid article:last-child { border-bottom: 0; }
  .register-card__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}