/* Hallmark · page: Solutions hub + industry pages · macrostructure: Timeline ("a week on WhatsApp") with problem lead-in;
 * hub = Index of tinted industry entries + 4-step thread
 * theme: custom "Night + Mint" · industry accent via [data-vertical] (light) and [data-tint] (night) · nav: N11 · footer: Ft3 + mast
 * enrichment: Tier A HTML message bubbles (no device chrome), sample data labelled
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 * motion: day marker slide · panel crossfade (reduced motion: instant)
 */

/* ═════════════ Industry hero ═════════════ */
.vhero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2rem;
  padding: 0 var(--space-sm) 0 var(--space-xs);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--color-accent-text);
}
.vhero__dot, .ind__dot, .other__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: var(--color-spark);
}

/* ═════════════ The problem ═════════════ */
.problem__grid { display: grid; gap: var(--space-lg); align-items: start; }
.problem h2 { font-size: var(--text-xl); max-width: 20ch; }
.problem__quote {
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-muted);
  max-width: 34ch;
}
.problem__list { display: grid; }
.problem__list li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-block-start: var(--rule-width) solid var(--color-rule);
  font-size: var(--text-md);
  line-height: 1.4;
}
.problem__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-start: calc(var(--space-sm) + 0.7em);
  width: 0.75rem;
  height: 2px;
  background: var(--color-danger);
}
@media (min-width: 60rem) {
  .problem__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

/* ═════════════ Signature: the week ═════════════ */
.week {
  padding-block: var(--space-3xl);
  background: var(--color-paper);
  color: var(--color-ink);
}
.week .section__head h2 { max-width: 24ch; }
.week__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.week__body { display: grid; gap: var(--space-lg); }

/* Day rail (JS) */
.week__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-block-end: var(--rule-width) solid var(--color-rule);
}
.week__rail[hidden] { display: none; }
.week__tab {
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
  min-width: 0;
  min-height: 3.25rem;
  padding: var(--space-2xs) 0 var(--space-sm);
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.week__tab:hover { color: var(--color-ink); }
.week__tab[aria-selected="true"] { color: var(--color-ink); }
.week__tab-day { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-base); }
.week__tab-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.week__tab:focus-visible { outline-offset: -2px; }
.week__marker {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: calc(100% / 7);
  height: 2px;
  background: var(--color-spark);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--dur-slow) var(--ease-out);
}
.week__marker::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -4px;
  width: 0.6rem;
  height: 0.6rem;
  margin-inline-start: -0.3rem;
  border-radius: 1.5px;
  background: var(--color-spark);
  transform: rotate(45deg);
}
@media (max-width: 30rem) { .week__tab-time { display: none; } .week__tab-day { font-size: var(--text-sm); } }

/* Days: a stacked timeline without JS; one panel at a time with it */
.week__days { display: grid; gap: var(--space-lg); }
.week__day {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
.week__day[hidden] { display: none; }
[data-week].is-live .week__day:not([hidden]) { animation: week-in var(--dur-base) var(--ease-out); }
@keyframes week-in { from { opacity: 0; } }

.week__msg {
  display: grid;
  align-content: center;
  min-height: 18rem;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  border: var(--rule-width) solid var(--color-rule);
}
.week__what { display: grid; gap: var(--space-xs); align-content: center; }
.week__stamp { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-text); }
.week__what h3 { font-size: var(--text-xl); letter-spacing: -0.025em; line-height: var(--leading-snug); }
.week__what > p:not(.week__stamp) { color: var(--color-muted); font-size: var(--text-md); line-height: 1.5; max-width: 40ch; }
.week__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-block-start: var(--space-2xs); }
.wtag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--color-accent-text);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.wtag:hover { border-color: var(--color-accent-text); }
@media (pointer: coarse) { .wtag { min-height: 2.75rem; } }

.week__nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-end; }
.week__nav[hidden] { display: none; }

/* Without JS, number the timeline with the day stamp line on the left */
[data-week]:not(.is-live) .week__day { padding-block-start: var(--space-lg); border-block-start: var(--rule-width) solid var(--color-rule); }

@media (min-width: 52rem) {
  .week__day { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-xl); }
  .week__msg { min-height: 22rem; padding: var(--space-xl); }
}

/* Message bubbles — inbox view: customer on the left, business on the right */
.wmsg { display: grid; gap: var(--space-2xs); width: min(100%, 24rem); }
.wmsg--in { justify-self: start; }
.wmsg--out { justify-self: end; }
.wmsg__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.wmsg--out .wmsg__who { justify-content: flex-end; }
.wmsg__label {
  padding: 0.1rem var(--space-2xs);
  border-radius: var(--radius-sm);
  border: var(--rule-width) solid var(--color-rule);
  color: var(--color-ink);
}
.wmsg__bubble {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background: var(--color-paper-3);
}
.wmsg--in .wmsg__bubble { border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.wmsg--out .wmsg__bubble { border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); background: var(--color-accent-soft); }
.wmsg__head { font-weight: var(--weight-strong); }
.wmsg__body { line-height: 1.55; overflow-wrap: anywhere; }
.wmsg__foot { font-size: var(--text-xs); color: var(--color-muted); }
.wmsg__media, .wmsg__doc {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.wmsg__media { justify-content: center; aspect-ratio: 1.91 / 1; border: var(--rule-width) dashed var(--color-rule); }
.wmsg__doc { padding: var(--space-xs); background: var(--color-paper-2); color: var(--color-ink); }
.wmsg__btns { display: grid; gap: var(--space-3xs); }
.wmsg__btns li {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-paper-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--color-accent-text);
  text-align: center;
}
.wmsg--quiet { justify-self: center; justify-items: center; gap: var(--space-sm); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.wmsg__moon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: inset -0.7rem -0.35rem 0 0 var(--color-spark);
  transform: rotate(-20deg);
}

/* ═════════════ Built-in cards + other industries ═════════════ */
.vcap .card__mark { background: var(--color-accent); }
.vcap:hover h3 { color: var(--color-accent-text); }

.others { padding-block: 0 var(--space-3xl); }
.others__inner { display: grid; gap: var(--space-md); }
.others h2 { font-size: var(--text-md); color: var(--color-muted); letter-spacing: -0.01em; }
.others__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.other {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.other .other__dot { background: var(--color-accent); }
.other__arrow { transition: transform var(--dur-base) var(--ease-out); }
.other:hover { border-color: var(--color-ink); }
.other:hover .other__arrow { transform: translateX(3px); }

/* ═════════════ Hub: industry entries ═════════════ */
.inds { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.ind {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  border-block-start: 4px solid var(--color-accent);
  background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ind:hover { box-shadow: var(--shadow-2); }
.ind .ind__dot { background: var(--color-accent); }
.ind__top { display: flex; align-items: center; gap: var(--space-xs); }
.ind__name { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: 0; color: var(--color-accent-text); }
.ind__h { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-display); letter-spacing: -0.025em; line-height: 1.15; max-width: 18ch; }
.ind__problem { color: var(--color-muted); line-height: 1.5; max-width: 52ch; }
.ind__list { display: grid; gap: var(--space-2xs); padding-block: var(--space-sm); border-block: var(--rule-width) solid var(--color-rule); }
.ind__item { position: relative; padding-inline-start: var(--space-md); font-size: var(--text-sm); }
.ind__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15rem;
  inset-block-start: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.ind__go { font-weight: var(--weight-strong); color: var(--color-accent-text); }
.ind__go span { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.ind:hover .ind__go span { transform: translateX(3px); }
@media (min-width: 52rem) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } .ind { padding: var(--space-xl); } }

/* The common thread */
.thread-section { background: var(--color-paper-2); }
.thread { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); counter-reset: none; }
.thread__step { display: grid; gap: var(--space-xs); align-content: start; padding-block-start: var(--space-md); border-block-start: 2px solid var(--color-ink); }
.thread__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent-text); }
.thread__step h3 { font-size: var(--text-lg); }
.thread__step p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.thread__step .link { font-size: var(--text-sm); }
@media (min-width: 40rem) { .thread { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } }
@media (min-width: 64rem) { .thread { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.notlisted__inner { display: grid; gap: var(--space-md); justify-items: start; }
.notlisted__inner > div { display: grid; gap: var(--space-sm); }
@media (min-width: 52rem) { .notlisted__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

@media (prefers-reduced-motion: reduce) {
  .week__marker { transition: none; }
  [data-week].is-live .week__day:not([hidden]) { animation: none; }
}

/* Inbox event line under each message */
.week__msg { gap: var(--space-md); }
.wmsg__event {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
}
.wmsg__event span { color: var(--color-spark); font-size: 0.6rem; }

/* Seven industries: on two columns the last (odd) card spans the row so the grid ends cleanly */
@media (min-width: 52rem) { .inds > .ind:last-child:nth-child(odd) { grid-column: 1 / -1; } }