:root {
              --bg-deep: #0d1326;
              --bg-warm: #1a2242;
              --paper: rgba(255, 251, 246, 0.96);
              --text: #16213f;
              --muted: #5c6574;
              --line: rgba(22, 33, 63, 0.1);
              --accent: #d97706;
              --accent-dark: #9a3412;
              --button: #16213f;
              --shadow: 0 28px 80px rgba(7, 10, 24, 0.24);
            }
            * { box-sizing: border-box; }
            body {
              margin: 0;
              min-height: 100vh;
              background:
                radial-gradient(circle at 15% 15%, rgba(245, 158, 11, 0.18), transparent 22%),
                radial-gradient(circle at 82% 12%, rgba(96, 165, 250, 0.16), transparent 24%),
                linear-gradient(160deg, var(--bg-deep) 0%, #111a33 36%, var(--bg-warm) 100%);
              color: var(--text);
              font-family: "Aptos", "Segoe UI", "Noto Sans", Arial, sans-serif;
              padding: 18px;
            }
            .wrap {
              max-width: 980px;
              margin: 0 auto;
              background:
                radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 18%),
                linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,250,245,0.96) 100%);
              border: 1px solid rgba(255,255,255,0.18);
              border-radius: 28px;
              box-shadow: var(--shadow);
              overflow: hidden;
            }
            .hero {
              padding: 30px 28px 18px;
              background:
                radial-gradient(circle at 18% 18%, rgba(217,119,6,0.16), transparent 26%),
                radial-gradient(circle at 82% 12%, rgba(59,130,246,0.12), transparent 24%);
            }
            .breadcrumbs,
            .eyebrow {
              color: var(--accent-dark);
              font-size: 13px;
              font-weight: 800;
              letter-spacing: 0.04em;
              text-transform: uppercase;
            }
            .breadcrumbs a {
              color: inherit;
              text-decoration: none;
            }
            h1,
            h2 {
              font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
            }
            h1 {
              margin: 14px 0 12px;
              font-size: clamp(34px, 5vw, 54px);
              line-height: 1.02;
              letter-spacing: -0.04em;
              max-width: 760px;
            }
            .lead {
              margin: 0;
              font-size: 18px;
              line-height: 1.65;
              color: var(--muted);
              max-width: 760px;
            }
            .content,
            .preview-block,
            .faq,
            .related,
            .cta {
              padding: 0 28px 24px;
            }
            .content-card,
            .faq-item,
            .cta-card {
              border-radius: 22px;
              background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,244,239,0.84) 100%);
              border: 1px solid rgba(22,33,63,0.08);
              box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
            }
            .content-card {
              padding: 24px;
            }
            .content-card p,
            .content-card li,
            .faq-item p,
            .cta-card p {
              color: var(--muted);
              line-height: 1.7;
              font-size: 17px;
            }
            .content-card h2 {
              margin: 28px 0 12px;
              font-size: 28px;
              line-height: 1.08;
            }
            .content-card h2:first-child {
              margin-top: 0;
            }
            .content-card ul {
              margin: 0;
              padding-left: 20px;
            }
            .preview-copy,
            .cta-card {
              border-radius: 22px;
              background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,244,239,0.84) 100%);
              border: 1px solid rgba(22,33,63,0.08);
              box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
            }
            .preview-wrap {
              display: grid;
              grid-template-columns: 0.92fr 1.08fr;
              gap: 20px;
              align-items: stretch;
            }
            .preview-copy {
              padding: 24px;
            }
            .preview-copy ul {
              margin: 18px 0 0;
              padding: 0;
              list-style: none;
              display: grid;
              gap: 12px;
            }
            .preview-copy li {
              color: var(--text);
              line-height: 1.55;
            }
            .chat {
              border-radius: 30px;
              overflow: hidden;
              border: 1px solid rgba(255,255,255,0.22);
              background:
                radial-gradient(circle at 22% 18%, rgba(255,255,255,0.12), transparent 18%),
                radial-gradient(circle at 82% 12%, rgba(255,255,255,0.1), transparent 20%),
                linear-gradient(180deg, #d6eac7 0%, #c3dfbb 100%);
              min-height: 100%;
              box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 20px 38px rgba(15, 23, 42, 0.08);
            }
            .chat-top {
              display: flex;
              align-items: center;
              gap: 12px;
              padding: 16px 18px;
              background: rgba(255, 255, 255, 0.52);
              border-bottom: 1px solid rgba(20, 33, 61, 0.08);
            }
            .chat-avatar {
              width: 42px;
              height: 42px;
              border-radius: 999px;
              display: grid;
              place-items: center;
              background: linear-gradient(135deg, #7c3aed, #ec4899);
              color: #fff;
              font-weight: 900;
            }
            .chat-top strong {
              display: block;
              font-size: 16px;
            }
            .chat-top span {
              color: rgba(20, 33, 61, 0.68);
              font-size: 13px;
            }
            .chat-body {
              padding: 18px;
              display: grid;
              gap: 12px;
            }
            .bubble {
              max-width: 88%;
              padding: 14px 16px;
              border-radius: 20px;
              line-height: 1.55;
              font-size: 15px;
              box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
            }
            .bubble.bot {
              background: #fff;
              color: var(--text);
              border-top-left-radius: 8px;
            }
            .bubble.user {
              margin-left: auto;
              background: #dbeafe;
              color: #1e3a8a;
              border-top-right-radius: 8px;
            }
            .bubble small {
              display: block;
              margin-top: 8px;
              color: rgba(20, 33, 61, 0.5);
              font-size: 12px;
            }
            .section-title {
              margin: 0 0 14px;
              font-size: 28px;
              line-height: 1.05;
              letter-spacing: -0.04em;
            }
            .faq-grid,
            .related-grid {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 16px;
            }
            .faq-item {
              padding: 20px;
            }
            .faq-item strong {
              display: block;
              margin-bottom: 10px;
              font-size: 18px;
              line-height: 1.35;
            }
            .related-link {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 14px;
              min-height: 72px;
              padding: 18px 20px;
              border-radius: 18px;
              text-decoration: none;
              color: var(--text);
              background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,244,239,0.84) 100%);
              border: 1px solid rgba(22,33,63,0.08);
              box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
              font-weight: 700;
            }
            .cta-card {
              padding: 24px;
            }
            .actions {
              display: flex;
              flex-wrap: wrap;
              gap: 12px;
              margin-top: 18px;
            }
            .btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-height: 52px;
              padding: 0 18px;
              border-radius: 8px;
              border: 1px solid transparent;
              text-decoration: none;
              font-size: 17px;
              font-weight: 800;
            }
            .btn-primary {
              background: var(--button);
              color: #fff;
            }
            .btn-secondary {
              background: rgba(255,255,255,0.88);
              border-color: rgba(22,33,63,0.1);
              color: var(--text);
            }
            @media (max-width: 760px) {
              body { padding: 10px; }
              .hero,
              .content,
              .preview-block,
              .faq,
              .related,
              .cta { padding-left: 14px; padding-right: 14px; }
              .hero { padding-top: 18px; }
              .content-card,
              .preview-copy,
              .faq-item,
              .cta-card { padding: 16px; }
              .faq-grid,
              .related-grid,
              .preview-wrap { grid-template-columns: 1fr; }
              .lead,
              .content-card p,
              .content-card li,
              .preview-copy li,
              .faq-item p,
              .cta-card p { font-size: 15px; line-height: 1.55; }
              .content-card h2,
              .section-title { font-size: 24px; }
              .related-link { min-height: 60px; padding: 14px 16px; }
              .chat { border-radius: 20px; }
              .chat-top { padding: 12px 14px; }
              .chat-body { padding: 12px; gap: 10px; }
              .bubble { max-width: 94%; padding: 12px 13px; font-size: 14px; }
            }