/* ================================================================
   AI CONSULTING PAGE — Jones Web Designs
   Builds on css/style.css and the section system in css/security.css.
   Adds only the opportunity finder in the hero and the two-plan grid.
   ================================================================ */

/* ---------------------------------------------------------- the finder */
.finder-set { border: none; margin: 0; padding: 0; min-width: 0; }
.finder-set legend { padding: 0; }

.finder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 20px;
}

.finder-chip { position: relative; }
.finder-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.finder-chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(244, 242, 239, 0.18);
    background: rgba(244, 242, 239, 0.04);
    color: rgba(244, 242, 239, 0.82);
    font-size: 0.85rem;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
    user-select: none;
}
.finder-chip span::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 242, 239, 0.45);
    flex: 0 0 7px;
    transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.finder-chip span:hover { border-color: rgba(244, 242, 239, 0.4); color: var(--on-dark); }
.finder-chip input:checked + span {
    background: var(--on-dark);
    border-color: var(--on-dark);
    color: var(--dark);
}
.finder-chip input:checked + span::before { background: var(--terra); border-color: var(--terra); }
.finder-chip input:focus-visible + span { outline: 2px solid var(--peach); outline-offset: 2px; }

.finder-go { width: 100%; }

/* ---------------------------------------------------------- results */
.finder-results { margin-top: 4px; }
.finder-results[hidden] { display: none; }

.finder-summary {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(244, 242, 239, 0.72);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(244, 242, 239, 0.1);
}
.finder-summary strong { color: var(--on-dark); font-weight: 600; }

.finder-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(244, 242, 239, 0.08);
}
.finder-item:last-of-type { border-bottom: none; }

.finder-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.finder-item-head h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-dark);
    letter-spacing: -0.015em;
}

.finder-verdict {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
}
.finder-verdict[data-fit="strong"]  { background: #A9C9B4; color: #16301F; }
.finder-verdict[data-fit="good"]    { background: #C7D3B0; color: #26301A; }
.finder-verdict[data-fit="careful"] { background: var(--peach); color: #6B3A2C; }

.finder-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(244, 242, 239, 0.72);
}
.finder-item p + p { margin-top: 6px; }
.finder-item .finder-watch { color: rgba(244, 242, 239, 0.6); }
.finder-item .finder-watch strong { color: var(--peach); font-weight: 600; }

.finder-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.finder-actions .btn-primary { background: var(--on-dark); color: var(--dark); flex: 1; }
.finder-actions .btn-primary:hover { background: #fff; }

/* ---------------------------------------------------------- partner plans */
.ai-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .ai-partner-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .finder-chip span, .finder-chip span::before { transition: none; }
}