.comic-hero {
  min-height: max(1100px, calc(100svh - 56px));
  padding: 112px 0 76px;
  background: #100d14;
}

.comic-hero-art {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  opacity: 0.64;
  transform: scale(1.03);
}

.comic-hero-art img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.2);
  filter: saturate(0.9) contrast(1.05);
}

.comic-hero-art img:nth-child(1) { object-position: center 35%; }
.comic-hero-art img:nth-child(2) { object-position: center 25%; }
.comic-hero-art img:nth-child(3) { object-position: center 28%; }
.comic-hero-art img:nth-child(4) { object-position: center 38%; }

.comic-hero .hero-shade {
  background:
    radial-gradient(circle at 50% 22%, rgba(103, 85, 255, 0.12), transparent 36%),
    linear-gradient(90deg, rgba(13, 10, 17, 0.9) 0%, rgba(13, 10, 17, 0.78) 50%, rgba(13, 10, 17, 0.9) 100%),
    linear-gradient(180deg, rgba(13, 10, 17, 0.35) 0%, rgba(13, 10, 17, 0.88) 100%);
}

.comic-hero .hero-copy {
  max-width: 1220px;
  text-align: center;
}

.comic-hero .hero-copy h1 {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  margin: 0 auto 18px;
  font-size: 4.6rem;
  white-space: nowrap;
}

.comic-hero .hero-copy h1 .hero-title-line {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  white-space: inherit;
}

.comic-hero .hero-copy h1 em {
  display: inline;
  width: auto;
  margin-inline: 0;
  white-space: inherit;
}

.comic-hero .hero-copy > p {
  max-width: 720px;
  margin: 0 auto 22px;
  font-size: var(--type-hero-copy);
}

.comic-breadcrumb {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.74rem;
  font-weight: 650;
  text-align: left;
}

.comic-breadcrumb a { color: rgba(255, 255, 255, 0.78); }
.comic-breadcrumb a:hover { color: #fff; }
.comic-breadcrumb svg { width: 13px; height: 13px; }

.comic-benefit-tags {
  display: flex;
  max-width: 840px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 22px;
}

.comic-benefit-tags span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(17, 13, 21, 0.28);
  backdrop-filter: blur(10px);
  font-size: 0.68rem;
  font-weight: 700;
}

.comic-generator {
  width: min(980px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 18px;
}

.comic-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 15px;
  padding: 4px;
  border-radius: 10px;
  background: #eeecf0;
}

.comic-mode-tabs button {
  display: inline-flex;
  min-height: 40px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  color: #625d67;
  background: transparent;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 0.76rem;
  font-weight: 750;
}

.comic-mode-tabs button:hover,
.comic-mode-tabs button:focus-visible { color: #95145a; border-color: var(--button-border-hover); background: var(--button-surface-hover); }
.comic-mode-tabs button.is-active { color: #fff; border-color: var(--button-primary-border); background: var(--brand-gradient); box-shadow: none; }
.comic-mode-tabs button:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; }
.comic-mode-tabs svg { width: 16px; height: 16px; }

.comic-input-label {
  display: block;
  margin: 0 4px 3px;
  color: #29242d;
  font-family: "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
}

.comic-input-help {
  margin: 0 4px 8px;
  color: #77717b;
  font-size: 0.74rem;
  line-height: 1.45;
}

.comic-generator textarea { min-height: 92px; }
.comic-generator .hero-model-picker { min-width: 202px; }
.comic-generator .hero-model-trigger { min-width: 202px; }
.comic-generator .hero-model-menu { top: auto; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); max-height: min(292px, 40vh); }

.comic-hero .hero-copy > .comic-credit-note {
  display: grid;
  width: min(820px, 100%);
  max-width: 820px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 14px auto 0;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(17, 13, 21, 0.46);
  backdrop-filter: blur(8px);
  font-size: 0.72rem;
  line-height: 1.55;
  text-align: left;
}

.comic-credit-note svg { width: 16px; height: 16px; margin-top: 1px; color: #ff82c6; }
.comic-credit-note strong { color: #fff; }

.comic-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -18px auto 30px;
}

.comic-filter button {
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  color: #514b57;
  background: var(--button-surface);
  cursor: pointer;
  font: 700 0.82rem/1 "DM Sans", sans-serif;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
}

.comic-filter button:hover,
.comic-filter button:focus-visible { border-color: var(--button-border-hover); color: #8c1654; background: var(--button-surface-hover); transform: translateY(-1px); }
.comic-filter button.is-active { border-color: var(--button-primary-border); color: #fff; background: var(--brand-gradient); box-shadow: none; }
.comic-filter button:focus-visible { outline: 2px solid var(--button-focus); outline-offset: 2px; }

.comic-gallery {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.comic-work-card {
  height: auto;
  aspect-ratio: 3 / 4;
  border: 5px solid #f8f6f2;
  border-radius: 5px;
  box-shadow: 0 10px 28px rgba(34, 25, 40, 0.12);
}

.comic-work-card[hidden] { display: none; }
.comic-work-card.comic-wide { grid-column: span 2; }
.comic-work-card.comic-tall { grid-row: span 2; }
.comic-work-card img { object-position: center; }

.comic-panel-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 48.7%, rgba(255, 255, 255, 0.86) 48.7%, rgba(255, 255, 255, 0.86) 50.3%, transparent 50.3%),
    linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, 0.84) 62%, rgba(255, 255, 255, 0.84) 64%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0.42;
}

.comic-work-card .work-meta { z-index: 3; }
.comic-work-card .work-prompt { z-index: 4; }

.comic-centered-eyebrow { display: flex; width: fit-content; margin: 0 auto 20px; }
.comic-scenario-grid .testimonial-card { min-height: 340px; }
.comic-scenario-grid .testimonial-card h3 { margin: 12px 0 0; color: #27222b; font-size: 1.18rem; line-height: 1.4; }
.comic-scenario-grid .testimonial-card.featured h3 { color: #fff; }
.comic-scenario-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; color: #a81765; background: #fff0f8; }
.comic-scenario-icon svg { width: 22px; height: 22px; }
.comic-scenario-grid .featured .comic-scenario-icon { color: #fff; background: rgba(255, 255, 255, 0.12); }
.faq-list a { color: #a81765; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .comic-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comic-work-card.comic-wide { grid-column: span 2; }
}

@media (max-width: 820px) {
  .comic-hero { min-height: 0; padding-top: 96px; }
  .comic-hero-art { grid-template-columns: 1fr 1fr; opacity: 0.44; }
  .comic-hero .hero-shade { background: linear-gradient(180deg, rgba(13, 10, 17, 0.74) 0%, rgba(13, 10, 17, 0.93) 58%, rgba(13, 10, 17, 0.98) 100%); }
  .comic-hero .hero-copy h1 { font-size: 3.2rem; }
  .comic-gallery { grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .comic-hero { padding: 78px 0 52px; }
  .comic-hero .hero-copy {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
  }
  .comic-hero-art { gap: 7px; padding: 8px; opacity: 0.36; }
  .comic-hero-art img { border-width: 2px; }
  .comic-hero .hero-copy h1 { gap: 0.16em; font-size: 1.7rem; line-height: 1; }
  .comic-hero .hero-copy > p { font-size: var(--type-hero-copy); line-height: 1.6; }
  .comic-benefit-tags { gap: 5px; }
  .comic-benefit-tags span { min-height: 27px; padding: 0 9px; font-size: 0.61rem; }
  .comic-generator { padding: 14px; border-radius: 16px; }
  .comic-mode-tabs { overflow-x: auto; }
  .comic-mode-tabs button { min-width: 134px; flex: 0 0 auto; padding: 0 10px; }
  .comic-input-help { font-size: 0.69rem; }
  .comic-generator .hero-prompt-actions { gap: 10px; }
  .comic-generator .hero-input-tools { display: grid; width: 100%; grid-template-columns: 1fr 40px; }
  .comic-generator .hero-tool-button:first-child { justify-content: center; }
  .comic-generator .hero-model-picker { width: 100%; min-width: 0; grid-column: 1 / -1; }
  .comic-generator .hero-model-trigger { width: 100%; min-width: 0; }
  .comic-hero .hero-copy > .comic-credit-note { padding: 11px 12px; font-size: 0.67rem; }
  .comic-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .comic-filter button { flex: 0 0 auto; }
  .comic-gallery { grid-auto-rows: auto; grid-template-columns: 1fr 1fr; gap: 8px; }
  .comic-work-card,
  .comic-work-card.comic-wide,
  .comic-work-card.comic-tall { grid-column: span 1; grid-row: span 1; }
  .comic-work-card { border-width: 3px; }
  .comic-work-card .work-meta { right: 10px; bottom: 10px; left: 10px; }
  .comic-work-card .work-meta span { font-size: var(--type-gallery-meta); }
  .comic-work-card .work-meta strong { font-size: var(--type-gallery-title); }
}

@media (prefers-reduced-motion: reduce) {
  .comic-hero-art { transform: none; }
}