/* Phone-agent example on the studio section (R2). Every selector is .pd-prefixed. It never sets a font family, so it
   inherits the page's. Hidden lines exist only under .pd-anim, which the script adds, so without JavaScript, with reduced
   motion, or for screen readers the whole example call is in place. */
.phone-demo{margin-top:70px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"intro stage" "foot stage";gap:28px clamp(28px,4vw,72px);align-items:start;padding:clamp(24px,3vw,44px);border:1px solid #33424f;border-radius:20px;background:linear-gradient(135deg,#16202a,#10151b 62%);color:#e6eef4}
.pd-intro{grid-area:intro;align-self:end}
.pd-kicker{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a9bccb}
.pd-intro h3{margin:0 0 12px;font-size:clamp(24px,2.4vw,34px);line-height:1.08;letter-spacing:-.035em;color:#fff}
.pd-sub{margin:0;max-width:34ch;font-size:15px;line-height:1.55;color:#b9c8d5}
.pd-stage{grid-area:stage;display:grid;justify-items:center;gap:20px;min-width:0}
.pd-phone{width:min(100%,340px);margin:0;border:9px solid #26323e;border-radius:38px;background:#0b1118;padding:18px 16px 20px;box-shadow:0 30px 60px -30px #000a}
.pd-screen{display:grid;gap:12px;align-content:start;min-height:300px}
.pd-tag{margin:0;font-size:12px;letter-spacing:.02em;color:#a9bccb}
.pd-log{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pd-line{display:grid;gap:3px;padding:10px 12px;border-radius:14px;background:#16202a;transition:opacity .35s ease,transform .35s ease}
.pd-line[data-who="agent"]{background:#1f2c1c}
.pd-who{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a9bccb}
.pd-line[data-who="agent"] .pd-who{color:#c1f947}
.pd-text{font-size:15px;line-height:1.45;color:#eef4f8;overflow-wrap:anywhere}
.pd-anim .pd-line:not(.pd-shown){opacity:0;transform:translateY(8px)}
.pd-outputs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.pd-out{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px;border:1px solid #3c5366;border-radius:99px;background:#16202a;color:#eef4f8;font-size:13px;transition:opacity .35s ease,transform .35s ease}
.pd-out::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#c1f947}
.pd-anim .pd-out:not(.pd-shown){opacity:0;transform:scale(.96)}
.pd-foot{grid-area:foot;display:grid;gap:16px;align-content:start;align-self:start;min-width:0}
.pd-controls{display:flex;flex-wrap:wrap;gap:10px}
.pd-toggle,.pd-replay{min-height:44px;padding:0 18px;border:1px solid #71879a;border-radius:99px;background:transparent;color:#eef4f8;font:inherit;font-size:14px;cursor:pointer}
.pd-toggle:hover:not(:disabled),.pd-replay:hover{background:#ffffff12}
.pd-toggle:disabled{opacity:.5;cursor:default}
.pd-toggle:focus-visible,.pd-replay:focus-visible,.pd-cta:focus-visible,.pd-link:focus-visible{outline:2px solid #c1f947;outline-offset:3px}
.pd-caption{margin:0;font-size:13px;line-height:1.5;color:#a9bccb}
.pd-price{margin:0;font-size:15px;line-height:1.5;color:#e6eef4}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px}
.pd-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border:1px solid #71879a;border-radius:99px;color:#eef4f8;text-decoration:none;font-size:15px}
.pd-link:hover{background:#ffffff12}
@media(max-width:900px){.phone-demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "foot"}.pd-intro,.pd-foot{align-self:start}}
@media(max-width:760px){.phone-demo{margin-top:40px;padding:22px 18px;gap:22px}.pd-line{padding:9px 11px}.pd-text{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pd-line,.pd-out{transition:none}}