/* WhatDx v6.1 — homepage stories positioning + comparison modal.
   Additive styles; uses the existing WhatDx typefaces and colour tokens.
   No global restyling and no changes to the case-journey component. */
@media screen {
  body.reference-home .wdx-llm-linkline {
    margin: 9px 0 0;
    color: var(--ref-sub, #575652);
    font-size: 13px;
    line-height: 1.65;
  }
  body.reference-home .wdx-llm-trigger {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--ref-green, #14453D);
    font: 600 inherit;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: start;
  }
  body.reference-home .wdx-llm-trigger:hover { color: #0b312b; text-decoration-thickness: 2px; }
  body.reference-home .wdx-llm-trigger:focus-visible,
  body.reference-home .wdx-llm-dialog button:focus-visible { outline: 3px solid #a5662e; outline-offset: 3px; }

  body.reference-home .wdx-llm-dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(740px, calc(100vw - 28px));
    max-width: none;
    max-height: min(88vh, 900px);
    max-height: min(88dvh, 900px);
    padding: 0;
    border: 1px solid #b5c7b8;
    border-radius: 18px;
    background: var(--ref-bg, #F7F5F0);
    color: var(--ref-ink, #161615);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    box-shadow: 0 24px 65px rgba(22, 28, 24, .29);
    overflow: hidden;
  }
  body.reference-home .wdx-llm-dialog[open] { display: flex; flex-direction: column; }
  body.reference-home .wdx-llm-dialog::backdrop { background: rgba(15, 28, 23, .66); }
  body.reference-home .wdx-llm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 21px 25px 17px;
    background: var(--ref-bg, #F7F5F0);
    border-bottom: 1px solid #c1cec3;
    flex: 0 0 auto;
  }
  body.reference-home .wdx-llm-kicker {
    font: 600 11px/1.6 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .045em;
    color: var(--ref-green, #14453D);
    margin-bottom: 7px;
  }
  body.reference-home .wdx-llm-header h2 {
    margin: 0;
    font: 400 clamp(25px, 3.8vw, 34px)/1.16 'Newsreader', Georgia, serif;
    color: var(--ref-ink, #161615);
    letter-spacing: -.018em;
  }
  body.reference-home .wdx-llm-header h2 em { color: var(--ref-green, #14453D); }
  body.reference-home .wdx-llm-close-x {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #b5c7b8;
    border-radius: 50%;
    background: #fff;
    color: var(--ref-ink, #161615);
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
  }
  body.reference-home .wdx-llm-scroll-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 25px 23px;
    scrollbar-width: thin;
  }
  body.reference-home .wdx-harness-banner {
    margin-bottom: 16px;
    padding: 13px 17px;
    border: 1px solid #bfd0c3;
    border-inline-start: 4px solid var(--ref-green, #14453D);
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: #33463b;
    font-size: 13px;
    line-height: 1.68;
  }
  body.reference-home .wdx-harness-banner strong { color: #17281e; }
  body.reference-home .wdx-harness-banner code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1efe8;
    color: #673d26;
    font: 500 12px/1.5 'JetBrains Mono', monospace;
    white-space: normal;
  }
  body.reference-home .wdx-prompt-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 13px;
  }
  body.reference-home .wdx-prompt-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 17px;
    padding: 17px;
    border-radius: 13px;
  }
  body.reference-home .wdx-prompt-col.is-raw { background: #f1eee8; border: 1px solid #c8c7bd; }
  body.reference-home .wdx-prompt-col.is-wdx { background: #fff; border: 2px solid var(--ref-green, #14453D); }
  body.reference-home .wdx-col-tag {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
    color: #263b2e;
    font: 600 11px/1.5 'JetBrains Mono', monospace;
  }
  body.reference-home .wdx-col-tag .badge-muted,
  body.reference-home .wdx-col-tag .badge-green {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    font: 700 10px/1.35 'Plus Jakarta Sans', system-ui, sans-serif;
  }
  body.reference-home .wdx-col-tag .badge-muted { background: #e2dfd8; color: #3d4a41; }
  body.reference-home .wdx-col-tag .badge-green { background: var(--ref-green, #14453D); color: white; }
  body.reference-home .wdx-prompt-box {
    padding: 13px;
    border: 1px solid #c4cdc2;
    border-radius: 9px;
    background: #fff;
    color: #283c31;
    font-size: 12.5px;
    line-height: 1.73;
    overflow-wrap: anywhere;
  }
  body.reference-home .wdx-prompt-col.is-wdx .wdx-prompt-box {
    background: #f2f7f3;
    border-color: #afc9b7;
  }
  body.reference-home .wdx-prompt-box p { margin: 0 0 7px; }
  body.reference-home .wdx-prompt-box p:last-child { margin-bottom: 0; }
  body.reference-home .hl-term,
  body.reference-home .hl-neg,
  body.reference-home .hl-limit { padding: 1px 4px; border-radius: 4px; font-weight: 700; }
  body.reference-home .hl-term { background: #d9ebdf; color: #204c39; }
  body.reference-home .hl-neg { background: #f7e7e1; color: #813f2d; }
  body.reference-home .hl-limit { background: #f6eac9; color: #725222; }
  body.reference-home .wdx-result-box {
    padding-top: 13px;
    border-top: 1px dashed #b3bdb4;
    color: #34483d;
    font-size: 12.5px;
    line-height: 1.7;
  }
  body.reference-home .wdx-result-box strong:first-child {
    display: block;
    margin-bottom: 5px;
    color: #224c39;
    font-size: 11px;
    line-height: 1.55;
  }
  body.reference-home .is-raw .wdx-result-box strong:first-child { color: #813f2d; }
  body.reference-home .wdx-llm-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 25px;
    background: white;
    border-top: 1px solid #c1cec3;
  }
  body.reference-home .wdx-legend { display: flex; flex-wrap: wrap; gap: 7px; font-size: 11px; line-height: 1.4; }
  body.reference-home .wdx-btn-understand {
    border: 0;
    border-radius: 999px;
    padding: 11px 19px;
    background: var(--ref-green, #14453D);
    color: #fff;
    font: 700 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
    cursor: pointer;
  }
  body.reference-home .wdx-btn-understand:hover { background: #0b312b; }
  @media (max-width: 680px) {
    body.reference-home .wdx-llm-linkline { font-size: 14px; }
    body.reference-home .wdx-llm-dialog {
      width: calc(100vw - 20px);
      max-height: 90vh;
      max-height: 90dvh;
      border-radius: 14px;
    }
    body.reference-home .wdx-llm-header { padding: 16px 17px 14px; }
    body.reference-home .wdx-llm-scroll-body { padding: 15px 17px; }
    body.reference-home .wdx-llm-header h2 { font-size: clamp(23px, 6vw, 29px); }
    body.reference-home .wdx-prompt-compare { grid-template-columns: 1fr; }
    body.reference-home .wdx-prompt-col { padding: 14px; }
    body.reference-home .wdx-llm-footer { padding: 12px 17px; }
    body.reference-home .wdx-btn-understand { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    body.reference-home .wdx-llm-dialog * { scroll-behavior: auto; }
  }
}
@media screen {
  body.reference-home .wdx-llm-dialog .wdx-llm-illustrative {
    margin: 15px 1px 0;
    color: #526457;
    font-size: 11px;
    line-height: 1.6;
  }
  body.reference-home .wdx-llm-dialog[dir="rtl"] .wdx-llm-header,
  body.reference-home .wdx-llm-dialog[dir="rtl"] .wdx-llm-footer { text-align: start; }
  body.reference-home .wdx-llm-dialog[dir="rtl"] .wdx-harness-banner {
    border-radius: 10px 0 0 10px;
  }
  body.reference-home .wdx-prompt-english {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
  }
}