/* ==========================================================================
   Sex AI — Core Stylesheet
   https://sex--ai.com/
   Static HTML + CSS + vanilla JS. No frameworks, no build step.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Typography
   05. Buttons
   06. Header & navigation
   07. Hero
   09. Character cards & gallery
   10. Chat UI (desktop + phone)
   11. Feature blocks
   12. Steps
   13. Meters & personality UI
   14. Accordion
   15. Filters
   16. Blog cards
   17. Auth (login)
   18. Legal / prose pages
   19. CTA bands
   20. Footer
   21. Utilities & motion
   22. Responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #09090B;
  --bg-2:          #101014;
  --surface:       #141419;
  --card:          #18181D;
  --card-hi:       #1E1E24;

  /* Accents */
  --accent:        #FF365D;
  --hot:           #FF3D91;
  --purple:        #8B5CF6;

  /* Text */
  --text:          #FFFFFF;
  --text-2:        #A1A1AA;
  --text-3:        #71717A;

  /* Lines & tints */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.14);
  --tint-accent:   rgba(255, 54, 93, 0.12);
  --tint-hot:      rgba(255, 61, 145, 0.12);

  /* Gradients */
  --grad-brand:    linear-gradient(100deg, #FF365D 0%, #FF3D91 55%, #8B5CF6 100%);
  --grad-warm:     linear-gradient(100deg, #FF365D 0%, #FF3D91 100%);
  --grad-cool:     linear-gradient(100deg, #FF3D91 0%, #8B5CF6 100%);
  --grad-surface:  linear-gradient(180deg, #141419 0%, #101014 100%);

  /* Glow */
  --glow-accent:   0 0 40px rgba(255, 54, 93, 0.35);
  --glow-hot:      0 0 60px rgba(255, 61, 145, 0.28);
  --shadow-card:   0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-lift:   0 26px 70px rgba(0, 0, 0, 0.65);

  /* Geometry */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: 24px;
  --maxw: 1200px;
  --maxw-narrow: 860px;

  /* Type */
  --font: "Segoe UI Variable Display", "Segoe UI", -apple-system,
          BlinkMacSystemFont, Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }
figcaption { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(255, 61, 145, 0.35); color: #fff; }

:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 400;
  padding: 12px 20px;
  background: var(--hot);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { left: 16px; }

/* ==========================================================================
   03. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--maxw-narrow); }

.section {
  position: relative;
  padding: 96px 0;
}

.section--tight { padding: 64px 0; }
.section--flush-top { padding-top: 0; }

.section--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Ambient glow blobs, used sparingly behind key sections */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.glow--hot    { background: rgba(255, 61, 145, 0.20); }
.glow--accent { background: rgba(255, 54, 93, 0.18); }
.glow--purple { background: rgba(139, 92, 246, 0.18); }

.section > .container { position: relative; z-index: 1; }

/* ==========================================================================
   04. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.025em; }
h4 { font-size: 1.02rem; letter-spacing: -0.015em; }

p { margin: 0 0 16px; color: var(--text-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-2);
  line-height: 1.7;
  max-width: 62ch;
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-text--warm {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-warm);
  box-shadow: 0 0 10px rgba(255, 61, 145, 0.9);
}

.section-head {
  max-width: 720px;
  margin-bottom: 52px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p { font-size: 1.05rem; }

.text-muted { color: var(--text-2); }
.text-small { font-size: 0.88rem; }

/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-warm);
  color: #fff;
  box-shadow: 0 10px 30px rgba(255, 54, 93, 0.30);
}
.btn-primary:hover {
  box-shadow: 0 16px 44px rgba(255, 61, 145, 0.45);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  padding-inline: 14px;
}
.btn-quiet:hover { color: var(--text); }

.btn-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-sm { padding: 10px 18px; font-size: 0.86rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Small circular "arrow" affordance used inside cards */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.btn-arrow svg { transition: transform var(--dur) var(--ease); }
.btn-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(9, 9, 11, 0.9);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  flex-shrink: 0;
}
.brand-sex { color: var(--text); }
.brand-ai {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-domain {
  margin-left: -2px;
  color: var(--text-3);
  font-size: 0.58em;
  font-weight: 700;
  line-height: 1;
}
.brand:hover .brand-ai { filter: brightness(1.15); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  position: relative;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav a.is-active { color: var(--text); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--grad-warm);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-mobile-actions { display: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.6px;
  margin: 3.4px auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Compact eligibility chip used only on compliance surfaces */
.age-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(255, 54, 93, 0.45);
  border-radius: 6px;
  color: #FF6B85;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   07. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding: 72px 0 84px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(255, 61, 145, 0.13), transparent 62%),
    radial-gradient(700px 460px at 8% 30%, rgba(139, 92, 246, 0.11), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(255, 54, 93, 0.08), transparent 65%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: 20px; }

.hero__copy .lead { margin-bottom: 30px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.84rem;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hot);
}

/* Right-hand column of the hero: the character stack or a chat window. */
.hero__visual { position: relative; min-width: 0; }

/* --- Overlapping character stack (hero visual) --- */

.char-stack {
  position: relative;
  height: 500px;
  perspective: 1400px;
}

.char-stack__card {
  position: absolute;
  top: 50%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  background: var(--card);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.char-stack__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.char-stack__card--side {
  width: 172px;
  height: 232px;
}

.char-stack__card--left {
  left: 0;
  transform: translateY(-50%) rotate(-7deg) scale(0.95);
  z-index: 1;
  opacity: 0.86;
}

.char-stack__card--right {
  right: 0;
  transform: translateY(-50%) rotate(7deg) scale(0.95);
  z-index: 1;
  opacity: 0.86;
}

.char-stack__card--main {
  left: 50%;
  width: 300px;
  height: 412px;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: var(--shadow-lift), var(--glow-hot);
}

.char-stack:hover .char-stack__card--left  { transform: translateY(-50%) rotate(-9deg) scale(0.98) translateX(-6px); }
.char-stack:hover .char-stack__card--right { transform: translateY(-50%) rotate(9deg) scale(0.98) translateX(6px); }
.char-stack:hover .char-stack__card--main  { transform: translate(-50%, -50%) scale(1.02); }

/* Floating "label" pinned over the stack */
.char-stack__tag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(20, 20, 25, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  animation: float 7s ease-in-out infinite;
}
.char-stack__tag--a { top: 12px; left: -8px; }
.char-stack__tag--b { bottom: 34px; right: -6px; animation-delay: -3.5s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ==========================================================================
   09. CHARACTER CARDS & GALLERY
   ========================================================================== */

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}

/* Four-card variant. auto-fill keeps its empty tracks, so a four-card row
   drops to three columns plus one orphan below 1134px. Pinning the columns
   keeps the row whole: 4 across -> 2 x 2 -> stacked. */
.char-grid--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.char-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.char-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 61, 145, 0.4);
  box-shadow: var(--shadow-lift);
}

.char-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
}

.char-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.7s var(--ease);
}
.char-card:hover .char-card__media img { transform: scale(1.05); }

.char-card--locked .char-card__media img {
  filter: blur(4px) saturate(0.82) brightness(0.72);
  transform: scale(1.09);
}

.char-card--locked:hover .char-card__media img { transform: scale(1.13); }

.char-card--locked .char-card__media::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(12, 10, 15, 0.68) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v3'/%3E%3C/svg%3E") center / 30px no-repeat;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.5), 0 0 0 8px rgba(255, 61, 145, 0.08), 0 0 34px rgba(255, 61, 145, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%, -58%);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.char-card--locked:hover .char-card__media::before {
  border-color: rgba(255, 143, 187, 0.7);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.58), 0 0 0 9px rgba(255, 61, 145, 0.11), 0 0 44px rgba(255, 61, 145, 0.4);
  transform: translate(-50%, -62%) scale(1.04);
}

.char-card__unlock-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 106px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.char-card__unlock-link::after { content: "Unlock to chat"; }
.char-card__unlock-link:focus-visible { outline-offset: -5px; }

.char-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(9, 9, 11, 0) 42%,
              rgba(9, 9, 11, 0.72) 78%,
              rgba(9, 9, 11, 0.95) 100%);
  pointer-events: none;
}

.char-card__status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(9, 9, 11, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--text-2);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: pulse-dot 2.4s infinite;
}
.dot--away { background: var(--text-3); animation: none; box-shadow: none; }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.char-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--line);
}

.char-card__name {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.char-card__persona {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.char-card__line {
  margin: 0;
  min-height: 44px;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 500;
}
.tag--hot {
  border-color: rgba(255, 61, 145, 0.35);
  background: var(--tint-hot);
  color: #FF8FBB;
}

.char-card .btn { margin-top: auto; }

/* Horizontal scroller (mobile-friendly galleries) */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 20px;
  overflow-x: auto;
  padding: 6px 4px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.scroller > * { scroll-snap-align: start; }
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}

.scroller-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.scroller-head .section-head { margin-bottom: 0; }

.scroller-nav { display: flex; gap: 8px; flex-shrink: 0; }
.scroller-nav button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scroller-nav button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   10. CHAT UI
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.split--reverse .split__media { order: -1; }

/* Swaps the two columns on desktop. The media keeps its place in the DOM, so
   the order is only reversed visually — the stacked mobile layout, and the
   order a screen reader or keyboard reaches them in, stay as authored. */
.split--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.split--flip .split__media { order: 2; }
.split--flip > :not(.split__media) { order: 1; }

/* --- Framed character portrait beside a chat --- */

.portrait-frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
}
.portrait-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.portrait-frame__plate {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(16, 16, 20, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.portrait-frame__plate strong { display: block; font-size: 1rem; }
.portrait-frame__plate span { font-size: 0.8rem; color: var(--text-2); }

/* --- Chat window --- */

.chat {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17171C 0%, #121216 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-height: 560px;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.chat__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}

.chat__who { margin-right: auto; min-width: 0; }
.chat__who strong { display: block; font-size: 0.95rem; letter-spacing: -0.015em; }
.chat__who span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #4ADE80;
}
.chat__who span.is-typing { color: var(--text-2); }
.chat__who span.is-typing .dot { background: var(--hot); }

.chat__head-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-3);
  flex-shrink: 0;
}

.chat__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  min-height: 300px;
}
.chat__body::-webkit-scrollbar { width: 5px; }
.chat__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
}

.bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  animation: bubble-in 0.45s var(--ease) both;
}
.bubble--in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  color: var(--text);
}
.bubble--out {
  align-self: flex-end;
  background: var(--grad-warm);
  border-bottom-right-radius: 6px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 54, 93, 0.24);
}
.bubble em { font-style: normal; color: #FFB3CB; }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.chat__body.is-resetting .bubble { animation: none; }

.typing-indicator {
  align-self: flex-start;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 14px 17px;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}
.typing-indicator.is-on { display: inline-flex; }
.typing-indicator i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  animation: blink 1.3s infinite ease-in-out;
}
.typing-indicator i:nth-child(2) { animation-delay: 0.18s; }
.typing-indicator i:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.chat__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.chat__input {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color var(--dur) var(--ease);
}
.chat__input::placeholder { color: var(--text-3); }
.chat__input:focus {
  outline: none;
  border-color: rgba(255, 61, 145, 0.5);
}

.chat__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-warm);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 54, 93, 0.3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chat__send:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(255, 61, 145, 0.45);
}

.chat__demo-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--text-3);
  font-size: 0.78rem;
}

/* --- Phone frame --- */

.phone {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  padding: 12px;
  border-radius: 44px;
  background: linear-gradient(180deg, #26262E 0%, #131317 100%);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift), 0 0 90px rgba(255, 61, 145, 0.14);
}

.phone__screen {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg);
}

.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #0A0A0C;
  z-index: 4;
}

.phone .chat {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  background: transparent;
}
.phone .chat__head { padding-top: 42px; }
.phone .chat__body { min-height: 330px; max-height: 330px; }

.phone__caption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 0.83rem;
}

.phone-caption-wrap { text-align: center; }

/* ==========================================================================
   11. FEATURE BLOCKS
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Even 2 x 2 tiling. Used where the cards carry previews inside them and a
   four-across row would squeeze the content; every card gets an equal share. */
.feature-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Block A — tall card with mini chat preview */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: rgba(255, 61, 145, 0.3); transform: translateY(-4px); }

.feature__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(255, 61, 145, 0.3);
  background: var(--tint-hot);
  color: #FF8FBB;
  flex-shrink: 0;
}
.feature__icon svg { width: 21px; height: 21px; }

.feature h3 { margin: 0; font-size: 1.14rem; }
.feature p { margin: 0; font-size: 0.92rem; }

.feature__spacer { flex: 1; min-height: 4px; }

/* Mini chat snippet inside a feature card */
.mini-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-md);
  background: rgba(9, 9, 11, 0.6);
  border: 1px solid var(--line);
}
.mini-chat .bubble {
  font-size: 0.83rem;
  padding: 9px 13px;
  animation: none;
}

/* Portrait chip row inside a feature card */
.mini-portraits { display: flex; gap: 10px; }
.mini-portraits img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--line-strong);
}
.mini-portraits img:not(:first-child) { margin-left: -18px; }

/* ==========================================================================
   12. STEPS
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 30px 26px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.step:hover { border-color: rgba(255, 61, 145, 0.3); transform: translateY(-4px); }

.step__num {
  display: block;
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { font-size: 0.9rem; margin: 0; }

.step__visual {
  margin-top: 20px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(9, 9, 11, 0.55);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.step__visual img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.step__visual span { font-size: 0.83rem; color: var(--text-2); }

/* ==========================================================================
   13. METERS & PERSONALITY UI
   ========================================================================== */

.meter-list { display: flex; flex-direction: column; gap: 16px; }

.meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.meter__row span:first-child { font-size: 0.9rem; font-weight: 600; }
.meter__row span:last-child { font-size: 0.78rem; color: var(--text-3); }

.meter__track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--grad-warm);
  transition: width 1.1s var(--ease);
}
.meter:nth-child(2) .meter__fill { background: var(--grad-cool); }
.meter:nth-child(4) .meter__fill { background: linear-gradient(100deg, #8B5CF6, #FF365D); }

/* Profile card that wraps the meters */
.profile-card {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

.profile-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.profile-card__head img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--line-strong);
}
.profile-card__head strong { display: block; font-size: 1.06rem; }
.profile-card__head span { font-size: 0.82rem; color: var(--text-2); }

.memory-list,
.feature-list { display: flex; flex-direction: column; gap: 10px; }
.memory-list { margin-top: 22px; }
.memory-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--text-2);
}
.memory-item svg { flex-shrink: 0; margin-top: 3px; color: var(--hot); }

/* ==========================================================================
   14. ACCORDION
   ========================================================================== */

.accordion {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-item > h3 { margin: 0; font-size: inherit; letter-spacing: normal; }

.acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: background-color var(--dur) var(--ease);
}
.acc-trigger:hover { background: rgba(255, 255, 255, 0.025); }

.acc-trigger__icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.acc-trigger__icon::before,
.acc-trigger__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--text-2);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
}
.acc-trigger__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc-trigger[aria-expanded="true"] .acc-trigger__icon::before { background: var(--hot); }
.acc-trigger[aria-expanded="true"] .acc-trigger__icon::after {
  transform: translate(-50%, -50%) rotate(0);
  background: var(--hot);
}

.acc-panel {
  padding: 0 26px 24px;
  max-width: 74ch;
}
.acc-panel p { font-size: 0.94rem; }
.acc-panel[hidden] { display: none; }

.acc-group + .acc-group { margin-top: 40px; }

.acc-group__title {
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   15. FILTERS
   ========================================================================== */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 36px;
}

.filter-chip {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-2);
  font-size: 0.87rem;
  font-weight: 500;
  transition: all var(--dur) var(--ease);
}
.filter-chip:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.24);
}
.filter-chip.is-active {
  background: var(--grad-warm);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 54, 93, 0.28);
}

.filter-empty {
  display: none;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-2);
}
.filter-empty.is-on { display: block; }

.char-card.is-hidden { display: none; }

/* ==========================================================================
   16. BLOG CARDS
   ========================================================================== */

/* Two columns, fixed. Every category group on the blog index holds either two
   cards or one wide card, and auto-fill was leaving the third track empty. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* One real link on the card title, stretched over the whole card so the
   entire tile is clickable without nesting interactive elements. */
.post-card__body h3 a { color: inherit; text-decoration: none; }
.post-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card:focus-within { border-color: rgba(255, 61, 145, 0.5); }
.post-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 61, 145, 0.35);
  box-shadow: var(--shadow-lift);
}

.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(9, 9, 11, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 61, 145, 0.35);
  color: #FF8FBB;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 22px;
}
.post-card__body h3 { font-size: 1.08rem; margin: 0; line-height: 1.32; }
.post-card__body p { font-size: 0.9rem; margin: 0; }
/* Scoped to beat `.post-card__body p` so the meta line stays small and
   pinned to the bottom of the card. */
.post-card__body .post-card__meta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  color: var(--text-3);
  font-size: 0.78rem;
}

.post-card--feature {
  grid-column: span 2;
  flex-direction: row;
}
.post-card--feature .post-card__media { aspect-ratio: auto; width: 46%; flex-shrink: 0; }
.post-card--feature .post-card__body { padding: 32px; justify-content: center; }
.post-card--feature .post-card__body h3 { font-size: 1.5rem; }

/* ==========================================================================
   17. AUTH
   ========================================================================== */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.auth__visual {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.auth__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.auth__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
              rgba(9, 9, 11, 0.35) 0%,
              rgba(9, 9, 11, 0.72) 55%,
              rgba(9, 9, 11, 0.96) 100%);
}

.auth__visual-copy {
  position: absolute;
  z-index: 2;
  left: 48px;
  right: 48px;
  bottom: 48px;
}
.auth__visual-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.auth__visual-copy p { max-width: 44ch; }

.auth__panel {
  display: grid;
  place-items: center;
  padding: 60px 24px;
}

.auth__form {
  width: 100%;
  max-width: 400px;
}

.auth__form h1 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  margin-bottom: 10px;
}

.auth__form > p { margin-bottom: 30px; font-size: 0.94rem; }

.field { margin-bottom: 18px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
}

.field input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.95rem;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--text-3); }
.field input:focus {
  outline: none;
  border-color: rgba(255, 61, 145, 0.55);
  background: rgba(255, 255, 255, 0.055);
}

.field-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -4px 0 24px;
  font-size: 0.85rem;
}
.field-foot a { color: var(--text-2); }
.field-foot a:hover { color: var(--hot); }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  font-size: 0.85rem;
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox input:checked {
  background: var(--grad-warm);
  border-color: transparent;
}
.checkbox input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
  color: var(--text-3);
  font-size: 0.8rem;
}
.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth__switch {
  margin-top: 26px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-2);
}
.auth__switch a { color: var(--hot); font-weight: 600; }

.form-note {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-3);
  font-size: 0.79rem;
  line-height: 1.55;
}

/* ==========================================================================
   18. LEGAL / PROSE
   ========================================================================== */

.page-head {
  position: relative;
  padding: 76px 0 52px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 340px at 22% 0%, rgba(255, 61, 145, 0.12), transparent 62%),
    radial-gradient(600px 320px at 82% 10%, rgba(139, 92, 246, 0.10), transparent 60%);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { margin-bottom: 14px; }
.page-head p { max-width: 66ch; font-size: 1.04rem; }

.blog-hero-art,
.article-hero-art {
  position: relative;
  overflow: hidden;
  margin: 38px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.blog-hero-art { aspect-ratio: 8 / 3; }
.article-hero-art { aspect-ratio: 3 / 2; max-height: 560px; }

.blog-hero-art img,
.article-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: var(--text-3);
  font-size: 0.82rem;
}
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs span { opacity: 0.5; }

.prose { max-width: 74ch; }

/* Article layout — prose on the left, a sticky section index on the right. The
   prose takes every pixel the index does not, so the pair spans the full
   container width instead of leaving a gap on the right. The block starts at
   the container's left edge rather than being centred. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 72px;
  align-items: start;
}

/* The 74ch measure keeps FAQ and legal pages readable, but on desktop the
   article column is already bounded by the index beside it, so let the text
   fill it. Below the breakpoint the layout drops to one column and the default
   measure comes back — a full-width column would run past 1000px there. */
@media (min-width: 1081px) {
  .article-layout .prose { max-width: none; }
}

.article-toc { position: sticky; top: 96px; }
.article-toc .toc { margin-bottom: 0; padding: 20px 22px; }
.article-toc .toc h2 { margin-bottom: 12px; }
.article-toc .toc ol { gap: 10px; }
.article-toc .toc li { display: flex; gap: 9px; align-items: baseline; }
.article-toc .toc li::before { flex: none; }
.article-toc .toc a {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  transition: color var(--dur) var(--ease);
}
.article-toc .toc a.is-active { color: var(--hot); }

/* Anchor targets must clear the 72px sticky header. */
.prose h2, .prose h3 { scroll-margin-top: 96px; }

.prose h2 {
  margin: 48px 0 14px;
  font-size: 1.5rem;
  letter-spacing: -0.028em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; font-size: 1.1rem; }
.prose p { font-size: 0.97rem; line-height: 1.75; }
.prose ul { margin: 0 0 18px; padding-left: 0; }
.prose ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.7;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hot);
}
.prose a { color: var(--hot); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: #fff; }
.prose strong { color: var(--text); font-weight: 600; }

/* Ordered list — mirrors the ul treatment but keeps a visible counter, so
   step-by-step passages stay scannable. */
.prose ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
  counter-reset: prose-ol;
}
.prose ol li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 12px;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.7;
  counter-increment: prose-ol;
}
.prose ol li::before {
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  top: 0.28em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 61, 145, 0.3);
  background: var(--tint-hot);
  color: #FF8FBB;
  font-size: 0.7rem;
  font-weight: 700;
}

.prose blockquote {
  margin: 28px 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--hot);
}
.prose blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Author attribution shown under the article H1. */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 32px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
}
.byline__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.byline__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.byline__name { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.byline__role { font-size: 0.8rem; color: var(--text-3); }

.prose__updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  margin-bottom: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 0.8rem;
}

.callout {
  margin: 26px 0;
  padding: 22px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 61, 145, 0.28);
  background: var(--tint-hot);
}
.callout p { margin: 0; font-size: 0.93rem; color: var(--text); }

.toc {
  margin-bottom: 44px;
  padding: 24px 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
}
.toc h2 {
  margin: 0 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 9px; }
.toc li { counter-increment: toc; font-size: 0.92rem; }
.toc li::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--hot); }

/* ==========================================================================
   19. CTA BANDS
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

.cta-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: center;
  min-height: 440px;
}

.cta-band__copy { padding: 76px 0; position: relative; z-index: 2; }
.cta-band__copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 16px; }
.cta-band__copy p { max-width: 46ch; margin-bottom: 30px; }
.cta-band .btn-primary,
.cta-band .btn-primary:visited,
.cta-band .btn-primary:hover,
.cta-band .btn-primary:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.cta-band__visual {
  position: relative;
  align-self: stretch;
  min-height: 380px;
}
.cta-band__visual img {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + var(--gutter));
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.cta-band__visual::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + var(--gutter));
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-2) 0%, rgba(16, 16, 20, 0.55) 38%, rgba(16, 16, 20, 0) 100%);
}

@media (min-width: 1200px) {
  .cta-band__visual img,
  .cta-band__visual::before {
    width: calc(100% + 50vw - 600px + var(--gutter));
  }
}

.cta-band__glow {
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  background: rgba(255, 61, 145, 0.20);
  left: -120px;
  bottom: -180px;
  pointer-events: none;
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.site-footer {
  padding: 68px 0 32px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.footer-brand p {
  max-width: 38ch;
  margin: 16px 0 20px;
  font-size: 0.9rem;
}

.footer-col h3 {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 28px;
  color: var(--text-3);
  font-size: 0.82rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-disclaimer {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.65;
}

/* ==========================================================================
   21. UTILITIES & MOTION
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }

.mt-0  { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.center { text-align: center; }

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   22. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__inner { gap: 40px; }
  .split { gap: 40px; }
  .cta-band__grid { grid-template-columns: 1fr; }
  .cta-band__visual {
    min-height: 320px;
    order: -1;
    margin-inline: calc(50% - 50vw);
  }
  .cta-band__visual img,
  .cta-band__visual::before { width: 100%; }
  .cta-band__visual img { object-position: 82% center; }
  .cta-band__visual::before {
    background: linear-gradient(0deg, var(--bg-2) 0%, rgba(16, 16, 20, 0.3) 60%, rgba(16, 16, 20, 0) 100%);
  }
  .cta-band__copy { padding: 20px 0 72px; }

  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-toc { position: static; order: -1; }
  .article-toc .toc { margin-bottom: 4px; }
}

@media (max-width: 960px) {
  .site-header {
    background: rgba(9, 9, 11, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-inner {
    height: 64px;
    gap: 16px;
  }

  .brand,
  .header-actions,
  .nav-toggle {
    position: relative;
    z-index: 220;
  }

  .nav-toggle {
    display: grid;
    width: 40px;
    height: 40px;
  }

  .nav {
    position: fixed;
    inset: 64px 0 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom));
    background: rgba(9, 9, 11, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav a {
    padding: 16px 12px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav a.is-active::after { display: none; }
  .nav a.is-active { color: var(--hot); }

  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }

  .header-actions { display: none; }
  .nav-toggle { margin-left: auto; }

  .hero { padding: 48px 0 64px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .char-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__copy { text-align: left; }
  .char-stack { height: 400px; max-width: 460px; margin-inline: auto; width: 100%; }
  .char-stack__card--main { width: 244px; height: 336px; }
  .char-stack__card--side { width: 140px; height: 190px; }

  .split, .split--reverse, .split--flip { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .split--flip .split__media,
  .split--flip > :not(.split__media) { order: 0; }

  .steps { grid-template-columns: 1fr; }

  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__visual { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth__visual-copy { left: 24px; right: 24px; bottom: 28px; }
  .auth__panel { padding: 48px 24px 64px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: span 2; }

  .post-card--feature { flex-direction: column; }
  .post-card--feature .post-card__media { width: 100%; aspect-ratio: 16 / 10; }
  .post-card--feature .post-card__body { padding: 22px; }
  .post-card--feature .post-card__body h3 { font-size: 1.12rem; }
}

@media (max-width: 720px) {
  :root { --gutter: 18px; }

  .blog-hero-art,
  .article-hero-art {
    margin-top: 28px;
    border-radius: var(--r-lg);
  }

  .section { padding: 68px 0; }
  .section--tight { padding: 48px 0; }

  .hero { padding: 34px 0 52px; }
  .hero__inner { gap: 34px; }
  .hero__meta { gap: 8px 16px; font-size: 0.8rem; }
  .hero__meta span + span::before { margin-left: 0; }

  .btn-row { gap: 12px; }
  .btn-row .btn { flex: 0 1 auto; }
  .hero__copy > .btn-row { justify-content: center; }

  .chart, .chat { max-height: 480px; }
  .chat__body { min-height: 240px; padding: 18px 14px; }
  .bubble { max-width: 88%; font-size: 0.89rem; }

  .char-stack { height: 340px; }
  .char-stack__card--main { width: 200px; height: 276px; }
  .char-stack__card--side { width: 116px; height: 158px; }
  .char-stack__tag { font-size: 0.72rem; padding: 7px 12px; }
  .char-stack__tag--a { left: -2px; }
  .char-stack__tag--b { right: -2px; }

  .scroller { grid-auto-columns: 250px; }
  .scroller-head { flex-direction: column; align-items: flex-start; }
  .scroller-nav { display: none; }

  .acc-trigger { padding: 18px 20px; font-size: 0.94rem; }
  .acc-panel { padding: 0 20px 20px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .page-head { padding: 52px 0 40px; }
  .phone { max-width: 100%; border-radius: 34px; }
  .phone__screen { border-radius: 26px; }

  .feature-grid, .feature-grid--even { grid-template-columns: 1fr; }
  .char-grid--quad { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .post-card--feature { grid-column: span 1; }
}

@media (max-width: 420px) {
  h1 { font-size: 1.95rem; }
  .brand { font-size: 1.12rem; }
  .header-inner { gap: 12px; }
  .char-stack__card--side { display: none; }
  .char-stack { height: 320px; }
  .char-stack__card--main { width: 230px; height: 306px; }
}