.follow-app,
.follow-app *,
.follow-app *::before,
.follow-app *::after {
  box-sizing: border-box;
}

.follow-app .route-label,
.follow-app .follow-summary dt,
.follow-app .channel-kind,
.follow-app .channel-meta span,
.follow-app .action-queue-summary span,
.follow-app .action-card-head span,
.follow-app .follow-builder label span,
.follow-app .section-kicker,
.follow-app .event-topline,
.follow-app .result-meta dt,
.follow-app .data-link-label {
  color: var(--suite-faint);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.follow-app .follow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.25rem;
  align-items: stretch;
  padding: 2.35rem 0 1.25rem;
}

.follow-app .follow-hero > * {
  min-width: 0;
}

.follow-app .route-label {
  margin: 0 0 0.8rem;
}

.follow-app h1 {
  max-width: 13ch;
  margin: 0;
  font-size: 4.2rem;
  font-weight: 950;
  line-height: 0.98;
}

.follow-app .follow-hero p,
.follow-app .section-heading p,
.follow-app .channel-card p,
.follow-app .context-panel p,
.follow-app .event-card p,
.follow-app .search-result p,
.follow-app .follow-builder p {
  color: var(--suite-muted);
  line-height: 1.65;
}

.follow-app .follow-hero p {
  max-width: 66ch;
  margin: 1rem 0 0;
  font-size: 1.08rem;
}

.follow-app .hero-actions,
.follow-app .channel-actions,
.follow-app .event-actions,
.follow-app .builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.follow-app .primary-action,
.follow-app .ghost-action,
.follow-app .small-action {
  display: inline-flex;
  min-height: 2.9rem;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.85rem;
  padding: 0 1rem;
  font-weight: 900;
}

.follow-app .primary-action {
  border: 1px solid var(--suite-accent);
  background: var(--suite-accent);
  color: #06131d;
}

.follow-app .primary-action:hover {
  background: var(--suite-accent-strong);
}

.follow-app .ghost-action,
.follow-app .small-action {
  border: 1px solid var(--suite-line);
  background: var(--suite-surface-soft);
  color: var(--suite-text);
}

.follow-app .ghost-action:hover,
.follow-app .small-action:hover {
  border-color: var(--suite-accent);
  color: var(--suite-accent-strong);
}

.follow-app .small-action {
  min-height: 2.35rem;
  border-radius: 0.72rem;
  padding: 0 0.8rem;
  font-size: 0.86rem;
}

.follow-app .follow-summary {
  align-self: stretch;
  border: 1px solid var(--suite-line);
  border-radius: 1.15rem;
  background: var(--suite-panel);
  box-shadow: var(--suite-shadow);
}

.follow-app .follow-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  margin: 0;
}

.follow-app .follow-summary div {
  display: grid;
  align-content: center;
  gap: 0.35rem;
  min-height: 8rem;
  padding: 1rem;
  border-right: 1px solid var(--suite-line);
  border-bottom: 1px solid var(--suite-line);
}

.follow-app .follow-summary div:nth-child(2n) {
  border-right: 0;
}

.follow-app .follow-summary div:last-child,
.follow-app .follow-summary div:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}

.follow-app .follow-summary dd {
  margin: 0;
  font-size: 2.05rem;
  font-weight: 950;
}

.follow-app .money-with-usd {
  display: grid;
  gap: 0.16rem;
  align-content: start;
}

.follow-app .money-with-usd > span {
  display: block;
}

.follow-app .money-usd {
  display: block;
  color: var(--suite-faint);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: normal;
}

.follow-app .money-inline {
  color: var(--suite-heading);
  font-weight: 850;
}

.follow-app .money-inline small {
  color: var(--suite-faint);
  font-size: 0.82em;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.follow-app .follow-principle,
.follow-app .action-queue,
.follow-app .follow-builder,
.follow-app .context-panel,
.follow-app .data-links {
  border: 1px solid var(--suite-line);
  border-radius: 1rem;
  background: var(--suite-surface);
}

.follow-app .follow-principle {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 1rem 0 1.4rem;
  padding: 1rem;
}

.follow-app .follow-principle strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.18rem;
}

.follow-app .action-queue {
  display: grid;
  gap: 1rem;
  margin: 1rem 0 1.4rem;
  padding: 1rem;
}

.follow-app .action-queue-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--suite-line);
  border-radius: 0.95rem;
}

.follow-app .action-queue-summary div {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
  border-right: 1px solid var(--suite-line);
  background: var(--suite-surface-soft);
}

.follow-app .action-queue-summary div:last-child {
  border-right: 0;
}

.follow-app .action-queue-summary strong {
  color: var(--suite-heading);
  font-size: 1.3rem;
  font-weight: 950;
  line-height: 1.15;
}

.follow-app .action-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.follow-app .action-card {
  min-width: 0;
  border: 1px solid var(--suite-line);
  border-radius: 1rem;
  background: var(--suite-surface);
}

.follow-app .action-card--draft {
  border-color: color-mix(in srgb, var(--suite-accent) 35%, var(--suite-line));
}

.follow-app .action-card--warning {
  border-color: color-mix(in srgb, var(--suite-warning) 44%, var(--suite-line));
}

.follow-app .action-card--danger {
  border-color: color-mix(in srgb, #ef4444 48%, var(--suite-line));
}

.follow-app .action-card article {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.follow-app .action-card-head,
.follow-app .action-tags,
.follow-app .action-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.follow-app .action-card-head {
  justify-content: space-between;
}

.follow-app .action-card-head span {
  display: inline-flex;
  min-height: 1.7rem;
  align-items: center;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  padding: 0 0.55rem;
}

.follow-app .action-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1.2;
}

.follow-app .action-card h3 a:hover {
  color: var(--suite-accent-strong);
}

.follow-app .action-card p {
  margin: 0;
  color: var(--suite-muted);
  line-height: 1.58;
}

.follow-app .action-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
}

.follow-app .action-meta div {
  display: grid;
  gap: 0.25rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--suite-line);
}

.follow-app .action-meta dt {
  color: var(--suite-faint);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.follow-app .action-meta dd {
  margin: 0;
  color: var(--suite-heading);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.follow-app .action-tags span {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  padding: 0 0.55rem;
  color: var(--suite-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.follow-app .follow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}

.follow-app .section-heading {
  display: grid;
  grid-template-columns: minmax(16rem, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.follow-app .section-heading h2 {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 950;
}

.follow-app .section-heading p {
  max-width: 42rem;
  margin: 0;
}

.follow-app .channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.follow-app .channel-card {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--suite-line);
  border-radius: 1rem;
  background: var(--suite-surface);
}

.follow-app .channel-card:hover {
  border-color: color-mix(in srgb, var(--suite-accent) 44%, var(--suite-line));
}

.follow-app .channel-card h3 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.follow-app .channel-card p {
  margin: 0;
}

.follow-app .channel-meta,
.follow-app .channel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.follow-app .channel-meta span,
.follow-app .channel-tags span,
.follow-app .event-tags span,
.follow-app .result-tags span {
  display: inline-flex;
  min-height: 1.8rem;
  align-items: center;
  border: 1px solid var(--suite-line);
  border-radius: 999px;
  padding: 0 0.6rem;
  color: var(--suite-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.follow-app .channel-tags span,
.follow-app .event-tags span,
.follow-app .result-tags span {
  text-transform: none;
  letter-spacing: 0;
}

.follow-app .channel-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.follow-app .channel-counts div {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--suite-line);
}

.follow-app .channel-counts dt {
  color: var(--suite-faint);
  font-size: 0.72rem;
  font-weight: 850;
}

.follow-app .channel-counts dd {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 950;
}

.follow-app .channel-note {
  display: block;
  color: var(--suite-faint);
  line-height: 1.45;
}

.follow-app .review-steps {
  margin-top: 2rem;
}

.follow-app .method-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.follow-app .method-steps li {
  display: grid;
  gap: 0.85rem;
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid var(--suite-line);
  border-radius: 1rem;
  background: var(--suite-surface);
}

.follow-app .method-steps span {
  color: var(--suite-faint);
  font-size: 0.8rem;
  font-weight: 950;
}

.follow-app .method-steps strong {
  align-self: end;
  font-size: 0.98rem;
  line-height: 1.25;
}

.follow-app .method-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.follow-app .method-flow li {
  align-content: start;
  min-height: 15rem;
}

.follow-app .method-flow strong {
  align-self: start;
  font-size: 1.08rem;
}

.follow-app .method-flow p,
.follow-app .method-flow small {
  margin: 0;
  color: var(--suite-muted);
  line-height: 1.55;
}

.follow-app .method-flow small {
  align-self: end;
  color: var(--suite-faint);
  font-weight: 850;
}

.follow-app .follow-builder {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.follow-app .follow-builder h2,
.follow-app .context-panel h2,
.follow-app .data-links h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 950;
}

.follow-app .follow-builder p,
.follow-app .context-panel p {
  margin: 0;
}

.follow-app .follow-builder label {
  display: grid;
  gap: 0.45rem;
}

.follow-app .follow-builder input,
.follow-app .follow-builder select,
.follow-app .follow-builder textarea {
  width: 100%;
  border: 1px solid var(--suite-line);
  border-radius: 0.8rem;
  background: var(--suite-surface-soft);
  color: var(--suite-text);
  padding: 0 0.85rem;
  font: inherit;
  font-weight: 750;
}

.follow-app .follow-builder input,
.follow-app .follow-builder select {
  min-height: 3rem;
}

.follow-app .follow-builder textarea {
  min-height: 8rem;
  padding-block: 0.75rem;
  resize: vertical;
}

.follow-app .follow-builder input:focus,
.follow-app .follow-builder select:focus,
.follow-app .follow-builder textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--suite-accent) 48%, transparent);
  outline-offset: 2px;
}

.follow-app .generated-link {
  display: block;
  min-height: 3rem;
  border: 1px solid var(--suite-line);
  border-radius: 0.8rem;
  background: var(--suite-surface-soft);
  padding: 0.75rem;
  color: var(--suite-accent-strong);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.follow-app .context-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.follow-app .context-panel div {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--suite-line);
}

.follow-app .context-panel div:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.follow-app .channel-hero-card {
  display: grid;
  gap: 0.9rem;
  align-content: center;
  border: 1px solid var(--suite-line);
  border-radius: 1.15rem;
  background: var(--suite-panel);
  padding: 1rem;
  box-shadow: var(--suite-shadow);
}

.follow-app .channel-hero-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.follow-app .channel-hero-card div {
  padding-top: 0.65rem;
  border-top: 1px solid var(--suite-line);
}

.follow-app .channel-hero-card dt {
  color: var(--suite-faint);
  font-size: 0.72rem;
  font-weight: 850;
}

.follow-app .channel-hero-card dd {
  margin: 0.25rem 0 0;
  font-size: 1.4rem;
  font-weight: 950;
}

.follow-app .event-list,
.follow-app .search-result-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.follow-app .event-card,
.follow-app .search-result {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--suite-line);
  border-radius: 1rem;
  background: var(--suite-surface);
}

.follow-app .event-card h3,
.follow-app .search-result h3 {
  margin: 0.35rem 0 0;
  font-size: 1.24rem;
  font-weight: 950;
  line-height: 1.18;
}

.follow-app .event-card h3 a:hover,
.follow-app .search-result h3 a:hover {
  color: var(--suite-accent-strong);
}

.follow-app .event-card p,
.follow-app .search-result p {
  margin: 0.65rem 0 0;
}

.follow-app .event-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: space-between;
}

.follow-app .event-tags,
.follow-app .result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.follow-app .detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}

.follow-app .detail-stack {
  display: grid;
  gap: 1.5rem;
}

.follow-app .result-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.85rem 0 0;
}

.follow-app .result-meta div {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--suite-line);
}

.follow-app .result-meta dd {
  margin: 0;
  color: var(--suite-muted);
  overflow-wrap: anywhere;
}

.follow-app .data-links {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.follow-app .data-links a {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  border-top: 1px solid var(--suite-line);
  padding-top: 0.8rem;
}

.follow-app .data-links a:hover strong {
  color: var(--suite-accent-strong);
}

.follow-app .data-links strong {
  overflow-wrap: anywhere;
}

.follow-app .empty-state {
  border: 1px dashed var(--suite-line-strong);
  border-radius: 1rem;
  padding: 1rem;
  background: var(--suite-surface-soft);
}

.follow-app .action-icon {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 1180px) {
  .follow-app .follow-hero,
  .follow-app .follow-layout,
  .follow-app .follow-principle,
  .follow-app .action-list,
  .follow-app .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .follow-app .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-app .method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .follow-app .method-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .follow-app .follow-hero {
    padding-top: 0.5rem;
  }

  .follow-app h1 {
    max-width: none;
    font-size: 3rem;
  }
}

@media (max-width: 680px) {
  .follow-app .follow-summary dl,
  .follow-app .action-queue-summary,
  .follow-app .action-meta,
  .follow-app .channel-grid,
  .follow-app .channel-hero-card dl,
  .follow-app .result-meta,
  .follow-app .channel-counts,
  .follow-app .method-steps {
    grid-template-columns: 1fr;
  }

  .follow-app .follow-summary div,
  .follow-app .action-queue-summary div,
  .follow-app .channel-counts div {
    border-right: 0;
    border-bottom: 1px solid var(--suite-line);
  }

  .follow-app .follow-summary div:last-child,
  .follow-app .action-queue-summary div:last-child,
  .follow-app .channel-counts div:last-child {
    border-bottom: 0;
  }

  .follow-app .hero-actions,
  .follow-app .channel-actions,
  .follow-app .event-actions,
  .follow-app .action-actions,
  .follow-app .builder-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .follow-app .section-heading {
    grid-template-columns: 1fr;
  }

  .follow-app .primary-action,
  .follow-app .ghost-action,
  .follow-app .small-action {
    width: 100%;
  }
}

/* Shared module UX polish. Keeps every Astro module readable and actionable. */
.follow-app {
  --follow-radius: 0.5rem;
}

.follow-app :focus-visible {
  outline: 2px solid var(--suite-accent);
  outline-offset: 3px;
}

.follow-app .follow-hero {
  padding-top: clamp(1.2rem, 3vw, 2.4rem);
}

.follow-app h1 {
  letter-spacing: 0;
}

.follow-app .follow-summary,
.follow-app .follow-principle,
.follow-app .action-queue,
.follow-app .follow-builder,
.follow-app .context-panel,
.follow-app .data-links,
.follow-app .channel-hero-card,
.follow-app .event-card,
.follow-app .search-result,
.follow-app .channel-card,
.follow-app .method-steps li,
.follow-app .empty-state,
.follow-app .action-card {
  border-radius: var(--follow-radius);
}

.follow-app .primary-action,
.follow-app .ghost-action,
.follow-app .small-action,
.follow-app .follow-builder input,
.follow-app .follow-builder select,
.follow-app .follow-builder textarea,
.follow-app .generated-link {
  border-radius: var(--follow-radius);
}

.follow-app .primary-action {
  color: #06131d;
}

.follow-app .ghost-action,
.follow-app .small-action {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--suite-accent) 5%, transparent),
      transparent
    ),
    var(--suite-surface-soft);
}

.follow-app .hero-actions {
  max-width: 76rem;
  gap: 0.55rem;
}

.follow-app .hero-actions .ghost-action,
.follow-app .event-actions .small-action,
.follow-app .channel-actions .small-action,
.follow-app .action-actions .small-action {
  min-height: 2.55rem;
  padding-inline: 0.85rem;
}

.follow-app .channel-card,
.follow-app .event-card,
.follow-app .search-result,
.follow-app .action-card {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.follow-app .channel-card:hover,
.follow-app .event-card:hover,
.follow-app .search-result:hover,
.follow-app .action-card:hover {
  border-color: color-mix(in srgb, var(--suite-accent) 38%, var(--suite-line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--suite-accent) 7%, transparent),
      transparent 72%
    ),
    var(--suite-surface);
  transform: translateY(-1px);
}

.follow-app .follow-builder input,
.follow-app .follow-builder select {
  min-height: 2.85rem;
}

.follow-app .event-card h3,
.follow-app .search-result h3,
.follow-app .channel-card h3,
.follow-app .action-card h3 {
  max-width: 30ch;
}

.follow-app table {
  width: 100%;
}

.follow-app th,
.follow-app td {
  overflow-wrap: anywhere;
}

.follow-app .money-with-usd,
.follow-app .money-inline {
  max-width: 100%;
}

.follow-app .tracking-topline,
.follow-app .event-topline,
.follow-app .action-card-head,
.follow-app .channel-meta {
  min-width: 0;
}

.follow-app .event-actions,
.follow-app .channel-actions,
.follow-app .action-actions {
  gap: 0.55rem;
}

@media (max-width: 680px) {
  .follow-app h1 {
    font-size: 2.85rem;
    overflow-wrap: anywhere;
  }

  .follow-app .follow-summary dd {
    overflow-wrap: anywhere;
  }
}