/* ==========================================================
       01. DESIGN TOKENS / BASE
       ========================================================== */

    :root {
      --paper: #f5f2eb;
      --paper-deep: #ece8df;
      --white: #ffffff;
      --ink: #20211f;
      --muted: #65665f;
      --line: #dcd8cf;
      --red: #b93730;
      --red-hover: #992a24;
      --rose: #f3ded7;
      --dark: #141618;
      --dark-card: #202225;
      --dark-muted: #b3b5b5;
      --sage: #e5e9df;
      --gold: #f1d39e;

      --font-body: "Inter", Arial, sans-serif;
      --font-editorial: "DM Serif Display", Georgia, serif;

      --radius-sm: 12px;
      --radius: 22px;
      --radius-lg: 34px;
      --shadow: 0 16px 44px rgb(31 28 22 / 7%);
      --container: 1140px;
      --gutter: clamp(20px, 4vw, 36px);
      --section-space: clamp(64px, 9vw, 112px);
    }

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

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

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    body,
    button,
    input,
    select,
    textarea {
      font-family: var(--font-body);
    }

    button,
    input,
    select,
    textarea {
      font-size: 16px;
    }

    button,
    a,
    input,
    select,
    textarea,
    summary {
      -webkit-tap-highlight-color: transparent;
    }

    button,
    select,
    summary {
      cursor: pointer;
    }

    button {
      color: inherit;
    }

    button,
    input,
    select,
    textarea {
      max-width: 100%;
    }

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

    img {
      height: auto;
    }

    a {
      color: inherit;
      text-underline-offset: 5px;
    }

    a,
    button,
    input,
    select,
    textarea,
    summary {
      touch-action: manipulation;
    }

    h1,
    h2,
    h3,
    p,
    figure,
    blockquote {
      margin: 0;
    }

    h1,
    h2,
    h3 {
      line-height: 1.12;
      overflow-wrap: break-word;
    }

    h2 {
      font-size: clamp(30px, 4.1vw, 49px);
      font-weight: 700;
      letter-spacing: -0.052em;
      text-wrap: balance;
    }

    h3 {
      font-size: 20px;
      font-weight: 650;
      letter-spacing: -0.035em;
    }

    p + p {
      margin-top: 16px;
    }

    em {
      font-family: var(--font-editorial);
      font-weight: 400;
    }

    :focus-visible {
      outline: 3px solid #216457;
      outline-offset: 5px;
    }

    .dark :focus-visible,
    .finale :focus-visible {
      outline-color: var(--gold);
    }

    [hidden] {
      display: none !important;
    }

    [id] {
      scroll-margin-top: 108px;
    }

    ::selection {
      color: var(--white);
      background: var(--red);
    }

    .container {
      width: calc(100% - var(--gutter) * 2);
      max-width: var(--container);
      margin-inline: auto;
    }

    .section {
      position: relative;
      padding-block: var(--section-space);
    }

    .section--white {
      background: var(--white);
    }

    .section--mist {
      background: var(--paper-deep);
    }

    .section--rose {
      background: var(--rose);
    }

    .dark {
      color: var(--paper);
      background: var(--dark);
    }

    .muted {
      color: var(--muted);
    }

    .dark .muted {
      color: var(--dark-muted);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--red);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 22px;
      height: 1px;
      flex: 0 0 22px;
      background: currentColor;
      content: "";
    }

    .dark .eyebrow {
      color: var(--gold);
    }

    .section-head {
      display: grid;
      gap: 22px;
      margin-bottom: 34px;
    }

    .section-head h2 {
      max-width: 750px;
      margin-top: 17px;
    }

    .section-head > p,
    .section-intro {
      max-width: 580px;
      color: var(--muted);
      font-size: 16px;
    }

    .dark .section-head > p,
    .dark .section-intro {
      color: var(--dark-muted);
    }

    .section-intro {
      margin-top: 22px;
      font-size: 17px;
    }

    .icon {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .icon-sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      gap: 11px;
      padding: 13px 21px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.4;
      text-align: center;
      text-decoration: none;
      transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .button--red {
      background: var(--red);
      color: var(--white);
    }

    .button--red:hover {
      background: var(--red-hover);
      box-shadow: 0 8px 24px rgb(185 55 48 / 18%);
    }

    .button--ink {
      background: var(--ink);
      color: var(--white);
    }

    .button--ink:hover {
      background: #393b37;
    }

    .button--light {
      color: var(--ink);
      background: var(--paper);
    }

    .button--light:hover {
      background: var(--white);
    }

    .button--outline {
      border-color: var(--line);
      color: var(--ink);
      background: transparent;
    }

    .button--outline:hover {
      border-color: var(--ink);
      background: rgb(255 255 255 / 55%);
    }

    .button--small {
      min-height: 44px;
      padding: 10px 16px;
      font-size: 12px;
    }

    .text-link {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 650;
      text-decoration-thickness: 1px;
    }

    .small-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.7;
    }

    .dark .small-note {
      color: var(--dark-muted);
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.4;
    }

    .check-list {
      display: grid;
      gap: 13px;
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding-left: 29px;
      color: var(--muted);
      font-size: 14px;
    }

    .check-list li::before {
      position: absolute;
      top: 2px;
      left: 0;
      display: grid;
      width: 18px;
      height: 18px;
      place-items: center;
      border-radius: 50%;
      color: var(--red);
      background: var(--rose);
      font-size: 11px;
      font-weight: 800;
      content: "✓";
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: fixed;
      z-index: 200;
      top: 12px;
      left: 12px;
      padding: 12px 18px;
      transform: translateY(-180%);
      border-radius: var(--radius-sm);
      color: var(--white);
      background: var(--ink);
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    /*
      Пустые слоты не создают визуальных дыр и не содержат пустых заголовков.
      При добавлении настоящего HTML-контента оформление включится само.
    */
    .unique-slot:empty {
      display: none;
    }

    .unique-slot:not(:empty) {
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }

    .dark .unique-slot:not(:empty),
    .finale .unique-slot:not(:empty) {
      border-top-color: rgb(255 255 255 / 20%);
    }

    /* ==========================================================
       02. HEADER / NAVIGATION
       ========================================================== */

    .site-header {
      position: sticky;
      z-index: 50;
      top: 0;
      border-bottom: 1px solid rgb(32 33 31 / 10%);
      background: rgb(245 242 235 / 95%);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      display: flex;
      min-height: 77px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
      text-decoration: none;
    }

    .brand-mark {
      display: grid;
      width: 30px;
      height: 34px;
      place-items: center;
      border-radius: 16px 16px 7px 7px;
      color: var(--paper);
      background: var(--red);
    }

    .brand-word {
      font-size: 21px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.065em;
    }

    .brand-word span {
      color: var(--red);
    }

    .desktop-nav {
      display: none;
      align-items: center;
      gap: 25px;
    }

    .desktop-nav a {
      padding-block: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
    }

    .desktop-nav a:hover {
      color: var(--red);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .header-cta {
      display: none;
    }

    .site-menu {
      position: relative;
    }

    .site-menu > summary {
      display: flex;
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding-inline: 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 650;
      list-style: none;
    }

    .site-menu > summary::-webkit-details-marker {
      display: none;
    }

    .site-menu[open] > summary {
      border-color: var(--ink);
    }

    .menu-panel {
      position: absolute;
      top: calc(100% + 17px);
      right: 0;
      display: grid;
      width: min(310px, calc(100vw - 40px));
      max-height: calc(100dvh - 130px);
      gap: 3px;
      padding: 14px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .menu-panel a {
      padding: 10px 13px;
      border-radius: 9px;
      font-size: 13px;
      text-decoration: none;
    }

    .menu-panel a:hover {
      color: var(--red);
      background: var(--rose);
    }

    /* ==========================================================
       03. HERO / EDITORIAL COLLAGE
       ========================================================== */

    .hero {
      padding-top: 44px;
      padding-bottom: 0;
      overflow: clip;
    }

    .hero-topline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 26px;
      border-bottom: 1px solid var(--line);
    }

    .hero-topline .edition {
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .audience-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      font-weight: 600;
    }

    .age-mark {
      display: inline-grid;
      width: 31px;
      height: 24px;
      place-items: center;
      border: 1px solid var(--ink);
      border-radius: 5px;
      font-size: 10px;
      line-height: 1;
    }

    .hero-grid {
      display: grid;
      align-items: center;
      gap: 44px;
      padding-block: 42px 46px;
    }

    .hero h1 {
      max-width: 570px;
      font-size: clamp(49px, 6.6vw, 76px);
      font-weight: 650;
      line-height: 0.99;
      letter-spacing: -0.073em;
    }

    .hero h1 .amp {
      color: var(--red);
      font-family: var(--font-editorial);
      font-weight: 400;
    }

    .hero h1 em {
      color: var(--red);
      letter-spacing: -0.045em;
    }

    .hero-lead {
      max-width: 430px;
      margin-top: 26px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.75;
    }

    .hero-footnote {
      max-width: 410px;
      margin-top: 17px;
    }

    .hero-art {
      position: relative;
      width: min(100%, 520px);
      height: 450px;
      margin: 0 auto;
      isolation: isolate;
    }

    .hero-art__field {
      position: absolute;
      z-index: -2;
      inset: 0 12px 18px;
      overflow: hidden;
      border-radius: 48% 48% 25% 25%;
      background: var(--red);
    }

    .hero-art__field::before,
    .hero-art__field::after {
      position: absolute;
      width: 390px;
      height: 570px;
      border: 1px solid rgb(255 255 255 / 35%);
      border-radius: 50%;
      content: "";
    }

    .hero-art__field::before {
      top: -120px;
      left: -170px;
      transform: rotate(-28deg);
    }

    .hero-art__field::after {
      right: -220px;
      bottom: -240px;
      transform: rotate(35deg);
    }

    .hero-portrait {
      position: absolute;
      overflow: hidden;
      border: 5px solid var(--paper);
      background: var(--paper-deep);
      box-shadow: 0 18px 42px rgb(53 18 16 / 22%);
    }

    .hero-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 32%;
    }

    .hero-portrait--her {
      z-index: 2;
      top: 54px;
      left: 1%;
      width: 55%;
      height: 310px;
      transform: rotate(-9deg);
      border-radius: 120px 120px 24px 24px;
    }

    .hero-portrait--him {
      z-index: 1;
      top: 38px;
      right: 0;
      width: 49%;
      height: 292px;
      transform: rotate(9deg);
      border-radius: 100px 100px 24px 24px;
    }

    .hero-portrait figcaption {
      position: absolute;
      right: 9px;
      bottom: 9px;
      left: 9px;
      padding: 9px 11px;
      border: 1px solid rgb(255 255 255 / 40%);
      border-radius: 12px;
      color: var(--white);
      background: rgb(20 22 24 / 70%);
      font-size: 10px;
      line-height: 1.5;
      backdrop-filter: blur(12px);
    }

    .hero-portrait figcaption strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
    }

    .hero-art__stamp {
      position: absolute;
      z-index: 4;
      top: 1px;
      left: 19px;
      display: grid;
      width: 71px;
      height: 71px;
      place-items: center;
      transform: rotate(-12deg);
      border: 1px solid var(--ink);
      border-radius: 50%;
      color: var(--ink);
      background: var(--gold);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.09em;
      text-align: center;
      text-transform: uppercase;
    }

    .hero-bubble {
      position: absolute;
      z-index: 4;
      right: 7px;
      bottom: 42px;
      width: 225px;
      padding: 18px 20px;
      transform: rotate(3deg);
      border: 1px solid var(--line);
      border-radius: 20px 20px 20px 3px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .hero-bubble span {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .hero-bubble p {
      font-family: var(--font-editorial);
      font-size: 24px;
      line-height: 1.1;
    }

    .hero-art__hello {
      position: absolute;
      z-index: 3;
      bottom: 13px;
      left: 34px;
      transform: rotate(-8deg);
      color: var(--paper);
      font-family: var(--font-editorial);
      font-size: 78px;
      font-style: italic;
      line-height: 1;
      letter-spacing: -0.06em;
      pointer-events: none;
    }

    .visual-disclosure {
      margin-top: 4px;
      text-align: center;
    }

    .journey {
      display: grid;
      gap: 16px;
      padding-block: 24px;
      border-top: 1px solid var(--line);
    }

    .journey-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      font-weight: 550;
    }

    .journey-item span {
      color: var(--red);
      font-family: var(--font-editorial);
      font-size: 25px;
      font-style: italic;
      line-height: 1;
    }

    /* ==========================================================
       04. CHARACTER CATALOG
       ========================================================== */

    .catalog-head {
      margin-bottom: 30px;
    }

    .catalog-head h2 {
      max-width: 650px;
    }

    .catalog-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 25px;
    }

    .filter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .filter-button {
      min-height: 44px;
      padding: 10px 18px;
      border: 1px solid #45474a;
      border-radius: 999px;
      color: var(--dark-muted);
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      transition: background 160ms ease, color 160ms ease;
    }

    .filter-button:hover {
      color: var(--white);
      border-color: #929594;
    }

    .filter-button[aria-pressed="true"] {
      color: var(--ink);
      border-color: var(--paper);
      background: var(--paper);
    }

    .catalog-search {
      position: relative;
      width: 100%;
    }

    .catalog-search .icon {
      position: absolute;
      top: 14px;
      left: 15px;
      color: var(--dark-muted);
    }

    .catalog-search input {
      width: 100%;
      min-height: 48px;
      padding: 12px 15px 12px 44px;
      border: 1px solid #45474a;
      border-radius: 999px;
      color: var(--paper);
      background: var(--dark-card);
      font-size: 12px;
    }

    .catalog-search input::placeholder {
      color: #b3b5b5;
    }

    .catalog-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

    .character-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid #343639;
      border-radius: 25px;
      background: var(--dark-card);
      transition: transform 200ms ease, border-color 200ms ease;
    }

    .character-card:hover {
      transform: translateY(-5px);
      border-color: #6b6c6b;
    }

    .character-photo {
      position: relative;
      aspect-ratio: 4 / 4.9;
      overflow: hidden;
      background: #343639;
    }

    .character-photo::after {
      position: absolute;
      inset: 48% 0 0;
      background: linear-gradient(transparent, rgb(0 0 0 / 68%));
      pointer-events: none;
      content: "";
    }

    .character-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      transition: transform 450ms ease;
    }

    .character-card:hover .character-photo img {
      transform: scale(1.035);
    }

    .concept-label {
      position: absolute;
      z-index: 2;
      top: 13px;
      left: 13px;
      padding: 6px 9px;
      border: 1px solid rgb(255 255 255 / 40%);
      border-radius: 999px;
      color: var(--white);
      background: rgb(20 22 24 / 64%);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .photo-caption {
      position: absolute;
      z-index: 2;
      right: 17px;
      bottom: 18px;
      left: 17px;
    }

    .photo-caption span {
      display: block;
      margin-bottom: 4px;
      color: #e2e0dc;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .photo-caption h3 {
      color: var(--white);
      font-family: var(--font-editorial);
      font-size: 29px;
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -0.025em;
    }

    .character-content {
      padding: 18px;
    }

    .character-content > p {
      min-height: 66px;
      color: var(--dark-muted);
      font-size: 12px;
      line-height: 1.8;
    }

    .character-content .tag-list {
      margin-block: 15px 18px;
    }

    .character-content .tag {
      color: #d7d8d5;
      border-color: #45474a;
      font-size: 9px;
    }

    .preview-button {
      display: flex;
      width: 100%;
      min-height: 44px;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border: 0;
      border-top: 1px solid #414346;
      color: var(--paper);
      background: transparent;
      font-size: 12px;
      font-weight: 600;
      text-align: left;
    }

    .preview-button:hover {
      color: var(--gold);
    }

    .card-link {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      color: var(--dark-muted);
      font-size: 10px;
    }

    .catalog-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-top: 25px;
    }

    .catalog-bottom p {
      max-width: 610px;
    }

    .result-count {
      min-height: 21px;
      margin-bottom: 15px;
      color: var(--dark-muted);
      font-size: 11px;
    }

    .empty-state {
      padding: 34px;
      border: 1px dashed #646668;
      border-radius: var(--radius);
      text-align: center;
    }

    .empty-state p {
      margin-bottom: 16px;
    }

    /* ==========================================================
       05. SPLIT LAYOUTS / SCENARIO PREVIEW
       ========================================================== */

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 38px;
    }

    .split > * {
      min-width: 0;
    }

    .split-copy h2 {
      margin-top: 17px;
    }

    .scene-options {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
      margin: 27px 0 0;
      padding: 0;
      border: 0;
    }

    .scene-options legend {
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .scene-option {
      position: relative;
      display: flex;
      min-height: 57px;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
      cursor: pointer;
    }

    .scene-option:has(input:checked) {
      border-color: var(--red);
      background: #fff7f3;
    }

    .scene-option input {
      width: 17px;
      height: 17px;
      margin: 0;
      flex: 0 0 17px;
      accent-color: var(--red);
    }

    .scene-option span {
      font-size: 12px;
      font-weight: 600;
    }

    .chat-stage {
      position: relative;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(ellipse at top right, #f2d6cd, transparent 60%),
        var(--paper);
      box-shadow: var(--shadow);
    }

    .chat-stage__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 6px 4px 20px;
      border-bottom: 1px solid var(--line);
    }

    .chat-stage__brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 650;
    }

    .round-icon {
      display: grid;
      width: 43px;
      height: 43px;
      place-items: center;
      flex: 0 0 43px;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--red);
      background: var(--white);
    }

    .demo-pill {
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--ink);
      background: var(--white);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .scene-context {
      padding-block: 19px 22px;
    }

    .scene-context span {
      color: var(--red);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .scene-context h3 {
      margin-top: 8px;
      font-family: var(--font-editorial);
      font-size: 29px;
      font-weight: 400;
    }

    .scene-context p {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }

    .script-thread {
      display: grid;
      gap: 13px;
    }

    .message {
      max-width: 91%;
      padding: 15px 17px;
      border-radius: 17px 17px 17px 4px;
      background: var(--white);
      box-shadow: 0 4px 16px rgb(0 0 0 / 3%);
    }

    .message--you {
      justify-self: end;
      border-radius: 17px 17px 4px 17px;
      color: var(--white);
      background: var(--red);
    }

    .message-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .message--you .message-label {
      color: #ffe2db;
    }

    .message p {
      font-size: 13px;
      line-height: 1.75;
    }

    .chat-stage__footer {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    /* ==========================================================
       06. EDITORIAL PORTRAITS / BENEFIT CARDS
       ========================================================== */

    .editorial-visual {
      position: relative;
      padding: 22px 22px 0;
      border-radius: var(--radius-lg);
      background: var(--rose);
    }

    .editorial-visual--sage {
      background: var(--sage);
    }

    .editorial-photo {
      position: relative;
      height: 400px;
      overflow: hidden;
      border-radius: 180px 180px 18px 18px;
      background: var(--paper-deep);
    }

    .editorial-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 26%;
    }

    .editorial-visual figcaption {
      padding: 13px 0 16px;
      color: var(--muted);
      font-size: 10px;
      text-align: center;
    }

    .portrait-sticker {
      position: absolute;
      z-index: 2;
      right: 11px;
      bottom: 63px;
      max-width: 225px;
      padding: 17px 19px;
      transform: rotate(4deg);
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .portrait-sticker p {
      font-family: var(--font-editorial);
      font-size: 26px;
      font-style: italic;
      line-height: 1.1;
    }

    .portrait-sticker span {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .personality-options {
      display: grid;
      gap: 12px;
      margin-top: 25px;
    }

    .personality-option {
      display: grid;
      grid-template-columns: 35px minmax(0, 1fr);
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgb(255 255 255 / 65%);
    }

    .personality-option > span {
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border-radius: 50%;
      color: var(--red);
      background: var(--rose);
    }

    .personality-option h3 {
      font-size: 14px;
      letter-spacing: -0.02em;
    }

    .personality-option p {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
    }

    .starter-quote {
      margin-top: 24px;
      padding-left: 20px;
      border-left: 2px solid var(--red);
    }

    .starter-quote p {
      font-family: var(--font-editorial);
      font-size: 25px;
      line-height: 1.25;
    }

    .starter-quote cite {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 10px;
      font-style: normal;
    }

    .three-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

    .story-card {
      min-width: 0;
      padding: 28px;
      border: 1px solid rgb(32 33 31 / 9%);
      border-radius: var(--radius);
      background: rgb(255 255 255 / 75%);
      box-shadow: 0 10px 26px rgb(40 24 16 / 4%);
    }

    .story-card__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
    }

    .story-card__number {
      color: var(--red);
      font-family: var(--font-editorial);
      font-size: 34px;
      font-style: italic;
      line-height: 1;
    }

    .story-card h3 {
      font-size: 19px;
    }

    .story-card > p {
      margin-top: 13px;
      color: var(--muted);
      font-size: 13px;
    }

    .story-card blockquote {
      margin-top: 25px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-family: var(--font-editorial);
      font-size: 23px;
      line-height: 1.25;
    }

    /* ==========================================================
       07. CHARACTER BRIEF BUILDER / FORMS
       ========================================================== */

    .builder {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--paper);
      box-shadow: var(--shadow);
    }

    .builder-form {
      padding: 25px;
      background: var(--white);
    }

    .builder-form fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .builder-form legend {
      margin-bottom: 22px;
      font-size: 17px;
      font-weight: 650;
      letter-spacing: -0.04em;
    }

    .form-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 17px;
    }

    .field {
      display: grid;
      min-width: 0;
      align-content: start;
      gap: 7px;
    }

    .field label,
    .field-label {
      color: var(--ink);
      font-size: 11px;
      font-weight: 650;
      line-height: 1.6;
    }

    .field input:not([type="range"]),
    .field select,
    .field textarea {
      width: 100%;
      min-height: 47px;
      padding: 11px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink);
      background: #faf9f6;
      font-size: 13px;
      line-height: 1.6;
    }

    .field textarea {
      min-height: 105px;
      resize: vertical;
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      border-color: var(--red);
    }

    .field input[type="range"] {
      width: 100%;
      height: 30px;
      margin: 0;
      accent-color: var(--red);
    }

    .range-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .range-label output {
      color: var(--red);
      font-size: 11px;
      font-weight: 600;
    }

    .range-scale {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 9px;
    }

    .brief-preview {
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 28px;
      background:
        radial-gradient(ellipse at top right, #f0d7ce, transparent 70%),
        var(--paper);
    }

    .brief-preview__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 25px;
    }

    .brief-preview__top span {
      color: var(--muted);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .brief-preview h3 {
      margin-bottom: 19px;
      font-family: var(--font-editorial);
      font-size: 32px;
      font-weight: 400;
    }

    .brief-text {
      margin: 0;
      color: #474b43;
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.9;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .brief-preview__bottom {
      margin-top: auto;
      padding-top: 25px;
    }

    .status-message {
      min-height: 22px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
    }

    /* ==========================================================
       08. FEATURE BENTO
       ========================================================== */

    .feature-grid {
      display: grid;
      gap: 18px;
    }

    .feature-card {
      padding: 29px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
    }

    .feature-card--memory {
      background: var(--sage);
    }

    .feature-card--voice {
      background: var(--rose);
    }

    .feature-card .eyebrow {
      font-size: 9px;
    }

    .feature-card h3 {
      margin-top: 22px;
      font-size: 25px;
    }

    .feature-card > p {
      margin-top: 13px;
      color: var(--muted);
      font-size: 13px;
    }

    .memory-stack {
      display: grid;
      gap: 9px;
      margin-top: 27px;
    }

    .memory-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgb(32 33 31 / 10%);
      border-radius: 13px;
      background: rgb(255 255 255 / 65%);
      font-size: 12px;
    }

    .memory-item .icon {
      width: 17px;
      height: 17px;
      flex-basis: 17px;
      margin-top: 2px;
      color: #4b6655;
    }

    .voice-wave {
      display: flex;
      height: 57px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-block: 20px 7px;
    }

    .voice-wave span {
      width: 5px;
      height: var(--bar, 20px);
      border-radius: 5px;
      background: var(--red);
    }

    .feature-footnote {
      margin-top: 19px;
    }

    /* ==========================================================
       09. PRICING TABLE / SCENARIO CALCULATOR
       ========================================================== */

    .pricing-layout {
      display: grid;
      align-items: start;
      gap: 24px;
    }

    .table-wrap {
      max-width: 100%;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--white);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      line-height: 1.7;
      text-align: left;
    }

    caption {
      padding: 19px;
      color: var(--ink);
      background: var(--white);
      font-size: 14px;
      font-weight: 650;
      text-align: left;
    }

    th,
    td {
      padding: 15px 16px;
      border-top: 1px solid var(--line);
      vertical-align: top;
    }

    thead th {
      color: var(--muted);
      background: var(--paper);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    tbody th {
      font-weight: 600;
    }

    tbody tr:nth-child(even) {
      background: #f6f5f1;
    }

    tbody td {
      color: var(--muted);
    }

    .price-unverified {
      display: inline-block;
      color: var(--muted);
      font-size: 11px;
    }

    .pricing-disclaimer {
      margin-top: 16px;
      padding-left: 15px;
      border-left: 2px solid var(--red);
    }

    .calculator {
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .calculator h3 {
      margin-top: 12px;
      font-size: 23px;
    }

    .calculator > p {
      margin-block: 12px 22px;
    }

    .calculator .form-grid {
      gap: 15px;
    }

    .estimate {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .estimate-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
    }

    .estimate output {
      display: block;
      margin-top: 6px;
      color: var(--red);
      font-size: 43px;
      font-weight: 650;
      line-height: 1.2;
      letter-spacing: -0.07em;
    }

    .estimate .small-note {
      margin-top: 9px;
    }

    /* ==========================================================
       10. COMPARISON / SAFETY
       ========================================================== */

    .comparison-card {
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 27px;
      border: 1px solid #424548;
      border-radius: var(--radius);
      background: var(--dark-card);
    }

    .comparison-card .step-number {
      display: block;
      margin-bottom: 31px;
      color: var(--gold);
      font-family: var(--font-editorial);
      font-size: 38px;
      font-style: italic;
      line-height: 1;
    }

    .comparison-card h3 {
      font-size: 19px;
    }

    .comparison-card > p {
      margin-top: 13px;
      color: var(--dark-muted);
      font-size: 13px;
    }

    .comparison-card .test-label {
      margin-top: 25px;
      padding-top: 17px;
      border-top: 1px solid #424548;
      color: var(--gold);
      font-size: 11px;
    }

    .comparison-note {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-top: 25px;
      padding: 21px;
      border: 1px solid #424548;
      border-radius: 16px;
      color: var(--dark-muted);
      font-size: 12px;
    }

    .comparison-note .icon {
      color: var(--gold);
    }

    .safety-layout {
      display: grid;
      align-items: start;
      gap: 32px;
    }

    .safety-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--sage);
    }

    .safety-card__mark {
      display: grid;
      width: 70px;
      height: 80px;
      place-items: center;
      margin-bottom: 28px;
      border: 1px solid #afb6a9;
      border-radius: 40px 40px 16px 16px;
      color: #49624f;
      background: #f4f6ef;
    }

    .safety-card__mark .icon {
      width: 30px;
      height: 30px;
    }

    .safety-card h3 {
      font-family: var(--font-editorial);
      font-size: 33px;
      font-weight: 400;
    }

    .safety-card > p {
      margin-top: 18px;
      color: #555f51;
      font-size: 13px;
    }

    .policy-links {
      display: grid;
      gap: 5px;
      margin-top: 23px;
    }

    .policy-links a {
      display: flex;
      min-height: 44px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid #c7cebf;
      font-size: 11px;
      font-weight: 600;
      text-decoration: none;
    }

    .faq-list {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      display: flex;
      min-height: 75px;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-block: 18px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.6;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      display: grid;
      width: 27px;
      height: 27px;
      place-items: center;
      flex: 0 0 27px;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--red);
      font-size: 18px;
      font-weight: 400;
      line-height: 1;
      content: "+";
    }

    .faq-item[open] summary::after {
      content: "−";
    }

    .faq-answer {
      max-width: 660px;
      padding: 0 38px 23px 0;
      color: var(--muted);
      font-size: 13px;
    }

    /* ==========================================================
       11. FINAL HANDOFF / FOOTER
       ========================================================== */

    .finale {
      position: relative;
      overflow: clip;
      color: var(--paper);
      background: var(--red);
    }

    .finale::before {
      position: absolute;
      top: -180px;
      right: -190px;
      width: 580px;
      height: 850px;
      transform: rotate(30deg);
      border: 1px solid rgb(255 255 255 / 28%);
      border-radius: 50%;
      pointer-events: none;
      content: "";
    }

    .finale-grid {
      position: relative;
      display: grid;
      align-items: center;
      gap: 38px;
    }

    .finale .eyebrow {
      color: #ffded1;
    }

    .finale h2 {
      max-width: 650px;
      margin-top: 18px;
      color: #ffded1;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: -0.025em;
    }

    .finale-title {
      margin-top: 17px;
      font-size: clamp(49px, 7.8vw, 90px);
      font-weight: 600;
      line-height: 0.98;
      letter-spacing: -0.075em;
    }

    .finale-title em {
      font-weight: 400;
    }

    .finale-copy {
      max-width: 540px;
      margin-top: 25px;
      color: #ffe5dc;
      font-size: 15px;
    }

    .finale .small-note {
      max-width: 460px;
      color: #ffe5dc;
    }

    .destination-card {
      padding: 27px;
      border: 1px solid rgb(255 255 255 / 35%);
      border-radius: var(--radius-lg);
      background: rgb(255 255 255 / 9%);
      backdrop-filter: blur(8px);
    }

    .destination-card__top {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 22px;
      border-bottom: 1px solid rgb(255 255 255 / 25%);
    }

    .destination-card__top .icon {
      width: 27px;
      height: 27px;
      flex-basis: 27px;
    }

    .destination-card__top strong {
      display: block;
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: -0.035em;
    }

    .destination-card__top span {
      color: #ffe5dc;
      font-size: 10px;
    }

    .handoff-list {
      display: grid;
      gap: 18px;
      margin: 23px 0 0;
      padding: 0;
      list-style: none;
      counter-reset: handoff;
    }

    .handoff-list li {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 12px;
      color: #ffe5dc;
      font-size: 12px;
      counter-increment: handoff;
    }

    .handoff-list li::before {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      border: 1px solid rgb(255 255 255 / 40%);
      border-radius: 50%;
      color: var(--paper);
      font-size: 10px;
      content: counter(handoff);
    }

    .site-footer {
      padding-block: 40px 28px;
      background: var(--paper);
    }

    .footer-top {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 25px;
      padding-bottom: 30px;
      border-bottom: 1px solid var(--line);
    }

    .footer-brand p {
      max-width: 320px;
      margin-top: 14px;
      font-size: 12px;
    }

    .footer-links {
      display: flex;
      max-width: 540px;
      flex-wrap: wrap;
      gap: 5px 23px;
    }

    .footer-links a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      color: var(--muted);
      font-size: 11px;
      text-decoration: none;
    }

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

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      padding-top: 24px;
    }

    .footer-bottom p {
      max-width: 750px;
      font-size: 10px;
    }

    .mobile-cta {
      position: fixed;
      z-index: 40;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 13px;
      padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: rgb(245 242 235 / 97%);
      backdrop-filter: blur(18px);
    }

    .mobile-cta strong {
      display: block;
      font-size: 12px;
      font-weight: 650;
    }

    .mobile-cta span {
      display: block;
      color: var(--muted);
      font-size: 9px;
    }

    .mobile-cta .button {
      min-height: 46px;
      padding-inline: 16px;
      font-size: 11px;
    }

    /* ==========================================================
       12. DIALOG
       ========================================================== */

    .preview-dialog {
      width: min(760px, calc(100% - 28px));
      max-height: calc(100vh - 36px);
      max-height: calc(100dvh - 36px);
      padding: 0;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 27px;
      color: var(--ink);
      background: var(--paper);
      box-shadow: 0 35px 100px rgb(0 0 0 / 25%);
    }

    .preview-dialog:not([open]) {
      display: none;
    }

    .preview-dialog::backdrop {
      background: rgb(12 14 16 / 75%);
      backdrop-filter: blur(8px);
    }

    .dialog-shell {
      position: relative;
      padding: 26px;
    }

    .dialog-close {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--white);
    }

    .dialog-close:hover {
      background: var(--rose);
    }

    .dialog-heading {
      display: grid;
      grid-template-columns: 63px minmax(0, 1fr);
      align-items: center;
      gap: 15px;
      padding-right: 42px;
      margin-bottom: 24px;
    }

    .dialog-avatar {
      width: 63px;
      height: 78px;
      object-fit: cover;
      object-position: center 27%;
      border-radius: 36px 36px 14px 14px;
      background: var(--paper-deep);
    }

    .dialog-heading h2 {
      margin-top: 5px;
      font-family: var(--font-editorial);
      font-size: 31px;
      font-weight: 400;
      letter-spacing: -0.035em;
      text-wrap: initial;
    }

    .dialog-heading .eyebrow {
      font-size: 8px;
    }

    .dialog-heading .eyebrow::before {
      display: none;
    }

    .dialog-notice {
      margin-bottom: 19px;
      padding: 11px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--muted);
      background: var(--white);
      font-size: 11px;
    }

    .reply-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .reply-options button {
      min-height: 44px;
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--white);
      font-size: 11px;
    }

    .reply-options button[aria-pressed="true"] {
      border-color: var(--red);
      color: var(--red);
      background: var(--rose);
    }

    .dialog-bottom {
      margin-top: 24px;
      padding-top: 21px;
      border-top: 1px solid var(--line);
    }

    /* ==========================================================
       13. RESPONSIVE / ACCESSIBILITY
       ========================================================== */

    @media (min-width: 540px) {
      .header-cta {
        display: inline-flex;
      }

      .hero-art {
        height: 505px;
      }

      .hero-portrait--her {
        height: 355px;
      }

      .hero-portrait--him {
        height: 335px;
      }

      .hero-bubble {
        right: 12px;
        bottom: 53px;
      }

      .hero-art__hello {
        bottom: 22px;
        font-size: 95px;
      }

      .scene-options,
      .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .field--wide {
        grid-column: 1 / -1;
      }

      .dialog-shell {
        padding: 34px;
      }
    }

    @media (min-width: 680px) {
      .journey {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .catalog-search {
        width: 240px;
      }

      .personality-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .personality-option {
        grid-template-columns: minmax(0, 1fr);
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .feature-card--memory {
        grid-row: span 2;
      }

      .feature-card--memory .memory-stack {
        margin-top: 36px;
      }

      .mobile-cta {
        display: none;
      }
    }

    @media (min-width: 960px) {
      .desktop-nav {
        display: flex;
      }

      .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
        gap: 42px;
        padding-block: 53px 54px;
      }

      .hero h1 {
        font-size: 72px;
      }

      .hero-art {
        height: 530px;
      }

      .hero-portrait--her {
        top: 64px;
        height: 375px;
      }

      .hero-portrait--him {
        top: 47px;
        height: 352px;
      }

      .hero-bubble {
        bottom: 49px;
      }

      .section-head--split {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: end;
        gap: 52px;
      }

      .section-head--split > p {
        padding-bottom: 4px;
        font-size: 14px;
      }

      .catalog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 17px;
      }

      .character-content {
        padding: 17px;
      }

      .character-content > p {
        min-height: 86px;
      }

      .photo-caption h3 {
        font-size: 27px;
      }

      .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 66px;
      }

      .split--portrait {
        grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
        gap: 76px;
      }

      .split--reverse .editorial-visual {
        order: 2;
      }

      .editorial-photo {
        height: 470px;
      }

      .editorial-visual {
        padding: 29px 29px 0;
      }

      .three-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .builder {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      }

      .builder-form,
      .brief-preview {
        padding: 36px;
      }

      .feature-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
      }

      .feature-card--memory {
        grid-row: auto;
      }

      .feature-card {
        padding: 28px;
      }

      .pricing-layout {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 32px;
      }

      .safety-layout {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 65px;
      }

      .finale-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
        gap: 78px;
      }
    }

    @media (max-width: 679px) {
      body {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
      }

      .hero .button-row .button {
        flex: 1 1 180px;
      }

      .character-content > p {
        min-height: 0;
      }

      .character-photo {
        max-height: 460px;
      }

      .character-content .tag-list {
        margin-block: 15px;
      }

      .table-wrap {
        font-size: 11px;
      }

      th,
      td {
        padding: 13px 11px;
      }

      .dialog-bottom .button {
        width: 100%;
      }
    }

    @media (max-width: 359px) {
      .brand-word {
        font-size: 18px;
      }

      .hero h1 {
        font-size: 43px;
      }

      .hero-art {
        height: 410px;
      }

      .hero-portrait--her {
        height: 280px;
      }

      .hero-portrait--him {
        height: 260px;
      }

      .hero-bubble {
        width: 192px;
        padding: 14px;
      }

      .hero-bubble p {
        font-size: 21px;
      }

      .mobile-cta__copy {
        display: none;
      }

      .mobile-cta .button {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    @media print {
      .site-header,
      .mobile-cta,
      .catalog-tools,
      .preview-button,
      .preview-dialog,
      .hero-art__stamp {
        display: none !important;
      }

      body {
        padding: 0;
        color: #000;
        background: #fff;
      }

      .section {
        padding-block: 32px;
      }

      .dark,
      .finale {
        color: #000;
        background: #fff;
      }

      .dark .muted,
      .dark .section-intro,
      .dark .small-note,
      .finale-copy,
      .finale .small-note {
        color: #333;
      }

      .character-card,
      .story-card,
      .feature-card,
      .comparison-card {
        break-inside: avoid;
      }
    }
  

/* Editorial completion: scoped to new blocks and article pages. */
.unique-slot:not(:empty){padding:26px 28px;border:1px solid var(--line);border-radius:18px;text-align:left;background:rgba(255,255,255,.52)}
.unique-slot h3{font-family:var(--font-editorial);font-weight:400;font-size:clamp(23px,3vw,30px);line-height:1.2;margin:0 0 12px}
.unique-slot p{max-width:78ch;font-size:14px;line-height:1.8;margin:10px 0}.unique-slot a{font-weight:600;text-underline-offset:4px}
.dark .unique-slot:not(:empty),.finale .unique-slot:not(:empty){background:rgba(255,255,255,.055);border-color:#ffffff30;color:var(--white)}
.dark .unique-slot p,.finale .unique-slot p{color:#d6d7d5}.dark .unique-slot a,.finale .unique-slot a{color:var(--gold)}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0}
.guide-card{border:1px solid var(--line);border-radius:16px;padding:25px;background:var(--white);display:flex;flex-direction:column;gap:14px;min-width:0}
.guide-card .guide-number{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:700}
.guide-card h3{font:400 26px/1.22 var(--font-editorial);margin:0}.guide-card h3 a{text-decoration:none}.guide-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.guide-card p{font-size:13px;line-height:1.75;color:var(--muted);margin:0}.guide-card .text-link{margin-top:auto;color:var(--red);align-self:flex-start}
.guide-footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;padding:24px 0;border-top:1px solid var(--line);font-size:12px}.guide-footer-links a{min-height:44px;display:flex;align-items:center}
.article-header .header-inner{min-height:88px;gap:20px}.article-nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:12px}.article-nav a{min-height:44px;display:flex;align-items:center}
.article-hero{padding:70px 0 54px;border-bottom:1px solid var(--line);background:var(--paper)}
.article-hero h1{font:400 clamp(38px,5vw,68px)/1.06 var(--font-editorial);max-width:1000px;letter-spacing:-.025em;margin:18px 0 22px}
.article-dek{max-width:780px;font-size:18px;line-height:1.8;color:var(--muted)}
.article-meta{margin-top:22px;font-size:11px;line-height:1.7;color:var(--muted)}
.article-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:64px;justify-content:center;padding:55px 0 70px}
.article-toc{position:sticky;top:120px;align-self:start;font-size:12px;border-top:2px solid var(--red);padding-top:18px}.article-toc strong{display:block;margin-bottom:14px}.article-toc a{display:block;padding:9px 0;line-height:1.5;color:var(--muted);text-decoration:none}.article-toc a:hover{color:var(--red)}
.article-body{min-width:0;font-size:16px;line-height:1.85}.article-body h2{font:400 clamp(27px,3vw,36px)/1.18 var(--font-editorial);margin:44px 0 18px;scroll-margin-top:135px}.article-body h2:first-child{margin-top:0}.article-body h3{font:400 25px/1.3 var(--font-editorial);margin:28px 0 12px}
.article-body p,.article-body ul{margin:16px 0}.article-body ul{padding-left:24px}.article-body li+li{margin-top:10px}.article-body a{color:var(--red);text-underline-offset:4px}
.article-body pre{font:400 14px/1.8 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sage);border-left:3px solid var(--red);border-radius:0 12px 12px 0;padding:23px;margin:24px 0}
.article-body table{border-collapse:collapse;width:100%;min-width:550px;font-size:13px;line-height:1.65}.article-body td,.article-body th{text-align:left;vertical-align:top;padding:16px;border-bottom:1px solid var(--line)}.article-body th{background:var(--paper-deep);font-weight:700}
.table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;margin:24px 0}.table-hint{font-size:12px;color:var(--muted)}
.article-related{border-top:1px solid var(--line);padding:40px 0}.article-related h2{font:400 34px/1.2 var(--font-editorial)}
.article-footer{border-top:1px solid var(--line);padding:18px 0 30px}.article-footer .guide-footer-links{border:0}.article-footer p{font-size:12px;color:var(--muted)}
.guide-library .article-layout{display:block}.guide-library .article-toc{display:none}
@media(max-width:980px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:180px minmax(0,1fr);gap:30px}}
@media(max-width:680px){.guide-grid{grid-template-columns:1fr}.article-layout{display:block;padding:32px 0}.article-toc{position:static;margin-bottom:36px}.article-toc a{min-height:44px}.article-hero{padding:36px 0}.article-dek{font-size:16px}.article-header .header-inner{align-items:flex-start;padding-top:14px;padding-bottom:14px;flex-direction:column;gap:0}.article-nav{gap:18px}.article-body h2{scroll-margin-top:160px}.unique-slot:not(:empty){padding:22px}.article-body{font-size:15px}.guide-card{padding:22px}}


/* Original AI-generated editorial characters, September 21, 2026. */
.guide-card.has-portrait{padding:0;overflow:hidden;gap:0}
.guide-card.has-portrait>.guide-number,.guide-card.has-portrait>h3,.guide-card.has-portrait>p,.guide-card.has-portrait>.text-link{margin-left:24px;margin-right:24px}
.guide-card.has-portrait>.guide-number{margin-top:22px;margin-bottom:12px}
.guide-card.has-portrait>h3{margin-top:0;margin-bottom:14px}
.guide-card.has-portrait>p{margin-top:0;margin-bottom:20px}
.guide-card.has-portrait>.text-link{margin-top:auto;margin-bottom:20px}
.character-cover{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:#e5e9df;text-decoration:none!important;color:white!important}
.character-cover img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;transition:transform .3s ease}
.character-cover:hover img{transform:scale(1.025)}
.character-cover-label{position:absolute;inset:auto 0 0;padding:48px 22px 19px;background:linear-gradient(transparent,rgba(17,19,26,.86));color:#fff}
.character-cover-label strong{font:600 21px/1.2 var(--font-body);display:block;margin-bottom:6px}
.character-cover-label small{font:400 11px/1.5 var(--font-body);color:#efefef}
.article-hero.has-portrait>.container{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:58px;align-items:center}
.article-hero.has-portrait h1{font-size:clamp(38px,4vw,59px)}
.article-character{margin:0;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 15px 45px #20211f15;aspect-ratio:3/4}
.article-character img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.article-character figcaption{position:absolute;inset:auto 0 0;padding:60px 24px 24px;background:linear-gradient(transparent,rgba(17,19,26,.86));color:white}
.article-character strong{display:block;font:600 23px/1.3 var(--font-body)}
.article-character span{display:block;font:400 11px/1.6 var(--font-body);margin-top:5px;color:#eee}
@media(max-width:980px){.article-hero.has-portrait>.container{grid-template-columns:minmax(0,1fr) 280px;gap:28px}}
@media(max-width:680px){.article-hero.has-portrait>.container{grid-template-columns:1fr;gap:28px}.article-character{width:100%;max-width:390px;margin:auto}.article-hero.has-portrait h1{font-size:38px}.guide-card.has-portrait>.guide-number,.guide-card.has-portrait>h3,.guide-card.has-portrait>p,.guide-card.has-portrait>.text-link{margin-left:22px;margin-right:22px}}
@media(prefers-reduced-motion:reduce){.character-cover img{transition:none}}