/* Shared spacing and readable controls across the comic theme. */
:root {
  --content-width: 1334px;
  --page-gutter: clamp(16px, 3vw, 40px);
}
.comic-header {
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto 36px;
  grid-template-areas: 'brand navigation search cta account';
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  height: auto;
  min-height: 76px;
  gap: 24px;
  padding: 14px 20px;
}
.comic-header > .comic-brand { grid-area: brand; }
.comic-header nav {
  grid-area: navigation;
  gap: 24px;
  margin: 0;
  min-height: 44px;
}
.comic-header nav a { font-size: 17px; }
.comic-header nav a[aria-current=page]::after { bottom: 0; }
.comic-header .comic-cta { grid-area: cta; min-height: 44px; }
.comic-header .auth-widget {
  grid-area: account;
  display: flex;
  align-items: center;
  width: 36px;
  height: 44px;
}
.comic-header .comic-search {
  grid-area: search;
  position: relative;
  margin: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  gap: 10px;
  order: 0;
}
.comic-header .comic-search input {
  font-size: 16px;
  line-height: 1.4;
  min-width: 0;
  height: 40px;
}
.comic-header .comic-search:focus-within { border-color: var(--gold); }
.comic-search-dropdown {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  left: 0;
  width: min(460px, calc(100vw - 2 * var(--page-gutter)));
  max-height: min(460px, var(--search-available-height, 65dvh));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--gold);
  border-radius: 7px;
  background: #061116;
  box-shadow: 0 16px 48px #0009;
  padding: 8px;
}
.comic-search-status {
  margin: 0;
  padding: 10px 12px;
  color: var(--muted);
  font: 15px/1.4 var(--sans);
}
.comic-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.comic-search-result:hover,
.comic-search-result[aria-selected=true] { background: #10262c; border-color: #3e6069; }
.comic-search-result-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #10262c;
  border: 1px solid #31515c;
  border-radius: 5px;
  font: bold 18px/1 Georgia, serif;
}
.comic-search-result-copy { display: grid; min-width: 0; gap: 4px; }
.comic-search-result-copy strong { color: var(--ink); font: bold 18px/1.2 Georgia, serif; overflow-wrap: anywhere; }
.comic-search-result-copy small { color: var(--muted); font: 14px/1.3 var(--sans); }
.comic-search-result-metric { color: #38ee91; font: 15px/1.2 var(--sans); white-space: nowrap; }
.comic-search-all {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #10262c;
  color: var(--gold);
  text-align: left;
  font-size: 16px;
}
.comic-hero {
  width: 60%;
  max-width: 960px;
  height: auto;
  min-height: 212px;
  padding: 28px 24px 36px;
}
.comic-hero h1 {
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.12;
  white-space: normal;
  text-wrap: balance;
  letter-spacing: -.04em;
}
.comic-kicker { font-size: clamp(10px, .85vw, 13px); line-height: 1.5; margin-bottom: 8px; }
.comic-subtitle { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; margin-top: 20px; text-wrap: balance; }
.comic-sponsors { width: min(976px, calc(100% - 2 * var(--page-gutter))); padding: 14px; }
.comic-sponsor-heading { margin-bottom: 14px; flex-wrap: wrap; }
.comic-sponsor-grid { gap: 12px; }
.comic-sponsor-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 12px;
  align-content: start;
  min-height: 126px;
  padding: 16px 12px;
}
.comic-sponsor-card .comic-icon { grid-row: span 2; width: 42px; height: 48px; }
.comic-sponsor-copy { min-width: 0; }
.comic-sponsor-copy h3 { padding: 0; margin: 0 0 8px; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.comic-sponsor-copy p { font-size: 15px; line-height: 1.4; }
.comic-sponsored { position: static; display: block; grid-column: 2; justify-self: start; font-size: 10px; }
.comic-browse,
.comic-inner .page,
.comic-footer {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  margin-left: auto;
  margin-right: auto;
}
.comic-browse { margin-top: 32px; }
.comic-browse-heading { gap: 20px; margin-bottom: 20px; align-items: center; }
.comic-browse-title { gap: 16px; }
.comic-browse h2 { font-size: clamp(30px, 3vw, 40px); }
.comic-filters { gap: 10px; }
.comic-filters select { min-height: 44px; }
.comic-listings { gap: 16px; }
.comic-listing { padding: 24px 20px 20px; }
.comic-listing-top { gap: 16px; align-items: flex-start; }
.comic-listing-top > div { min-width: 0; flex: 1; padding-right: 24px; }
.comic-listing h3 { line-height: 1.2; overflow-wrap: anywhere; }
.comic-listing-description { line-height: 1.5; }
.comic-icon { flex-shrink: 0; }
.comic-metrics { grid-template-columns: 65px 60px minmax(30px, 1fr) 92px; gap: 12px; margin-top: 24px; }
.comic-metric.price { padding-left: 12px; }
.comic-metric.price b { white-space: normal; }
.comic-footer { gap: 24px; padding: 32px 0; }
.comic-inner .page { padding-top: 32px; }
.comic-inner .shell,
.comic-inner .board { padding: 24px; }
.comic-inner input,
.comic-inner select,
.comic-inner textarea,
.comic-home input,
.comic-home select,
.comic-home textarea { font-size: 16px !important; }
#browseTitle { scroll-margin-top: 20px; }

/* Collections is an account workspace: one readable type scale, no tiny labels. */
.comic-dashboard .dashboard-shell {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  grid-template-columns: 260px minmax(0, 1fr);
  margin: 32px auto;
}
.comic-dashboard .dashboard-main {
  padding: 32px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.comic-dashboard .dashboard-main h1 { margin: 8px 0 12px; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }
.comic-dashboard .dashboard-main h2 { font-size: 24px; line-height: 1.25; margin: 8px 0 12px; }
.comic-dashboard .dashboard-main p { font-size: 16px; line-height: 1.6; }
.comic-dashboard .eyebrow { font: 600 12px/1.5 system-ui, sans-serif; letter-spacing: .07em; }
.comic-dashboard .card { padding: 24px; }
.comic-dashboard .page-heading { margin-bottom: 24px; padding-bottom: 24px; }
.comic-dashboard .primary,
.comic-dashboard .secondary,
.comic-dashboard .text-link { font: 600 15px/1.4 system-ui, sans-serif; min-height: 44px; }
.comic-dashboard .primary,
.comic-dashboard .secondary { padding: 12px 16px; }
.comic-dashboard .fields label,
.comic-dashboard .social-grid label { font: 600 14px/1.5 system-ui, sans-serif; }
.comic-dashboard .fields label > span,
.comic-dashboard .profile-avatar small,
.comic-dashboard .save-status { font: 400 13px/1.5 system-ui, sans-serif; }
.comic-dashboard .fields input,
.comic-dashboard .fields textarea,
.comic-dashboard .social-grid input { font: 400 16px/1.5 system-ui, sans-serif; min-height: 48px; }
.comic-dashboard .sidebar { font-family: system-ui, sans-serif; }
.comic-dashboard .sidebar-head { padding: 24px 16px; gap: 12px; flex-wrap: wrap; }
.comic-dashboard .sidebar .brand { font-size: 28px; }
.comic-dashboard .dashboard-nav { padding: 24px 12px; }
.comic-dashboard .dashboard-nav button { font-size: 16px; min-height: 48px; }
.comic-dashboard .dashboard-nav button b { font-size: 12px; }
.comic-dashboard .role-switch button { font-size: 12px; min-height: 32px; }
.comic-dashboard .role-status { font-size: 12px; line-height: 1.4; }
.comic-dashboard .sidebar-account { padding: 16px; }
.comic-dashboard .sidebar-account span { font-size: 12px; }
.comic-dashboard .sidebar-account strong { font-size: 14px; overflow-wrap: anywhere; }
.comic-dashboard .sidebar-account a,
.comic-dashboard .sidebar-account button { font-size: 14px; min-height: 44px; }
.comic-dashboard .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.comic-dashboard .stats b { font: bold 28px/1.3 Georgia, serif; }
.comic-dashboard .stats span { font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.comic-dashboard .profile-editor { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
.comic-dashboard .overview-grid { grid-template-columns: 1fr 1fr; }
.comic-dashboard .profile-preview { grid-template-columns: 1fr; }
.comic-dashboard .profile-preview .text-link { grid-column: auto; }
.comic-dashboard .social-grid { gap: 16px; }
.comic-dashboard .signed-out { margin: 48px auto; padding: 32px; }
.comic-dashboard .favorite-card-stats small { font-size: 13px; }
.comic-dashboard .favorite-card-stats b { font: bold 22px/1.3 Georgia, serif; }
.comic-dashboard .panel.is-active { animation: none; }

/* Related listings use the same ink panels, typography and yellow labels. */
.comic-inner .related-startups { padding-top: 28px; border-top: 1px solid var(--line); }
.comic-inner .related-head { margin-bottom: 20px; gap: 16px; }
.comic-inner .related-head h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.comic-inner .related-head a { font-size: 16px; color: var(--gold); padding: 10px 0; }
.comic-inner .related-grid { gap: 16px; margin-top: 0; }
.comic-inner .related-grid .deal-card {
  min-width: 0;
  padding: 24px 20px;
  gap: 20px;
  border: 1px solid #31515c;
  border-radius: 7px;
  background: #061116;
  box-shadow: none;
}
.comic-inner .related-grid .deal-card::before,
.comic-inner .related-grid .deal-card::after { display: none; }
.comic-inner .related-grid .deal-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: none; }
.comic-inner .deal-top { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
.comic-inner .deal-logo { border-radius: 6px; border: 1px solid #42616a; background: #10282d !important; box-shadow: none; color: var(--gold); font: bold 24px/1 Georgia, serif; }
.comic-inner .deal-title-top { flex-wrap: wrap; align-items: center; gap: 8px; }
.comic-inner .deal-title h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.03em; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.comic-inner .deal-category { font: 15px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }
.comic-inner .deal-corner { height: auto; padding: 4px 8px; border: 0; border-radius: 2px; background: var(--gold); color: #030e12; font: 16px/1 'Refrenum Comic', Impact, sans-serif; letter-spacing: .03em; }
.comic-inner .deal-desc { font: 16px/1.5 var(--sans); color: #d4e0e4; max-width: none; }
.comic-inner .deal-bottom { gap: 12px; }
.comic-inner .deal-stat { padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.comic-inner .deal-stat:first-child { padding-left: 0; border-left: 0; }
.comic-inner .deal-stat small { font: 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.comic-inner .deal-stat b { margin-top: 6px; font: bold 22px/1.2 Georgia, serif; letter-spacing: -.02em; }

@media (max-width: 1120px) {
  .comic-header { grid-template-columns: auto 1fr auto 36px; grid-template-areas: 'brand navigation cta account' 'search search search search'; gap: 12px 20px; }
  .comic-header nav { justify-content: center; }
  .comic-header .comic-search { max-width: none; }
  .comic-listings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comic-browse-heading { flex-wrap: wrap; }
  .comic-filters { margin-left: 0; }
  .comic-dashboard .dashboard-main { padding: 24px; }
  .comic-dashboard .overview-grid { grid-template-columns: 1fr; }
  .comic-dashboard .profile-editor { grid-template-columns: 1fr; }
  .comic-dashboard .profile-avatar { align-items: flex-start; }
}
@media (max-width: 850px) {
  .comic-dashboard .dashboard-shell { display: block; }
  .comic-dashboard .sidebar { position: fixed; top: 0; bottom: 0; height: 100dvh; z-index: 1200; overflow-y: auto; }
  .comic-dashboard .dashboard-main { padding: 16px 20px 32px; }
  .comic-dashboard .mobile-head { margin-bottom: 24px; }
}
@media (max-width: 700px) {
  .comic-header { width: 100%; grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-areas: 'brand cta account' 'navigation navigation navigation' 'search search search'; gap: 12px; padding: 16px; }
  .comic-header nav { width: auto; min-height: 36px; height: auto; gap: 32px; order: 0; }
  .comic-header nav a { font-size: 17px; }
  .comic-header > .comic-brand { margin: 0; font-size: 32px; }
  .comic-header .comic-cta { font-size: 16px; padding: 0 14px; }
  .comic-header .comic-search { height: 44px; }
  .comic-search-dropdown { width: 100%; }
  .comic-search-result { gap: 10px; padding: 10px 8px; grid-template-columns: 32px minmax(0, 1fr) auto; }
  .comic-search-result-mark { width: 32px; height: 36px; font-size: 16px; }
  .comic-search-result-metric { font-size: 14px; }
  .comic-search-result-copy strong { font-size: 17px; }
  .comic-hero { width: calc(100% - 2 * var(--page-gutter)); min-height: 0; padding: 32px 0 36px; }
  .comic-hero h1 { font-size: clamp(36px, 9.5vw, 56px); line-height: 1.15; }
  .comic-kicker { font-size: 10px; letter-spacing: .06em; }
  .comic-subtitle { font-size: 18px; line-height: 1.5; margin-top: 20px; }
  .comic-sponsors { padding: 12px; }
  .comic-sponsor-grid { gap: 10px; }
  .comic-sponsor-heading { gap: 10px; }
  .comic-sponsor-card { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px 10px; }
  .comic-sponsor-card .comic-icon { width: 30px; height: 38px; }
  .comic-sponsor-copy h3 { font-size: 17px; }
  .comic-sponsor-copy p { font-size: 14px; }
  .comic-sponsored { font-size: 10px; padding: 3px 4px; }
  .comic-browse { margin-top: 28px; }
  .comic-browse-title { gap: 12px; }
  .comic-browse h2 { font-size: 32px; }
  .comic-filters { gap: 10px; }
  .comic-listings { grid-template-columns: 1fr; }
  .comic-listing { padding: 20px 16px; }
  .comic-listing-top { gap: 14px; }
  .comic-listing-top > div { padding-right: 16px; }
  .comic-metrics { grid-template-columns: 60px 56px minmax(28px, 1fr) 82px; gap: 8px; }
  .comic-metric.price { padding-left: 10px; }
  .comic-metric.growth { padding-left: 10px; }
  .comic-metric b { font-size: 19px; }
  .comic-inner .page { padding-top: 20px; }
  .comic-inner .shell, .comic-inner .board { padding: 16px; }
  .comic-inner .related-grid { grid-template-columns: 1fr; }
  .comic-inner .related-grid .deal-card { padding: 20px; }
  .comic-inner .deal-stat b { font-size: 21px; }
  .comic-dashboard .dashboard-shell { margin-top: 20px; }
  .comic-dashboard .dashboard-main { padding: 12px 16px 24px; }
  .comic-dashboard .dashboard-main h1 { font-size: 30px; }
  .comic-dashboard .dashboard-main h2 { font-size: 23px; }
  .comic-dashboard .card { padding: 20px; }
  .comic-dashboard .social-grid { grid-template-columns: 1fr; }
  .comic-dashboard .page-heading { gap: 16px; }
  .comic-dashboard .signed-out { margin: 24px auto; padding: 24px 20px; }
}
/* Keep the decorative corner notes clear of navigation and character faces. */
.comic-header { width: min(1144px, calc(100% - 2 * var(--page-gutter))); }
.comic-sticker { pointer-events: none; }
.comic-dashboard .sidebar-head { display: grid; justify-items: start; gap: 16px; }
.comic-dashboard .sidebar-head .role-switch { margin-left: 0; }
@media (max-width: 1500px) { .comic-sticker { display: none; } }
@media (max-width: 700px) { .comic-header { width: 100%; } }
.comic-search-dropdown[data-placement=above] { top: auto; bottom: calc(100% + 10px); }
.comic-inner .hero-search-field { margin: 0; position: relative; }
.comic-inner .hero-search-field .comic-search-dropdown { width: 100%; }
.comic-inner .hero .comic-search-status { margin: 0; padding: 10px 12px; font: 15px/1.4 var(--sans); }
.comic-inner .hero-search-card:focus-within { z-index: 130; }
/* A single-line headline that scales to the available central canvas. */
.comic-hero h1 {
  white-space: nowrap;
  text-wrap: nowrap;
  font-size: clamp(24px, 4.65vw, 72px);
}
.comic-browse-title { align-items: baseline; flex-wrap: wrap; }
.comic-browse-heading { margin-bottom: 24px; }

/* Let content set the metric widths; never squeeze numbers against dividers. */
.comic-listing { container: startup-card / inline-size; display: flex; flex-direction: column; }
.comic-listing-link { display: flex; flex-direction: column; flex: 1; }
.comic-metrics {
  grid-template-columns: max-content max-content minmax(36px, 1fr) max-content;
  column-gap: 16px;
  margin-top: auto;
  padding-top: 24px;
}
.comic-metrics .comic-metric { padding-left: 0; border-left: 0; }
.comic-metrics .comic-metric.growth,
.comic-metrics .comic-metric.price { padding-left: 16px; border-left: 1px solid var(--line); }
.comic-metrics .comic-metric b { white-space: nowrap; }
.comic-metrics .comic-spark { min-width: 0; }
@container startup-card (max-width: 340px) {
  .comic-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .comic-metrics .comic-metric.price { grid-column: 3; grid-row: 1; }
  .comic-metrics .comic-spark { grid-column: 1 / -1; grid-row: 2; height: 32px; }
}

/* One global search, a compact catalog introduction, and aligned filters. */
.comic-inner .catalog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--line);
}
.comic-inner .catalog-hero::before { display: none; }
.comic-inner .catalog-hero h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.15; margin: 8px 0 12px; }
.comic-inner .catalog-hero p { max-width: 650px; margin: 0; font-size: 17px; line-height: 1.5; }
.comic-inner .catalog-hero .eyebrow { font: 12px/1.5 var(--sans); letter-spacing: .12em; color: var(--gold); }
.comic-inner .catalog-hero .comic-cta { min-height: 44px; }
.comic-inner .filters-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.comic-inner .filter-field label { font: 14px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
.comic-inner .filter-select { min-height: 44px; }

/* Guest preview is restored after 12 public listings. */
.comic-access-gate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 340px;
  margin: 24px 0;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #061116;
}
.comic-locked-preview { position: absolute; inset: 22px; z-index: -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; opacity: .22; filter: blur(5px); }
.comic-locked-preview span { border: 1px solid #52727a; border-radius: 7px; background: repeating-linear-gradient(0deg, #10262c 0 22px, #061116 22px 48px); }
.comic-access-copy { display: grid; justify-items: center; gap: 16px; width: min(560px, 100%); text-align: center; }
.comic-access-kicker { font: 22px/1.1 'Refrenum Comic', Impact, sans-serif; color: var(--gold); letter-spacing: .04em; }
.comic-access-copy h2 { margin: 0; font: bold 36px/1.2 Georgia, serif; letter-spacing: -.03em; text-wrap: balance; }
.comic-access-copy p { margin: 0; max-width: 460px; color: #cad8de; font: 18px/1.5 var(--sans); }
.comic-access-copy .comic-cta { min-height: 48px; padding: 12px 24px; }
.comic-access-copy small { color: var(--muted); font: 14px/1.4 var(--sans); }
.comic-search-unlock { width: 100%; min-height: 44px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--gold); border-radius: 4px; background: var(--gold); color: #030e12; text-align: left; font: 16px/1.4 var(--sans); }
@media (max-width: 900px) {
  .comic-inner .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .comic-hero h1 { font-size: clamp(20px, 7.5vw, 52px); }
  .comic-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .comic-metrics .comic-metric.price { grid-column: 3; grid-row: 1; }
  .comic-metrics .comic-spark { grid-column: 1 / -1; grid-row: 2; height: 32px; }
  .comic-metrics .comic-metric.growth, .comic-metrics .comic-metric.price { padding-left: 12px; }
  .comic-inner .catalog-hero { grid-template-columns: 1fr; align-items: start; gap: 20px; margin-bottom: 24px; padding-bottom: 24px; }
  .comic-inner .catalog-hero h1 { font-size: 36px; }
  .comic-inner .catalog-hero .comic-cta { justify-self: start; }
  .comic-access-gate { padding: 28px 20px; }
  .comic-access-copy h2 { font-size: 30px; }
  .comic-access-copy p { font-size: 17px; }
}
/* Keep catalog labels and values on matching baselines as well. */
.comic-inner .sale-stats { align-items: start; }
.comic-inner .sale-stats > div:first-child { padding-left: 0; border-left: 0; }
.comic-inner .sale-stats small { display: block; min-height: 20px; font: 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.comic-inner .sale-stats b { display: block; margin-top: 6px; font: bold 20px/1.2 Georgia, serif; }
.comic-inner .sale-stats b.good { font: bold 20px/1.2 var(--sans); }
@media (max-width: 700px) {
  .comic-inner .board { padding: 0; }
  .comic-inner .sale-stats > div { padding-left: 10px; }
  .comic-inner .sale-stats > div:first-child { padding-left: 0; }
  .comic-inner .sale-stats b { font-size: 19px; }
}
/* The dark browse surface needs its own inner gutter, beyond page margins. */
.comic-browse { padding: 28px 36px 32px; border-radius: 8px; }
@media (max-width: 900px) { .comic-browse { padding: 24px; } }
@media (max-width: 700px) { .comic-browse { padding: 24px 16px; } }
@container startup-card (max-width: 250px) {
  .comic-metrics { column-gap: 10px; }
  .comic-metrics .comic-metric b, .comic-metrics .comic-metric.growth b { font-size: 17px; }
  .comic-metrics .comic-metric small { font-size: 13px; }
  .comic-metrics .comic-metric.growth, .comic-metrics .comic-metric.price { padding-left: 8px; }
}
@container startup-card (max-width: 250px) {
  .comic-metrics { align-items: start; }
  .comic-metrics .comic-metric small { white-space: normal; line-height: 1.3; }
}

/* Phone listings, including touch screens in landscape orientation. */
@media (max-width: 700px), (max-width: 980px) and (hover: none) and (pointer: coarse) {
  .comic-home .comic-listing { padding: 20px 16px; }
  .comic-home .comic-listing-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
  }
  .comic-home .comic-listing-top > div { display: contents; }
  .comic-home .comic-listing-top > .comic-icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 48px; }
  .comic-home .comic-listing .comic-category { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: 28px; margin: 0; padding-right: 38px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
  .comic-home .comic-listing h3 { grid-column: 2; grid-row: 2; margin: 0; padding-right: 0; font-size: clamp(22px, 6vw, 26px); line-height: 1.2; }
  .comic-home .comic-listing-description { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0; font-size: 16px; line-height: 1.5; }
  .comic-home .comic-bookmark { top: 8px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; }
  .comic-home .comic-metrics {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.25fr);
    gap: 0;
    align-items: start;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .comic-home .comic-metrics .comic-spark { display: none; }
  .comic-home .comic-metrics .comic-metric { grid-row: 1; }
  .comic-home .comic-metrics .comic-metric.growth { grid-column: 2; }
  .comic-home .comic-metrics .comic-metric.price { grid-column: 3; }
  .comic-home .comic-metrics .comic-metric.growth,
  .comic-home .comic-metrics .comic-metric.price { padding-left: 12px; }
  .comic-home .comic-metrics .comic-metric b { font-size: clamp(17px, 5.1vw, 22px); line-height: 1.25; }
  .comic-home .comic-metrics .comic-metric small { margin-top: 5px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
}

/* Four desktop listings per row, with the three financial figures kept together. */
.comic-home .comic-listings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.comic-home .comic-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: 0; align-items: start; }
.comic-home .comic-metrics .comic-metric { grid-row: 1; }
.comic-home .comic-metrics .comic-metric.growth { grid-column: 2; padding-left: 12px; }
.comic-home .comic-metrics .comic-metric.price { grid-column: 3; padding-left: 12px; }
@media (max-width: 1199px) { .comic-home .comic-listings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .comic-home .comic-listings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .comic-home .comic-listings { grid-template-columns: 1fr; } }
@media (min-width: 1001px) {
  .comic-home .comic-listing-top { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
  .comic-home .comic-listing-top > div { display: contents; }
  .comic-home .comic-listing-top > .comic-icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 48px; }
  .comic-home .comic-category { grid-column: 2; grid-row: 1; min-height: 28px; margin: 0; padding-right: 24px; display: flex; align-items: center; }
  .comic-home .comic-listing h3 { grid-column: 2; grid-row: 2; margin: 0; font-size: 22px; }
  .comic-home .comic-listing-description { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0; font-size: 16px; }
}

/* Founder portfolio: use the same startup-card grid as the marketplace. */
.comic-inner .startup-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.comic-inner .startup-card { min-width: 0; padding: 20px 16px; border: 1px solid #31515c; border-radius: 7px; background: #061116; box-shadow: none; gap: 20px; }
.comic-inner .startup-card::before { display: none; }
.comic-inner .startup-card-head { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.comic-inner .startup-logo { width: 40px; height: 44px; border: 1px solid #42616a; border-radius: 5px; background: #10282d !important; color: var(--gold); box-shadow: none; font-size: 20px; }
.comic-inner .startup-name { padding: 0; }
.comic-inner .startup-name b { color: var(--ink); font: bold 22px/1.2 Georgia, serif; white-space: normal; overflow-wrap: anywhere; letter-spacing: -.03em; }
.comic-inner .startup-name span { font: 14px/1.4 var(--sans); white-space: normal; }
.comic-inner .startup-card .status-pill { grid-column: 1 / -1; justify-self: start; height: auto; padding: 4px 8px; border: 0; border-radius: 2px; background: var(--gold); color: #030e12; font: 16px/1.2 'Refrenum Comic', Impact, sans-serif; }
.comic-inner .startup-desc { display: block; min-height: 0; margin: 0; color: #c2d2d9; font: 16px/1.5 var(--sans); overflow: visible; }
.comic-inner .startup-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.comic-inner .metric-box { min-width: 0; padding: 0 0 0 8px; border: 0; border-left: 1px solid #29434d; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
.comic-inner .metric-box:first-child { border-left: 0; padding-left: 0; }
.comic-inner .metric-box small { color: #a6bec6; font: 12px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.comic-inner .metric-box b { margin-top: 6px; font: bold 19px/1.2 Georgia, serif; white-space: nowrap; }
.comic-inner .metric-box b.growth-up { color: #38ee91; font-family: var(--sans); }
@media (max-width: 1199px) { .comic-inner .startup-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .comic-inner .startup-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .comic-inner .startup-list { grid-template-columns: 1fr; } }

/* Consistent Title Case for interface labels; descriptions keep sentence case. */
body:is(.comic-home, .comic-inner) :is(h1, h2, h3, button, .comic-header nav a,
  .comic-cta, .primary, .secondary, .text-link, .comic-more, .back-copy b,
  .related-head > a, .portfolio-head > a, .catalog-card-link, .collection-panel-link,
  .collection-explore, .sale-pill, .status-pill, .chip, .tag, .mini-tag,
  .comic-category, .deal-category, .collection-category, .filter-field > label,
  .comic-metric small, .sale-stats small, .deal-stat small,
  .collection-panel-metrics small, .metric-box small, .panel-title > b,
  .startup-name b, .startup-name span, .sheet-title > b, .foot > a,
  .overview-fact dt, .select-pill small) { text-transform: capitalize; }
/* Public footer: the same ink, cream type and yellow accents as the marketplace. */
.refrenum-footer { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 28px 40px; width: min(var(--content-width), calc(100% - 2 * var(--page-gutter))); margin: 28px auto 0; padding: 32px; border: 1px solid #31515c; border-top: 3px solid var(--gold); border-radius: 7px; background: radial-gradient(#51bdd10b 1px, transparent 1.5px) 0 0 / 7px 7px, #061116; }
.comic-inner .app .refrenum-footer { width: 100%; }
.refrenum-footer > * { min-width: 0; }
.refrenum-footer .comic-brand { display: inline-block; font-size: 34px; }
.refrenum-footer-brand p { margin: 12px 0; color: var(--muted); font: 16px/1.5 var(--sans); }
.refrenum-footer-market { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font: 16px/1.4 var(--sans); }
.refrenum-footer h2 { margin: 0 0 10px; color: var(--gold); font: 24px/1.2 'Refrenum Comic', Impact, sans-serif; letter-spacing: .03em; }
.refrenum-footer ul { list-style: none; padding: 0; margin: 0; }
.refrenum-footer nav a { display: flex; align-items: center; min-height: 44px; padding: 7px 0; color: #d4e0e4; font: 16px/1.4 var(--sans); overflow-wrap: anywhere; }
.refrenum-footer a:hover { color: var(--gold); }
.refrenum-footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid #29434d; color: var(--muted); font: 13px/1.4 var(--sans); }
@media(max-width:700px) {
  .refrenum-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding: 22px 18px; }
  .refrenum-footer-brand { grid-column: 1 / -1; }
  .refrenum-footer h2 { font-size: 22px; }
  .refrenum-footer nav a { font-size: 15px; }
}