/* tag.vu website: page-level layout on top of the TAG.VU design system
   (ds/tagvu/tokens.css + ds/tagvu/components/bundle.css). Colours come from
   tokens only, so data-theme="dark" sections re-theme everything inside. */

.site { min-width: 0; font-family: var(--font-body); }
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { max-width: 100%; }
.site h1, .site h2, .site h3, .site p { margin: 0; }

/* ---------- Header bar ---------- */
.site-top { background: var(--ground); border-bottom: 1px solid var(--line); }
.site-top .tv-header { border-bottom: 0; background: transparent; }

/* The consumer site's slim utility bar: the one way out to the business site. */
.utility { background: var(--ground-alt); border-bottom: 1px solid var(--line); }
.utility__row { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-6); min-height: 36px; }
.utility a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--fg-muted); font-size: 13px; line-height: 18px; font-weight: 700; text-decoration: none; }
.utility a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.utility .tv-icon { width: 14px; height: 14px; }

/* The business site's lockup: the logo, then a separate label at clear space. */
.biz-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.biz-lockup img { height: 22px; width: auto; display: block; }
.biz-lockup span { padding-left: 12px; border-left: 1px solid var(--line-strong); color: var(--fg); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.biz-back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--fg-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.biz-back:hover { color: var(--fg); }

/* ---------- World grounds: the split is felt, not only labelled ---------- */
.world-personal { background: var(--ground-alt); }
.world-partners { background: var(--tag); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 23px;
}

.visual-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.visual-caption { color: var(--fg-muted); font-size: 15px; line-height: 23px; }

/* ---------- Steps: a real sequence ---------- */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 2px solid var(--brand);
}

.step__n {
  color: var(--brand-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
}

.step__title,
.fact__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
}

.step__body,
.fact__body { color: var(--fg-muted); font-size: 17px; line-height: 27px; }

/* ---------- Facts ---------- */
.facts {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.fact { display: flex; flex-direction: column; gap: var(--space-3); }
.fact__icon { color: var(--brand-text); }
.fact__icon .tv-icon { width: 28px; height: 28px; }

/* ---------- Two-column split ---------- */
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.split__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.split__copy .tv-section-head__title { max-width: 18em; }

/* ---------- Phone mock (a device, so it may round) ---------- */
.phone {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--raised);
  box-shadow: var(--shadow-float);
}

.phone__screen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-radius: 22px;
  background: var(--ground);
  overflow: hidden;
}

.phone__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 32px;
}

.phone__bar img { height: 16px; width: auto; display: block; }

.phone__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.01em;
}

.phone .tv-btn { width: 100%; }

.cobrand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 18px;
}

.cobrand__slot {
  display: inline-grid;
  place-items: center;
  min-width: 96px;
  height: 28px;
  padding: 0 var(--space-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Image placeholder ---------- */
.ph {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  padding: var(--space-4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--sunken);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.ph .tv-icon { width: 32px; height: 32px; }
.ph--wide { aspect-ratio: 16 / 9; }

/* ---------- My tags list (one account) ---------- */
.tag-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }

.tag-list__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.tag-list__name { font-weight: 700; }
.tag-list__from { color: var(--fg-muted); font-size: 15px; line-height: 23px; }

/* ---------- Two-sided list (co-branding) ---------- */
.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); font-size: 17px; line-height: 27px; }
.checklist .tv-icon { margin-top: 4px; color: var(--brand-text); }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: var(--space-4) var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.form-full { grid-column: 1 / -1; }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.choice-row legend { padding: 0; margin-bottom: var(--space-2); font-size: 15px; line-height: 20px; font-weight: 700; }

.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--raised);
  color: var(--fg);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.chip input:checked + span { border-color: var(--brand-text); background: var(--brand-tint); color: var(--brand-text); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 23px;
}

.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand-text); }

/* ---------- Call-to-action band ---------- */
.band-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-4);
  max-width: 820px;
  margin-inline: auto;
}

.band-form .tv-field { flex: 1 1 240px; text-align: left; }
.band-note { margin-top: var(--space-4); text-align: center; color: var(--fg-muted); font-size: 13px; line-height: 18px; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-16) var(--space-8); }

.site-footer__top {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

@media (min-width: 1000px) {
  .site-footer__top { grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); }
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__brand img { height: 22px; width: auto; align-self: flex-start; }
.site-footer__brand p { max-width: 30ch; color: var(--fg-muted); font-size: 15px; line-height: 23px; }
.site-footer__by { align-self: flex-start; color: var(--fg-muted); font-size: 15px; line-height: 23px; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__by:hover { color: var(--fg); }

.site-footer__col h2 {
  margin-bottom: var(--space-4);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.site-footer__col a { color: var(--fg); font-size: 15px; line-height: 20px; text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 4px; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 18px;
}

.site-footer__base nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__base a { color: var(--fg-muted); }

/* ---------- Site map board ---------- */
.map { padding: var(--space-12) var(--gutter-wide); display: flex; flex-direction: column; gap: var(--space-8); }

.map__sites { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 3fr); align-items: start; }
.map__site { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.map__site-head { display: flex; flex-direction: column; gap: var(--space-1); }
.map__domain { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .02em; color: var(--brand-text); }
.map__cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.map__bridge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 15px; line-height: 23px; }

.map__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.map__col[data-theme] { border-color: transparent; }
.map__col--personal { background: var(--ground-alt); }
.map__col--partners { background: var(--tag); border-color: var(--brand-line); }
.map__col--later { border-style: dashed; border-color: var(--line-strong); }

.map__who { color: var(--fg-muted); font-size: 15px; line-height: 23px; }
.map__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 600; }

.map__pages { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }

.map__page {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--raised);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
}

.map__page--hub { font-weight: 700; }

.map__meta { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 15px; line-height: 23px; }
.map__meta b { font-weight: 700; }

.map__shared { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.map__shared-label { margin-right: var(--space-2); color: var(--fg-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Application list inside a solution family card ---------- */
.app-list { margin: 0; padding: var(--space-3) 0 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--line); }
.app-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: baseline; gap: var(--space-3); font-size: 15px; line-height: 23px; font-weight: 700; }
.app-list li::before { content: ""; width: 8px; height: 8px; background: var(--brand); clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%); }

/* ---------- Solution families: logistics leads, two columns wide ---------- */
.families { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 960px) {
  .families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .family--feature { grid-column: span 2; }
}

.tv-card.family--feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }

@media (min-width: 1100px) {
  .tv-card.family--feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

.family__copy, .family__visual { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }