/* ============================================================
   Combined page-specific styles extracted from all HTML mockups
   in /home/al3x/Downloads/Callina/. Loaded after callina.css.
   ============================================================ */

/* === index.html === */

  /* Page-specific styles */
  .home-hero {
    position: relative;
    padding: 64px 0 48px;
    overflow: hidden;
  }
  .home-hero__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 800px 400px at 80% 20%, rgba(122, 90, 248, 0.08), transparent 60%),
      radial-gradient(ellipse 600px 400px at 10% 80%, rgba(19, 181, 166, 0.05), transparent 60%);
    pointer-events: none;
  }
  .home-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
  }
  @media (max-width: 1024px) { .home-hero__grid { grid-template-columns: 1fr; gap: 48px; } }

  .home-hero h1 {
    font-size: clamp(40px, 5.5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--mn-navy-800);
    margin: 24px 0 24px;
  }
  .home-hero h1 em {
    font-style: normal;
    color: var(--c-violet-600);
    position: relative;
  }
  .home-hero h1 em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 8px;
    background: var(--c-violet-100);
    z-index: -1;
    border-radius: 4px;
    pointer-events: none;
  }

  /* call-to-call CTA */
  .home-callcta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--mn-navy-800);
    color: #fff;
    padding: 14px 18px 14px 14px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 200ms var(--c-ease);
    box-shadow: 0 16px 32px -12px rgba(11, 37, 69, 0.3);
  }
  .home-callcta:hover { transform: translateY(-2px); }
  .home-callcta__icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--c-violet-600);
    display: grid; place-items: center;
    box-shadow: 0 0 0 0 rgba(122, 90, 248, 0.6);
    animation: ring 2s var(--c-ease) infinite;
  }
  @keyframes ring {
    0% { box-shadow: 0 0 0 0 rgba(122, 90, 248, 0.5); }
    70% { box-shadow: 0 0 0 14px rgba(122, 90, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(122, 90, 248, 0); }
  }
  .home-callcta__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-violet-300);
    margin-bottom: 2px;
  }
  .home-callcta__num {
    font-family: var(--c-font-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .home-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--mn-rule);
  }
  .home-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mn-grey-500);
  }
  .home-trust__item svg { width: 14px; height: 14px; color: var(--mn-success-fg); }

  /* === LIVE DEMO WIDGET === */
  .demo-widget {
    background: var(--mn-navy-900);
    border-radius: 24px;
    padding: 22px;
    box-shadow: var(--c-shadow-xl);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .demo-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-violet-500), transparent);
    pointer-events: none;
  }
  .demo-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .demo-widget__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-violet-300);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .demo-widget__num {
    font-family: var(--c-font-mono);
    font-size: 11px;
    color: var(--mn-navy-300);
  }
  .demo-meter {
    display: flex; align-items: end; gap: 3px;
    height: 18px;
  }
  .demo-meter span {
    display: block;
    width: 3px; border-radius: 2px;
    background: var(--c-violet-500);
    animation: meter 0.9s var(--c-ease) infinite;
  }
  .demo-meter span:nth-child(1) { height: 60%; animation-delay: 0s; }
  .demo-meter span:nth-child(2) { height: 90%; animation-delay: 0.1s; }
  .demo-meter span:nth-child(3) { height: 50%; animation-delay: 0.2s; }
  .demo-meter span:nth-child(4) { height: 80%; animation-delay: 0.3s; }
  .demo-meter span:nth-child(5) { height: 40%; animation-delay: 0.4s; }
  @keyframes meter {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
  }

  .demo-transcript {
    padding: 24px 4px;
    min-height: 320px;
    max-height: 380px;
    overflow: hidden;
    position: relative;
  }
  .demo-transcript::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(180deg, transparent, var(--mn-navy-900));
    pointer-events: none;
  }

  .demo-line {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeIn 400ms var(--c-ease) forwards;
  }
  @keyframes fadeIn { to { opacity: 1; transform: none; } }

  .demo-line__avatar {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
  }
  .demo-line--bot .demo-line__avatar {
    background: var(--c-violet-600); color: #fff;
  }
  .demo-line--caller .demo-line__avatar {
    background: rgba(255,255,255,0.08);
    color: var(--mn-navy-200);
    border: 1px solid rgba(255,255,255,0.12);
  }
  .demo-line__body {
    flex: 1;
    min-width: 0;
  }
  .demo-line__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
    margin-bottom: 4px;
  }
  .demo-line__name {
    font-weight: 600;
    color: #fff;
  }
  .demo-line--bot .demo-line__name { color: var(--c-violet-300); }
  .demo-line__time {
    font-family: var(--c-font-mono);
    color: var(--mn-navy-400);
  }
  .demo-line__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mn-navy-100);
  }
  .demo-line__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--c-radius-pill);
    background: rgba(122, 90, 248, 0.15);
    color: var(--c-violet-300);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
  }

  .demo-actions {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .demo-actions__group {
    display: flex; gap: 8px;
  }
  .demo-action {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: var(--c-radius-md);
    background: rgba(255,255,255,0.06);
    color: var(--mn-navy-100);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .demo-action--violet { background: var(--c-violet-600); color: #fff; border-color: transparent; }

  /* Logos strip */
  .logos-strip {
    padding: 48px 0;
    border-top: 1px solid var(--mn-rule);
    border-bottom: 1px solid var(--mn-rule);
    background: var(--mn-paper);
  }
  .logos-strip__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 768px) { .logos-strip__inner { grid-template-columns: 1fr; gap: 24px; } }
  .logos-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
  }
  @media (max-width: 1024px) { .logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
  @media (max-width: 560px) { .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .logos-grid__item {
    height: 36px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: grid;
    place-items: center;
    color: var(--mn-grey-400);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.7;
    transition: opacity 200ms;
  }
  .logos-grid__item:hover { opacity: 1; color: var(--mn-grey-700); }

  /* Meet Anna section */
  .anna {
    background: var(--mn-paper);
    border-top: 1px solid var(--mn-rule);
    padding: 96px 0;
  }
  .anna__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 1024px) { .anna__grid { grid-template-columns: 1fr; gap: 48px; } }
  .anna__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--c-radius-2xl);
    overflow: hidden;
    background: var(--mn-navy-50);
  }
  .anna__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* slight cool-tone shift to harmonize with brand */
    filter: saturate(0.92) contrast(1.02);
  }
  .anna__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(11,37,69,0.04) 0%, transparent 40%, rgba(201,168,106,0.06) 100%);
    pointer-events: none;
  }
  .anna__chip {
    position: absolute;
    bottom: 24px; left: 24px;
    background: rgba(253, 252, 249, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(11, 37, 69, 0.08);
    padding: 12px 16px;
    border-radius: var(--c-radius-pill);
    display: flex; align-items: center; gap: 10px;
    font-family: var(--c-font-mono);
    font-size: 11px;
    color: var(--mn-navy-800);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .anna__chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2BB673;
    box-shadow: 0 0 0 4px rgba(43, 182, 115, 0.18);
    animation: pulse 1.6s ease-in-out infinite;
  }
  .anna__quote {
    font-family: var(--c-font-sans);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--mn-navy-800);
    margin: 24px 0 32px;
  }
  .anna__quote em {
    font-style: normal;
    color: var(--mn-gold-700);
    background: linear-gradient(180deg, transparent 60%, var(--mn-gold-100) 60%);
    padding: 0 4px;
  }
  .anna__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--mn-rule);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-lg);
    overflow: hidden;
  }
  .anna__spec {
    background: var(--mn-surface);
    padding: 18px 20px;
  }
  .anna__spec-label {
    font-family: var(--c-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mn-grey-500);
    margin-bottom: 6px;
  }
  .anna__spec-val {
    font-size: 16px;
    font-weight: 600;
    color: var(--mn-navy-800);
    letter-spacing: -0.01em;
  }
  .anna__spec-val .small {
    font-family: var(--c-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--mn-grey-500);
    margin-left: 6px;
  }

  /* Pillars / 3-column features section */
  .pillars {
    background: var(--mn-surface);
    border-top: 1px solid var(--mn-rule);
  }
  .pillars__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 64px;
  }
  @media (max-width: 900px) { .pillars__head { grid-template-columns: 1fr; gap: 24px; } }
  .pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 900px) { .pillars__grid { grid-template-columns: 1fr; } }

  .pillar {
    background: var(--mn-paper);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    padding: 32px 28px;
    position: relative;
  }
  .pillar__num {
    font-family: var(--c-font-mono);
    font-size: 11px;
    color: var(--mn-grey-400);
    margin-bottom: 32px;
  }
  .pillar__icon {
    width: 44px; height: 44px;
    border-radius: var(--c-radius-md);
    background: var(--c-violet-100);
    color: var(--c-violet-700);
    display: grid; place-items: center;
    margin-bottom: 24px;
  }
  .pillar h3 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; color: var(--mn-navy-800); font-weight: 600; }
  .pillar p { font-size: 14px; line-height: 1.6; color: var(--mn-grey-700); margin: 0; }

  /* Verticals row */
  .verticals-row {
    background: var(--mn-paper);
  }
  .verticals-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 48px;
  }
  @media (max-width: 1024px) { .verticals-cards { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px) { .verticals-cards { grid-template-columns: repeat(2, 1fr); } }
  .vcard {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-lg);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 200ms var(--c-ease);
    display: flex;
    flex-direction: column;
    gap: 16px;
    aspect-ratio: 1;
    justify-content: space-between;
  }
  .vcard:hover {
    border-color: var(--c-violet-400);
    transform: translateY(-2px);
    box-shadow: var(--c-shadow-md);
  }
  .vcard__icon {
    width: 32px; height: 32px;
    color: var(--c-violet-600);
  }
  .vcard__title { font-size: 15px; font-weight: 600; color: var(--mn-navy-800); line-height: 1.2; }
  .vcard__sub { font-size: 11px; font-family: var(--c-font-mono); color: var(--mn-grey-400); margin-top: 4px; }

  /* How-it-works strip */
  .how-strip {
    background: var(--mn-navy-800);
    color: #fff;
  }
  .how-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 48px;
  }
  @media (max-width: 900px) { .how-strip__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .how-strip__grid { grid-template-columns: 1fr; } }
  .how-step {
    position: relative;
  }
  .how-step__num {
    font-family: var(--c-font-mono);
    font-size: 11px;
    color: var(--c-violet-300);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
  }
  .how-step__title { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; }
  .how-step__desc { font-size: 14px; line-height: 1.6; color: var(--mn-navy-200); margin: 0; }

  /* Security strip */
  .sec-strip {
    background: var(--mn-paper);
    border-top: 1px solid var(--mn-rule);
  }
  .sec-strip__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 900px) { .sec-strip__grid { grid-template-columns: 1fr; } }
  .badges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .badge-card {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-lg);
    padding: 18px;
    display: flex; gap: 14px; align-items: flex-start;
  }
  .badge-card__icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: var(--c-radius-md);
    background: var(--c-violet-100);
    color: var(--c-violet-700);
    display: grid; place-items: center;
  }
  .badge-card__title { font-size: 14px; font-weight: 600; color: var(--mn-navy-800); margin-bottom: 2px; }
  .badge-card__sub { font-size: 12px; color: var(--mn-grey-500); }

  /* CTA */
  .cta-section {
    background: var(--mn-navy-900);
    color: #fff;
    text-align: center;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 800px 400px at 50% 100%, rgba(122, 90, 248, 0.18), transparent 70%);
    /* Without this, the gradient overlay captures all clicks and the
       Create-account / phone CTAs underneath are unclickable. */
    pointer-events: none;
  }
  .cta-section h2 {
    font-size: clamp(32px, 4vw, 48px);
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
  }
  .cta-section p {
    color: var(--mn-navy-200);
    max-width: 520px;
    margin: 0 auto 32px;
    font-size: 18px;
  }

  .gold-rule {
    width: 64px; height: 1px;
    background: var(--mn-gold-500);
    margin-bottom: 24px;
  }


/* === pricing.html === */

  .price-hero { padding: 80px 0 48px; text-align: center; }
  .price-hero h1 { margin: 16px 0 16px; }
  .price-hero p { max-width: 600px; margin: 0 auto; }

  .price-card-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 16px;
    margin-top: 64px;
    align-items: stretch;
  }
  @media (max-width: 1024px) { .price-card-row { grid-template-columns: 1fr; } }
  .pcard {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .pcard--feat {
    background: var(--mn-paper);
    color: var(--mn-navy-800);
    border: 1px solid var(--mn-gold-500);
    box-shadow: 0 0 0 4px var(--mn-gold-100);
    box-shadow: var(--c-shadow-xl);
  }
  .pcard--feat::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: var(--c-radius-xl);
    padding: 1px;
    background: linear-gradient(180deg, var(--c-violet-500), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  .pcard__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--c-violet-600);
    color: #fff;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--c-radius-pill);
  }
  .pcard__name {
    font-size: 14px; font-weight: 600;
    color: var(--c-violet-700);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .pcard--feat .pcard__name { color: var(--c-violet-300); }
  .pcard__price {
    font-size: 56px; font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--mn-navy-800);
    margin: 16px 0 4px;
    font-variant-numeric: tabular-nums;
  }
  /* Featured card has paper background, not navy — keep text dark for legibility. */
  .pcard--feat .pcard__price { color: var(--mn-navy-800); }
  .pcard__price small { font-size: 18px; font-weight: 500; color: var(--mn-grey-500); }
  .pcard--feat .pcard__price small { color: var(--mn-grey-500); }
  .pcard__sub { font-size: 14px; color: var(--mn-grey-500); margin-bottom: 24px; }
  .pcard--feat .pcard__sub { color: var(--mn-grey-700); }
  .pcard__features { list-style: none; padding: 0; margin: 24px 0 0; flex: 1; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
  .pcard__features li { display: flex; gap: 10px; align-items: flex-start; }
  .pcard__features li svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--c-violet-600); margin-top: 3px; }
  .pcard--feat .pcard__features li svg { color: var(--c-violet-400); }
  .pcard__cta { margin-top: 32px; }

  .pcard hr { border: 0; height: 1px; background: var(--mn-rule); margin: 24px 0 0; }
  .pcard--feat hr { background: rgba(255,255,255,0.12); }

  /* Calculator */
  .calc {
    background: var(--mn-paper);
    border-top: 1px solid var(--mn-rule);
    border-bottom: 1px solid var(--mn-rule);
  }
  .calc__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 900px) { .calc__inner { grid-template-columns: 1fr; } }
  .calc__panel {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    padding: 32px;
  }
  .slider-row { margin-bottom: 28px; }
  .slider-row label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--mn-grey-700); margin-bottom: 12px; }
  .slider-row label b { color: var(--mn-navy-800); font-weight: 700; font-family: var(--c-font-mono); font-variant-numeric: tabular-nums; }
  input[type="range"] { width: 100%; appearance: none; height: 6px; background: var(--mn-grey-100); border-radius: 999px; outline: none; }
  input[type="range"]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-violet-600); cursor: pointer; box-shadow: var(--c-shadow-md); }
  input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-violet-600); cursor: pointer; border: 0; }

  .calc__total {
    margin-top: 24px;
    padding: 24px;
    background: var(--mn-navy-50);
    color: var(--mn-navy-800);
    border: 1px solid var(--mn-navy-100);
    border-radius: var(--c-radius-lg);
    display: flex; justify-content: space-between; align-items: center;
  }
  .calc__total-label { font-size: 12px; color: var(--c-violet-300); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
  .calc__total-value { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--c-font-mono); font-variant-numeric: tabular-nums; }
  .calc__total-value small { font-size: 16px; color: var(--mn-navy-300); margin-left: 4px; }

  /* compare table */
  .cmp-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
    font-size: 14px;
  }
  .cmp-table th, .cmp-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--mn-rule);
  }
  .cmp-table th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--mn-grey-500); }
  .cmp-table td:first-child { font-weight: 500; color: var(--mn-navy-800); }
  .cmp-yes { color: var(--mn-success-fg); font-weight: 600; }
  .cmp-no { color: var(--mn-grey-400); }

  /* Stripe modal */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(11, 26, 48, 0.6);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
  }
  .modal-backdrop.is-open { display: flex; }
  .modal {
    background: #fff;
    border-radius: var(--c-radius-xl);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--c-shadow-xl);
    overflow: hidden;
    animation: modalIn 240ms var(--c-ease);
  }
  @keyframes modalIn { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal__head {
    padding: 24px 28px;
    border-bottom: 1px solid var(--mn-rule);
    display: flex; justify-content: space-between; align-items: center;
  }
  .modal__title { font-size: 16px; font-weight: 600; color: var(--mn-navy-800); }
  .modal__close { background: transparent; border: 0; cursor: pointer; padding: 4px; color: var(--mn-grey-500); }
  .modal__body { padding: 28px; }
  .modal__row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--mn-rule); font-size: 14px; }
  .modal__row:last-child { border-bottom: 0; font-weight: 600; padding-top: 16px; }
  .input-block { margin-bottom: 16px; }
  .input-block label { font-size: 12px; font-weight: 600; color: var(--mn-grey-700); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; display: block; }
  .input-field {
    width: 100%; height: 44px;
    border: 1px solid var(--mn-border-mid);
    border-radius: var(--c-radius-md);
    padding: 0 14px;
    font-size: 14px;
    font-family: var(--c-font-sans);
    background: #fff;
    transition: border-color 120ms;
  }
  .input-field:focus { outline: 0; border-color: var(--c-violet-600); box-shadow: 0 0 0 3px rgba(122,90,248,0.15); }
  .stripe-strip {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--mn-paper);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-md);
    font-size: 12px; color: var(--mn-grey-500);
    margin-top: 16px;
  }
  .stripe-logo { font-weight: 700; color: var(--c-violet-700); letter-spacing: -0.02em; }


/* === product.html === */

  .prod-hero { padding: 80px 0 32px; }
  .prod-hero__grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:64px; align-items:center }
  @media (max-width: 1024px){ .prod-hero__grid{ grid-template-columns:1fr } }

  .flow-diagram { background: var(--mn-navy-900); border-radius: var(--c-radius-2xl); padding: 32px; color:#fff; box-shadow: var(--c-shadow-xl) }
  .flow-stage { display:flex; align-items:center; gap:14px; padding:14px; border-radius:var(--c-radius-md); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); margin-bottom:8px; position:relative }
  .flow-stage__num { width:28px;height:28px;border-radius:50%;background:var(--c-violet-600);display:grid;place-items:center;font-size:11px;font-weight:700 }
  .flow-stage__title { font-size:14px;font-weight:600;color:#fff }
  .flow-stage__sub { font-size:11px;color:var(--mn-navy-300);font-family:var(--c-font-mono);margin-top:2px }
  .flow-stage svg { color:var(--c-violet-400); width:18px;height:18px;margin-left:auto }
  .flow-arrow { height:14px; display:flex; justify-content:center; color: var(--c-violet-400); }

  .features-section { background:var(--mn-surface); border-top:1px solid var(--mn-rule) }
  .feat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:48px }
  @media (max-width: 900px){ .feat-grid{ grid-template-columns:1fr } }
  .feat {
    background: var(--mn-paper);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    padding: 28px;
  }
  .feat__icon { width:44px;height:44px;border-radius:var(--c-radius-md);background:var(--c-violet-100);color:var(--c-violet-700);display:grid;place-items:center;margin-bottom:20px }
  .feat h3 { font-size:18px;font-weight:600;color:var(--mn-navy-800);margin:0 0 10px }
  .feat p { font-size:14px;line-height:1.6;color:var(--mn-grey-700);margin:0 }
  .feat ul { font-size:13px;color:var(--mn-grey-500);margin:14px 0 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px }
  .feat ul li { display:flex;gap:8px;align-items:flex-start }
  .feat ul li::before { content:"·"; color:var(--c-violet-600); font-weight:700 }

  .integrations { background:var(--mn-paper) }
  .int-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; margin-top:48px }
  @media (max-width:1024px){ .int-grid{ grid-template-columns: repeat(3,1fr) } }
  .int { background:var(--mn-surface); border:1px solid var(--mn-rule); border-radius:var(--c-radius-md); padding:20px; text-align:center; font-size:13px; font-weight:600; color:var(--mn-grey-700); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
  .int svg { color: var(--c-violet-600); width: 24px; height: 24px }
  .int span { color: var(--mn-navy-800); font-size: 13px; }
  .int small { color: var(--mn-grey-400); font-size: 10px; font-family: var(--c-font-mono); letter-spacing: 0.04em; text-transform: uppercase }


/* === demo.html === */

  body { background: var(--mn-paper); }
  .demo-hero { padding: 56px 0 32px; }
  .demo-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 32px }
  @media(max-width:1100px){ .demo-grid{ grid-template-columns:1fr } }

  /* Call Stage */
  .stage {
    background: var(--mn-paper);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    color: var(--mn-navy-800);
    padding: 32px;
    position: relative; overflow:hidden;
    min-height: 600px;
    display:flex; flex-direction:column;
  }
  .stage::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse 600px 400px at 50% 0%, rgba(201,168,106,0.10), transparent 60%);
    pointer-events:none;
  }
  .stage-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 32px }
  .stage-num { background: var(--mn-surface); border: 1px solid var(--mn-rule); padding: 10px 16px; border-radius: var(--c-radius-md); display:flex; gap:10px; align-items:center; font-family:var(--c-font-mono); font-size: 12px; color: var(--mn-navy-800); font-weight:600 }ly:var(--c-font-mono); font-size:14px }
  .live-dot { width:8px;height:8px;border-radius:50%; background: #FF5C5C; box-shadow: 0 0 12px #FF5C5C; animation: pulse 1.4s infinite }
  @keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.4 } }
  .stage-meta { font-size:11px; color:var(--mn-grey-500); text-align:right; line-height:1.6; font-family:var(--c-font-mono) }
  .stage-meta b { color:var(--mn-navy-800); font-weight:600 }

  .visualizer {
    position:relative; z-index:1;
    height: 120px;
    display:flex; align-items:center; justify-content:center; gap:4px;
    margin: 16px 0 24px
  }
  .bar {
    width:4px; background: var(--mn-navy-600); border-radius:2px;
    animation: vis 1.2s ease-in-out infinite;
  }
  @keyframes vis { 0%,100%{ height:8px } 50%{ height:60px } }

  .speaker-pair {
    position:relative; z-index:1;
    display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom: 16px
  }
  .speaker {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-lg);
    padding: 16px;
    display:flex; gap:12px; align-items:center;
  }
  .speaker.is-active { border-color: var(--mn-navy-700); box-shadow: 0 0 0 3px var(--mn-navy-100) }
  .speaker__avatar { width:40px;height:40px;border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:14px; flex-shrink:0; background-size: cover; background-position: center; }
  .speaker__avatar.s-bot { background-image: url('images/anna-portrait.jpg'); }
  .speaker__avatar.s-caller { background: var(--mn-gold-500); color:#fff }
  .speaker__name { font-size:13px; font-weight:600 }
  .speaker__role { font-size:11px; color:var(--mn-grey-500); font-family:var(--c-font-mono) }

  /* Transcript */
  .transcript-card {
    background: var(--mn-paper);
    border-radius: var(--c-radius-xl);
    border: 1px solid var(--mn-rule);
    overflow: hidden;
    display:flex; flex-direction:column;
  }
  .transcript-head {
    padding: 16px 24px;
    border-bottom: 1px solid var(--mn-rule);
    display:flex; align-items:center; gap:12px;
    background: var(--mn-surface);
  }
  .transcript-head h3 { margin:0; font-size:13px; font-weight:600; color:var(--mn-navy-800); letter-spacing:0.04em; text-transform:uppercase }
  .transcript-body { padding: 24px; flex:1; max-height: 460px; overflow-y:auto; }
  .turn { display:flex; gap:14px; margin-bottom: 20px }
  .turn__avatar { width:32px;height:32px;border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; flex-shrink:0; background-size: cover; background-position: center; }
  .turn__avatar.t-bot { background-image: url('images/anna-portrait.jpg'); color: transparent; }
  .turn__avatar.t-caller { background: var(--mn-gold-100); color: var(--mn-gold-700) }
  .turn__avatar.t-system { background: var(--mn-grey-100); color: var(--mn-grey-500) }
  .turn__avatar.t-caller, .turn__avatar.t-system { color: var(--mn-grey-700); }
  .turn__bubble { flex:1 }
  .turn__head { display:flex; gap:10px; align-items:baseline; margin-bottom:4px }
  .turn__name { font-size:13px; font-weight:600; color:var(--mn-navy-800) }
  .turn__time { font-size:11px; color:var(--mn-grey-400); font-family:var(--c-font-mono) }
  .turn__intent { font-size:10px; color:var(--mn-navy-800); background:var(--mn-navy-100); padding:2px 8px; border-radius:999px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase }
  .turn__text { font-size:14px; line-height:1.55; color:var(--mn-grey-700) }
  .turn__text mark { background: var(--mn-gold-100); color:inherit; padding:0 2px; border-radius:2px }

  .turn--system .turn__bubble {
    border-left: 2px solid var(--c-violet-300);
    padding-left: 14px;
    margin-left: -14px;
    background: var(--mn-surface);
    border-radius: 0 8px 8px 0;
    padding: 12px 14px;
  }

  /* Side panel */
  .side-stack { display:flex; flex-direction:column; gap:16px }
  .side-card { background: var(--mn-paper); border:1px solid var(--mn-rule); border-radius: var(--c-radius-lg); padding: 20px }
  .side-card h4 { margin:0 0 14px; font-size:11px; font-weight:600; color:var(--mn-grey-500); letter-spacing:0.06em; text-transform:uppercase }

  .data-row { display:flex; justify-content:space-between; padding: 10px 0; border-bottom:1px solid var(--mn-rule); font-size:13px }
  .data-row:last-child { border:0 }
  .data-row span:first-child { color: var(--mn-grey-500) }
  .data-row span:last-child { color: var(--mn-navy-800); font-weight:500; font-family:var(--c-font-mono) }

  .actions { display:flex; flex-direction:column; gap:8px }
  .action {
    padding: 10px 14px;
    background: var(--mn-surface);
    border-radius: var(--c-radius-md);
    border: 1px solid var(--mn-rule);
    display:flex; gap:10px; align-items:center;
    font-size:13px;
  }
  .action.is-done { background: var(--mn-success-bg); border-color: rgba(48,168,90,0.3) }
  .action__check { width:18px;height:18px;border-radius:50%; border: 1.5px solid var(--mn-grey-300); flex-shrink:0; display:grid; place-items:center }
  .action.is-done .action__check { background: var(--mn-success-fg); border-color: var(--mn-success-fg); color:#fff }
  .action__lbl { flex:1 }
  .action__lbl b { color: var(--mn-navy-800); font-weight:600 }

  .stat-mini { display:flex; gap:16px; padding:12px 0 }
  .stat-mini__num { font-size:24px; font-weight:700; color:var(--mn-navy-800); letter-spacing:-0.01em; font-variant-numeric:tabular-nums }
  .stat-mini__lbl { font-size:11px; color:var(--mn-grey-500); margin-top:2px; line-height:1.4 }


/* === signup.html === */

  body { background: var(--mn-paper); }
  .signup-shell { display:grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px) }
  @media(max-width:1000px){ .signup-shell{ grid-template-columns:1fr } }

  .signup-side {
    background: var(--mn-navy-900);
    color: #fff;
    padding: 56px 56px;
    display:flex; flex-direction:column;
    position: relative; overflow:hidden;
  }
  .signup-side::before {
    content: '';
    position: absolute; inset:0;
    background: radial-gradient(ellipse 600px 400px at 100% 0%, rgba(122,90,248,0.18), transparent 60%);
    pointer-events: none;
  }
  .signup-side__inner { position:relative; z-index:1; flex:1; display:flex; flex-direction:column }
  .signup-side h2 { color:#fff; max-width:380px; }
  .signup-checks { list-style:none; padding:0; margin:32px 0 0; display:flex; flex-direction:column; gap:14px }
  .signup-checks li { display:flex; gap:12px; align-items:flex-start; font-size:14px; color: var(--mn-navy-200) }
  .signup-checks li svg { color: var(--c-violet-300); flex-shrink:0; margin-top:3px }

  .signup-quote {
    margin-top:auto; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08);
    font-size:14px; line-height:1.6; color:var(--mn-navy-200)
  }
  .signup-quote b { color:#fff; font-weight:600 }

  .signup-form { padding: 56px; display:flex; flex-direction:column; }
  .signup-form__inner { max-width: 460px; width: 100%; margin: 0 auto }

  .stepper { display:flex; align-items:center; gap:8px; margin-bottom:32px }
  .step { display:flex; gap:8px; align-items:center; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color: var(--mn-grey-400) }
  .step__dot { width:24px;height:24px;border-radius:50%; border:1px solid var(--mn-grey-200); display:grid; place-items:center; font-family:var(--c-font-mono); font-size:11px; color:var(--mn-grey-400); background:#fff }
  .step.is-active .step__dot { background: var(--c-violet-600); border-color: var(--c-violet-600); color:#fff }
  .step.is-active { color: var(--mn-navy-800) }
  .step.is-done .step__dot { background: var(--mn-success-fg); border-color: var(--mn-success-fg); color:#fff }
  .step-divider { flex:1; height:1px; background:var(--mn-rule); }

  .input-block { margin-bottom:18px }
  .input-block label { font-size:12px;font-weight:600;color:var(--mn-grey-700);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px;display:block }
  .input-field { width:100%;height:48px;border:1px solid var(--mn-border-mid);border-radius:var(--c-radius-md);padding:0 14px;font-size:15px;font-family:var(--c-font-sans);background:#fff;transition:border-color 120ms }
  .input-field:focus { outline:0;border-color:var(--c-violet-600);box-shadow:0 0 0 3px rgba(122,90,248,0.15) }

  .vertical-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:8px }
  @media(max-width:600px){ .vertical-grid{ grid-template-columns: 1fr 1fr } }
  .vchip { padding: 14px 10px; border:1px solid var(--mn-border-mid); border-radius:var(--c-radius-md); cursor:pointer; background:#fff; transition: all 120ms; text-align:center }
  .vchip:hover { border-color: var(--c-violet-400) }
  .vchip.is-selected { border-color: var(--c-violet-600); background: var(--c-violet-50); box-shadow: 0 0 0 3px rgba(122,90,248,0.1) }
  .vchip svg { color: var(--c-violet-600); margin: 0 auto 6px }
  .vchip__t { font-size:13px; font-weight:600; color:var(--mn-navy-800) }

  .voice-row { display:flex; gap:8px; margin-top:8px }
  .voice-card { flex:1; padding:14px; border:1px solid var(--mn-border-mid); border-radius:var(--c-radius-md); cursor:pointer; background:#fff; transition: all 120ms }
  .voice-card.is-selected { border-color: var(--c-violet-600); background: var(--c-violet-50) }
  .voice-card__name { font-size:13px; font-weight:600; color:var(--mn-navy-800) }
  .voice-card__meta { font-size:11px; color:var(--mn-grey-500); margin-top:2px; font-family:var(--c-font-mono) }
  .voice-play { width:28px;height:28px;border-radius:50%;background:var(--c-violet-600);color:#fff;display:grid;place-items:center;margin-bottom:8px }

  .summary {
    margin-top: 16px; padding: 18px; background: var(--mn-paper);
    border: 1px solid var(--mn-rule); border-radius: var(--c-radius-md);
    font-size:13px; color:var(--mn-grey-700); line-height:1.7
  }
  .summary b { color: var(--mn-navy-800) }

  /* success state */
  .success { text-align:center; padding: 48px 0 }
  .success__icon { width:72px;height:72px;border-radius:50%;background: var(--mn-success-bg); color: var(--mn-success-fg); display:grid;place-items:center; margin: 0 auto 24px }
  .success__num { background:var(--mn-navy-800); color:#fff; font-family:var(--c-font-mono); font-size:18px; padding:18px 24px; border-radius:var(--c-radius-md); display:inline-flex; gap:12px; align-items:center; margin-top:24px }


/* === security.html === */

  .sec-hero { padding:80px 0 48px; background: var(--mn-paper); color: var(--mn-navy-800); border-bottom: 1px solid var(--mn-rule); }
  .sec-hero h1 { color: var(--mn-navy-800); }
  .sec-hero p { color: var(--mn-grey-700); }
  .sec-hero__grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:64px; align-items:center }
  @media(max-width:1024px){ .sec-hero__grid{ grid-template-columns:1fr } }

  .cert-stack { display:flex; flex-direction:column; gap:12px }
  .cert {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-lg);
    padding: 18px;
    display:flex; gap:16px; align-items:center
  }
  .cert__icon { width:44px;height:44px;border-radius:var(--c-radius-md);background:var(--mn-gold-100);color:var(--mn-gold-700);display:grid;place-items:center;flex-shrink:0 }
  .cert__title { font-size:15px; font-weight:600; color:var(--mn-navy-800) }
  .cert__sub { font-size:12px; color: var(--mn-grey-500); margin-top:2px }
  .cert__status { margin-left:auto; font-size:11px; padding: 4px 10px; border-radius:999px; background: var(--mn-success-bg); color: var(--mn-success-fg); font-weight:600; letter-spacing:0.04em }

  .pillar-row { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:48px }
  @media(max-width:900px){ .pillar-row{ grid-template-columns:1fr } }
  .secp { background:var(--mn-paper); border:1px solid var(--mn-rule); border-radius:var(--c-radius-xl); padding:28px }
  .secp__num { font-family:var(--c-font-mono); font-size:11px; color:var(--mn-grey-400); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:16px }
  .secp h3 { margin:0 0 12px; font-size:24px; letter-spacing:-0.02em; color:var(--mn-navy-800); font-weight:700 }
  .secp p { margin:0; font-size:14px; line-height:1.6; color:var(--mn-grey-700) }
  .secp ul { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13px }
  .secp li { display:flex; gap:8px; align-items:flex-start; color:var(--mn-grey-700) }
  .secp li svg { color: var(--c-violet-600); flex-shrink:0; width:14px; height:14px; margin-top:4px }

  .arch-diagram { background: var(--mn-paper); border-top:1px solid var(--mn-rule); border-bottom:1px solid var(--mn-rule) }
  .arch { background: var(--mn-surface); border:1px solid var(--mn-rule); border-radius: var(--c-radius-xl); padding: 32px; margin-top: 32px }
  .arch-tier { padding:16px; background:var(--mn-paper); border:1px solid var(--mn-rule); border-radius:var(--c-radius-md); margin-bottom:8px; display:flex; gap:14px; align-items:center }
  .arch-tier__lbl { font-family:var(--c-font-mono); font-size:11px; color:var(--mn-grey-400); width:60px; flex-shrink:0; text-transform:uppercase; letter-spacing:0.06em }
  .arch-tier__title { font-size:14px; font-weight:600; color:var(--mn-navy-800) }
  .arch-tier__desc { font-size:12px; color:var(--mn-grey-500); margin-top:2px }
  .arch-tier svg { color:var(--c-violet-600); margin-left:auto }
  .arch-divider { height:14px; display:flex; justify-content:center; color:var(--mn-grey-300) }

  .faq { display:flex; flex-direction:column; gap:1px; background: var(--mn-rule); border-radius:var(--c-radius-lg); overflow:hidden; margin-top:32px }
  .faq-item { background:var(--mn-surface); padding:20px 24px }
  .faq-item summary { font-size:15px; font-weight:600; color: var(--mn-navy-800); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center }
  .faq-item summary::after { content: '+'; font-size:20px; color: var(--c-violet-600); }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item p { margin: 16px 0 0; font-size:14px; line-height:1.6; color: var(--mn-grey-700) }


/* === verticals.html === */

  .vh-hero { padding: 80px 0 48px; }
  .vrow {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  @media (max-width: 900px){ .vrow{ grid-template-columns: 1fr } }
  .vbig {
    background: var(--mn-surface);
    border: 1px solid var(--mn-rule);
    border-radius: var(--c-radius-xl);
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: all 200ms var(--c-ease);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    position: relative;
    overflow: hidden;
  }
  .vbig:hover {
    border-color: var(--c-violet-400);
    transform: translateY(-2px);
    box-shadow: var(--c-shadow-md);
  }
  .vbig__num { font-family: var(--c-font-mono); font-size: 11px; color: var(--mn-grey-400); letter-spacing: 0.06em; }
  .vbig__icon {
    width: 56px; height: 56px;
    border-radius: var(--c-radius-md);
    background: var(--c-violet-100);
    color: var(--c-violet-700);
    display: grid; place-items: center;
    margin: 24px 0 24px;
  }
  .vbig__title { font-size: 28px; font-weight: 700; color: var(--mn-navy-800); letter-spacing: -0.02em; margin: 0 0 12px }
  .vbig__desc { font-size: 14px; line-height: 1.6; color: var(--mn-grey-700); margin: 0 0 20px; flex: 1 }
  .vbig__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
  .vbig__cta { display:flex; align-items:center; gap:6px; margin-top:16px; font-size:13px; font-weight:600; color: var(--c-violet-700) }
  .vbig--featured {
    background: var(--mn-navy-800);
    color: #fff;
    border-color: transparent;
  }
  .vbig--featured .vbig__num { color: var(--c-violet-300); }
  .vbig--featured .vbig__title { color: #fff; }
  .vbig--featured .vbig__desc { color: var(--mn-navy-200); }
  .vbig--featured .vbig__icon { background: rgba(122,90,248,0.2); color: var(--c-violet-300); }
  .vbig--featured .vbig__cta { color: var(--c-violet-300); }
  .vbig--featured .c-tag { background: rgba(255,255,255,0.08); color: #fff; }


/* === vertical-healthcare.html === */

  .vh-hero { padding:80px 0 48px; background: linear-gradient(180deg, var(--mn-paper) 0%, var(--mn-surface) 100%); border-bottom:1px solid var(--mn-rule) }
  .vh-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; align-items:center }
  @media (max-width:1024px){ .vh-grid{ grid-template-columns:1fr } }

  .stats-row { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin:48px 0 0 }
  @media (max-width:900px){ .stats-row{ grid-template-columns: 1fr 1fr } }
  .stat { background:var(--mn-paper); border:1px solid var(--mn-rule); border-radius:var(--c-radius-lg); padding:24px }
  .stat__num { font-size:36px; font-weight:700; letter-spacing:-0.02em; color:var(--mn-navy-800); font-variant-numeric:tabular-nums; line-height:1; }
  .stat__num em { font-style:normal; color:var(--c-violet-600) }
  .stat__lbl { font-size:12px; color:var(--mn-grey-500); margin-top:8px; letter-spacing:0.04em; text-transform:uppercase; font-weight:500 }

  .uc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px }
  @media (max-width:900px){ .uc-grid{ grid-template-columns:1fr } }
  .uc { background:var(--mn-surface); border:1px solid var(--mn-rule); border-radius:var(--c-radius-lg); padding:28px }
  .uc__h { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px }
  .uc__icon { width:40px;height:40px;border-radius:var(--c-radius-md);background:var(--c-violet-100);color:var(--c-violet-700);display:grid;place-items:center;flex-shrink:0 }
  .uc h3 { margin:0;font-size:18px;color:var(--mn-navy-800);font-weight:600 }
  .uc__sub { font-size:12px;color:var(--mn-grey-500);margin-top:2px }
  .uc p { margin:0;font-size:14px;line-height:1.6;color:var(--mn-grey-700) }

  .compliance-card { background: var(--mn-navy-800); color:#fff; border-radius: var(--c-radius-xl); padding: 28px; box-shadow: var(--c-shadow-xl) }
  .compliance-card h4 { margin:0 0 16px; font-size:13px; color:var(--c-violet-300); text-transform:uppercase; letter-spacing:0.14em; font-weight:700 }
  .compliance-card ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px }
  .compliance-card li { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--mn-navy-100) }
  .compliance-card li svg { color: var(--c-violet-300); flex-shrink:0 }
  .compliance-card li b { color:#fff; font-weight:600 }

  .testimonial { background: var(--mn-paper); border-left: 3px solid var(--c-violet-600); padding: 24px 28px; border-radius: 0 var(--c-radius-lg) var(--c-radius-lg) 0; margin-top: 48px }
  .testimonial blockquote { margin:0; font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; color: var(--mn-navy-800); font-weight: 500 }
  .testimonial cite { font-style:normal; display:block; margin-top:16px; font-size:13px; color:var(--mn-grey-500) }
  .testimonial cite b { color: var(--mn-navy-800); font-weight:600 }


/* === dashboard.html === */

  body { background: var(--mn-paper); }

  /* App shell */
  .app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
  }
  @media (max-width: 900px) { .app { grid-template-columns: 1fr; } }

  .sidebar {
    background: var(--mn-navy-900);
    color: #fff;
    padding: 24px 16px;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
  }
  @media (max-width: 900px) { .sidebar { position: relative; height: auto; } }

  .sb-brand { display:flex; gap:10px; align-items:center; padding: 4px 10px 24px }
  .sb-brand__mark { width:28px;height:28px;border-radius:8px;background:var(--c-violet-600);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;font-family:var(--c-font-mono) }
  .sb-brand__name { font-weight:700; letter-spacing:-0.01em; font-size:15px }

  .sb-tenant {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--c-radius-md);
    padding: 10px 12px;
    margin-bottom: 24px;
    display:flex; gap:10px; align-items:center;
    cursor:pointer;
  }
  .sb-tenant__avatar { width:32px;height:32px;border-radius:8px;background:var(--c-violet-700);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex-shrink:0 }
  .sb-tenant__name { font-size:13px; font-weight:600; color:#fff }
  .sb-tenant__plan { font-size:10px; color: var(--c-violet-300); font-family: var(--c-font-mono); letter-spacing:0.04em }
  .sb-tenant__chevron { margin-left:auto; color: var(--mn-navy-400) }

  .sb-section { font-size: 10px; color: var(--mn-navy-400); text-transform:uppercase; letter-spacing:0.1em; padding: 12px 12px 6px; font-weight:600 }
  .sb-nav { display:flex; flex-direction:column; gap:2px }
  .sb-link {
    display:flex; gap:12px; align-items:center;
    padding: 9px 12px;
    border-radius: var(--c-radius-sm);
    color: var(--mn-navy-200); text-decoration:none;
    font-size: 13.5px;
    transition: all 120ms;
  }
  .sb-link:hover { background: rgba(255,255,255,0.04); color:#fff }
  .sb-link.is-active { background: rgba(122,90,248,0.18); color:#fff }
  .sb-link.is-active svg { color: var(--c-violet-300) }
  .sb-link svg { color: var(--mn-navy-400); flex-shrink:0 }
  .sb-link__badge { margin-left:auto; font-size:10px; padding:2px 8px; border-radius:999px; background:var(--c-violet-600); color:#fff; font-weight:600 }

  .sb-foot { margin-top:auto; padding-top:16px; border-top: 1px solid rgba(255,255,255,0.08); display:flex; gap:10px; align-items:center }
  .sb-foot__avatar { width:32px;height:32px;border-radius:50%;background:var(--mn-gold-500);color:#fff;display:grid;place-items:center;font-weight:600;font-size:11px }
  .sb-foot__name { font-size:13px; font-weight:600; color:#fff }
  .sb-foot__role { font-size:11px; color: var(--mn-navy-300) }

  /* Main */
  .main { padding: 28px 32px 56px; min-width: 0 }
  @media (max-width: 600px) { .main { padding: 20px } }

  .topbar { display:flex; align-items:center; gap:16px; margin-bottom: 28px }
  .topbar h1 { margin:0; font-size: 26px; letter-spacing:-0.02em; color: var(--mn-navy-800); font-weight:700 }
  .topbar__meta { font-size: 12px; color: var(--mn-grey-500); font-family: var(--c-font-mono) }
  .topbar__right { margin-left:auto; display:flex; gap:8px; align-items:center }
  .icon-btn { width:36px;height:36px;border-radius:var(--c-radius-md);border:1px solid var(--mn-rule);background:#fff;display:grid;place-items:center;color:var(--mn-grey-700);cursor:pointer; position:relative }
  .icon-btn:hover { border-color: var(--mn-border-mid) }
  .icon-btn__dot { position:absolute; top:8px; right:8px; width:8px;height:8px;border-radius:50%;background:#FF5C5C;border:2px solid #fff }

  /* KPIs */
  .kpi-row { display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-bottom: 24px }
  @media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr) } }
  @media (max-width: 600px) { .kpi-row { grid-template-columns: 1fr } }
  .kpi {
    background:#fff; border:1px solid var(--mn-rule); border-radius: var(--c-radius-lg);
    padding: 18px 20px;
    position:relative; overflow:hidden;
  }
  .kpi__lbl { font-size:11px; color: var(--mn-grey-500); text-transform:uppercase; letter-spacing:0.06em; font-weight:600 }
  .kpi__num { font-size: 32px; font-weight: 700; letter-spacing:-0.02em; color: var(--mn-navy-800); margin-top:8px; font-variant-numeric: tabular-nums; line-height:1.05 }
  .kpi__num em { font-style:normal; font-size:18px; color: var(--mn-grey-500); font-weight:500 }
  .kpi__delta { display:inline-flex; gap:4px; align-items:center; font-size:12px; margin-top:8px; font-weight:600 }
  .kpi__delta.up { color: var(--mn-success-fg) }
  .kpi__delta.down { color: var(--c-violet-700) }
  .kpi__spark { position: absolute; right: 16px; bottom: 16px; opacity: 0.6 }

  /* Two-column layout */
  .grid-2 { display:grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px }
  @media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr } }

  .card { background:#fff; border:1px solid var(--mn-rule); border-radius: var(--c-radius-xl); padding: 24px; min-width:0 }
  .card__head { display:flex; align-items:center; gap:12px; margin-bottom: 18px }
  .card__head h3 { margin:0; font-size:15px; color: var(--mn-navy-800); font-weight:700 }
  .card__head-meta { font-size:11px; color:var(--mn-grey-500); font-family:var(--c-font-mono); margin-left:auto }
  .card__action { font-size:12px; color: var(--c-violet-700); font-weight:600; text-decoration:none }

  /* Chart */
  .chart {
    height: 220px;
    display:flex; align-items:flex-end; gap:6px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mn-rule);
    position: relative;
  }
  .chart__bar { flex:1; background: var(--c-violet-200); border-radius: 4px 4px 0 0; min-width:0; position:relative; transition: background 120ms; cursor: pointer }
  .chart__bar.is-peak { background: var(--c-violet-600) }
  .chart__bar:hover { background: var(--c-violet-500) }
  .chart__bar::after {
    content: attr(data-day);
    position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: var(--mn-grey-400); font-family:var(--c-font-mono)
    pointer-events: none;
  }
  .chart__legend { display:flex; gap:18px; margin-top: 28px; font-size:11px; color: var(--mn-grey-500); font-family:var(--c-font-mono) }
  .chart__legend span { display:flex; gap:6px; align-items:center }
  .chart__legend i { width:8px;height:8px;border-radius:2px; display:inline-block }

  /* Calls list */
  .call-row {
    display:grid; grid-template-columns: 36px 1fr auto auto auto auto;
    gap: 14px; align-items:center;
    padding: 12px 0; border-bottom: 1px solid var(--mn-rule);
    font-size: 13px;
  }
  .call-row:last-child { border:0 }
  .call-row__avatar { width:32px;height:32px;border-radius:50%;background: var(--mn-gold-100);color: var(--mn-gold-700);display:grid;place-items:center;font-size:12px;font-weight:600 }
  .call-row__name { font-weight:600; color: var(--mn-navy-800); font-size:13.5px }
  .call-row__intent { font-size:11px; color: var(--mn-grey-500); margin-top:2px }
  .call-row__time { color: var(--mn-grey-500); font-family:var(--c-font-mono); font-size:11.5px }
  .call-row__dur { color: var(--mn-navy-700); font-family:var(--c-font-mono); font-size:11.5px }
  .pill { padding: 3px 10px; border-radius:999px; font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase }
  .pill--success { background: var(--mn-success-bg); color: var(--mn-success-fg) }
  .pill--escalated { background: rgba(255,92,92,0.12); color: #C84747 }
  .pill--missed { background: var(--mn-grey-100); color: var(--mn-grey-700) }
  .call-row__open { color: var(--mn-grey-400); cursor:pointer }
  .call-row:hover { background: var(--mn-paper); }
  @media (max-width: 700px) {
    .call-row { grid-template-columns: 36px 1fr auto; }
    .call-row__time, .call-row__dur, .call-row__open { display: none }
  }

  /* Side rail */
  .ranked-list { display:flex; flex-direction:column; gap:14px }
  .ranked {
    display:flex; gap:14px; align-items:center;
  }
  .ranked__rank { width:24px; font-family:var(--c-font-mono); font-size:11px; color: var(--mn-grey-400) }
  .ranked__bar { flex:1; height:8px; background: var(--mn-grey-100); border-radius:4px; overflow:hidden; position:relative }
  .ranked__bar i { display:block; height:100%; background: var(--c-violet-600); border-radius:4px }
  .ranked__bar.gold i { background: var(--mn-gold-500) }
  .ranked__lbl { font-size:12.5px; color: var(--mn-navy-800); font-weight:500; min-width: 130px }
  .ranked__num { font-family:var(--c-font-mono); font-size:11px; color: var(--mn-grey-500); width: 36px; text-align:right }

  .integration-row {
    display:flex; gap:12px; align-items:center;
    padding: 12px 0; border-bottom: 1px solid var(--mn-rule);
  }
  .integration-row:last-child { border:0 }
  .integration-row__icon { width:32px;height:32px;border-radius:8px;background: var(--mn-surface);display:grid;place-items:center;color:var(--mn-grey-700) }
  .integration-row__name { font-size:13px; font-weight:600; color: var(--mn-navy-800) }
  .integration-row__sub { font-size:11px; color: var(--mn-grey-500); font-family: var(--c-font-mono) }
  .integration-row__status { margin-left:auto; font-size:11px }
  .dot { width:8px;height:8px;border-radius:50%; display:inline-block; margin-right:6px }
  .dot--ok { background: var(--mn-success-fg) }
  .dot--warn { background: var(--mn-gold-500) }

  /* Usage card */
  .usage {
    background: linear-gradient(135deg, var(--mn-navy-900) 0%, #1A2748 100%);
    color:#fff; border-radius: var(--c-radius-xl); padding: 24px;
    position:relative; overflow:hidden;
  }
  .usage::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 300px 200px at 100% 0%, rgba(122,90,248,0.25), transparent 60%)
    pointer-events: none;
  }
  .usage > * { position:relative; z-index:1 }
  .usage h3 { color:#fff; margin:0 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600 }
  .usage__num { font-size: 36px; font-weight:700; margin-top:8px; letter-spacing:-0.02em; font-variant-numeric: tabular-nums }
  .usage__num em { font-style:normal; font-size:16px; color: var(--mn-navy-300); font-weight:500 }
  .usage__bar { height:8px; background: rgba(255,255,255,0.12); border-radius:4px; overflow:hidden; margin: 14px 0 8px }
  .usage__bar i { display:block; height:100%; background: linear-gradient(90deg, var(--c-violet-400), var(--c-violet-600)); border-radius:4px }
  .usage__meta { font-size:11px; color: var(--mn-navy-300); font-family:var(--c-font-mono); display:flex; justify-content:space-between }

  /* Status banner */
  .status-banner {
    display:flex; gap:14px; align-items:center;
    background: var(--mn-success-bg);
    border: 1px solid rgba(48,168,90,0.2);
    border-radius: var(--c-radius-md);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
  }
  .status-banner svg { color: var(--mn-success-fg); flex-shrink:0 }
  .status-banner b { color: var(--mn-navy-800); font-weight:600 }
  .status-banner__time { margin-left:auto; font-size:11px; color: var(--mn-grey-500); font-family:var(--c-font-mono) }