/* MeowBTI — bundle redesign port. Mobile-first. */

:root {
  /* Brand colors */
  --ink: #1F1410;
  --ink-hover: #2c1d18;
  --bg: #FFF4EC;
  --bg-2: #F4ECE0;
  --paper: #FFFFFF;
  --surface-warm: #FDF9F2;
  --soft: #FFE3D6;
  --accent: #FF5B3B;
  --accent-2: #FFB000;
  --line-soft: #ECE3D6;
  --ink-soft: #6B5E54;
  --ember: #E07A5F;
  --amber: #F4B860;
  --rose: #E8A4B8;
  --iris: #9B8FC9;
  --sky: #8FB8C9;
  --sage: #8FA68E;
  --slate: #6B7484;

  /* Type stacks */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

  /* Ink alpha — overlays + sticker hard-shadows. Spaced syntax so they
     don't collide with the no-space rgba() forms used at call sites. */
  --ink-04: rgba(0, 0, 0, 0.04);
  --ink-06: rgba(0, 0, 0, 0.06);
  --ink-08: rgba(0, 0, 0, 0.08);
  --ink-10: rgba(0, 0, 0, 0.10);
  --ink-12: rgba(0, 0, 0, 0.12);
  --ink-15: rgba(0, 0, 0, 0.15);
  --ink-18: rgba(0, 0, 0, 0.18);
  --ink-20: rgba(0, 0, 0, 0.20);

  /* Hard "sticker" shadows */
  --shadow-hard: 4px 4px 0 var(--ink-12);
  --shadow-card: 8px 8px 0 var(--ink-15);
  --shadow-soft: 0 1px 2px rgba(31,20,16,0.04), 0 8px 28px rgba(31,20,16,0.07);
  --shadow-lift: 0 2px 4px rgba(31,20,16,0.06), 0 18px 40px rgba(31,20,16,0.09);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .container { padding: 0 20px; } }

/* ─── topbar / nav ───────────────────────────────────────── */
.main-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,244,236,0.85), rgba(255,244,236,0.6));
}
.main-header.scrolled { box-shadow: 0 1px 0 var(--ink-08); }

.navbar { padding: 14px 20px; }
.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0;
}
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  letter-spacing: -0.01em;
}
.logo::before {
  content: "";
  width: 26px;
  height: 26px;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"%3E%3Cpath d="M28 38 L40 16 L52 34 Q60 30 68 34 L80 16 L92 38 Q102 52 100 68 Q98 92 60 96 Q22 92 20 68 Q18 52 28 38 Z" fill="%23FF5B3B"/%3E%3Ccircle cx="46" cy="60" r="5" fill="%23FFF4EC"/%3E%3Ccircle cx="74" cy="60" r="5" fill="%23FFF4EC"/%3E%3Cpath d="M54 74 Q60 80 66 74" stroke="%23FFF4EC" stroke-width="4" fill="none" stroke-linecap="round"/%3E%3C/svg%3E') center / contain no-repeat;
  filter: drop-shadow(2px 2px 0 var(--ink-06));
}
.nav-menu { list-style: none; display: flex; gap: 4px; align-items: center; }
.nav-menu li a,
.nav-summary {
  display: inline-flex;
  align-items: center;
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  cursor: pointer;
}
.nav-menu li a:hover,
.nav-summary:hover { background: var(--ink-06); }
.nav-group { position: relative; }
.nav-group details { position: relative; }
.nav-summary { list-style: none; }
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  display: none;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--ink-12);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.nav-group details[open] .nav-panel { display: grid; gap: 2px; }
.nav-panel a {
  width: 100%;
  min-height: 40px;
}
.nav-menu .nav-cta {
  background: var(--ink); color: #fff;
  padding: 10px 16px;
}
.nav-menu .nav-cta:hover { background: var(--ink-hover); }

@media (max-width: 600px) {
  .navbar { padding: 8px 10px; }
  .navbar .container {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
  }
  .logo {
    flex: 0 0 auto;
    justify-content: flex-start;
    font-size: 17px;
    white-space: nowrap;
  }
  .logo::before { width: 22px; height: 22px; }
  .nav-menu {
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .nav-menu li.nav-mobile-hide,
  .nav-menu li.nav-mobile-secondary { display: none; }
  .nav-menu li a,
  .nav-summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 7px 6px;
    font-size: 11px;
    white-space: nowrap;
  }
  .nav-summary::after {
    width: 5px;
    height: 5px;
    margin-left: 5px;
  }
  .nav-panel {
    position: fixed;
    top: 54px;
    left: 10px;
    right: 10px;
    min-width: 0;
    padding: 10px;
    grid-template-columns: 1fr;
    border-radius: 12px;
  }
  .nav-panel a {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 13px;
  }
  .nav-menu .nav-cta { padding: 7px 9px; }
  .nav-menu .nav-lang { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  .logo {
    width: 28px;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
  }
  .logo::before { font-size: 22px; }
  .nav-summary {
    padding-left: 5px;
    padding-right: 5px;
  }
  .nav-group-tests .nav-summary,
  .nav-group-psychology .nav-summary,
  .nav-group-daily .nav-summary,
  .nav-group-more .nav-summary {
    font-size: 0;
  }
  .nav-group-tests .nav-summary::before,
  .nav-group-psychology .nav-summary::before,
  .nav-group-daily .nav-summary::before,
  .nav-group-more .nav-summary::before {
    font-size: 11px;
  }
  .nav-group-tests .nav-summary::before { content: "Test"; }
  .nav-group-psychology .nav-summary::before { content: "Psych"; }
  .nav-group-daily .nav-summary::before { content: "Daily"; }
  .nav-group-more .nav-summary::before { content: "World"; }
  .nav-menu .nav-cta {
    min-width: 44px;
    justify-content: center;
    font-size: 0;
    padding: 7px 8px;
  }
  .nav-menu .nav-cta::after {
    content: "Test";
    font-size: 11px;
  }
}

/* ─── buttons ────────────────────────────────────────────── */
.cta-button, .big-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 16px;
  border: none; cursor: pointer; text-decoration: none;
  padding: 14px 24px; border-radius: var(--radius-pill);
  color: #fff; background: var(--ink);
  box-shadow: 0 1px 2px rgba(31,20,16,0.06), 0 12px 30px rgba(224,122,95,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.cta-button.large-button, .big-btn.large {
  font-size: 16px; padding: 14px 22px;
}
@media (min-width: 600px) {
  .cta-button.large-button, .big-btn.large {
    font-size: 18px; padding: 18px 32px;
  }
}
.cta-button:hover, .big-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(31,20,16,0.08), 0 18px 40px rgba(224,122,95,0.22);
}
.cta-button:active, .big-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(31,20,16,0.08), 0 6px 18px rgba(31,20,16,0.12);
}
.cta-button.accent, .big-btn.accent {
  background: var(--ember); color: #fff;
}
.cta-button.ghost, .big-btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.cta-button.ghost:hover, .big-btn.ghost:hover { background: var(--ink-04); }

.ghost-btn {
  background: rgba(0,0,0,0.05); border: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: var(--radius-pill); color: inherit;
}
.ghost-btn:hover { background: var(--ink-10); }

/* ─── HOME ───────────────────────────────────────────────── */
.home-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--ink-04) 1px, transparent 1px);
  background-size: 3px 3px; opacity: 0.5;
}

.hero-section { position: relative; padding: 40px 0 24px; text-align: center; z-index: 1; }
.hero-section .container { position: relative; }
.hero-section h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 4.75rem;
  line-height: 1.0; letter-spacing: -0.025em;
  margin-bottom: 18px; text-wrap: balance;
  word-break: break-word;
}
.hero-section h1 em {
  font-style: italic; color: var(--accent);
  font-variation-settings: "SOFT" 100;
}
.hero-section .subtitle {
  font-size: 1.15rem;
  opacity: 0.7; margin-bottom: 28px; font-weight: 500;
}
.hero-meta {
  margin-top: 18px; font-size: 13px; opacity: 0.6;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.sticker {
  display: none;
  position: absolute; width: 60px; height: 60px;
  border-radius: 16px; place-items: center;
  box-shadow: 4px 4px 0 var(--ink-12);
  border: 2.5px solid var(--ink);
  animation: stickerWobble 4s ease-in-out infinite;
  z-index: 0;
}
.sticker-1 { top: -10px; left: 4%; --r: -12deg; transform: rotate(-12deg); animation-delay: 0s; }
.sticker-2 { top: 10px; right: 4%; --r: 8deg; transform: rotate(8deg); width: 78px; animation-delay: 0.6s; }
.sticker-3 { bottom: -10px; left: 8%; --r: 15deg; transform: rotate(15deg); animation-delay: 1.2s; }
.sticker-4 { bottom: 10px; right: 10%; --r: -8deg; transform: rotate(-8deg); animation-delay: 1.8s; }
@keyframes stickerWobble {
  0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); }
  50% { transform: rotate(calc(var(--r, 0deg) + 2deg)) translateY(-4px); }
}
/* Stickers hidden on mobile to avoid headline overlap; show from tablet up. */
@media (min-width: 600px) { .sticker { display: grid; } }
@media (min-width: 700px) {
  .sticker { width: 78px; height: 78px; border-radius: 22px; }
  .sticker-2 { width: 96px; }
}
@media (max-width: 700px) {
  .hero-section h1 { font-size: 3.2rem; }
}
@media (max-width: 430px) {
  .hero-section h1 { font-size: 2.45rem; }
  .hero-section .subtitle { font-size: 1rem; }
}

/* ─── QUIZ ───────────────────────────────────────────────── */
.quiz-section {
  padding: 16px 0 64px; min-height: calc(100vh - 100px);
}
.quiz-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px 16px;
}
.quiz-bar .ghost-btn { flex-shrink: 0; }
.quiz-progress { display: flex; gap: 3px; flex: 1; max-width: 480px; }
.quiz-progress.is-deep { gap: 1.5px; }
.pip {
  flex: 1; height: 6px; border-radius: var(--radius-pill);
  background: var(--ink-10); transition: background 0.3s, transform 0.3s;
}
.quiz-progress.is-deep .pip { height: 4px; }
.pip.active { transform: scaleY(1.4); background: var(--ink); }
.pip.done { background: var(--accent); }
.quiz-count {
  font-size: 13px; font-variant-numeric: tabular-nums;
  font-weight: 600; opacity: 0.7; flex-shrink: 0;
}

/* ─── language switcher ──────────────────────────────────── */
.lang-switcher {
  display: inline-flex; gap: 0;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--shadow-hard);
}
.lang-pill {
  font: inherit; cursor: pointer;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: none; padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.12s ease, color 0.12s ease;
}
.lang-pill:hover { background: var(--ink-06); }
.lang-pill.active { background: var(--ink); color: #fff; }
.lang-pill.active:hover { background: var(--ink-hover); }
/* In-nav variant: inline, smaller. */
.nav-lang-switcher { padding: 2px; box-shadow: none; }
.nav-lang-switcher .lang-pill { padding: 4px 8px; font-size: 11px; }
@media (max-width: 600px) {
  .nav-lang-switcher .lang-pill {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 9px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* ─── QUIZ MODE SELECTION ─────────────────────────────── */
.quiz-mode-select {
  text-align: center;
  padding: 40px 0;
  animation: fadeIn 0.4s ease-out;
}
.quiz-mode-select h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 32px);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.quiz-mode-note,
.quiz-route-note {
  max-width: 620px;
  margin: -10px auto 28px;
  color: var(--ink-soft);
  font-weight: 700;
  line-height: 1.5;
}
.quiz-route-note {
  margin: 24px auto 0;
  font-size: 0.95rem;
}
.quiz-route-note a {
  color: var(--ink);
  font-weight: 900;
}
.test-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 22px;
}
.test-trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 900;
}
.quiz-mode-group {
  margin-bottom: 32px;
}
.group-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-bottom: 16px;
  color: var(--ink);
}
.mode-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 600px) {
  .mode-options { grid-template-columns: 1fr 1fr; }
}
.mode-card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px;
  padding: 24px 20px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 6px 6px 0 var(--ink-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  font: inherit;
}
.mode-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 10px 10px 0 var(--ink-15);
}
.mode-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink-10);
}
.mode-card.highlight {
  border-color: var(--accent-1);
  background: #FFF9F5;
}
.mode-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.mode-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--ink);
}
.mode-card p {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.4;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── MBTI evergreen content foundation ──────────────────── */
.mbti-content-page { background: var(--bg); }
.mbti-content-hero {
  padding: 52px 0 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,91,59,0.11), transparent 48%),
    var(--bg);
}
.mbti-breadcrumb,
.mbti-content-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mbti-breadcrumb {
  min-height: 44px;
  margin-right: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mbti-content-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 74px);
  line-height: 1;
  margin: 12px auto 14px;
  max-width: 860px;
  text-wrap: balance;
}
.mbti-content-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(17px, 3vw, 21px);
}
.mbti-content-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.mbti-content-body { padding: 38px 0 80px; }
.mbti-content-body .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
.mbti-article,
.mbti-related-panel {
  background: rgba(255,255,255,0.88);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.mbti-article { padding: clamp(22px, 5vw, 38px); }
.mbti-article section + section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1.5px solid var(--line-soft);
}
.mbti-article h2,
.mbti-related-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.1;
  margin-bottom: 12px;
}
.mbti-article p,
.mbti-article li {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
}
.mbti-article ul { padding-left: 22px; }
.mbti-article details {
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--surface-warm);
}
.mbti-article details + details { margin-top: 12px; }
.mbti-article summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}
.mbti-related-panel {
  position: sticky;
  top: 88px;
  padding: 20px;
}
.mbti-related-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  border-top: 1px solid var(--line-soft);
}
.mbti-related-panel a:hover { color: var(--accent); }
.mbti-evergreen-link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.mbti-evergreen-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.mbti-evergreen-link:hover {
  border-color: var(--ink-20);
  background: var(--soft);
}
@media (max-width: 820px) {
  .mbti-content-body .container { grid-template-columns: 1fr; }
  .mbti-related-panel { position: static; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-actions .cta-button {
  margin: 0 !important;
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta-button { margin-left: 0 !important; }
}

/* ─── footer ─────────────────────────────────────────────── */
.main-footer {
  background: var(--ink); color: var(--bg);
  padding: 24px 0;
  margin-top: 24px;
}
.main-footer .container { padding: 0 20px; }
.footer-content {
  display: flex; flex-direction: column; gap: 12px;
  text-align: center; align-items: center;
  margin-bottom: 12px;
}
@media (min-width: 600px) {
  .footer-content { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-content .sponsor { font-size: 14px; }
.footer-content .sponsor a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
.footer-links {
  list-style: none; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.footer-links a {
  color: var(--bg); text-decoration: none; font-size: 14px; opacity: 0.8;
}
.footer-links a:hover { opacity: 1; }
.disclaimer {
  font-size: 12px; opacity: 0.6; text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px;
}

/* ─── legacy classes still referenced (kept slim) ─────────── */
.testimonial-carousel, .testimonial-track, .testimonial-card { /* legacy carousel — unused after redesign */ }

/* ─── Ecosystem Polish ────────────────────────────────── */
.ecosystem-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 40px 0;
}
.eco-card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 20px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.eco-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.05);
}
.eco-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: 8px;
}
.eco-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 4px;
}
.eco-desc {
  font-size: 0.9rem;
  opacity: 0.7;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════
   2026-08 rebuild — 16-types test, landing, likert quiz, result
   ═══════════════════════════════════════════════════════════ */

:root {
  --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* text-safe (AA) variants of the pastel hues — use for TEXT, keep originals for fills */
  --iris-deep: #5E5296;
  --rose-deep: #B0486A;
  --sage-deep: #55704F;
  --amber-deep: #8F5F08;
  --accent-deep: #C93A1B;
}

/* Buttons (new naming; visually match the sticker style) */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-hard) var(--ink);
}
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-secondary { background: var(--paper); color: var(--ink); }
.btn-primary:hover, .btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-primary:active, .btn-secondary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: var(--shadow-hard) var(--ink); }
.btn-lg { font-size: 1.1rem; padding: 16px 32px; }

/* ── Landing ── */
.landing-hero { padding: 72px 0 48px; text-align: center; }
.landing-hero h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; margin-bottom: 18px; }
.hero-sub { max-width: 640px; margin: 0 auto 30px; font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 18px; }
.hero-note { font-size: 0.9rem; color: var(--ink-soft); }

.landing-how { padding: 40px 0; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.how-card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card) var(--ink-08, rgba(31,20,16,0.08)); }
.how-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 10px; }
.how-card p { color: var(--ink-soft); line-height: 1.55; }

.landing-types { padding: 48px 0; }
.landing-types h2, .landing-trust h2 { font-family: var(--font-display); font-size: 2rem; text-align: center; margin-bottom: 28px; }
.types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.type-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-md);
  padding: 18px; text-decoration: none; color: var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.type-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.type-card .type-code { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.type-card .type-name { font-weight: 600; font-size: 0.95rem; }
.type-card .type-breed { font-size: 0.85rem; color: var(--ink-soft); }
.type-card.g-nt .type-code { color: var(--iris-deep); }
.type-card.g-nf .type-code { color: var(--rose-deep); }
.type-card.g-sj .type-code { color: var(--sage-deep); }
.type-card.g-sp .type-code { color: var(--amber-deep); }

.landing-trust { padding: 48px 0 80px; text-align: center; }
.landing-trust p { max-width: 620px; margin: 0 auto 26px; line-height: 1.6; color: var(--ink-soft); }

/* ── Quiz (likert) ── */
.quiz-section .container { max-width: 760px; }
.mode-select { text-align: center; padding: 48px 0; }
.mode-select h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.mode-subtitle { color: var(--ink-soft); margin-bottom: 34px; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; text-align: left; }
.mode-cards .mode-card h2 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 10px; }
.mode-cards .mode-card p { color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; }
.mode-card-full { border-color: var(--accent); }

/* Overrides the pre-rebuild `.quiz-progress` flex-row rule further up the file. */
.quiz-progress { display: block; max-width: none; gap: 0; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 14px 0 12px; margin-bottom: 10px; }
.quiz-progress .progress-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.quiz-progress .progress-bar-bg { height: 10px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; border: 1.5px solid var(--ink); }
.quiz-progress .progress-bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.3s; }
.scale-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.scale-legend .legend-left { color: var(--iris-deep, var(--iris)); text-align: left; }
.scale-legend .legend-right { color: var(--accent); text-align: right; }

.likert-item { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-lg); padding: 26px 22px; margin-bottom: 16px; transition: border-color 0.2s, opacity 0.2s; }
.likert-item.answered { border-color: var(--ink-12, rgba(31,20,16,0.12)); opacity: 0.75; }
.likert-text { font-size: 1.1rem; font-weight: 600; text-align: center; margin-bottom: 18px; line-height: 1.5; }
.likert-hint { text-align: center; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); margin: 0 auto 18px; max-width: 460px; }
.likert-scale { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* End labels live on their own row so they survive every breakpoint — the
   scale is meaningless if the taker cannot see which end is "most". */
.likert-ends { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; max-width: 380px; margin: 12px auto 0; }
.likert-end { font-size: 0.72rem; font-weight: 700; line-height: 1.35; flex: 1 1 0; }
.disagree-label { color: var(--iris-deep, var(--iris)); text-align: left; }
.agree-label { color: var(--accent); text-align: right; }
.likert-dot { border-radius: 50%; background: var(--paper); cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.12s, background 0.12s; }
.likert-dot.size-3 { width: 44px; height: 44px; }
.likert-dot.size-2 { width: 36px; height: 36px; }
.likert-dot.size-1 { width: 28px; height: 28px; }
.likert-dot.agree { border: 2.5px solid var(--accent); }
.likert-dot.disagree { border: 2.5px solid var(--iris); }
.likert-dot.neutral { border: 2.5px solid var(--ink-20, rgba(31,20,16,0.2)); }
.likert-dot:hover { transform: scale(1.12); }
.likert-dot.agree.selected { background: var(--accent); }
.likert-dot.disagree.selected { background: var(--iris); }
.likert-dot.neutral.selected { background: var(--ink-soft); }
.quiz-warning { text-align: center; color: var(--accent); font-weight: 600; margin: 6px 0 12px; }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 60px; }
.quiz-resume-nav { justify-content: center; margin-top: 24px; }
@media (max-width: 480px) {
  /* Tap target stays 44px; the visible circle keeps its 38/31/24 size on ::before. */
  .likert-item { padding-left: 14px; padding-right: 14px; }
  .likert-scale { gap: 0; justify-content: space-between; }
  .likert-dot, .likert-dot.size-3, .likert-dot.size-2, .likert-dot.size-1 {
    width: auto; flex: 1 1 0; max-width: 44px; height: 44px;
    position: relative; background: transparent; border: 0;
  }
  .likert-dot::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink-20, rgba(31,20,16,0.2));
    width: 24px; height: 24px; box-sizing: border-box;
  }
  .likert-dot.size-3::before { width: 38px; height: 38px; }
  .likert-dot.size-2::before { width: 31px; height: 31px; }
  .likert-dot.agree::before { border-color: var(--accent); }
  .likert-dot.disagree::before { border-color: var(--iris); }
  .likert-dot.agree.selected { background: transparent; }
  .likert-dot.disagree.selected { background: transparent; }
  .likert-dot.neutral.selected { background: transparent; }
  .likert-dot.agree.selected::before { background: var(--accent); }
  .likert-dot.disagree.selected::before { background: var(--iris); }
  .likert-dot.neutral.selected::before { background: var(--ink-soft); }
  .likert-ends { max-width: 300px; gap: 12px; margin-top: 10px; }
  .likert-end { font-size: 0.75rem; }
  .likert-hint { font-size: 0.8rem; }
  .scale-legend { font-size: 0.75rem; }
}

/* ── Result ── */
.result-section .container { max-width: 820px; }
.result-invalid { text-align: center; padding: 80px 0; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.result-hero { text-align: center; padding: 56px 0 30px; }
.result-kicker, .breed-kicker { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.result-code { font-family: var(--font-display); font-size: clamp(3.4rem, 10vw, 5.5rem); line-height: 1; margin: 10px 0 6px; }
.result-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
.result-intro { max-width: 620px; margin: 0 auto; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }

.breed-card { display: flex; gap: 24px; align-items: center; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-lg); padding: 28px; margin: 26px 0; box-shadow: var(--shadow-card) var(--ink-08, rgba(31,20,16,0.08)); }
.breed-art { flex: 0 0 132px; }
.breed-art img, .breed-art svg { width: 132px; height: 132px; border-radius: var(--radius-md); display: block; }
.breed-art img[hidden], .breed-art .breed-svg[hidden] { display: none; }
.breed-name { font-family: var(--font-display); font-size: 1.9rem; margin: 6px 0 8px; }
.breed-blurb { color: var(--ink-soft); line-height: 1.55; }
/* Corridor link out to the breed's verified profile on MeowNavi. Quiet by
   design: it is a next step, not a competing call to action. */
.result-sister { margin-top: 18px; font-size: .92rem; opacity: .75; }
.result-sister a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.result-sister a:hover { opacity: 1; }
.breed-navi { margin-top: 12px; font-size: .92rem; line-height: 1.5; }
.breed-navi a { color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.breed-navi a:hover { opacity: 1; }
@media (max-width: 560px) { .breed-card { flex-direction: column; text-align: center; } }

.result-axes, .result-facets, .variant-block, .result-traits, .result-actions { margin: 40px 0; }
.result-axes h2, .result-facets h2, .variant-block h2, .result-actions h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 20px; }
.axis-row { margin-bottom: 22px; }
.axis-heads { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 6px; }
.axis-name { color: var(--ink-soft); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.axis-track { position: relative; height: 16px; background: var(--line-soft); border: 1.5px solid var(--ink); border-radius: var(--radius-pill); overflow: hidden; }
.axis-fill { position: absolute; top: 0; height: 100%; }
.axis-poles { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-soft); margin-top: 5px; }
.axis-poles .active { font-weight: 700; color: var(--ink); }

.facet-grid { display: grid; gap: 12px; }
.facet-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 12px; }
.facet-name { font-size: 0.9rem; font-weight: 600; }
.facet-track { height: 10px; background: var(--line-soft); border-radius: var(--radius-pill); overflow: hidden; }
.facet-fill { height: 100%; }
.facet-verdict { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .facet-row { grid-template-columns: 1fr; gap: 4px; } }

.variant-block, .trait-block { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; }
.trait-block { margin-bottom: 14px; }
.trait-block h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 8px; }
.trait-block p, .variant-block p { line-height: 1.6; color: var(--ink-soft); }

.share-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.result-links { display: flex; flex-direction: column; gap: 10px; }
.result-links a { font-weight: 600; color: var(--ink); }
.result-article-link { font-size: 1.05rem; }

.mbti-breed-note { margin: 10px 0 18px; font-size: 1rem; color: var(--ink-soft); }
.mbti-breed-note strong { color: var(--ink); }
.type-card .type-thumb { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 6px; }

/* AEO fact table on type guide pages */
.mbti-fact-table table { width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-md); overflow: hidden; }
.mbti-fact-table th, .mbti-fact-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; }
.mbti-fact-table th { width: 38%; color: var(--ink-soft); font-weight: 600; }
.mbti-fact-table tr:last-child th, .mbti-fact-table tr:last-child td { border-bottom: none; }

/* Landing FAQ */
.landing-faq { padding: 40px 0; }
.landing-faq .container { max-width: 720px; }
.landing-faq h2 { font-family: var(--font-display); font-size: 2rem; text-align: center; margin-bottom: 24px; }
.landing-faq details { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 12px; }
.landing-faq summary { font-weight: 700; cursor: pointer; }
.landing-faq details p { margin-top: 10px; line-height: 1.6; color: var(--ink-soft); }

/* "In love" block on compatibility pages */
.pair-love { background: var(--paper); border: 2px solid var(--rose); border-radius: var(--radius-lg); padding: 24px 26px; margin-top: 8px; }
.pair-love h2 { color: var(--ink); }

/* Love hub */
.love-hub-group { margin-bottom: 34px; }
.love-hub-group h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 6px; }
.love-hub-group > p { color: var(--ink-soft); margin-bottom: 12px; line-height: 1.55; }
.pair-love h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 16px 0 6px; }
.pair-love h3:first-of-type { margin-top: 8px; }

.how-card .how-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 10px; }


/* ── recovered live rules (hub/legal pages) ── */
/* ─── BROWSE all 16 ──────────────────────────────────────── */
.page-content { padding: 24px 0 64px; }
.page-content > .container > h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 7vw, 64px); letter-spacing: -0.025em;
  line-height: 1; text-align: center;
}
/* ─── EMOTIONAL MICRO-MODULES ─────────────────────────── */
.module-section { margin-bottom: 40px; }
.mbti-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: 12px 12px 0 var(--ink);
}
.info-card { transition: transform 0.2s; }
.info-card:hover { transform: translateY(-4px); }

/* ---------- save-report popup ---------- */
.save-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 20, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.save-popup {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink-15);
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.save-popup h2 { margin: 0 0 10px; }
.save-popup-body { color: var(--ink-soft); margin: 0 0 18px; }
.save-popup-form { display: flex; flex-direction: column; gap: 10px; }
.save-popup-form input {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.save-popup-note { font-size: 0.82rem; color: var(--ink-soft); margin: 12px 0 4px; }
.save-popup-note.save-popup-error { color: var(--accent); font-weight: 600; }
.save-popup-skip {
  background: none;
  border: none;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* ---------- facet deep read (full mode) ---------- */
.facets-intro { color: var(--ink-soft); margin: -8px 0 20px; }
.result-signature {
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: 4px 4px 0 var(--ink-10);
}
.result-signature p { margin: 4px 0; font-weight: 600; }
.facet-axis-group { margin: 28px 0; }
.facet-axis-group h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  border-bottom: 2px solid var(--ink-10);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.facet-block { margin-bottom: 18px; }
.facet-read { margin: 8px 0 4px; line-height: 1.6; }
.facet-tip { margin: 0 0 4px; font-size: 0.92rem; color: var(--ink-soft); }

/* Invite loop (2026-10-23) — sits right under the breed card, above the fold on
   most phones, because the bottom-of-page share block drew 0 shares in 28 days. */
.invite-block, .vs-block { border: 3px solid var(--ink); border-radius: var(--radius-lg); padding: 22px 24px; margin: 22px 0; background: var(--paper); }
.invite-block h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 8px; }
.invite-block p { margin-bottom: 16px; }
.invite-block .share-buttons { margin-bottom: 0; }
.btn-line { background: #06C755; color: #fff; border-color: #06C755; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.vs-block { text-align: center; }
.vs-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 14px; }
.vs-block .btn-primary { display: inline-block; text-decoration: none; }

/* Ranked tables on data articles (rarest-mbti-type) */
.rare-table-wrap { overflow-x: auto; margin: 16px 0 20px; }
.rare-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-md); overflow: hidden; font-size: 0.95rem; }
.rare-table th, .rare-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: middle; }
.rare-table thead th { background: var(--soft); font-weight: 700; white-space: nowrap; }
.rare-table tbody tr:last-child td { border-bottom: none; }
.rare-table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.rare-bar { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: var(--accent); min-width: 4px; }
.rare-compare th, .rare-compare td { white-space: nowrap; }

/* Best-match lists and the cat-breed table */
.bm-list { list-style: none; padding: 0; margin: 16px 0; }
.bm-list li { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line-soft); line-height: 1.55; }
.bm-list li:last-child { border-bottom: none; }
.bm-cats { opacity: 0.75; font-size: 0.92em; }
.breed-table td { vertical-align: top; }
.breed-thumb { display: block; width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; }

/* ─── MOBILE POLISH (2026-10-25) ─────────────────────────
   Grid children default to min-width:auto, so a wide table inside
   .rare-table-wrap stretched the whole article instead of scrolling
   inside its wrapper (rarest-mbti-type rendered 908px on a 390px phone). */
.mbti-content-body .container > *,
.mbti-article { min-width: 0; }
.rare-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .rare-table { font-size: 0.88rem; }
  .rare-table th, .rare-table td { padding: 8px 9px; }
  .rare-compare thead th { white-space: normal; min-width: 72px; }
  .breed-table td:last-child { min-width: 160px; }
  .rare-table td a { display: inline-block; padding: 8px 0; }
  /* Tap targets: 44px minimum, readable labels. */
  .logo { min-height: 44px; min-width: 44px; justify-content: center; }
  .nav-menu li a, .nav-summary { font-size: 12.5px; }
  .nav-lang-switcher .lang-pill { font-size: 12px; }
  .result-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .footer-content .sponsor a { display: inline-block; padding: 13px 4px; }
}

/* Quiz: the sticky site header and the sticky progress block both pin to top:0,
   so the header covered "Question X of N" and the least/most legend. Let the
   header scroll away while a quiz is running. */
body:has(.quiz-progress) .main-header { position: static; }

/* Thai: the Latin-tuned headline line-heights (1.0-1.1) let descenders and upper
   tone marks collide between lines. Give Thai room. */
html[lang="th"] h1 { line-height: 1.32; letter-spacing: 0; }
html[lang="th"] h2, html[lang="th"] h3 { line-height: 1.4; }
html[lang="th"] .likert-end, html[lang="th"] .eco-desc { line-height: 1.5; }
html[lang="th"] .mbti-article p, html[lang="th"] .mbti-article li { line-height: 1.75; }
html[lang="th"] .landing-hero h1 { text-wrap: balance; }

/* Reserve the space the fetched header/footer and the JS-built quiz fill, so they
   do not shove <main> around when they arrive (CLS 0.08-0.10 per template). */
.main-header { min-height: 68px; }
@media (max-width: 599px) { .main-footer { min-height: 222px; } }
#quiz-app { min-height: 480px; }

/* Language pills are anchors now (crawlable), not buttons. */
a.lang-pill { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.th-static-link { text-align: right; font-size: 13px; padding: 0 16px; margin: 0; }
.th-static-link a { display: inline-block; padding: 13px 4px; color: var(--ink-soft); }
.mbti-answer p { font-size: 1.05rem; line-height: 1.6; }

/* Result share cluster: full-width, 48px tap targets on phones (the share loop is the free growth engine). */
@media (max-width: 480px) {
    .invite-block { padding: 18px 16px; }
    .invite-block .share-buttons, .result-actions .share-buttons { flex-direction: column; gap: 10px; }
    .invite-block .share-buttons > *, .result-actions .share-buttons > * { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
}
html[lang="th"] .invite-block p { line-height: 1.7; }