.public-site .ai-story{position:relative;isolation:isolate;overflow:hidden;padding-block:88px;background:var(--bg);--muted:#d5e3dc}
.public-site .ai-story-backdrop{position:absolute;inset:0;z-index:0;margin:0;pointer-events:none}
.public-site .ai-story-backdrop picture,.public-site .ai-story-backdrop img{display:block;width:100%;height:100%}
.public-site .ai-story-backdrop img{object-fit:cover;object-position:center}
.public-site .ai-story-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,24,18,.74) 50%,rgba(12,24,18,.44) 75%)}
:root[data-theme=light] .public-site .ai-story{--muted:#465349}
:root[data-theme=light] .public-site .ai-story-backdrop:after{background:linear-gradient(90deg,rgba(255,255,255,.80) 50%,rgba(255,255,255,.46) 75%)}
.public-site .ai-story-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px}
.public-site .ai-story-copy h2{margin:0 0 24px}
.public-site .ai-story-copy>p{max-width:51ch;margin:0 0 20px;font-size:16px;line-height:1.75;color:var(--muted)}
.public-site .ai-story-copy>p strong{color:var(--text);font-weight:650}
.public-site .ai-story-principles{display:grid;gap:22px;margin:30px 0}
.public-site .ai-story-principles div{display:grid;grid-template-columns:28px 1fr;gap:12px}
.public-site .ai-story-principles svg{width:24px;height:24px;fill:none;stroke:var(--accent-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.public-site .ai-story-principles p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.public-site .ai-story-principles strong{display:block;margin-bottom:3px;color:var(--text);font-size:16px;font-weight:650}
.public-site .ai-story-link{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:14px 20px;min-height:48px;background:var(--accent);color:var(--accent-ink);border-radius:10px;text-decoration:none;font-size:14px;font-weight:700}
.public-site .ai-story-link:hover{background:var(--accent-hover)}
.public-site .ai-story-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.public-site .ai-conversation{background:var(--raised);padding:32px;border-radius:16px;box-shadow:var(--shadow);min-width:0}
.public-site .ai-conversation-heading{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:24px}
.public-site .ai-conversation-heading img{display:block;width:54px;height:54px;border-radius:50%;object-fit:cover}
.public-site .ai-conversation-heading strong{display:block;color:var(--text);font-size:19px;font-weight:700}
.public-site .ai-conversation-heading span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.public-site .ai-role-tabs{display:flex;gap:6px;padding:5px;background:var(--bg);border-radius:10px;margin-bottom:26px}
.public-site .ai-role-tabs[hidden]{display:none}
.public-site .ai-role-tabs button{flex:1;min-width:0;min-height:44px;padding:10px 8px;border:0;border-radius:7px;font:650 14px/1.4 Manrope,'Segoe UI',sans-serif;background:transparent;color:var(--muted);cursor:pointer}
.public-site .ai-role-tabs button:hover{color:var(--text);background:var(--soft)}
.public-site .ai-role-tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.public-site .ai-conversation-panel{min-height:322px}
.public-site .ai-conversation-panel[hidden]{display:none}
.public-site .has-ai-tabs .ai-panel-stack{display:grid}
.public-site .has-ai-tabs .ai-conversation-panel{grid-area:1/1;min-width:0}
.public-site .has-ai-tabs .ai-conversation-panel[hidden]{display:block;visibility:hidden;pointer-events:none}
.public-site .ai-example-question{margin:0 0 20px 36px;padding:18px 20px;background:var(--accent-soft);color:var(--text);font-size:16px;line-height:1.6;border-radius:14px 14px 3px 14px}
.public-site .ai-example-answer{margin:0 0 24px;color:var(--text);font-size:17px;line-height:1.7}
.public-site .ai-example-answer strong{font-weight:650}
.public-site .ai-example-next{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;color:var(--accent-text);margin:0;padding:16px 0 0}
.public-site .ai-example-next svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.public-site .ai-story :is(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.public-site .ai-composing{position:absolute;left:0;bottom:-21px;display:flex;align-items:center;gap:5px;height:18px;margin:0}
.public-site .ai-composing[hidden]{display:none}
.public-site .ai-composing i{width:6px;height:6px;border-radius:50%;background:var(--accent-text);animation:ai-compose 650ms ease-in-out 2}
.public-site .ai-composing i:nth-child(2){animation-delay:90ms}
.public-site .ai-composing i:nth-child(3){animation-delay:180ms}
.public-site .ai-conversation-panel.is-changing .ai-example-answer,.public-site .ai-conversation-panel.is-changing .ai-example-next{animation:ai-reply 650ms cubic-bezier(.16,1,.3,1) both}
@keyframes ai-compose{50%{transform:translateY(-4px);opacity:.45}}
@keyframes ai-reply{from{transform:translateY(8px);opacity:.35}to{transform:translateY(0);opacity:1}}
@media(max-width:1050px){.public-site .ai-story-layout{gap:36px}.public-site .ai-conversation{padding:26px}.public-site .ai-conversation-panel{min-height:370px}}
@media(max-width:760px){.public-site .ai-story{padding-block:64px}.public-site .ai-story-backdrop picture{position:relative;height:auto}.public-site .ai-story-backdrop picture:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,var(--bg))}.public-site .ai-story-backdrop img{height:auto;aspect-ratio:2/3;object-fit:contain;object-position:center top}.public-site .ai-story-layout{grid-template-columns:1fr;gap:36px}.public-site .ai-story-copy h2{max-width:16ch}.public-site .ai-conversation{padding:24px}.public-site .ai-conversation-panel{min-height:330px}.public-site .ai-example-question{margin-left:20px}.public-site .ai-story-principles{margin-block:24px}}
@media(max-width:760px){.public-site .ai-story-backdrop:after{background:linear-gradient(90deg,rgba(12,24,18,.74),rgba(12,24,18,.74))}:root[data-theme=light] .public-site .ai-story-backdrop:after{background:linear-gradient(90deg,rgba(255,255,255,.80),rgba(255,255,255,.80))}}
@media(max-width:359px){.public-site .ai-conversation{padding:20px}.public-site .ai-conversation-panel{min-height:415px}.public-site .ai-example-question{margin-left:0;padding:16px}.public-site .ai-role-tabs button{padding-inline:4px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.public-site .ai-story *{animation:none!important;transition:none!important}}