/* ai-demo: scripted after-hours call demo on /ai (section#demo). Every rule is scoped to .aidemo.
   Class prefix is cdemo- (not ad-): ad blockers hide generic .ad-* classes. */
.aidemo{background:var(--primer);border-bottom:1px solid var(--line);--cdemo-h:360px}
@media(min-width:720px){.aidemo{--cdemo-h:470px}}
/* Size the conversation to the screen so phone, controls and steps fit between the header and the call bar */
@supports (height:100svh){
  .aidemo{--cdemo-h:clamp(210px,calc(100svh - 470px),420px)}
  @media(min-width:720px){.aidemo{--cdemo-h:clamp(140px,calc(100svh - 230px),470px)}}
  /* landscape phones: the phone panel alone must fit the visible height */
  @media(max-height:520px){.aidemo{--cdemo-h:clamp(140px,calc(100svh - 230px),420px)}}
}
.aidemo .lede{max-width:68ch}
.aidemo .cdemo-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.aidemo .cdemo-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);margin-top:26px;align-items:start}
.aidemo .cdemo-grid>*{min-width:0}
.aidemo .cdemo-main{max-width:460px;width:100%}
/* one column: keep phone and steps the same width, centred */
@media(min-width:600px) and (max-width:719px){.aidemo .cdemo-main,.aidemo .cdemo-side{max-width:460px;width:100%;margin-inline:auto}}
@media(min-width:720px){.aidemo .cdemo-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px}}
@media(min-width:860px){.aidemo .cdemo-grid{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:52px}}

/* label */
.aidemo .cdemo-note{font-size:.92rem;line-height:1.45;color:var(--ink);background:#fff;border:1px solid var(--line);border-left:4px solid var(--cone-ink);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.aidemo .cdemo-note b{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--cone-ink)}

/* phone */
.aidemo .cdemo-phone{background:var(--iron);border-radius:30px;padding:9px;box-shadow:0 18px 44px rgba(28,58,91,.22)}
.aidemo .cdemo-screen{background:#E9EEF2;border-radius:22px;overflow:hidden}
.aidemo .cdemo-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid var(--line)}
.aidemo .cdemo-av{width:36px;height:36px;border-radius:50%;background:var(--iron);display:grid;place-items:center;flex:none}
.aidemo .cdemo-av svg{width:18px;height:18px;fill:#fff}
.aidemo .cdemo-id{min-width:0;flex:1 1 auto}
.aidemo .cdemo-id b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;line-height:1.1;color:var(--iron)}
.aidemo .cdemo-id small{display:block;font-size:.8rem;line-height:1.3;color:var(--muted)}
.aidemo .cdemo-tag{flex:none;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--cone-ink);padding:3px 8px;border-radius:4px}

/* conversation */
.aidemo .cdemo-log{position:relative;padding:14px 12px 16px;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#9AA6B2 transparent}
.aidemo .cdemo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.aidemo .cdemo-msg{max-width:84%;padding:8px 13px 9px;border-radius:16px;font-size:.95rem;line-height:1.42}
.aidemo .cdemo-a{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px}
.aidemo .cdemo-c{align-self:flex-end;background:var(--iron);color:#fff;border-bottom-right-radius:5px}
.aidemo .cdemo-who{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;line-height:1.3;margin-bottom:1px}
.aidemo .cdemo-a .cdemo-who{color:var(--cone-ink)}
.aidemo .cdemo-c .cdemo-who{color:#C9D6E3}
.aidemo .cdemo-ev{align-self:center;text-align:center;font-size:.8rem;font-weight:600;color:var(--muted);background:#fff;border-radius:999px;padding:3px 12px;margin:2px 0}
.aidemo .cdemo-card{align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px 12px;font-size:.93rem;line-height:1.42}
.aidemo .cdemo-card p{margin:0}
.aidemo .cdemo-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.aidemo .cdemo-card-hd svg{width:18px;height:18px;flex:none;fill:var(--cone-ink)}
.aidemo .cdemo-card-hd b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem;color:var(--iron)}
.aidemo .cdemo-card-hd span{margin-left:auto;font-size:.8rem;color:var(--muted)}
.aidemo .cdemo-sms{border-left:4px solid var(--cone)}
.aidemo .cdemo-sms p+p{margin-top:2px}
.aidemo .cdemo-decide{border-left:4px solid var(--iron)}
.aidemo .cdemo-choices{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.aidemo .cdemo-choices li{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;line-height:1.2;padding:7px 12px;border-radius:999px;border:2px dashed var(--iron);color:var(--iron);background:#fff;cursor:default}
.aidemo .cdemo-fine{margin-top:8px!important;font-size:.8rem;color:var(--muted)}

/* typing indicator and empty state (created by the script) */
.aidemo .cdemo-typing{display:flex;gap:5px;width:max-content;margin-top:8px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.aidemo .cdemo-typing.is-c{margin-left:auto;background:var(--iron);border-color:var(--iron);border-bottom-left-radius:16px;border-bottom-right-radius:5px}
.aidemo .cdemo-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:cdemoDot 1s ease-in-out infinite}
.aidemo .cdemo-typing.is-c span{background:#C9D6E3}
.aidemo .cdemo-typing span:nth-child(2){animation-delay:.15s}.aidemo .cdemo-typing span:nth-child(3){animation-delay:.3s}
.aidemo .cdemo-typing[hidden]{display:none}
.aidemo .cdemo-empty{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:.95rem;color:var(--muted)}
.aidemo .cdemo-empty[hidden]{display:none}
@keyframes cdemoDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes cdemoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* controls */
.aidemo .cdemo-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.aidemo .cdemo-controls[hidden]{display:none}
.aidemo .cdemo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;font-size:1.05rem;line-height:1.2;cursor:pointer}
.aidemo .cdemo-play{min-width:8.2em}
.aidemo .cdemo-lbl{display:inline-block;min-width:3.3em;text-align:left}
.aidemo .cdemo-replay{background:#fff}
.aidemo .cdemo-replay:hover{background:var(--iron);color:#fff}
.aidemo .cdemo-btn svg{width:16px;height:16px;flex:none;fill:currentColor}
.aidemo .cdemo-play .cdemo-i-pause{display:none}
.aidemo .cdemo-play[data-state=playing] .cdemo-i-pause{display:inline}
.aidemo .cdemo-play[data-state=playing] .cdemo-i-play{display:none}

/* Reserved space. Set from first paint when scripting is on (and motion is allowed), so the page
   never jumps, even if the script runs late: the log gets its fixed height and the controls row keeps
   its space (invisible and unfocusable until the script shows it). No-JS and reduced motion get the full transcript. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .aidemo:not(.cdemo-static) .cdemo-log{height:var(--cdemo-h);overflow-y:auto}
  .aidemo:not(.cdemo-static) .cdemo-controls[hidden]{display:flex;visibility:hidden}
}
.aidemo.cdemo-anim .cdemo-log{height:var(--cdemo-h);overflow-y:auto}
.aidemo.cdemo-anim .cdemo-off{display:none}
.aidemo.cdemo-anim .cdemo-in{animation:cdemoIn .28s ease-out both}

/* steps */
.aidemo .cdemo-side h3{font-size:1.3rem;color:var(--iron);margin:0 0 10px}
.aidemo .cdemo-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr 1fr}
.aidemo .cdemo-steps>li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;transition:box-shadow .2s,border-color .2s}
.aidemo .cdemo-n{position:relative;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:1.05rem;line-height:1;color:var(--muted);background:var(--primer);border:2px solid var(--line);transition:background .2s,border-color .2s,color .2s}
.aidemo .cdemo-steps b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1.1rem;line-height:1.15;color:var(--iron);padding-top:4px}
.aidemo .cdemo-d{display:block;font-size:.93rem;line-height:1.4;color:var(--muted);margin-top:3px}
/* phones: one compact row of four, so the step list stays in view while the call plays */
@media(max-width:599px){
  .aidemo .cdemo-side h3{font-size:1.15rem;margin-bottom:8px}
  .aidemo .cdemo-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .aidemo .cdemo-steps>li{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 3px 9px}
  .aidemo .cdemo-n{width:26px;height:26px;font-size:.95rem}
  .aidemo .cdemo-steps b{font-size:.86rem;line-height:1.1;letter-spacing:.02em;padding-top:0}
  .aidemo .cdemo-d{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
@media(min-width:720px){.aidemo .cdemo-steps{grid-template-columns:1fr}}
@media(min-width:860px){.aidemo .cdemo-steps{gap:12px}.aidemo .cdemo-steps>li{gap:12px;padding:12px}}
/* short landscape screens (two columns): the note spans both columns, so the steps (compact 2x2) start level with the phone */
@media(min-width:720px) and (max-height:520px){
  .aidemo .cdemo-main{display:contents}
  .aidemo .cdemo-grid{grid-template-areas:"note note" "phone side" "ctrl side";row-gap:0}
  .aidemo .cdemo-note{grid-area:note}
  .aidemo .cdemo-phone{grid-area:phone}
  .aidemo .cdemo-controls{grid-area:ctrl}
  .aidemo .cdemo-side{grid-area:side}
  .aidemo .cdemo-steps{grid-template-columns:1fr 1fr;gap:8px}
  .aidemo .cdemo-steps>li{padding:9px;gap:8px;align-items:center}
  .aidemo .cdemo-steps b{font-size:1rem;padding-top:0}
  .aidemo .cdemo-d{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}
.aidemo .cdemo-steps>li.is-on{border-color:var(--cone-ink);box-shadow:inset 0 0 0 1px var(--cone-ink),0 6px 18px rgba(184,72,10,.14)}
.aidemo .cdemo-steps>li.is-on .cdemo-n{background:var(--cone-ink);border-color:var(--cone-ink);color:#fff}
.aidemo .cdemo-steps>li.is-done .cdemo-n{background:var(--iron);border-color:var(--iron);color:transparent}
.aidemo .cdemo-steps>li.is-done .cdemo-n::after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--body);font-weight:800;font-size:.95rem}
.aidemo .cdemo-wont{margin:18px 0 0;font-size:.95rem;max-width:52ch}
.aidemo .cdemo-wont strong{font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;color:var(--iron)}
.aidemo .cdemo-more{margin:12px 0 0}
.aidemo .cdemo-more a{font-weight:600;text-decoration:none;display:inline-block;padding:10px 0}
.aidemo .cdemo-more a:hover{text-decoration:underline}

/* focus */
.aidemo .cdemo-btn:focus-visible,.aidemo a:focus-visible{outline:3px solid var(--iron);outline-offset:3px}
.aidemo .cdemo-log:focus-visible{outline:3px solid var(--cone-ink);outline-offset:-3px}

@media (prefers-reduced-motion:reduce){
  .aidemo *,.aidemo *::before,.aidemo *::after{animation:none!important;transition:none!important}
}