/* An original little privacy story, drawn as vector shapes for crisp rendering. */
.ai-section{grid-template-columns:.95fr 1.15fr;gap:48px;align-items:center}
.privacy-theatre{min-width:0;border-radius:20px;background:#f6f1eb;color:#40393b;padding:23px 23px 18px;isolation:isolate;box-shadow:0 18px 45px #111b1526}
.theatre-topline{display:flex;justify-content:space-between;align-items:center;gap:10px}
.theatre-kicker{font-size:9px;letter-spacing:1.4px;font-weight:800;color:#817471}
.theatre-status{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;white-space:nowrap;padding:5px 9px;border:1px solid #dcd0c5;border-radius:20px;background:#efe4da}
.theatre-status i{width:5px;height:5px;border-radius:100%;background:#b76850}
.privacy-scene{display:block;width:calc(100% + 24px);height:auto;margin:2px -12px 0;overflow:visible}
.scene-small-label{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:1.5px;fill:#877b72}
.agent-speech text{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.5px;fill:#645351}
.speech-curious,.speech-surprised{opacity:0}.polite-heart{opacity:1}.boundary-ripple{opacity:0}
.theatre-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #e2d7cd;padding-top:19px}
.theatre-caption strong{display:block;font-weight:800;font-size:18px;letter-spacing:-.6px;line-height:1.3;margin-bottom:8px}
.theatre-caption span{font-size:11px;line-height:1.7;color:#7b7069;display:block}
.replay-privacy{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 12px;border:1px solid #d8c8bc;border-radius:50%;background:transparent;cursor:pointer;color:#7d5950;width:59px;height:59px;transition:background .2s,transform .2s}
.replay-privacy[hidden]{display:none}.replay-privacy:hover{background:#ece0d5;transform:rotate(-5deg)}
.replay-privacy svg{width:18px;height:18px}.replay-privacy span{font-size:9px;color:inherit;font-weight:700;line-height:1}
.replay-privacy:disabled{cursor:default;opacity:.55}.replay-privacy:focus-visible{outline-color:#a56651}
.theatre-footnote{font-size:9px;color:#8c7c73;margin:17px 0 14px;line-height:1.6}
.privacy-theatre .settings-evidence{color:#79564e;border-color:#dfd2c7;padding-top:13px;font-size:11px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The tiny nav accent repeats the plush bot's round silhouette and ivory eyes. */
.hero-bot{display:inline-block;width:26px;height:27px;border-radius:48% 48% 43% 43%;background:radial-gradient(circle at 32% 23%,#69626c,#2c2830 65%);position:relative;vertical-align:middle;flex-shrink:0}
.hero-bot:before{content:'';position:absolute;top:-5px;left:12px;width:2px;height:5px;background:#80767f}.hero-bot:after{content:'';position:absolute;top:-7px;left:10px;width:6px;height:5px;background:#ac5135;border-radius:50%}
.hero-bot b:before,.hero-bot b:after{content:'';position:absolute;top:10px;width:4px;height:7px;border-radius:3px;background:#fff9e9;transform:rotate(9deg)}.hero-bot b:before{left:7px}.hero-bot b:after{right:6px}
/* Shared character rig: real plush texture, vector eyes, separately articulated hand. */
.mascot-gaze{transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.mascot-eyes{transform-origin:134px 150px;filter:drop-shadow(0 1px 2px #fff1b81f)}
.mascot-eye-left{transform-origin:110.5px 150.5px;transform:rotate(9deg)}.mascot-eye-right{transform-origin:156.5px 146.5px;transform:rotate(9deg)}
.mascot-arm{transform-origin:199px 183px;transform:rotate(12deg)}
.mascot-puppet{transform-origin:128px 245px}
.hero-sentry{position:absolute;left:-140px;bottom:-28px;width:235px;border:0;padding:0;background:none;cursor:pointer;z-index:2;isolation:isolate;-webkit-tap-highlight-color:transparent}
.hero-sentry[hidden]{display:none}.hero-sentry svg{display:block;width:100%;height:auto;overflow:visible}.hero-sentry:focus-visible{outline:2px solid #ac3926;outline-offset:5px;border-radius:42%}.hero-sentry:disabled{cursor:default}.hero-sentry .mascot-puppet{transform:rotate(-7deg)}
.hero-mascot-bubble text{fill:#665554;font-family:inherit;font-size:19px;font-weight:700;letter-spacing:-.4px}
.hero-tap-ring{opacity:0;transform-origin:294px 184px}
/* The same 18-second timeline keeps gestures coordinated and the seam continuous. */
[data-mascot-scene]{--mascot-play-state:paused}
[data-mascot-scene][data-running="true"]{--mascot-play-state:running}
.mascot-loop :is(.mascot-puppet,.mascot-arm,.mascot-eyes,.mascot-eye-left,.mascot-eye-right,.mascot-resting-hand,.speech-curious,.speech-polite,.speech-surprised,.bot-shadow,.boundary-ripple,.lock-medallion,.polite-heart,.hero-tap-ring,.hero-hand-lock){animation-duration:18s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.25,1);animation-fill-mode:both;animation-play-state:var(--mascot-play-state)}
.mascot-loop .mascot-puppet{animation-name:plush-living-loop}
.hero-sentry.mascot-loop .mascot-puppet{animation-name:hero-living-loop}
.mascot-loop .mascot-arm{animation-name:plush-hand-loop}
.mascot-loop .mascot-resting-hand{animation-name:plush-wave;transform-origin:39px 204px}
.mascot-loop .mascot-eyes{animation-name:soft-blink;animation-duration:5.4s;animation-timing-function:cubic-bezier(.4,0,.6,1)}
.mascot-loop .mascot-eye-left{animation-name:curious-eye-left}
.mascot-loop .mascot-eye-right{animation-name:curious-eye-right}
.mascot-loop .speech-curious{animation-name:curious-speech}
.mascot-loop .speech-polite{animation-name:polite-speech}
.mascot-loop .speech-surprised{animation-name:surprised-speech}
.mascot-loop .bot-shadow{animation-name:plush-shadow;transform-origin:153px 382px}
.mascot-loop .boundary-ripple{animation-name:gentle-knock}
.mascot-loop .lock-medallion{animation-name:lock-reassure;transform-origin:468px 336px}
.mascot-loop .polite-heart{animation-name:heart-hello;transform-origin:250px 190px}
.mascot-loop .hero-tap-ring{animation-name:screen-tap}
@keyframes plush-living-loop{0%,100%{transform:translate(0,0) rotate(0) scale(1)}6%{transform:translate(-2px,-3px) rotate(-3deg) scale(1.01,.99)}12%{transform:translate(-4px,0) rotate(-5deg) scale(1)}19%,31%{transform:translate(12px,-2px) rotate(3deg) scale(1)}38%{transform:translate(-5px,2px) rotate(-7deg) scale(1.015,.985)}46%,55%{transform:translate(-2px,-3px) rotate(-3deg) scale(1)}63%{transform:translate(0,0) rotate(2deg) scale(1)}73%,82%{transform:translate(10px,-1px) rotate(4deg) scale(1)}89%{transform:translate(-3px,1px) rotate(-5deg) scale(1)}95%{transform:translate(-1px,-2px) rotate(-1deg) scale(1.005,.995)}}
@keyframes hero-living-loop{0%,100%{transform:translate(0,0) rotate(-7deg) scale(1)}6%{transform:translate(-2px,-3px) rotate(-10deg) scale(1.01,.99)}12%{transform:translate(-5px,1px) rotate(-12deg) scale(1)}19%,31%{transform:translate(16px,-5px) rotate(-3deg) scale(1)}38%{transform:translate(-6px,3px) rotate(-13deg) scale(1.015,.985)}46%,55%{transform:translate(-2px,-2px) rotate(-9deg) scale(1)}63%{transform:translate(0,0) rotate(-5deg) scale(1)}73%,82%{transform:translate(13px,-4px) rotate(-2deg) scale(1)}89%{transform:translate(-3px,2px) rotate(-11deg) scale(1)}95%{transform:translate(-1px,-2px) rotate(-8deg) scale(1.005,.995)}}
@keyframes plush-hand-loop{0%,12%,59%,66%,95%,100%{transform:rotate(12deg)}20%,26%{transform:rotate(-8deg)}23%,30%{transform:rotate(1deg)}38%{transform:rotate(25deg)}44%,51%{transform:rotate(10deg)}47%,54%{transform:rotate(-2deg)}74%,80%{transform:rotate(-7deg)}77%,83%{transform:rotate(1deg)}89%{transform:rotate(22deg)}}
@keyframes plush-wave{0%,36%,62%,100%{transform:translate(0,0) rotate(-25deg)}43%,51%{transform:translate(-5px,-20px) rotate(10deg)}47%,55%{transform:translate(-5px,-18px) rotate(-35deg)}}
/* Blink is a short eased close/open; expressions keep moving underneath it. */
@keyframes soft-blink{0%,18%,23%,73%,78%,100%{transform:scaleY(1)}20%{transform:scaleY(.07)}75%{transform:scaleY(.07)}}
@keyframes curious-eye-left{0%,100%{transform:translate(0,0) rotate(9deg) scale(1)}7%,11%{transform:translate(-4px,-1px) rotate(4deg) scale(.96,1)}19%,30%{transform:translate(7px,2px) rotate(17deg) scale(.82,.76)}36%,40%{transform:translate(-2px,-3px) rotate(0deg) scale(1.18,1.12)}48%,56%{transform:translate(-1px,0) rotate(-4deg) scale(1,.78)}63%{transform:translate(0,0) rotate(9deg) scale(1)}73%,82%{transform:translate(6px,3px) rotate(13deg) scale(.94,.66)}87%{transform:translate(-1px,-1px) rotate(2deg) scale(1.1,1.07)}95%{transform:translate(0,0) rotate(9deg) scale(1)}}
@keyframes curious-eye-right{0%,100%{transform:translate(0,0) rotate(9deg) scale(1)}7%,11%{transform:translate(-4px,-1px) rotate(4deg) scale(.96,1)}19%,30%{transform:translate(7px,-2px) rotate(12deg) scale(1,1.07)}36%,40%{transform:translate(-2px,-3px) rotate(0deg) scale(1.18,1.12)}48%,56%{transform:translate(-1px,0) rotate(-4deg) scale(1,.78)}63%{transform:translate(0,0) rotate(9deg) scale(1)}73%,82%{transform:translate(6px,2px) rotate(12deg) scale(.94,.77)}87%{transform:translate(-1px,-1px) rotate(2deg) scale(1.1,1.07)}95%{transform:translate(0,0) rotate(9deg) scale(1)}}
@keyframes plush-shadow{0%,100%{transform:translateX(0) scaleX(1)}6%{transform:translateX(-2px) scaleX(.97)}19%,31%{transform:translateX(12px) scaleX(.95)}38%{transform:translateX(-5px) scaleX(1.03)}55%{transform:translateX(-2px) scaleX(.97)}73%,82%{transform:translateX(10px) scaleX(.96)}89%{transform:translateX(-3px) scaleX(1.02)}}
@keyframes curious-speech{0%,12%,34%,66%,85%,100%{opacity:0}16%,31%,71%,82%{opacity:1}}
@keyframes surprised-speech{0%,32%,44%,83%,92%,100%{opacity:0}35%,41%,86%,89%{opacity:1}}
@keyframes polite-speech{0%,11%,48%,65%,96%,100%{opacity:1}15%,43%,70%,91%{opacity:0}}
@keyframes gentle-knock{0%,20%,25%,31%,79%,85%,100%{opacity:0}22%,28%,82%{opacity:.7}}
@keyframes screen-tap{0%,20%,25%,31%,79%,85%,100%{opacity:0;scale:.72}22%,28%,82%{opacity:.75;scale:1.1}}
@keyframes lock-reassure{0%,19%,34%,78%,88%,100%{scale:1}23%,29%,83%{scale:1.12}}
@keyframes heart-hello{0%,39%,72%,100%{opacity:0;scale:.7;translate:0 7px}48%,63%{opacity:1;scale:1;translate:0 0}}
/* Pausing preserves the exact frame. Resuming continues from that frame. */
.motion-play{display:none}
[data-paused="true"] .motion-pause{display:none}[data-paused="true"] .motion-play{display:block}
.hero-motion-control{position:absolute;right:12px;bottom:1px;display:flex;align-items:center;gap:3px;background:#fffcf8d9;color:#80645b;border:1px solid #e5d9cf;border-radius:20px;padding:4px 7px;box-shadow:0 2px 6px #3b292a08}
.hero-motion-control .motion-icon{width:10px;height:10px}.hero-motion-control [data-motion-label]{font-size:8px;font-weight:700;line-height:1}
.replay-privacy:hover{transform:none}
@media(max-width:1200px){.hero-sentry{left:-70px;width:205px;bottom:-25px}}
@media(max-width:1100px){.hero-sentry{left:-20px;width:180px;bottom:-25px}}
@media(max-width:700px){.hero-sentry{left:-9px;width:clamp(100px,28vw,170px);bottom:-18px}.hero-mascot-bubble text{font-size:20px}.hero-product .mac-shot{position:relative}.hero .shot-caption{margin-top:40px}}
@media(max-width:1000px){.ai-section{gap:32px;grid-template-columns:1fr 1.05fr}.privacy-theatre{padding:18px 18px 16px}.theatre-kicker{font-size:8px;letter-spacing:1px}.theatre-topline{gap:8px}.theatre-status{font-size:9px;padding:4px 7px}.theatre-caption strong{font-size:16px}.theatre-break{display:none}.theatre-caption{gap:10px}.replay-privacy{width:49px;height:49px;padding:8px}.ai-copy h2{font-size:46px}}
@media(max-width:760px){.ai-section{grid-template-columns:1fr}.privacy-theatre{width:100%;max-width:540px;margin:auto}.ai-copy h2{font-size:47px}.theatre-kicker{font-size:9px}.theatre-caption strong{font-size:18px}}
@media(max-width:420px){.privacy-theatre{padding:16px 14px 15px;border-radius:14px}.theatre-kicker{font-size:7px;letter-spacing:.85px}.theatre-status{font-size:8px}.theatre-caption strong{font-size:16px}.theatre-caption span{font-size:10px}.theatre-footnote{font-size:8px}.privacy-theatre .settings-evidence{font-size:10px}.replay-privacy{width:44px;height:44px}.replay-privacy span{font-size:8px}.privacy-scene{width:calc(100% + 20px);margin-inline:-10px}.hero-bot{scale:.85}}
@media(prefers-reduced-motion:reduce){[data-mascot-scene] *{animation:none!important;transition:none!important}.mascot-gaze{transform:none}.speech-curious,.speech-surprised{opacity:0!important}.speech-polite,.polite-heart{opacity:1!important}.replay-privacy,.hero-motion-control{display:none}}

/* Reveal the complete rig only after the shared texture has decoded. */
[data-mascot-scene] .mascot-puppet,[data-mascot-scene] .agent-speech{visibility:hidden}
[data-mascot-scene].mascot-ready .mascot-puppet,[data-mascot-scene].mascot-ready .agent-speech{visibility:visible}
.hero-sentry:not(.mascot-ready){visibility:hidden}

/* Warm ivory and graphite replace the olive cast throughout the illustration. */
.ai-section{background:#2d292e;color:#fcf8f3}.ai-copy>p{color:#d8d0d2}.ai-copy .privacy-limit{color:#b9afb5}.protection-layers,.boundary-note{border-color:#5a5057}.protection-layers article>span{color:#c5b5b7}.protection-layers p{color:#ccc0c3}.boundary-note p{color:#bfb0b8}.boundary-note a{color:#f4e3de}
@media(max-width:700px){.hero-motion-control{right:0;bottom:0;padding:3px 4px}.hero-motion-control [data-motion-label]{display:none}.hero-motion-control .motion-icon{width:10px;height:10px}}

/* Say what the character is, even when the illustration is small. */
.agent-id-text{fill:#59413b;font-family:inherit;font-size:12px;font-weight:900;letter-spacing:.95px}
.hero-agent-label{position:absolute;left:12px;bottom:1px;display:none;align-items:center;gap:5px;padding:4px 7px;border:1px solid #d9b5a5;border-radius:20px;background:#fff9f0;color:#8f4936;font-size:9px;font-weight:900;line-height:1.1;letter-spacing:.9px;white-space:nowrap;box-shadow:0 2px 5px #5b30280a}
.hero-agent-label i{width:4px;height:4px;background:#b86b53;border-radius:50%}
.hero-mascot-bubble text,.agent-speech text{font-size:17px}
.hero-mascot-bubble .speech-speaker,.agent-speech .speech-speaker{font-size:10px;font-weight:900;letter-spacing:1.7px;fill:#ac6650}
@media(max-width:700px){.hero-agent-label{display:flex;left:0;bottom:-12px;padding:3px 5px;font-size:9px;letter-spacing:.65px;gap:4px}.hero-motion-control{bottom:-12px}.hero .shot-caption{margin-top:44px}}

/* A small lock marks the hero bot's attempted point of access. */
.hero-hand-lock{transform-origin:294px 184px;filter:drop-shadow(0 3px 4px #6a3d3026)}
.mascot-loop .hero-hand-lock{animation-name:lock-reassure}