.ai-intro { text-align: center; padding: 20px 0 32px; }
.ai-emblem { display: inline-grid; place-items: center; width: 57px; height: 57px; background: var(--accent); border-radius: 15px; margin-bottom: 23px; transform: rotate(-8deg); }
.ai-emblem .icon { width: 30px; height: 30px; transform: rotate(8deg); }
.ai-intro h1 { font-size: 49px; line-height: 1.16; letter-spacing: -1.8px; }
.ai-intro h1 em { color: var(--accent-ink); }
.ai-intro > p:not(.eyebrow) { font-size: 13px; line-height: 1.9; color: #718078; margin-top: 22px; }
.ai-composer { max-width: 890px; margin: 0 auto; padding: 25px; border: 1px solid #b7d9c2; box-shadow: 0 9px 35px #1c7c3610; border-radius: 9px; }
.ai-composer-heading { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.ai-composer-heading label { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; }
.ai-composer-heading .icon { color: var(--accent-ink); width: 18px; height: 18px; }
.ai-composer-heading > span { font-size: 8px; letter-spacing: 1px; color: #718078; background: var(--soft); padding: 7px 9px; border-radius: 3px; }
.ai-composer textarea { width: 100%; border: 0; resize: none; height: 115px; padding: 23px 0; background: #fff; font: inherit; font-size: 15px; line-height: 1.9; color: #718078; opacity: 1; -webkit-text-fill-color: #718078; }
.ai-composer textarea::placeholder { color: #718078; opacity: 1; }
.ai-composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.ai-composer-bottom > span { display: flex; gap: 7px; align-items: center; color: #718078; font-size: 10px; }
.ai-composer-bottom .icon { width: 15px; height: 15px; }
.ai-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 20px 0; }
.ai-suggestions > span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 25px; font-size: 10px; color: #586a5f; }
.ai-suggestions > span:first-child { border: 0; color: #718078; }
.ai-suggestions > span:nth-child(2) { background: #edfff3; }
.ai-disclaimer { text-align: center; color: #718078; font-size: 9px; line-height: 1.8; }
.ai-composer + .ai-disclaimer { margin-top: 18px; }
.ai-example { max-width: 960px; margin: 60px auto 0; background: var(--soft); border: 1px solid var(--line); padding: 35px; border-radius: 6px; }
.ai-example-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.ai-example h2 { font-size: 29px; }
.ai-example-tag { padding: 7px 9px; background: var(--secondary); font-size: 9px; border-radius: 3px; white-space: nowrap; }
.ai-conversation { display: flex; align-items: flex-start; gap: 15px; margin: 28px 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.ai-user-mark { padding: 8px; background: var(--soft); border-radius: 50%; font-size: 8px; }
.ai-conversation p { font-size: 12px; line-height: 1.9; color: #627268; }
.ai-answer { display: flex; align-items: flex-start; gap: 16px; }
.ai-answer-icon { display: grid; place-items: center; width: 35px; height: 35px; background: var(--accent); border-radius: 8px; flex-shrink: 0; }
.ai-answer-icon .icon { width: 20px; }
.ai-answer h3 { font-size: 17px; font-weight: 500; margin-bottom: 11px; }
.ai-answer p { color: #627268; font-size: 12px; line-height: 1.9; }
.ai-match-tags { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 16px; }
.ai-match-tags span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--accent-ink); }
.ai-match-tags .icon { width: 14px; height: 14px; }
.ai-result-card { display: grid; grid-template-columns: 1fr 1.3fr; background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; margin-top: 26px; }
.ai-result-card > a > img { height: 100%; min-height: 255px; }
.ai-result-body { padding: 24px; }
.ai-match-label { display: inline-flex; gap: 6px; align-items: center; color: var(--accent-ink); font-size: 8px; letter-spacing: .5px; }
.ai-match-label .icon { width: 13px; height: 13px; }
.ai-result-body h3 { font-size: 23px; font-weight: 500; letter-spacing: -.6px; margin-top: 13px; }
.ai-result-body > p { color: #718078; font-size: 10px; line-height: 1.8; margin-top: 12px; }
.ai-result-body > p > span { margin-inline: 5px; }
.ai-result-body > p.ai-result-reason { font-size: 11px; }
.ai-result-body > div { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 22px; }
.ai-result-body strong { font-size: 23px; letter-spacing: -.6px; font-weight: 500; white-space: nowrap; }
.ai-result-body small { font-size: 11px; }
.ai-result-body .button { font-size: 10px; padding-inline: 13px; gap: 10px; min-height: 40px; }
@media (max-width: 900px) { .ai-result-card { grid-template-columns: 1fr 1fr; } .ai-result-body > div { flex-wrap: wrap; } }
@media (max-width: 600px) {
    .ai-intro { padding-top: 10px; }
    .ai-intro h1 { font-size: 34px; letter-spacing: -1.2px; }
    .ai-intro h1 br { display: none; }
    .ai-intro .eyebrow { font-size: 8px; }
    .ai-intro > p:not(.eyebrow) { font-size: 12px; }
    .ai-composer { padding: 20px; }
    .ai-composer-heading > span { font-size: 6px; letter-spacing: .5px; }
    .ai-composer textarea { height: 175px; font-size: 13px; }
    .ai-composer-bottom { flex-direction: column; align-items: flex-start; gap: 17px; }
    .ai-composer-bottom > span { font-size: 9px; }
    .ai-composer-bottom .button { width: 100%; justify-content: space-between; font-size: 11px; }
    .ai-suggestions { gap: 7px; }
    .ai-suggestions > span { font-size: 9px; }
    .ai-example { margin-top: 35px; padding: 21px; }
    .ai-example-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ai-example h2 { font-size: 25px; }
    .ai-example .eyebrow { font-size: 8px; }
    .ai-conversation { padding: 15px; gap: 10px; }
    .ai-conversation p, .ai-answer p { font-size: 11px; }
    .ai-answer { gap: 10px; }
    .ai-answer h3 { font-size: 16px; line-height: 1.5; }
    .ai-match-tags { gap: 9px; }
    .ai-match-tags span { font-size: 9px; }
    .ai-result-card { grid-template-columns: 1fr; }
    .ai-result-card > a > img { min-height: 0; height: 175px; }
    .ai-result-body { padding: 18px; }
    .ai-result-body h3 { font-size: 21px; }
    .ai-result-body > div { gap: 16px; }
}

.ai-composer textarea{color:var(--ink);-webkit-text-fill-color:var(--ink);min-height:115px;height:auto;resize:vertical}
.ai-composer textarea:focus{outline:0}
.ai-composer:focus-within{border-color:var(--accent-ink);box-shadow:0 0 0 2px #1c7c3615}
.ai-suggestions>button{padding:9px 12px;border:1px solid var(--line);border-radius:25px;font:inherit;font-size:10px;color:#586a5f;background:#fff;cursor:pointer}
.ai-suggestions>button:hover{background:var(--soft);border-color:#b7d9c2}
.ai-suggestions>button:first-of-type{background:#edfff3}
.ai-suggestions>button:focus-visible,#ai-reset:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.ai-page [hidden]{display:none!important}
#ai-status,#ai-error{max-width:890px;margin:18px auto 0;font-size:13px;line-height:1.8}
#ai-status:empty{display:none}
#ai-status{color:var(--accent-ink);text-align:center}
#ai-error{padding:15px 18px;color:#9e3830;background:#fff3f0;border:1px solid #edcbc5;border-radius:6px}
.ai-live-results{margin-top:35px}
#ai-reset{padding:10px 13px;border:1px solid var(--line);border-radius:5px;background:white;color:var(--ink);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.ai-turn{scroll-margin-top:110px}
.ai-turn+.ai-turn{margin-top:32px;padding-top:10px;border-top:1px solid var(--line)}
.ai-answer>div{min-width:0}
.ai-answer p,.ai-conversation p{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-answer-icon{font-size:11px;font-weight:600}
.ai-followup-note{margin-top:25px;font-size:11px;line-height:1.8;color:#718078}
.ai-result-body{min-width:0}
.ai-result-body h3{overflow-wrap:anywhere}
.ai-no-script{margin-top:25px;text-align:center;line-height:1.8}
.ai-no-script a{text-decoration:underline}
.ai-page button:disabled{opacity:.6;cursor:wait}
@media(max-width:600px){.ai-composer textarea{min-height:150px}.ai-suggestions>button{font-size:9px}#ai-status,#ai-error{font-size:12px}.ai-result-body strong{font-size:21px}}
