/* Batch 4: a larger portrait with the conversation controls alongside it. */
.demo-feature{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);grid-template-areas:"person intro" "person card";gap:27px 8%;align-items:start;padding-top:75px;padding-bottom:85px}
.demo-feature::before{inset:5% 35% 8% -10%;background:radial-gradient(ellipse at 50% 48%,#164c5d26,transparent 65%)}
.demo-feature .demo-intro{grid-area:intro}.demo-feature .demo-intro .eyebrow{font-size:11px;margin-bottom:20px}.demo-feature h2{font-size:clamp(33px,3.5vw,48px);font-weight:450;letter-spacing:-1.6px;line-height:1.18}.demo-feature h2 span{color:#86cfe3}.demo-feature .demo-intro>p:not(.eyebrow){max-width:440px;font-size:15px;line-height:1.85;margin-top:20px}
.demo-feature .demo-person{grid-area:person;position:relative;isolation:isolate;align-self:center;display:flex;align-items:center;flex-direction:column;gap:0;margin:0;min-width:0;padding-top:4px}
.claudia-portrait-light{position:absolute;inset:3% -5% 15%;border-radius:50%;background:radial-gradient(ellipse at 30% 38%,#3493b924,transparent 56%),radial-gradient(ellipse at 73% 55%,#9c376216,transparent 55%);z-index:-1;pointer-events:none;mask-image:radial-gradient(ellipse,#000 12%,transparent 71%)}
.demo-feature .claudia-stage{width:min(100%,530px);mask-image:linear-gradient(#000 80%,transparent 99%)}
.demo-feature .claudia-stage img,.demo-feature .claudia-canvas{filter:none}
.demo-feature .claudia-caption{display:flex;flex-direction:column;gap:4px;position:relative;text-align:center;margin-top:-13px;align-items:center}
.demo-feature .claudia-caption::before{display:none}.demo-feature .claudia-caption strong{font-size:20px;font-weight:500;letter-spacing:-.45px}.demo-feature .claudia-caption span{font-size:12px;color:#aebed1;line-height:1.7;margin:0}.demo-feature .portrait-motion{font-size:11px;min-height:40px;margin-top:9px;color:#acbdd0}
.demo-feature .demo-card{grid-area:card;align-self:start;padding:25px 28px 26px;background:linear-gradient(130deg,#122131df,#0d1623ed);border-color:#9ccde12e;box-shadow:0 18px 60px #0000001c}
.demo-feature .demo-topline{padding-bottom:15px;border-bottom:1px solid #d4e6f318;font-size:11px;line-height:1.7;color:#bdcbdc}.demo-feature .live-label{color:#e3eef5}
.demo-personalize{margin:9px 0 15px}.demo-personalize summary{display:flex;justify-content:space-between;align-items:center;gap:15px;list-style:none;cursor:pointer;min-height:44px;padding:10px 0;font-size:12px;line-height:1.65;color:#c6d4e4}.demo-personalize summary::-webkit-details-marker{display:none}.demo-personalize summary>span:last-child{font-size:19px;color:#90cadd}.demo-personalize[open] summary>span:last-child{transform:rotate(45deg)}.demo-name-fields{padding:6px 0 16px}.demo-feature #demo-name{min-height:44px;padding:10px 12px}.demo-feature #demo-form label{font-size:12px;margin-bottom:8px}.demo-feature #demo-name-hint{margin-top:7px;font-size:11px}
.demo-feature .demo-start{min-height:56px;font-size:14px;font-weight:550;box-shadow:0 5px 24px #e90b7a20}.demo-feature .demo-explainer{font-size:12px;line-height:1.8;color:#b9c9d9;margin:13px 0 0}
.demo-question{border-left:2px solid #63b7d166;padding-left:15px;margin-top:22px}.demo-question-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#93bacc;margin-bottom:7px}.demo-feature .demo-prompt{font-size:13px;line-height:1.8;color:#d1ddeb;max-width:400px}.demo-feature .demo-privacy{font-size:10px;line-height:1.85;padding-top:20px;color:#aabbd0}.demo-feature .demo-followup{font-size:12px;line-height:1.7;margin-top:14px;min-height:34px;display:inline-flex;align-items:center;gap:15px}
.demo-feature .demo-session{padding:22px 0 7px}.demo-feature .demo-controls{flex-wrap:wrap;gap:10px}.demo-feature .demo-controls .button{min-height:44px;flex:1;padding:8px 13px;max-width:210px;line-height:1.5}.demo-feature #demo-end{border:1px solid #d9e3ec66;background:transparent;color:#f0f5fc}.demo-feature #demo-end:hover{background:#ffffff0e}.demo-feature #demo-timer{font-size:15px;margin-top:10px}.demo-feature #demo-feedback{font-size:13px}
@media(min-width:1400px){.demo-feature{gap:30px 8%;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.demo-feature .demo-card,.demo-feature .demo-intro{max-width:535px}.demo-feature .claudia-stage{width:530px}}
@media(min-width:761px) and (max-width:1000px){.demo-feature{gap:23px 5%;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.demo-feature .demo-card{padding:22px}.demo-feature .demo-intro>p:not(.eyebrow){font-size:14px}.demo-feature h2{font-size:34px}.demo-feature .claudia-stage{width:100%}}
@media(max-width:760px){.demo-feature{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "person" "card";gap:19px;padding-top:44px;padding-bottom:55px}.demo-feature .demo-intro .eyebrow{font-size:10px;margin-bottom:16px}.demo-feature h2{font-size:34px;line-height:1.17;letter-spacing:-1.4px}.demo-feature .demo-intro>p:not(.eyebrow){font-size:14px;line-height:1.85;margin-top:17px;max-width:440px}.demo-feature .demo-person{margin:0;min-height:0;padding-top:0}.demo-feature .claudia-stage{width:min(78vw,285px)}.claudia-portrait-light{inset:0 0 12%}.demo-feature .claudia-caption{margin-top:-16px;gap:2px}.demo-feature .claudia-caption strong{font-size:17px}.demo-feature .claudia-caption span{font-size:11px}.demo-feature .portrait-motion{display:none!important}.demo-feature .demo-card{padding:21px 22px 22px;width:100%}.demo-feature .demo-topline{font-size:10px;gap:12px;padding-bottom:12px}.demo-personalize{margin:5px 0 12px}.demo-feature .demo-start{min-height:54px;font-size:14px}.demo-feature .demo-explainer{font-size:12px}.demo-question{margin-top:19px;padding-left:13px}.demo-feature .demo-prompt{font-size:12px}.demo-feature .demo-privacy{font-size:10px;padding-top:17px}.demo-feature .demo-followup{font-size:12px}.demo-feature .demo-controls .button{font-size:12px}}
@media(max-width:380px){.demo-feature h2{font-size:30px}.demo-feature .claudia-stage{width:245px}.demo-feature .demo-intro>p:not(.eyebrow){font-size:13px}.demo-feature .demo-card{padding:19px 18px}.demo-personalize summary{font-size:11px}.demo-feature .demo-controls .button{flex-basis:100%;max-width:none}}
@media(prefers-reduced-motion:reduce){.demo-feature .claudia-canvas{transition:none}}

@media(max-width:760px){.demo-feature{row-gap:15px}.demo-feature .claudia-caption{flex-direction:row;gap:8px;flex-wrap:wrap;justify-content:center}.demo-feature .claudia-caption span::before{content:'·';margin-right:8px;color:#788da5}}
@media(max-width:380px){.demo-feature .claudia-caption{flex-direction:column;gap:2px}.demo-feature .claudia-caption span::before{display:none}}
/* V7: blend the photographic surroundings into the site's star field. */
.demo-feature .claudia-stage{mask-image:linear-gradient(transparent 0%,#000 1.5%,#000 80%,transparent 99%)}
.demo-feature .claudia-stage img,.demo-feature .claudia-canvas{mask-image:url('/assets/claudia-v7/silhouette.svg');mask-size:100% 100%;mask-repeat:no-repeat}