.examples-section {
  overflow:clip;
  background:linear-gradient(115deg,#f5faff 0%,#eaf4fc 100%);
}
.examples-grid { position:relative; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2.5rem,6vw,7rem); }
.examples-intro { position:sticky; top:clamp(5.5rem,8vw,8rem); align-self:start; }
.examples-intro .eyebrow { color:#5d8ee2; }
.examples-intro h2 { max-width:12ch; margin-bottom:1.35rem; color:#081b37; font-size:clamp(3.2rem,4.6vw,5.3rem); font-weight:600; letter-spacing:-.055em; line-height:1.04; }
.examples-intro h2 em { color:#5186dc; font-style:normal; }
.examples-intro>p:last-of-type { max-width:38ch; color:#536d8a; line-height:1.55; }
.example-phone-wrap { position:relative; width:min(100%,390px); margin:2.2rem auto 0; padding:0 1.5rem; transform:translateY(105px) scale(.96); opacity:0; transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .8s ease; }
.example-phone-wrap.is-visible { transform:translateY(0) scale(1); opacity:1; }
.example-phone { position:relative; width:min(100%,310px); height:440px; margin:auto; padding:9px; border:3px solid #142030; border-radius:39px; background:linear-gradient(135deg,#131b27,#465263 48%,#060a10 80%); box-shadow:0 20px 55px #1a47702c,5px 6px 0 #182738; overflow:hidden; }
.example-phone::before { content:""; position:absolute; left:-3px; top:96px; width:3px; height:57px; border-radius:2px; background:#596477; }
.example-phone-screen { display:flex; flex-direction:column; height:100%; padding:12px 16px 16px; border-radius:29px; background:#fff; overflow:hidden; }
.example-phone-status { position:relative; display:flex; align-items:center; justify-content:space-between; color:#0b1725; font:600 11px/1 Arial,sans-serif; }
.example-phone-notch { position:absolute; left:50%; top:-11px; width:92px; height:23px; transform:translateX(-50%); border-radius:0 0 15px 15px; background:#101721; }
.example-phone-chat { display:flex; flex-direction:column; align-items:stretch; gap:11px; margin-top:42px; transition:opacity .2s ease,transform .2s ease; }
.example-phone-chat.is-changing { opacity:0; transform:translateY(9px); }
.example-phone-request { align-self:flex-end; max-width:77%; margin:0; padding:12px 14px; border-radius:16px 16px 4px 16px; background:#e6f0ff; color:#1a3558; font-size:13px; line-height:1.35; }
.example-phone-answer { display:flex; align-items:flex-start; gap:9px; }
.example-phone-answer p { max-width:77%; margin:0; padding:12px 13px; border-radius:4px 16px 16px 16px; background:#f2f6fb; color:#223751; font-size:13px; line-height:1.35; }
.example-phone-assistant { display:grid; flex:none; place-items:center; width:24px; height:24px; margin-top:7px; border-radius:50%; background:#1b6ceb; color:#fff; font-size:13px; font-weight:700; }
.example-phone-steps { display:grid; gap:7px; align-self:flex-start; width:calc(76% - 12px); margin:0 0 0 33px; padding:10px 12px; border-radius:11px; background:#f3f7fd; list-style:none; }
.example-phone-steps li { display:flex; gap:7px; align-items:center; color:#5d7394; font-size:10px; line-height:1.2; }
.example-phone-steps li::before { content:"✓"; display:grid; flex:none; place-items:center; width:13px; height:13px; border-radius:50%; background:#2774e6; color:#fff; font-size:9px; }
.example-phone-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; margin-left:33px; }
.example-phone-actions span { padding:6px 9px; border:1px solid #d7e6f8; border-radius:999px; background:#fff; color:#276dd1; font-size:9px; line-height:1.2; white-space:nowrap; }
.example-phone-input { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:9px 10px; border:1px solid #d9e6f4; border-radius:999px; color:#9db1c9; font-size:10px; }
.example-phone-input span { color:#2874eb; font-size:16px; }
.example-connection { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; overflow:visible; opacity:0; transition:opacity .35s ease; }
.example-connection.is-visible { opacity:1; }
.example-connection-path { fill:none; stroke:#4b91f5; stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 4px #3d91f65c); }
.example-connection-dot { fill:#2779ef; stroke:#d5e9ff; stroke-width:4; filter:drop-shadow(0 0 5px #348af890); }
.examples-list { border-top:0; }
.example-item { border-bottom:1px solid #cfdfef; transition:background-color .25s ease,transform .3s ease,box-shadow .3s ease; }
.example-item:first-child { border-top:0; }
.example-item.is-selected { border-radius:15px; background:#e7f2ff; }
.example-item summary { display:grid; grid-template-columns:78px minmax(0,1fr) 22px; align-items:center; gap:1.2rem; min-height:143px; padding:1.2rem 1.4rem; cursor:pointer; list-style:none; }
.example-item summary::-webkit-details-marker { display:none; }
.example-item summary:focus-visible { outline:2px solid #2973df; outline-offset:-3px; border-radius:14px; }
.example-icon { display:grid; place-items:center; width:70px; height:70px; border-radius:17px; background:linear-gradient(145deg,#f8fbff,#e4f1ff); color:#2674ec; box-shadow:0 6px 18px #4b8ede16; }
.example-icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.example-item-copy { display:flex; flex-direction:column; gap:.3rem; }
.example-item-copy small { color:#447edf; font-size:.73rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.example-item-copy strong { color:#0b1c37; font-size:clamp(1.2rem,1.45vw,1.65rem); font-weight:600; line-height:1.2; }
.example-item-copy>span { max-width:42ch; color:#5a7391; font-size:.96rem; line-height:1.45; }
.example-chevron { color:#1a5dbb; font-size:2rem; font-weight:300; line-height:1; transition:transform .25s ease; }
.example-item[open] .example-chevron { transform:rotate(90deg); }
.example-item .example-flow { margin:0 1.4rem 1.5rem 7.45rem; padding-left:1rem; }
.example-item .example-flow p { display:grid; grid-template-columns:6.6rem minmax(0,1fr); gap:.7rem; margin:0; color:#4c6987; font-size:.9rem; line-height:1.4; }
.example-item .example-flow strong { color:#2768bd; font-size:.67rem; }
@media(hover:hover) and (pointer:fine) { .example-item:hover { transform:translateX(-5px); background:#edf6ff; box-shadow:0 10px 24px #184d8512; } }
@media(max-width:760px) {
  .examples-grid { grid-template-columns:1fr; gap:2.5rem; }
  .examples-intro { position:static; }
  .examples-intro h2 { font-size:clamp(2.7rem,9vw,4rem); }
  .example-phone-wrap { margin-top:2.5rem; padding:0; }
  .example-phone { height:375px; }
  .example-phone-chat { margin-top:32px; gap:9px; }
  .example-phone-actions span { font-size:8px; padding:5px 7px; }
  .example-connection { display:none; }
  .example-item summary { grid-template-columns:50px minmax(0,1fr) 18px; gap:.8rem; min-height:115px; padding:1rem .4rem; }
  .example-icon { width:48px; height:48px; border-radius:12px; }
  .example-icon svg { width:25px; height:25px; }
  .example-item-copy strong { font-size:1.14rem; }
  .example-item-copy>span { font-size:.85rem; }
  .example-item .example-flow { margin:0 .4rem 1.3rem 3.6rem; }
  .example-item .example-flow p { display:block; }
}
@media(prefers-reduced-motion:reduce) { .example-phone-wrap { opacity:1; transform:none; transition:none; } .example-phone-chat,.example-item,.example-chevron { transition:none; } }