/* Shared visual system: charcoal, warm white, softened candy pink. */
:root {
  --accent: #e65380;
  --accent-hover: #ee6a92;
  --accent-soft: #f59bb7;
  --accent-deep: #c63d69;
  --accent-rgb: 230, 83, 128;
  --grad-lilac: linear-gradient(135deg, var(--accent-soft), var(--accent));
  --gold: var(--accent-soft);
  --purple-deep: var(--accent-deep);
  --bg: #111112;
  --bg-soft: #161617;
  --bg-elevated: #1b1b1d;
  --surface: #1c1c1f;
  --card: #202023;
  --card-2: #27272b;
  --text: #f5ecef;
  --muted: #c0bcb8;
  --dim: #aaa6a4;
  --line: rgba(245, 236, 239, .1);
  --line-strong: rgba(245, 236, 239, .2);
  --pink: var(--accent);
  --pink-bright: var(--accent-soft);
  --pink-deep: var(--accent-deep);
  --purple: var(--accent-soft);
  --grad-pink: linear-gradient(135deg, var(--accent), #d94c79);
  --grad-text: linear-gradient(100deg, var(--accent-soft), var(--accent));
  --button-pink: var(--accent);
  --button-pink-hover: var(--accent-hover);
  --button-pink-soft: var(--accent-soft);
  --button-gradient: var(--grad-pink);
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --container: 1320px;
  --container-wide: var(--container);
  --header-height: 88px;
  --shadow-md: 0 24px 56px rgba(0, 0, 0, .22);
}

body { background: var(--bg); color: var(--text); line-height: 1.7; }
body::before { display: none; }
h1, h2, h3, h4 { color: var(--text); font-weight: 600; letter-spacing: -.035em; overflow-wrap: normal; }
h1 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); line-height: 1.12; }
h2 { font-size: clamp(1.85rem, 3.2vw, 3rem); line-height: 1.2; }
h3 { line-height: 1.3; letter-spacing: -.025em; }
.container, .container-wide { width: min(var(--container), calc(100% - 80px)); }
.section { padding-block: clamp(72px, 8vw, 112px); }
.section-sm { padding-block: 64px; }
.section-head { gap: 32px; margin-bottom: 36px; }
.section-head > div { max-width: 680px; }
.section-head p { max-width: 580px; font-size: 1rem; line-height: 1.75; }
.section-head h2 { margin-bottom: 18px; }
.eyebrow { font-size: .75rem; letter-spacing: .12em; font-weight: 600; color: var(--pink); margin-bottom: 18px; }
.eyebrow::before { width: 20px; height: 1px; border-radius: 0; background: var(--pink); box-shadow: none; }
.link-arrow { font-size: .875rem; font-weight: 600; line-height: 1.5; }
.section-head > .link-arrow { flex-shrink: 0; padding-bottom: 4px; }
.badge, .tag { font-size: .75rem; font-weight: 500; letter-spacing: .01em; }
.badge-demo { color: #f0d5de; background: rgba(18, 17, 18, .65); border-color: rgba(255, 255, 255, .18); }
.small { font-size: .8125rem; }
.tiny { font-size: .75rem; }
.note { font-size: .8125rem; line-height: 1.6; border-radius: 12px; }

/* Navigation has a quiet surface and a clear active state. */
.site-header, .site-header.is-scrolled { background: rgba(17, 17, 18, .95); border-bottom: 1px solid var(--line); }
.header-inner { gap: 22px; }
.brand { gap: 11px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: #fff; border: 0; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.ui-panel-title { font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: var(--text); margin-bottom: 12px; }
.contextual-reading { margin-top: 18px; font-size: .9375rem; line-height: 1.8; color: var(--muted); }
.contextual-reading a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.04em; }
.brand-sub { font-size: .625rem; margin-top: 6px; font-weight: 500; letter-spacing: .1em; }
.nav-link { font-size: .8125rem; padding: 14px 10px; font-weight: 500; color: var(--muted); }
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active::after { background: var(--pink); box-shadow: none; }
.dropdown-panel { border-radius: 16px; padding: 10px; background: #202023; box-shadow: var(--shadow-md); }
.dropdown-link { padding: 12px; font-size: .875rem; }
.dropdown-link small { font-size: .75rem; margin-top: 5px; }
.header-actions .btn { min-height: 44px; font-size: .8125rem; padding-inline: 18px; }
.nav-toggle { width: 44px; height: 44px; }
.btn { min-height: 48px; border-radius: 12px; padding: 12px 22px; font-size: .875rem; font-weight: 650; letter-spacing: 0; line-height: 1.4; }
.btn-primary { background: var(--button-gradient); color: #ffffff; border-color: rgba(255, 255, 255, .12); box-shadow: 0 4px 16px rgba(222, 82, 126, .16); }
.btn-primary:hover { background: var(--button-pink-hover); color: #ffffff; box-shadow: 0 6px 22px rgba(222, 82, 126, .28); }
.btn-primary:active { background: var(--accent-deep); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--button-pink-soft); outline-offset: 4px; }
.btn-outline { background: transparent; border-color: #53504f; color: var(--text); }
.btn-outline:hover { background: rgba(222, 82, 126, .08); border-color: var(--button-pink-soft); }
.btn-lg { min-height: 54px; padding-inline: 25px; font-size: .9375rem; }
.btn-sm { min-height: 44px; }

/* Home: readable copy beside a composed portrait study. */
.hero-home { padding: 72px 0 80px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 80% 40%, rgba(147, 90, 108, .08), transparent 55%); }
.hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
.hero-copy { padding: 12px 0; }
.hero-kicker { margin-bottom: 28px; font-size: .75rem; font-weight: 500; letter-spacing: .09em; color: var(--muted); }
.hero-kicker::before { content: ''; width: 24px; height: 1px; background: var(--pink); }
.hero-title { max-width: 680px; font-size: clamp(2.8rem, 4.6vw, 4.6rem); line-height: 1.13; letter-spacing: -.045em; margin-bottom: 25px; font-weight: 600; text-wrap: initial; }
.hero-title .soft { color: var(--text); }
.hero-title .accent { color: var(--pink); background: none; }
.hero-sub { max-width: 490px; font-size: 1.0625rem; line-height: 1.8; margin-bottom: 30px; color: var(--muted); }
.hero-actions { gap: 12px; }
.hero-meta { margin-top: 28px; gap: 16px; font-size: .75rem; color: var(--muted); }
.hero-meta svg { color: var(--pink); }
.hero-caption { max-width: 460px; margin-top: 20px; font-size: .75rem; color: var(--dim); line-height: 1.65; }
.discovery-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 28px; }
.discovery-nav a { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 12px 28px; border-right: 1px solid var(--line); border-radius: 10px; transition: background .2s ease; }
.discovery-nav a:first-child { padding-left: 0; }
.discovery-nav a:last-child { padding-right: 0; border-right: 0; }
.discovery-nav a:hover { background: rgba(231, 156, 180, .04); }
.discovery-index { font-size: .6875rem; color: var(--pink); font-variant-numeric: tabular-nums; }
.discovery-nav strong { display: block; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.discovery-nav small { display: block; margin-top: 4px; font-size: .75rem; color: var(--dim); line-height: 1.5; }
.discovery-arrow { color: var(--pink); margin-left: auto; font-size: 1.25rem; }













.home-page #characters { background: #161617; }

/* Equal character cards give portraits and descriptions their own space. */
.character-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 22px; }
.character-mosaic .character-card { display: flex; flex-direction: column; min-height: 0; grid-column: auto; grid-row: auto; border: 1px solid var(--line); border-radius: 18px; background: #202023; }
.character-mosaic .character-card img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.character-mosaic .character-card::before, .character-mosaic .character-card::after { display: none; }
.character-mosaic .character-card:hover img { transform: none; }
.character-mosaic .character-card:hover { border-color: #8c6571; background: #252326; }
.character-card { transition: border-color .2s ease, background .2s ease; }
.character-mosaic .char-content { position: static; padding: 20px; flex: 1; display: flex; flex-direction: column; }
.character-mosaic .char-name { font-size: 1.3rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; margin-bottom: 6px; }
.character-mosaic .char-persona { font-size: .75rem; color: var(--pink); text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.character-mosaic .char-desc { font-size: .8125rem; line-height: 1.7; color: var(--muted); margin-bottom: 18px; max-width: none; }
.character-mosaic .char-tags { display: none; }
.character-mosaic .char-cta { margin-top: auto; font-size: .75rem; color: var(--text); padding-top: 4px; }
.char-style { font-size: .6875rem; padding: 5px 9px; letter-spacing: .03em; font-weight: 500; }
.char-heart { display: none; }
.mosaic-footnote { margin-top: 24px; gap: 28px; align-items: center; }
.mosaic-footnote p { font-size: .75rem; line-height: 1.7; max-width: 740px; }
.mosaic-footnote .link-arrow { font-size: .8125rem; flex-shrink: 0; }

/* Consistent surfaces across guides, previews and editorial pages. */
.chat-window, .builder-shell, .builder-controls, .builder-preview,
.creator-shell, .creator-sidebar, .creator-options, .creator-canvas,
.gen-shell, .gen-controls, .gen-preview, .phone,
.adult-panel, .privacy-panel, .transparency-card, .profile-info,
.compare-card, .scenario-card, .tone-card, .flirty-card, .type-card,
.adult-style, .blog-card, .article-card, .feature-card, .guide-card,
.pb-controls, .pb-preview, .toc, .legal-nav, .aside-cta,
.prompt-template, .pull-quote, .dialogue-card { background: var(--surface); border-color: var(--line); box-shadow: none; }
.chat-feature-copy > p, .editorial-copy > p, .page-sub, .about-hero p,
.privacy-panel > div > p, .compare-body p { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.chat-feature-list { gap: 22px; }
.chat-feature-list strong { font-size: .9375rem; font-weight: 600; }
.chat-feature-list li { font-size: .875rem; }
.chat-person strong { font-size: .9375rem; }
.chat-status, .chat-date { font-size: .75rem; }
.chat-body { padding: 24px; }
.chat-body .msg { font-size: .875rem; line-height: 1.65; padding: 12px 16px; }
.chat-window .chat-header { padding: 20px 24px; }
.chat-window .chat-context { font-size: .75rem; }
.chat-window .chat-input input { font-size: .9375rem; }
.chat-window::before { display: none; }
.msg.them { background: #2b292e; }
.msg.me { background: #6b4652; }
.panel-top h3 { font-size: 1.35rem; }
.field-label, .field-value { font-size: .75rem; letter-spacing: .03em; }
.choice { font-size: .8125rem; min-height: 40px; padding: 9px 12px; }
.creator-side { background: #1a1a1c; }
.creator-side h3 { font-size: .8125rem; letter-spacing: .04em; }
.creator-side p { font-size: .75rem; line-height: 1.7; }
.creator-nav a { font-size: .8125rem; min-height: 44px; }
.creator-options .choice, .gen-control-block .choice { font-size: .75rem; min-height: 40px; }
.gen-control-block .field-label, .gen-range .range-label { font-size: .75rem; }
.gen-controls-head strong, .gen-controls-head span { font-size: .75rem; }
.swatch { min-height: 40px; font-size: .75rem; }
.setting-row label, .setting-row .setting-name, .setting-value { font-size: .875rem; }
.relationship-band p, .story-card p, .scenario-body p { font-size: .875rem; line-height: 1.75; }
.phone-glow { display: none; }
.device-caption { font-size: .75rem; }
.device-caption strong { font-size: .8125rem; }
.choice[aria-pressed="true"], .filter-btn.active, .filter-btn[aria-pressed="true"] { background: rgba(222, 82, 126, .12); border-color: var(--button-pink); color: #efabc1; }
.builder-summary p, .preview-persona { font-size: .75rem; letter-spacing: 0; }
.preview-name, .canvas-label strong, .vp-caption strong { font-weight: 600; letter-spacing: -.03em; }
.compare-body { padding: 26px; }
.compare-body h3 { font-size: 1.65rem; }
.adult-panel-head p, .adult-info p, .step p, .principle p,
.tone-card span, .privacy-point span { font-size: .875rem; line-height: 1.75; }
.adult-info h3, .tone-card strong, .privacy-point strong { font-size: .9375rem; }
.step h3 { font-size: 1.4rem; }
.step-no { margin-bottom: 25px; font-size: .9375rem; font-weight: 600; color: var(--pink); }
.page-title, .anime-hero h1 { font-size: clamp(2.5rem, 4.7vw, 4.2rem); line-height: 1.14; letter-spacing: -.04em; }
.page-hero, .about-hero, .gen-hero { padding-top: 54px; }
.breadcrumbs { font-size: .75rem; margin-bottom: 28px; }
.directory-tools { background: #1c1c1f; border-radius: 16px; padding: 18px; border: 1px solid var(--line); gap: 16px; }
.directory-toolbar { background: rgba(22, 22, 23, .96); }
.toolbar-inner { flex-wrap: wrap; gap: 20px; align-items: center; }
.directory-tools { flex-wrap: wrap; }
.character-count { font-size: .8125rem; }
.filter-btn { font-size: .8125rem; min-height: 44px; }
.character-search input { font-size: .9375rem; min-height: 44px; }
.character-search input:focus-visible, .pb-field input:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.characters-grid { gap: 20px; }
.directory-card { display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.directory-card img { position: static; height: auto; aspect-ratio: 4 / 5; object-position: center 25%; }
.directory-card::after { display: none; }
.directory-card:hover img { transform: none; }
.directory-card .dir-style { font-size: .6875rem; font-weight: 500; letter-spacing: .02em; padding: 5px 9px; }
.directory-card .dir-content { position: static; padding: 20px; display: flex; flex-direction: column; flex: 1; }
.dir-content h3 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 6px; }
.dir-content p { font-size: .8125rem; line-height: 1.7; color: var(--muted); margin-bottom: 16px; }
.dir-persona { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--pink); }
.dir-link { font-size: .8125rem; color: var(--text); margin-top: auto; }
.directory-card .char-tags .tag { font-size: .6875rem; padding: 4px 7px; }
.directory-content-grid p, .image-guide-grid p { font-size: 1rem; line-height: 1.8; }
.post-card, .featured-post, .personality-builder { background: var(--surface); border-color: var(--line); }
.featured-post { height: auto; min-height: 460px; }
.featured-body h2 { line-height: 1.25; }
.featured-body p, .post-body p, .post-card--wide .post-body p, .blog-hero p { font-size: .9375rem; line-height: 1.8; }
.post-meta { font-size: .75rem; }
.blog-cat { padding: 8px 12px; font-size: .75rem; }
.post-body { padding: 24px; }
.post-body h3 { font-size: 1.35rem; line-height: 1.3; }
.post-link { font-size: .875rem; }
.pb-field label, .pb-traits span, .pb-controls .range-row output { font-size: .75rem; letter-spacing: 0; }
.pb-field input { min-height: 44px; font-size: 1rem; }
.pb-summary, .pb-traits strong { font-size: .875rem; }
.diagnose-row { font-size: .875rem; }
.diagnose-head { font-size: .75rem; }
.article-body p, .article-body li, .legal-body p, .legal-body li, .legal-body ul { font-size: 1rem; line-height: 1.85; }
.article-body h2, .legal-body h2 { font-size: 1.75rem; line-height: 1.3; margin-top: 40px; }
.article-body h3 { font-size: 1.3rem; }
.toc a, .legal-nav a { font-size: .8125rem; line-height: 1.6; padding-block: 4px; }
.toc h2, .legal-nav h2 { font-size: .75rem; }
.blog-card p, .article-card p, .related-link strong { font-size: .875rem; line-height: 1.7; }
.faq-list { border: 0; display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; background: #1a1a1c; padding-inline: 24px; }
.faq-item summary, .article-faq .faq-item summary { font-size: .9375rem; font-weight: 500; padding-block: 22px; }
.faq-item[open] { border-color: #684b54; background: #201e20; }
.faq-answer, .article-faq .faq-answer { font-size: .9375rem; padding-bottom: 24px; line-height: 1.8; }
.faq-columns .faq-intro p { font-size: 1rem; }
.faq-icon { width: 30px; height: 30px; }
.final-cta { background: #242021; border-color: #49373d; border-radius: 28px; padding-block: 72px; }
.final-cta::before, .final-cta::after { display: none; }
.final-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.04em; }
.final-cta p { font-size: 1rem; color: var(--muted); line-height: 1.8; }
.final-cta .note { color: var(--muted); font-size: .75rem; }
.site-footer { background: #0e0e0f; margin-top: 80px; }
.footer-brand p { font-size: .875rem; }
.footer-col h3 { font-size: .75rem; color: var(--text); font-weight: 600; letter-spacing: .08em; }
.footer-links { gap: 12px; }
.footer-links a { font-size: .875rem; }
.footer-bottom, .footer-bottom p { font-size: .75rem; color: var(--dim); }

/* Single image panel for the homepage hero. */
.hero-visual {
  position: relative;
  width: 100%;
  height: clamp(320px, 32vw, 440px);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #242124;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-visual.hero-video {
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: center;
  background: #111112;
}
.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 760px) {
  .hero-visual { height: clamp(240px, 58vw, 360px); border-radius: 18px; }
}

/* Give editorial media a definite box; intrinsic portrait sizes must not set row height. */
.image-panel {
  height: clamp(300px, 29vw, 400px);
  min-height: 0;
  width: 100%;
}
.image-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.image-panel img[src*="placeholder-"] { object-fit: contain; background: #242124; }
.image-panel .panel-caption { font-size: .75rem; line-height: 1.6; left: 20px; right: 20px; bottom: 18px; }
.media-split, .media-split.reverse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.copy-block { min-width: 0; }
.copy-block p { font-size: .9375rem; line-height: 1.8; }
.style-choice { height: 280px; min-height: 0; }
.virtual-portrait { height: clamp(340px, 32vw, 440px); min-height: 0; }
.gen-output { height: 260px; min-height: 0; }
.before-after > div { position: relative; height: clamp(240px, 24vw, 330px); min-height: 0; overflow: hidden; }
.style-choice img, .virtual-portrait img, .gen-output img, .before-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.featured-post { min-height: 380px; }
.featured-media { min-height: 320px; max-height: none; }
.post-media { min-height: 0; height: 230px; }
.post-card--wide .post-media { min-height: 0; height: auto; align-self: stretch; }
.featured-media img, .post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-hero-image { max-height: none; }
.article-hero-image img { height: clamp(240px, 26vw, 360px); object-position: center; }
.article-body .article-hero-image {
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0 0 32px;
}

@media (max-width: 820px) {
  .media-split, .media-split.reverse { grid-template-columns: 1fr; gap: 28px; }
  .image-panel { height: 320px; }
  .virtual-portrait { height: 360px; }
  .featured-media { min-height: 0; height: 280px; }
  .post-card--wide .post-media { min-height: 0; height: 250px; }
}
@media (max-width: 480px) {
  .image-panel { height: 240px; border-radius: 16px; }
  .image-panel .panel-caption { left: 16px; right: 16px; bottom: 14px; }
  .style-choice { height: 220px; }
  .virtual-portrait { height: 300px; }
  .gen-output { height: 200px; }
  .before-after > div { height: 220px; min-height: 0; }
  .before-after img { min-height: 0; }
  .featured-media, .post-card--wide .post-media { height: 220px; }
  .post-media { height: 200px; }
  .article-hero-image img { height: 220px; }
}

@media (min-width: 1021px) and (max-width: 1250px) {
  .header-inner { gap: 12px; }
  .nav-link { padding-inline: 7px; font-size: .75rem; }
  .brand-sub { display: none; }
  .header-actions .btn { padding-inline: 12px; font-size: .75rem; }
}
@media (max-width: 1020px) {
  :root { --header-height: 76px; }
  .container, .container-wide { width: calc(100% - 48px); }
  .main-nav { background: #161617; }
  .nav-link { font-size: .9375rem; min-height: 48px; padding: 14px 12px; }
  .dropdown-panel { background: transparent; }
  .hero-home { padding-block: 48px 64px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-title { font-size: clamp(2.4rem, 5.3vw, 3.5rem); }

  .hero-sub { font-size: 1rem; }
  .hero-actions .btn { font-size: .8125rem; padding-inline: 16px; }
  .hero-meta { flex-wrap: wrap; gap: 10px 16px; }
  .character-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .character-mosaic .char-content { padding: 16px; }
  .mosaic-footnote { align-items: start; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-title { font-size: clamp(2.65rem, 8.4vw, 4rem); max-width: 620px; }
  .hero-copy { max-width: none; }
  .hero-sub { max-width: 540px; }

  .hero-caption { max-width: 540px; }
  .discovery-nav { grid-template-columns: 1fr; padding-block: 16px; }
  .discovery-nav a, .discovery-nav a:first-child, .discovery-nav a:last-child { padding: 18px 4px; border-right: 0; border-bottom: 1px solid var(--line); }
  .discovery-nav a:last-child { border-bottom: 0; }
  .section-head { align-items: start; flex-direction: column; gap: 20px; }
  .character-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic-footnote { flex-direction: column; gap: 12px; }
  .faq-columns { grid-template-columns: 1fr; gap: 28px; }
  .faq-columns .faq-intro { position: static; }
  .step + .step { border-color: var(--line); }
}
@media (max-width: 480px) {
  .container, .container-wide { width: calc(100% - 36px); }
  .section { padding-block: 56px; }
  .section-sm { padding-block: 40px; }
  .hero-home { padding-top: 34px; padding-bottom: 44px; }
  .hero-kicker { font-size: .6875rem; letter-spacing: .06em; margin-bottom: 22px; gap: 10px; }
  .hero-title { font-size: clamp(2.3rem, 9.2vw, 2.8rem); line-height: 1.15; }
  .hero-sub { font-size: .9375rem; line-height: 1.8; }
  .hero-meta { font-size: .75rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; font-size: .9375rem; min-height: 50px; }








  .hero-caption { font-size: .75rem; }
  .character-mosaic { gap: 12px; }
  .character-mosaic .char-content { padding: 14px 12px; }
  .character-mosaic .char-name { font-size: 1.125rem; }
  .character-mosaic .char-persona { font-size: .75rem; }
  .character-mosaic .char-desc { font-size: .8125rem; line-height: 1.6; margin-bottom: 16px; }
  .character-mosaic .char-cta { font-size: .75rem; gap: 5px; }
  .character-mosaic .char-cta svg { width: 12px; flex-shrink: 0; }
  .directory-card { min-height: 0; }
  .directory-card .dir-content { padding: 14px 12px; }
  .dir-content h3 { font-size: 1.125rem; }
  .dir-content p { font-size: .8125rem; }
  .dir-link { font-size: .75rem; }
  .character-search, .character-search input { width: 100%; }
  .directory-tools { width: 100%; padding: 12px; }
  .directory-toolbar { position: relative; top: auto; }
  .directory-card .char-tags { display: none; }
  .char-top { top: 10px; left: 10px; right: 10px; }
  .char-style { font-size: .625rem; padding: 4px 7px; }
  .section-head p { font-size: .9375rem; }
  .page-title, .anime-hero h1, .character-hero .page-title { font-size: clamp(2.1rem, 8.5vw, 2.7rem); }
  .chat-body { padding: 16px; }
  .chat-window .chat-header { padding: 16px; }
  .chat-body .msg { font-size: .8125rem; padding: 10px 12px; }
  .choice { font-size: .75rem; }
  .faq-item { padding-inline: 18px; }
  .faq-item summary { gap: 16px; }
  .final-cta { padding: 44px 22px; border-radius: 22px; }
  .final-cta h2 { font-size: 2rem; }
  .site-footer { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Keep faces visible when source portraits fill editorial landscape slots. */
.image-panel img:not([src*="placeholder-"]),
.featured-media img, .post-media img, .article-hero-image img,
.style-choice img, .virtual-portrait img, .gen-output img,
.scenario-img img, .type-card img { object-position: center 22%; }

/* Use one consistent card treatment instead of the legacy feature/wide mosaic. */
@media (min-width: 1021px) {
  .home-page .compare-media img {
    object-position: center top;
    transform-origin: center top;
  }
}

.character-mosaic .char-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 5.1em;
}
@media (max-width: 600px) {
  .character-mosaic .char-desc { display: none; min-height: 0; }
  .character-mosaic .char-content { padding: 14px 12px; gap: 0; }
  .character-mosaic .char-name { margin-bottom: 5px; }
  .character-mosaic .char-persona { min-height: 2.8em; margin-bottom: 12px; line-height: 1.4; }
  .character-mosaic .char-cta { padding-top: 0; line-height: 1.5; }
}