/* page: demo family (WEB-15 S4); loaded by demo.html, talk.html, try.html and d.html only. The call stage is shared by talk.html and d.html. */
.stage-hero{padding-top:var(--s4)}
.stage-panel{padding:var(--s8) var(--s5)}
.stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);align-items:center}
.stage-panel .overline{color:var(--night-text-2)}
/* DEMO-3 S9: the demo row on a dark panel is glass; the boxes drawn here take the squircle (U40). */
@supports (corner-shape:squircle){.stage-flat,.stage-call,.demo-call,.info-sheet,.pin-boxes span,.talk-problem{corner-shape:squircle}}
.night .demo-line{border-color:rgb(255 255 255 / .12);background:rgb(255 255 255 / .08)}
.stage-panel .glow-teal,.claim-panel .glow-teal{right:0;width:60%}
.stage-copy .page-title{margin-top:var(--s3);overflow-wrap:anywhere}
.stage-copy .lede{margin-top:var(--s4);color:var(--night-text-2);overflow-wrap:anywhere}
.stage-card{display:grid;min-width:0;justify-items:center;gap:var(--s3);padding:var(--s6) var(--s5);text-align:center;border-color:rgb(255 255 255 / .12);background:rgb(255 255 255 / .08);backdrop-filter:blur(12px)}
.stage-card [data-panel]:not([hidden]){display:grid;justify-items:center;gap:var(--s3);width:100%}
.stage-card .actions{display:grid;width:100%;justify-items:stretch;gap:var(--s2)}
.stage-card .actions :is(.button,.text-link){width:100%;justify-content:center}
.stage-card .button-text{color:inherit}
.stage-orb{position:relative;display:grid;place-items:center;margin-bottom:var(--s2)}
.orb-ring{position:absolute;inset:-8px;border:2px solid var(--glow-core);border-radius:50%;opacity:0;transition:opacity 150ms}
.stage-card[data-phase=asking] .orb-ring,.stage-card[data-phase=live] .orb-ring{opacity:.6}
.stage-card[data-phase=live] .orb-ring{border-color:var(--glow-teal)}
.stage-card[data-phase=problem] .stage-orb{opacity:.6}
.orb-pup{width:60%;aspect-ratio:1;background:url(pup-white.svg) center/contain no-repeat}
.stage-title{font:var(--type-title);color:var(--night-text)}
.stage-sub{margin-top:calc(-1 * var(--s2));font:var(--type-callout)}
.stage-card .talk-note{font:var(--type-callout)}
.talk-widget:empty{display:none}
.talk-status{font:var(--type-callout)}
.talk-status:empty{display:none}
.talk-problem{padding:var(--s3) var(--s4);border-radius:var(--r-md);background:rgb(255 255 255 / .1);color:var(--night-text)}
.stage-ask{width:100%;padding-top:var(--s4);border-top:1px solid rgb(255 255 255 / .12)}
.stage-ask .chips{justify-content:center;margin-top:var(--s3)}
.stage-card .chip{border-color:rgb(255 255 255 / .18);background:rgb(255 255 255 / .08);color:var(--night-text)}
.stage-controls{display:flex;justify-content:center;gap:var(--s8)}
.stage-ctl{display:grid;justify-items:center;gap:var(--s2);min-width:64px;min-height:44px;padding:0;border:0;background:none;color:var(--night-text);font:var(--type-caption);cursor:pointer}
.stage-disc{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgb(255 255 255 / .14);transition:background-color 200ms}
.stage-disc .icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage-disc .icon-fill,.stage-dock-btn .icon-fill{fill:currentColor;stroke:none}
.stage-disc .icon-slash,.stage-dock-btn .icon-slash{display:none}
[aria-pressed=true] .icon-slash{display:block}
[aria-pressed=true]>.stage-disc{background:#fff;color:var(--night-bg)}
.stage-ctl-end .stage-disc{width:64px;height:64px;background:#C93B33;color:#fff}
.stage-card[data-phase=connecting] .stage-ctl-mute,.stage-card[data-phase=connecting] :is(.talk-live,.talk-timer,.stage-ask){display:none}
.stage-card[data-phase=connecting] .stage-ctl-end .stage-disc{display:none}
.stage-card[data-phase=connecting] .stage-ctl-end .stage-label{display:grid;place-items:center;min-height:48px;padding:0 var(--s6);border:1px solid rgb(255 255 255 / .32);border-radius:var(--r-full);font:var(--type-callout)}
.stage-dock{position:fixed;left:50%;bottom:calc(var(--s4) + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s2) var(--s2) var(--s5);border:1px solid rgb(255 255 255 / .12);border-radius:var(--r-full);background:color-mix(in srgb,var(--night-bg) 92%,transparent);backdrop-filter:blur(20px);color:var(--night-text);font:var(--type-callout);transform:translateX(-50%)}
.stage-dock-info{display:flex;align-items:center;gap:var(--s2);max-width:46vw;color:var(--night-text);white-space:nowrap}
.stage-dock-info [data-dock-name]{overflow:hidden;text-overflow:ellipsis}
.stage-dock-info [data-dock-time]::after{content:" ·"}
.stage-dock-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(255 255 255 / .14);color:var(--night-text);cursor:pointer}
.stage-dock-btn .icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage-dock-btn[aria-pressed=true]{background:#fff;color:var(--night-bg)}
.stage-dock-end{background:#C93B33;color:#fff}
.talk-live{display:flex;align-items:center;gap:var(--s2);font:var(--type-title);color:var(--night-text)}
.talk-dot{width:10px;height:10px;border-radius:50%;background:#7fe0b4}
.talk-timer{font:var(--type-metric);color:var(--night-text);font-variant-numeric:tabular-nums}
.talk-timer:empty{display:none}
.talk-ended{font:var(--type-title);color:var(--night-text)}
.stage-call{display:grid;gap:var(--s1);width:100%;padding:var(--s4);border-radius:var(--r-lg);background:rgb(255 255 255 / .08);text-align:left;overflow-wrap:anywhere}
.stage-call .demo-call-meta{display:flex;align-items:center;gap:var(--s2)}
.knows-grid{display:grid;gap:var(--s4)}
.demo-hint{margin-top:var(--s4);color:var(--text-secondary);font:var(--type-callout)}
.demo-facts{display:grid;gap:var(--s4);margin-top:var(--s5)}
.demo-facts dt{color:var(--text-secondary);font:var(--type-overline);letter-spacing:var(--tracking-overline);text-transform:uppercase}
.demo-facts dd{margin:var(--s2) 0 0}
.demo-facts ul{display:flex;flex-wrap:wrap;gap:var(--s2)}
.demo-facts li{padding:6px var(--s3);border-radius:var(--r-full);background:var(--bg-subtle);font:var(--type-callout);overflow-wrap:anywhere}
.demo-calls{display:grid;gap:var(--s3);margin-top:var(--s4)}
.demo-call{padding:var(--s4);border-radius:var(--r-lg);background:var(--bg-subtle);overflow-wrap:anywhere}
.demo-call-meta{margin-top:var(--s1);color:var(--text-secondary);font:var(--type-caption)}
.claim-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);padding:var(--s10) var(--s5)}
:is(.stage-card,.claim-panel) .button{white-space:normal;text-align:center}
.claim-panel .lede{margin-top:var(--s3)}
.claim-panel .actions{margin-top:var(--s6)}
.claim-steps{display:grid;gap:var(--s5);align-content:center;counter-reset:claim}
.claim-steps li{position:relative;display:grid;gap:2px;padding-left:44px;counter-increment:claim}
.claim-steps li::before{content:counter(claim);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgb(255 255 255 / .14);color:var(--night-text);font:var(--type-caption);font-weight:600}
.claim-steps strong{font:var(--type-body-strong)}
.try-panel{display:grid;justify-items:center;gap:var(--s4);padding:var(--s12) var(--s5);text-align:center}
.try-panel .lede{margin-inline:auto;color:var(--night-text-2)}
.try-panel .actions{justify-content:center;margin-top:var(--s2)}
[data-missing] .actions{margin-top:var(--s6)}
/* DEMO-3 S6: the prospect page (d.html). Its state is main[data-state]; an empty chip, fact or card is hidden here (:has). */
[data-found],[data-ended],[data-missing]{display:none}
[data-state=found] [data-found],[data-state=ended] [data-ended],[data-state=missing] [data-missing]{display:block}
[data-state=ended] [data-hero],[data-state=missing] [data-hero]{display:none}
main:not([data-state=found],[data-state=pin]) [data-hero]{visibility:hidden}
.site-header-focus .header-inner{min-height:52px}
.site-footer-slim{padding:var(--s4) 0}
.footer-slim-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s6)}
.footer-slim-inner .footer-legal{margin:0}
.footer-slim-links{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.footer-slim-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-secondary);font:var(--type-callout);text-decoration:none}
.indigo{background:var(--indigo-bg)}
.indigo.stage-panel{padding:var(--s6) var(--s5)}
.indigo :is(p,li,small),.indigo .overline,.indigo .lede{color:var(--indigo-text-2)}
.indigo .glow-deep{left:-25%;bottom:-18%;width:80%;background:var(--indigo-deep);opacity:.9}
.indigo .glow-core{top:-20%;left:-10%;right:auto;width:70%;opacity:var(--indigo-core-opacity)}
.indigo .glow-teal{right:-20%;bottom:-18%;width:80%;opacity:var(--indigo-teal-opacity)}
.indigo .stage-grid{gap:var(--s5)}
.indigo .page-title{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.25rem)}
@media (max-width:300px){.indigo .page-title{font-size:1.4rem}}
.indigo .lede{margin-top:var(--s3);font:var(--type-body)}
.fact-chips{margin-top:var(--s4)}
.indigo .fact-chip,.indigo .pin-badge{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--s3);border-radius:var(--r-full);background:rgb(255 255 255 / .1);color:var(--night-text);font:var(--type-callout)}
.fact-chip:has(span:empty){display:none}
.stage-flat{padding:0;border:0;background:none;backdrop-filter:none}
.stage-flat .orb{--orb-size:96px}
.stage-start{min-height:56px}
.stage-start:disabled{opacity:.6;cursor:default}
.stage-start .icon{width:24px;height:24px}
.stage-foot{display:flex;align-items:flex-start;gap:var(--s2);width:100%;text-align:left}
.stage-foot[hidden]{display:none}
.stage-caption{flex:1;min-width:0;overflow-wrap:anywhere;font:var(--type-caption)}
.info-button{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--night-text);cursor:pointer}
.info-button .icon{width:20px;height:20px}
.info-sheet{width:min(92vw,28rem);padding:var(--s6);border:1px solid var(--border-subtle);border-radius:var(--r-xl);background:var(--bg-surface);color:var(--text-primary);text-align:left;box-shadow:var(--e3)}
.info-sheet::backdrop{background:var(--scrim)}
.info-sheet p{margin-top:var(--s3);color:var(--text-secondary)}
.info-sheet a:not(.button){color:var(--accent-text)}
.info-sheet .info-title{color:var(--text-primary);font:var(--type-title)}
.info-sheet .actions{margin-top:var(--s5)}
[data-fact]:not(:has([data-list]>*)),[data-knows]:not(:has([data-list]>*)),[data-past]:not(:has(.demo-call)){display:none}
.demo-hours{width:100%;border-collapse:collapse;font:var(--type-callout);font-variant-numeric:tabular-nums}
.demo-hours th,.demo-hours td{padding:var(--s1) 0;font-weight:400}
.demo-hours th{padding-right:var(--s4);color:var(--text-secondary);text-align:left}
.demo-hours td{text-align:right}
.demo-facts .demo-area li{display:inline;padding:0;border-radius:0;background:none}
.demo-area li+li::before{content:" · "}
.state-card{display:grid;justify-items:center;gap:var(--s4);padding:var(--s10) var(--s5);text-align:center}
.state-title{font:var(--type-title);text-wrap:balance}
.state-card .actions{justify-content:center}
/* DEMO-3 S9 (U126): phone actions stack, full width. */
@media (max-width:767px){:is(.state-card,.claim-panel) .actions{display:grid;width:100%;justify-content:stretch}:is(.state-card,.claim-panel) .actions .button{width:100%}}
/* DEMO-3 S11: the PIN screen and the private badge. */
[data-state=pin] .stage-grid,.pin-badge[hidden]{display:none}
.pin-panel:not([hidden]){display:grid;justify-items:center;gap:var(--s4);text-align:center}
.pin-label{color:var(--night-text);font:var(--type-callout)}
.pin-form{display:grid;justify-items:center;gap:var(--s3);width:100%;max-width:26rem}
.pin-field{position:relative;width:100%}
.pin-boxes{display:grid;grid-template-columns:repeat(4,minmax(0,56px));gap:min(12px,3.2vw);justify-content:center}
.pin-boxes span{display:grid;place-items:center;box-sizing:border-box;height:64px;border:1.5px solid rgb(255 255 255 / .55);border-radius:var(--r-md);background:rgb(255 255 255 / .1);color:var(--night-text);font:700 2rem/1 var(--font-family);font-style:normal;font-variant-numeric:tabular-nums}
.pin-field:focus-within :is(span:empty:first-child,span:not(:empty)+span:empty){border:2px solid #fff}
.pin-field:has(input:is([aria-busy=true],:disabled)) .pin-boxes span{opacity:.5}
.pin-input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;outline:0;background:none;color:transparent;caret-color:transparent;font-size:16px}
.indigo .pin-alert{display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-height:1.45em;color:var(--night-text);font:var(--type-callout);white-space:pre-line}
.pin-alert span{text-wrap:balance}
.pin-alert:has(span:empty) svg{display:none}
@media (prefers-reduced-motion:no-preference){
 .pin-boxes.shake{animation:pin-shake 240ms}
}
@keyframes pin-shake{
 10%,50%,90%{transform:translateX(-6px)}
 30%,70%{transform:translateX(6px)}
}
@media (min-width:768px){
 .stage-hero{padding-top:var(--s6)}
 .stage-panel,.claim-panel{padding:var(--s12) var(--s10)}
 .knows-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:start}
}
@media (min-width:1024px){
 .stage-dock{display:none}
 .stage-grid{grid-template-columns:minmax(0,1fr) 420px;gap:var(--s12)}
 .indigo .stage-grid{gap:var(--s12)}
 .indigo.stage-panel{padding:var(--s12) var(--s10)}
 .indigo .page-title{font-size:clamp(2.5rem,1.9rem + 2vw,4rem)}
 .indigo .lede{font:var(--type-lede)}
 .stage-flat{padding:var(--s6) var(--s5);border:1px solid rgb(255 255 255 / .12);border-radius:var(--r-xl);background:rgb(255 255 255 / .08);backdrop-filter:blur(12px)}
 .stage-flat .orb{--orb-size:160px}
 .claim-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12);align-items:center}
}
@media (prefers-reduced-motion:no-preference){
 [data-state=found] .stage-copy{animation:rise 320ms cubic-bezier(.2,.8,.2,1) both}
 [data-state=found] .stage-flat{animation:rise 320ms 120ms cubic-bezier(.2,.8,.2,1) both}
 .talk-dot{animation:talk-pulse 1.6s ease-in-out infinite}
 .stage-card[data-phase=connecting] .orb{animation:orb-wait 1.2s ease-in-out infinite}
 .stage-dock:not([hidden]){animation:dock-in 220ms cubic-bezier(.2,.8,.2,1)}
 .stage-call:not([hidden]){animation:call-in 240ms cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
 .stage-dock:not([hidden]){animation:dock-fade 220ms}
 .stage-card[data-state=speaking] .orb-ring{border-color:#8c96ff}
 .stage-card[data-state=listening] .orb-ring{border-color:var(--glow-teal)}
}
@keyframes rise{
 from{opacity:0;transform:translateY(8px)}
}
@keyframes talk-pulse{
 50%{opacity:.35}
}
@keyframes orb-wait{
 50%{opacity:.8}
}
@keyframes dock-in{
 from{opacity:0;transform:translate(-50%,16px)}
}
@keyframes call-in{from{opacity:0;transform:translateY(12px)}}
@keyframes dock-fade{
 from{opacity:0}
}