/* ===== Design tokens ===== */
:root {
  --cream: #FBF3E7;
  --cream-deep: #F3E8D6;
  --indigo: #2B2A4C;
  --indigo-soft: rgba(43, 42, 76, 0.65);
  --indigo-faint: rgba(43, 42, 76, 0.12);
  --marigold: #E0862E;
  --marigold-soft: #F1B97A;
  --peacock: #1F6F63;
  --peacock-soft: #E4F0EE;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 20px;
  --radius-sm: 10px;
  --container: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Focus visibility ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--peacock);
  outline-offset: 3px;
}

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 243, 231, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--indigo-faint);
  box-shadow: 0 2px 16px rgba(43, 42, 76, 0.06);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  text-decoration: none;
  color: var(--indigo);
  letter-spacing: -0.01em;
}

.nav-logo img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.nav-links > a {
  text-decoration: none;
  color: var(--indigo-soft);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-links > a:hover {
  color: var(--indigo);
  background: var(--indigo-faint);
}

.nav-signin-link {
  margin-left: 10px;
  font-weight: 600 !important;
  color: var(--peacock) !important;
}

.nav-signin-link:hover {
  background: var(--peacock-soft) !important;
}

/* ===== Profile menu ===== */
.nav-profile {
  position: relative;
  margin-left: 10px;
}

.nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--peacock), #164f46);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(31, 111, 99, 0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--peacock-soft), 0 2px 6px rgba(31, 111, 99, 0.35);
}

.nav-avatar[aria-expanded="true"] {
  box-shadow: 0 0 0 4px var(--peacock-soft), 0 2px 6px rgba(31, 111, 99, 0.35);
}

.nav-profile-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(43, 42, 76, 0.22), 0 2px 8px rgba(43, 42, 76, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.nav-profile-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nav-profile-menu[hidden] {
  display: flex; /* stay in the layout/transition system... */
  visibility: hidden; /* ...but don't paint or intercept clicks while closed */
}

.nav-profile-menu a,
.nav-profile-menu button {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  padding: 11px 14px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--indigo);
  cursor: pointer;
  transition: background 0.12s ease;
}

.nav-profile-menu a:hover,
.nav-profile-menu button:hover {
  background: var(--cream-deep);
}

.nav-profile-menu-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--indigo-faint);
  border: none;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 96px 0 140px;
  overflow: hidden;
}

.hero-single {
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marigold);
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  position: relative;
}

.hero h1 em {
  font-style: italic;
  color: var(--peacock);
}

.hero p.lead {
  font-size: 19px;
  color: var(--indigo-soft);
  max-width: 480px;
  margin: 0 0 32px;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--indigo);
  color: var(--cream);
  box-shadow: 0 8px 20px rgba(43, 42, 76, 0.25);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(43, 42, 76, 0.3); }

.btn-ghost {
  background: transparent;
  color: var(--indigo);
  border: 1.5px solid var(--indigo-faint);
}

.btn-ghost:hover { border-color: var(--indigo); }

/* Consistent loading/disabled visual state across every buy-flow
   button (character, bundle, custom companion) — they already
   disable + relabel their own text on click; this just makes that
   moment look clearly non-interactive everywhere it happens, not just
   in whichever button happened to get styled first. */
.btn:disabled,
.btn.is-loading {
  cursor: wait;
  opacity: 0.65;
  transform: none !important;
}

/* Live roaming characters — not a picture of the product, the product
   itself, running on its own marketing page. Covers the hero section;
   heroCharacters.js spawns up to HERO_MAX_VISIBLE real characters here,
   picked at random from however many exist, so this stays uncluttered
   no matter how large the full roster grows. Sits behind the headline
   (z-index below .hero-single) so text stays readable if a character
   wanders underneath it. */
.hero-roam-area {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-roamer {
  position: absolute;
  transition: left 0.6s ease-in-out;
  filter: drop-shadow(0 10px 14px rgba(43, 42, 76, 0.16));
}

.hero-roamer img {
  height: 120px;
  width: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.hero-roamer .hero-roamer-frame2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.hero-roamer.is-alt .hero-roamer-frame1 { opacity: 0; }
.hero-roamer.is-alt .hero-roamer-frame2 { opacity: 1; }


/* ===== Section shared ===== */
section { padding: 96px 0; }

.section-head {
  max-width: 620px;
  margin: 0 0 56px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  margin: 10px 0 14px;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--indigo-soft);
  font-size: 17px;
  margin: 0;
}

/* ===== How it works ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step {
  position: relative;
  padding: 32px 26px 28px;
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--indigo-faint);
}

.step-number {
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--marigold);
  margin: 0 0 14px;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 10px;
}

.step p {
  color: var(--indigo-soft);
  font-size: 15px;
  margin: 0;
}

/* ===== Mock browser demo ===== */
.mock-browser {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(43, 42, 76, 0.14);
  overflow: visible;
  max-width: 720px;
  margin: 0 auto;
}

.mock-browser-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 0;
  border-radius: 16px 16px 0 0;
  background: var(--cream-deep);
}

.mock-traffic {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.mock-traffic span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(43, 42, 76, 0.18);
}

.mock-traffic span:nth-child(1) { background: #E39A8F; }
.mock-traffic span:nth-child(2) { background: #E8C77E; }
.mock-traffic span:nth-child(3) { background: #93C6A8; }

.mock-tabs {
  display: flex;
  gap: 4px;
}

.mock-tab {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--indigo-soft);
  background: transparent;
  padding: 9px 16px 8px;
  border-radius: 8px 8px 0 0;
}

.mock-tab.is-active {
  background: #fff;
  color: var(--indigo);
}

.mock-address-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 18px 0;
  padding: 8px 12px;
  background: var(--cream-deep);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--indigo-soft);
}

.mock-page {
  padding: 32px 36px 48px;
}

.mock-page-line {
  height: 10px;
  border-radius: 4px;
  background: var(--indigo-faint);
  margin-bottom: 12px;
}

.mock-page-line-title {
  height: 16px;
  width: 45%;
  background: rgba(43, 42, 76, 0.22);
  margin-bottom: 20px;
}

.mock-page-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.mock-page-card {
  height: 70px;
  border-radius: 10px;
  background: var(--cream-deep);
  border: 1px solid var(--indigo-faint);
}

.mock-character {
  position: absolute;
  top: 50%;
  right: -34px;
  transform: translateY(-42%);
  z-index: 2;
  filter: drop-shadow(0 12px 16px rgba(43, 42, 76, 0.2));
}

.mock-character img {
  height: 160px;
  width: auto;
  display: block;
}

/* "See it in context" carousel controls — redesign of the old static
   single-screenshot demo. Kept below the mock-browser card (not
   overlapping the character, which already overflows the card's right
   edge) so prev/next never collides with the art itself. */
.demo-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 720px;
  margin: 40px auto 0;
}

.demo-arrow {
  all: unset;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--indigo);
  background: var(--cream-deep);
  border-radius: 50%;
  transition: background 0.15s ease;
}

.demo-arrow:hover {
  background: var(--indigo-faint);
}

.demo-carousel-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--indigo);
  min-width: 70px;
  text-align: center;
}

.demo-carousel-dots {
  display: flex;
  gap: 8px;
}

.demo-carousel-dot {
  all: unset;
  cursor: pointer;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--indigo-faint);
  transition: background 0.15s ease, transform 0.15s ease;
}

.demo-carousel-dot.is-active {
  background: var(--marigold);
  transform: scale(1.25);
}

@media (max-width: 540px) {
  .demo-carousel-footer { gap: 12px; }
  .demo-carousel-name { min-width: 0; }
}

/* ===== Productivity ===== */
.productivity-section {
  background: var(--cream-deep);
}

.productivity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.prod-card {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 26px 22px;
}

.prod-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--peacock-soft);
  color: var(--peacock);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.prod-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}

.prod-card p {
  color: var(--indigo-soft);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}

/* ===== Testimonials (backlog 05) — hidden by default in the markup,
   unhidden by the page's own inline script only when real approved
   rows exist. [hidden] override kept alongside, per this project's
   established convention. ===== */
#testimonials[hidden] {
  display: none;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  margin: 0;
}

.testimonial-card p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: var(--indigo);
  margin: 0 0 12px;
}

.testimonial-card cite {
  font-style: normal;
  font-size: 13px;
  color: var(--indigo-soft);
}

@media (max-width: 860px) {
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.price-card {
  background: #fff;
  border: 1.5px solid var(--indigo-faint);
  border-radius: var(--radius-sm);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.price-card.is-featured {
  border-color: var(--marigold);
}

.price-tier {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--indigo-soft);
  margin: 0 0 8px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px;
}

.price-desc {
  font-size: 14px;
  color: var(--indigo-soft);
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}

.price-cta {
  align-self: flex-start;
  font-size: 14px;
  padding: 10px 18px;
}

/* ===== Make your own (homepage promo, Commercial review Phase 2) =====
   Custom companion already had its own full page (custom-companion.html)
   and a nav item, but no dedicated homepage moment — it was competing
   for attention with a plain text nav link. Reuses the indigo/cream
   "big feature" treatment already established by .companion-callout,
   just bigger, with the 4 real style-preview images (generated once,
   shared across every order) doing the showing instead of just telling. */
#make-your-own {
  background: var(--indigo);
}

.myo-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  color: var(--cream);
}

@media (max-width: 760px) {
  .myo-panel {
    grid-template-columns: 1fr;
  }
}

.myo-copy .eyebrow {
  color: var(--marigold-soft);
}

.myo-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 600;
  margin: 8px 0 14px;
  letter-spacing: -0.01em;
}

.myo-copy p {
  color: rgba(251, 243, 231, 0.78);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 46ch;
}

.myo-styles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.myo-styles img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 10px;
}

/* ===== Catalog ===== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* index.html's teaser stacks the static bundled cards and the DB-driven
   #catalogDynamic cards as two separate grids (so "See the full roster"
   always sits right after the bundled pair, not scattered among dynamic
   entries) — without this they sit flush with zero vertical gap. */
.catalog-grid + .catalog-grid {
  margin-top: 26px;
}

.cat-card {
  position: relative;
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  min-height: 260px;
  overflow: visible;
  /* Clears the sticky nav when a bundle avatar link (#char-<id>) jumps
     straight to this card, so the card doesn't land flush under it. */
  scroll-margin-top: 96px;
}

.cat-card.is-live {
  background: #fff;
  border: 1.5px solid var(--peacock);
}

.cat-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo-soft);
}

.cat-card.is-live .cat-tag {
  color: var(--peacock);
}

.cat-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 8px 0 8px;
}

.cat-card p {
  font-size: 14px;
  color: var(--indigo-soft);
  margin: 0 0 10px;
  max-width: 80%;
}

.cat-card .btn,
.cat-card .char-status-badge {
  max-width: 76%;
}

/* Fixed box + object-fit:contain (not independent max-width/max-height
   on a naturally-sized img) — real bug found and fixed: independent
   max-width/max-height meant a character with proportionally wider art
   (Krishna, Kali, Sahira, Lakshmi...) hit the width cap first and
   rendered 19-43% shorter than a narrow character (Kai, Jin, Ronin),
   confirmed with real pixel measurements before this fix. A fixed box
   makes every character fill the same footprint regardless of their
   own art's aspect ratio, so relative size on the page reflects actual
   pose differences, not an accident of each image's proportions. */
.cat-figure {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: 150px;
  height: 230px;
  filter: drop-shadow(0 10px 14px rgba(43, 42, 76, 0.16));
}

.cat-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.cat-see-all {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1.5px dashed var(--indigo-faint);
  background: transparent;
}

.cat-see-all .btn {
  margin-top: 14px;
}

.cat-owned-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--peacock);
  margin: -4px 0 10px;
}

.cat-select-btn {
  font-size: 13px;
  padding: 9px 16px;
}

/* ===== Auth modal ===== */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 42, 76, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(43, 42, 76, 0.35);
}

.modal-panel h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--indigo);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--indigo-soft);
  cursor: pointer;
}

#authForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--indigo-faint);
  background: var(--cream);
  color: var(--indigo);
}

.auth-input:focus-visible {
  outline: 2px solid var(--peacock);
  outline-offset: 2px;
}

.modal-toggle {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--peacock);
  cursor: pointer;
  text-decoration: underline;
}

.modal-toggle[hidden] {
  display: none;
}

.modal-forgot-link {
  display: block;
  width: 100%;
  margin: -2px 0 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--indigo-soft);
  cursor: pointer;
  text-decoration: underline;
  text-align: right;
}

.modal-forgot-link[hidden] {
  display: none;
}

.auth-status {
  font-size: 13px;
  margin: 12px 0 0;
  color: var(--indigo);
  min-height: 16px;
}

.auth-status.is-error {
  color: #C0392B;
}

.auth-status.is-success {
  color: var(--peacock);
}

/* ===== Footer ===== */
footer {
  border-top: 1px solid var(--indigo-faint);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  color: var(--indigo-soft);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  text-decoration: none;
  color: var(--indigo-soft);
}

.footer-links a:hover { color: var(--indigo); }

/* Mobile nav toggle — hidden on desktop, shown only under the breakpoint below */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--indigo);
  cursor: pointer;
  padding: 6px;
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .hero-roamer img { height: 80px; }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cream);
    border-bottom: 1px solid var(--indigo-faint);
    padding: 8px 28px 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .nav-links.is-open {
    max-height: 260px;
  }

  .nav-links > a {
    padding: 10px 0;
  }

  .nav-signin-link,
  .nav-profile {
    margin-left: 0;
    margin-top: 6px;
  }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid { grid-template-columns: 1fr 1fr; }
  .char-category-grid { grid-template-columns: 1fr 1fr; }
  .productivity-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .char-category-grid { grid-template-columns: 1fr; }
  .productivity-grid { grid-template-columns: 1fr; }
  .mock-page-cards { grid-template-columns: 1fr; }
  .mock-character img { height: 110px; }
  .hero { padding: 56px 0 150px; }
  section { padding: 64px 0; }
}

/* ===== Suggest a character ===== */
.suggest-page {
  padding: 72px 0 96px;
}

.suggest-container {
  max-width: 720px;
}

.char-page-container {
  max-width: var(--container);
}

.char-category {
  margin-bottom: 48px;
}

/* Wraps the category title + the collection cue/badge (storefront
   batch) — the border that used to sit directly under the title now
   runs under the whole row, so the badge reads as part of the same
   header line instead of floating separately. */
.char-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--indigo-faint);
}

.char-category-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--indigo);
  margin: 0;
}

.char-collection-cue {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--indigo-soft);
  white-space: nowrap;
}

.char-status-badge.char-collection-badge {
  margin: 0;
  white-space: nowrap;
}

.char-category-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Use-case filter chips (storefront batch) — a second, orthogonal
   filter alongside the appearance-based categories below. Same pill
   language as .pill/.char-status-badge elsewhere on this page. */
.char-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 40px;
}

.char-filter-chip {
  all: unset;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--indigo-faint);
  color: var(--indigo-soft);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.char-filter-chip:hover {
  border-color: var(--indigo);
  color: var(--indigo);
}

.char-filter-chip.is-active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--cream);
}

.char-status-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 4px 0 0;
}

.char-status-badge.is-included {
  color: var(--peacock);
  background: var(--peacock-soft);
}

.char-status-badge.is-coming-soon {
  color: var(--indigo-soft);
  background: var(--indigo-faint);
}

/* Answers "why this one" before the price does — commercial review
   Phase 1 finding: with 7 premium characters and no differentiation
   beyond art style, there was no reason shown to pick one over another. */
.char-best-for {
  font-size: 13px;
  font-weight: 600;
  color: var(--peacock);
  margin: 2px 0 8px;
}

/* Limited-time drops (Phase 5c) — a distinct treatment from the plain
   "Buy" marigold fill, per the commercial review's own flagged gap
   ("no distinct treatment for limited/seasonal"): an outlined pill
   rather than a solid one, so it reads as "urgency" without being
   mistaken for the purchase button itself. */
.char-drop-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--marigold);
  border: 1.5px solid var(--marigold);
  border-radius: 999px;
  display: inline-block;
  padding: 4px 10px;
  margin: 0 0 10px;
}

.char-countdown {
  font-variant-numeric: tabular-nums;
}

.char-status-badge.is-drop-ended {
  color: var(--indigo-soft);
  background: var(--indigo-faint);
}

/* Buy buttons get their own color (marigold, otherwise only used as a
   small text accent elsewhere) instead of sharing btn-primary's indigo
   with the free "Select" button — the two need to read as different
   kinds of action at a glance, not just different words on the same
   button. Warm/high-contrast CTAs consistently test well for
   urgency-driven purchase actions; the bigger lever is that it now
   visually stands out against every indigo button on the page. */
.char-buy-btn {
  background: var(--marigold);
  color: var(--cream);
  box-shadow: 0 8px 20px rgba(224, 134, 46, 0.35);
}

.char-buy-btn:hover {
  background: #c8741f;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(224, 134, 46, 0.45);
}

/* Bundle cards reuse .cat-card.is-live but swap the peacock border for
   marigold — same "this is a paid, high-intent action" language as the
   buy button, and visually separates the bundles row from the regular
   per-character grid below it. */
.char-bundle-card {
  border-color: var(--marigold);
}

/* Real member portraits, not just a name list — a "squad" avatar stack
   so someone who doesn't already know a character by name can see who
   they'd be getting, cropped to face/head rather than the tiny
   full-body figure this originally shipped with. Uses a background-image
   with an explicit background-size zoom (not object-fit, which can
   only scale an <img> down to its natural "cover" fit, not zoom further
   in) — every character's art shares the same straight-on, full-body
   framing, so one fixed zoom level reliably lands on head/shoulders
   across the roster without needing per-character tuning or any new
   cropped image assets. CHARACTER_IMAGES has 100% coverage, confirmed
   before this was built. */
.char-bundle-avatars {
  display: flex;
  margin: 0 0 14px;
}

.char-bundle-avatar-link {
  display: block;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.char-bundle-avatar-link:hover {
  transform: translateY(-3px);
}

.char-bundle-avatar-link + .char-bundle-avatar-link {
  margin-left: -18px;
}

.char-bundle-avatar {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--cream);
  background-size: 260% auto;
  background-position: top center;
  background-repeat: no-repeat;
  border: 3px solid var(--cream-deep);
  box-shadow: 0 4px 10px rgba(43, 42, 76, 0.16);
}

.char-bundle-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--indigo);
  margin: 0 0 12px;
}

.char-bundle-regular {
  font-weight: 500;
  color: var(--indigo-soft);
  text-decoration: line-through;
}

.section-head h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600;
  margin: 10px 0 14px;
  letter-spacing: -0.01em;
}

.suggest-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 40px;
}

.suggest-form[hidden] {
  display: none;
}

/* Referral landing banner (Phase 5a) — shown only when ?ref= is present
   (see index.html's inline script). [hidden] override in the same edit
   as the base rule, per this project's established convention. */
.referral-banner {
  background: var(--peacock);
  color: #fff;
}

.referral-banner[hidden] {
  display: none;
}

.referral-banner-inner {
  padding: 10px 24px;
  text-align: center;
  font-size: 14px;
}

/* Invite-a-friend card (Phase 5a) — same cream-deep/rounded card
   language as .suggest-form, kept as its own class since this isn't a
   form. [hidden] override written in the same edit as the base rule,
   per this project's established convention. */
.invite-card {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 40px;
}

.invite-card[hidden] {
  display: none;
}

.invite-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}

.invite-card-desc {
  margin: 0 0 14px;
  color: var(--indigo-soft);
}

.invite-card-row {
  display: flex;
  gap: 10px;
}

.invite-card-row .auth-input {
  flex: 1;
}

@media (max-width: 640px) {
  .invite-card-row {
    flex-direction: column;
  }
}

.suggest-textarea {
  resize: vertical;
  min-height: 44px;
  font-family: var(--font-body);
}

.suggest-form .btn {
  align-self: flex-start;
}

.suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1.5px solid var(--indigo-faint);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.suggest-rank {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--indigo-soft);
  min-width: 28px;
}

.suggest-item-body {
  flex: 1;
  min-width: 0;
}

.suggest-item-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.suggest-item-desc {
  font-size: 14px;
  color: var(--indigo-soft);
  margin-top: 2px;
}

.suggest-vote-btn {
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--indigo-faint);
  background: var(--cream);
  color: var(--indigo);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.suggest-vote-btn:hover {
  border-color: var(--peacock);
}

.suggest-vote-btn.is-voted {
  background: var(--peacock-soft);
  border-color: var(--peacock);
  color: var(--peacock);
}

.suggest-vote-count {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
}

.suggest-vote-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.suggest-empty {
  color: var(--indigo-soft);
  font-style: italic;
}

/* ===== Custom companion (Phase 4) =====
   Deliberately its own visual treatment, not a reuse of .suggest-form's
   flat single-block layout — this is a $19.99, photo-upload, multi-choice
   purchase flow, not a two-field text post. Each .companion-step reads as
   its own card so the process feels like a short wizard instead of one
   long form, and every choice (style, personality) is a real clickable
   card instead of a native <select> — worth the extra markup for a page
   whose whole job is building enough trust/clarity to complete a
   purchase involving a personal photo. */
.companion-container {
  max-width: 640px;
}

.companion-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}

.companion-trust-item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--peacock);
  background: var(--peacock-soft);
  padding: 8px 14px;
  border-radius: 999px;
}

.companion-signed-out-note {
  font-size: 14px;
  color: var(--indigo-soft);
  background: var(--indigo-faint);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin: -14px 0 24px;
}

.companion-signed-out-note[hidden] {
  display: none;
}

.companion-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.companion-step {
  background: var(--cream-deep);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.companion-step-label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.companion-step-hint {
  font-size: 13px;
  color: var(--indigo-soft);
  margin: 0 0 16px;
}

.companion-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  border: 1.5px dashed var(--indigo-faint);
  border-radius: var(--radius-sm);
  background: var(--cream);
  cursor: pointer;
  color: var(--indigo-soft);
  font-size: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.companion-dropzone:hover,
.companion-dropzone:focus-visible {
  border-color: var(--marigold);
  background: #fff;
}

.companion-dropzone-icon {
  font-size: 26px;
  color: var(--marigold);
  line-height: 1;
}

.companion-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.companion-preview {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--indigo-faint);
}

.companion-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.companion-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 42, 76, 0.75);
  color: var(--cream);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.companion-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.companion-choice-row-wrap {
  display: flex;
  flex-wrap: wrap;
}

.companion-choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: var(--cream);
  border: 1.5px solid var(--indigo-faint);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.companion-choice:hover {
  border-color: var(--indigo-soft);
}

.companion-choice.is-selected {
  border-color: var(--peacock);
  background: var(--peacock-soft);
}

.companion-choice-title {
  font-weight: 600;
  color: var(--indigo);
  font-size: 15px;
}

.companion-choice-desc {
  font-size: 12px;
  color: var(--indigo-soft);
}

.companion-choice-sm {
  flex-direction: row;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo);
}

/* Style picker — 4 real preview images instead of plain text buttons,
   so "Pixel/Retro" or "Anime" mean something before the customer commits
   to one. Same .companion-choice card, just centered with a fixed-height
   image slot above the label. */
.companion-style-row {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 640px) {
  .companion-style-row {
    grid-template-columns: 1fr 1fr;
  }
}

.companion-style-choice {
  align-items: center;
  text-align: center;
  gap: 8px;
}

.companion-style-choice img {
  height: 110px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.companion-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--indigo);
  cursor: pointer;
}

.companion-consent input {
  margin-top: 3px;
  accent-color: var(--peacock);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.companion-submit {
  width: 100%;
  justify-content: center;
  font-size: 17px;
  padding: 17px 28px;
}

/* Discoverability callout on characters.html, pointing at
   custom-companion.html — browsing the catalog is the natural moment to
   learn "you can also just make one of these of yourself." */
.companion-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  background: var(--indigo);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 36px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.companion-callout:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(43, 42, 76, 0.3);
}

.companion-callout-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

.companion-callout-desc {
  font-size: 14px;
  color: rgba(251, 243, 231, 0.8);
  flex: 1;
}

.companion-callout-arrow {
  font-size: 20px;
  color: var(--marigold);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .companion-callout {
    flex-wrap: wrap;
  }
  .companion-callout-arrow {
    display: none;
  }
}