/* Customer-care story: conversation stays in place while the route to
   knowledge changes. Cards are schematic interfaces, not product screenshots. */
.hero { padding-top:clamp(115px, 12vh, 145px); padding-bottom:58px; }
.hero > .wrap { max-width:1392px; }
.hero__grid { grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); gap:clamp(30px,4vw,64px); align-items:center; }
.hero__copy h1 { font-size:clamp(2.6rem,4.25vw,3.8rem); line-height:1.06; letter-spacing:-.045em; text-wrap:balance; }
.hero__copy h1 em { color:#87d7df; font-style:normal; }
.hero__copy .hero__def { margin-top:24px; font-size:17px; line-height:1.7; max-width:42ch; color:#b9c9d8; }
.hero__copy .eyebrow { font-size:10px; letter-spacing:.13em; }
.hero__copy .hero__actions { gap:16px; margin-top:28px; align-items:center; }
.hero__tour { font-size:13px; text-underline-offset:5px; color:#d8e8f0; }
.hero__proof { display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:23px; color:#adc3d1; font-size:12px; }
.hero__proof span { display:flex; gap:6px; align-items:center; }
.hero__proof svg { width:14px; height:14px; color:#7ed2b0; }
.hero .shotwrap { margin-top:72px; }
.care-story { margin:0; min-width:0; position:relative; --story-accent:#218371; }
.care-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 17px; }
.care-switch { display:flex; padding:4px; gap:4px; background:#091a28; border:1px solid #2f495a; border-radius:12px; }
.care-switch button { min-height:38px; border:0; border-radius:8px; padding:8px 14px; font:500 12px var(--font); cursor:pointer; background:transparent; color:#adc0d0; transition:background .25s,color .25s; }
.care-switch button[aria-pressed=true] { background:#deeee9; color:#174c44; box-shadow:0 2px 6px #0002; }
.care-story[data-mode=without] .care-switch button[aria-pressed=true] { background:#f2e4d2; color:#69481f; }
.care-play { display:flex; align-items:center; gap:7px; min-height:44px; background:none; border:0; color:#b6c9d6; font:500 12px var(--font); padding:8px; cursor:pointer; }
.care-play::before { content:'↻'; font-size:20px; line-height:1; }
.care-story[data-playing=true] .care-play::before { content:'Ⅱ'; font-size:15px; }
.care-toolbar { visibility:hidden; }
.care-story[data-enhanced=true] .care-toolbar { visibility:visible; }
.care-stage { position:relative; height:490px; background:#f0f5f6; color:#183843; border:1px solid #d8e6e6; border-radius:22px; overflow:hidden; box-shadow:0 26px 70px -18px #030d18a6; }
.care-stage::before { content:''; position:absolute; inset:0; background-image:radial-gradient(#67828c26 .7px,transparent .7px); background-size:18px 18px; pointer-events:none; }
.care-kicker { position:absolute; top:21px; left:25px; display:flex; align-items:center; gap:7px; font:500 10px var(--mono); letter-spacing:.065em; text-transform:uppercase; color:#5a727b; }
.care-kicker svg { width:14px; height:14px; }
.care-example { position:absolute; right:24px; top:23px; font-size:10px; color:#617781; }
.customer-message { position:absolute; left:25px; right:25px; top:56px; display:flex; align-items:center; gap:12px; padding:17px 19px; background:white; border:1px solid #d9e4e6; border-radius:14px 14px 14px 4px; box-shadow:0 5px 16px #17323f07; }
.care-avatar { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:50%; background:#e7ecf4; color:#4e5f7f; font:600 12px var(--font); }
.customer-message small { display:block; color:#617781; font-size:11px; margin-bottom:3px; }
.customer-message strong { display:block; font-size:clamp(14px,1.18vw,17px); font-weight:500; line-height:1.4; letter-spacing:-.02em; }
.care-agent { position:absolute; left:26px; top:230px; width:115px; text-align:center; z-index:3; }
.care-agent__icon { margin:0 auto 9px; display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:#123c4c; color:#cef0f0; border:5px solid #fff; box-shadow:0 6px 18px #163c4c20; transition:background .6s,box-shadow .6s; }
.care-agent__icon svg { width:27px; height:27px; }
.care-agent strong { display:block; font-size:13px; font-weight:600; }
.care-agent__state { display:block; font-size:11px; color:#657b82; margin-top:2px; }
.care-agent__state--found { display:none; }
.care-story[data-mode=with] .care-agent__icon { background:#156654; box-shadow:0 0 0 7px #20887112,0 6px 18px #163c4c20; }
.care-story[data-mode=with] .care-agent__state--search { display:none; }
.care-story[data-mode=with] .care-agent__state--found { display:block; color:#216f5c; }
.care-incoming { position:absolute; left:82px; top:141px; height:84px; border-left:1px dashed #879ca7; }
.care-incoming::after { content:''; position:absolute; bottom:0; left:-4px; width:7px; height:7px; border-right:1px solid #879ca7; border-bottom:1px solid #879ca7; transform:rotate(45deg); }
.care-panel { position:absolute; inset:0; transition:opacity .65s ease,transform .75s var(--ease-out); }
.care-panel--before { opacity:0; visibility:hidden; transform:translateX(-15px); }
.care-panel--after { opacity:1; visibility:visible; }
.care-story[data-mode=without] .care-panel--before { opacity:1; visibility:visible; transform:none; }
.care-story[data-mode=without] .care-panel--after { opacity:0; visibility:hidden; transform:translateX(18px); }
.care-routes { position:absolute; left:135px; top:164px; width:calc(100% - 340px); height:205px; overflow:visible; }
.care-route { fill:none; stroke:#c6b79f; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.care-route--signal { stroke:#ae7739; stroke-width:2.4; stroke-dasharray:8 90; animation:careRoute 2.8s linear infinite; opacity:.7; }
@keyframes careRoute { to { stroke-dashoffset:-196; } }
.care-resource { position:absolute; right:25px; width:183px; background:#fff; border:1px solid #dbe3e5; border-radius:11px; padding:10px 12px; display:flex; gap:10px; align-items:center; box-shadow:0 4px 12px #18384305; transition:border-color .4s,transform .5s,box-shadow .4s; }
.care-resource--docs { top:162px; transform:rotate(-2deg); }
.care-resource--away { top:237px; transform:rotate(1.5deg); }
.care-resource--busy { top:312px; transform:rotate(-1deg); }
.care-resource__icon { width:33px; height:36px; background:#f1eadf; border-radius:7px; color:#856539; display:grid; place-items:center; flex-shrink:0; }
.care-resource__icon svg { width:19px; height:19px; }
.care-resource .care-avatar { width:32px; height:32px; font-size:10px; background:#eef0f7; color:#65647a; }
.care-resource--busy .care-avatar { background:#e3eff0; color:#476d73; }
.care-resource strong { display:block; font-size:12px; line-height:1.5; font-weight:600; }
.care-resource small { display:flex; align-items:center; gap:4px; font-size:11px; color:#816140; margin-top:2px; }
.care-resource small svg { width:11px; height:11px; }
.care-story[data-beat="0"] .care-resource--docs,
.care-story[data-beat="1"] .care-resource--away,
.care-story[data-beat="2"] .care-resource--busy { border-color:#c89750; box-shadow:0 0 0 4px #c8975012,0 7px 15px #18384309; transform:rotate(0); }
.care-hold { position:absolute; bottom:23px; left:25px; right:25px; display:flex; align-items:center; gap:10px; color:#825b30; padding:13px 15px; background:#f4e9d9; border:1px solid #e9d7bd; border-radius:10px; font-size:12px; }
.care-hold svg { width:17px; height:17px; flex-shrink:0; }
.care-hold span:last-child { margin-left:auto; letter-spacing:3px; font-weight:600; }
.care-hub { position:absolute; top:161px; right:24px; width:calc(100% - 197px); padding:15px; background:#fff; border:1px solid #bedad3; border-radius:13px; box-shadow:0 10px 24px #16473f0a; }
.care-hub__head { display:flex; align-items:center; gap:6px; padding-bottom:13px; font-size:14px; font-weight:600; color:#195c62; }
.care-hub__head .nav__mark { width:19px; height:21px; background:#195c62; }
.care-hub__head > span:last-child { margin-left:auto; font-size:9px; color:#6b7e83; font-weight:400; }
.care-search { display:flex; align-items:center; gap:8px; background:#f2f6f6; border:1px solid #e1e8e8; border-radius:7px; padding:9px; font-size:12px; color:#4d6b72; }
.care-search svg { width:14px; height:14px; flex-shrink:0; }
.care-result { margin-top:11px; border:1px solid #d4e8df; border-radius:8px; padding:12px 10px 10px; background:#f5fbf7; transition:opacity .7s,transform .7s; }
.care-result__status { display:flex; align-items:center; gap:4px; color:#216647; font-size:11px; margin-bottom:7px; }
.care-result__status svg { width:12px; height:12px; }
.care-result strong { display:block; font-size:16px; line-height:1.4; font-weight:600; color:#153e35; letter-spacing:-.02em; }
.care-result__lines { display:flex; flex-direction:column; gap:5px; margin:10px 0; }
.care-result__lines i { display:block; height:3px; background:#c3d7ce; border-radius:2px; width:92%; }
.care-result__lines i:nth-child(2) { width:74%; }
.care-result__owner { display:flex; gap:6px; align-items:center; font-size:11px; padding-top:8px; border-top:1px solid #dbe9e1; color:#527466; }
.care-result__owner .care-avatar { width:20px; height:20px; font-size:7px; color:#2c6650; background:#d3e9dd; }
.care-connection { position:absolute; top:259px; left:139px; width:35px; height:2px; background:#32856d; transform-origin:right; transition:transform .8s .3s; }
.care-connection::before { content:''; position:absolute; left:0; top:-3px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:5px solid #32856d; }
.care-resolved { position:absolute; bottom:23px; left:25px; right:25px; display:flex; gap:10px; align-items:center; padding:13px 15px; border-radius:10px; background:#dceee5; color:#1c5e47; border:1px solid #bad8c9; font-size:12px; transition:opacity .6s,transform .6s; }
.care-resolved svg { width:17px; height:17px; flex-shrink:0; }
.care-resolved small { margin-left:auto; font-size:9px; color:#4e7464; }
.care-story[data-beat="3"] .care-result { opacity:.18; transform:translateY(5px); }
.care-story[data-beat="3"] .care-connection { transform:scaleX(0); }
.care-story[data-beat="3"] .care-resolved,
.care-story[data-beat="4"] .care-resolved { opacity:0; transform:translateY(8px); }
.care-progress { height:2px; background:#ffffff13; margin-top:21px; border-radius:3px; overflow:hidden; }
.care-progress__fill { display:block; width:100%; height:100%; background:#70c6c8; transform-origin:left; }
.care-story figcaption { padding:11px 1px 0; min-height:48px; color:#b7cbd6; font-size:12px; line-height:1.55; }
.care-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.care-story:not([data-playing=true]) .care-route--signal { animation-play-state:paused; }
.care-story :focus-visible { outline-color:#288a8a; }
.care-story .care-toolbar :focus-visible { outline-color:#8ee3e1; }
@media (min-width:1500px) { .care-stage { height:510px; } .care-hub { top:171px; } .care-resource--docs { top:172px; } .care-resource--away { top:247px; } .care-resource--busy { top:322px; } }
@media (max-width:1100px) {
  .hero__grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:28px; }
  .hero__copy h1 { font-size:43px; }
  .hero__copy .hero__def { font-size:15px; }
  .care-example { display:none; }
  .care-resource { right:17px; width:160px; }
  .care-routes { width:calc(100% - 305px); }
  .care-hub { right:17px; width:calc(100% - 170px); padding:12px; }
  .care-agent { left:17px; width:104px; }
  .care-incoming { left:68px; }
  .care-connection { left:116px; width:36px; }
  .care-routes { left:122px; }
  .care-hub__head > span:last-child { display:none; }
  .care-resolved small { display:none; }
}
@media (max-width:900px) {
  .hero { padding-top:110px; }
  .hero__grid { grid-template-columns:1fr; gap:20px; }
  .hero__copy { display:contents; }
  .hero__copy > .eyebrow { order:0; margin:0; }
  .hero__copy > h1 { order:1; margin:0; }
  .hero__copy > .hero__def { order:3; }
  .hero__copy > .hero__actions { order:4; margin-top:0; }
  .hero__copy h1 { font-size:clamp(37px,7.6vw,58px); max-width:18ch; }
  .hero__copy .hero__def { max-width:52ch; font-size:16px; margin-top:0; }
  .hero__proof { display:none; }
  .care-story { order:2; width:100%; max-width:660px; justify-self:center; }
  .care-hub { width:calc(100% - 190px); right:25px; padding:15px; }
  .care-agent { left:24px; width:115px; }
  .care-incoming { left:81px; }
  .care-connection { left:139px; width:26px; }
  .care-routes { left:137px; width:calc(100% - 345px); }
  .care-resource { right:25px; width:183px; }
  .care-hub__head > span:last-child { display:inline; }
  .hero .shotwrap { margin-top:38px; }
}
@media (max-width:480px) {
  .hero { padding-top:98px; }
  .hero__copy .eyebrow { font-size:9px; margin-bottom:0; }
  .hero__copy h1 { font-size:38px; line-height:1.1; }
  .hero__copy .hero__actions { margin-top:0; gap:18px; }
  .hero__copy .hero__def { font-size:15px; line-height:1.65; }
  .care-toolbar { margin-bottom:12px; gap:5px; }
  .care-switch button { padding:8px 10px; font-size:11px; min-height:40px; }
  .care-stage { height:466px; border-radius:16px; }
  .care-kicker { top:18px; left:17px; font-size:9px; }
  .customer-message { top:48px; left:14px; right:14px; padding:12px; gap:9px; }
  .customer-message .care-avatar { width:29px; height:29px; font-size:10px; }
  .customer-message strong { font-size:13px; }
  .care-agent { left:8px; top:232px; width:81px; }
  .care-agent__icon { width:50px; height:50px; border-width:4px; }
  .care-agent strong { font-size:10px; }
  .care-agent__state { font-size:9px; }
  .care-incoming { left:49px; top:124px; height:98px; }
  .care-resource { right:14px; width:164px; padding:10px; }
  .care-resource strong { font-size:11px; }
  .care-resource small { font-size:10px; }
  .care-resource--docs { top:153px; }
  .care-resource--away { top:229px; }
  .care-resource--busy { top:305px; }
  .care-routes { left:83px; top:156px; width:calc(100% - 261px); }
  .care-hub { top:151px; right:13px; width:calc(100% - 116px); padding:11px; }
  .care-hub__head { padding-bottom:11px; }
  .care-hub__head > span:last-child { display:none; }
  .care-search { font-size:9px; padding:8px 6px; gap:5px; }
  .care-search svg { width:11px; }
  .care-result { padding:10px 8px 8px; }
  .care-result__status { font-size:9px; }
  .care-result strong { font-size:12px; }
  .care-result__owner { font-size:8px; gap:4px; }
  .care-result__owner .care-avatar { width:17px; height:17px; }
  .care-connection { left:85px; width:18px; top:257px; }
  .care-hold,.care-resolved { left:14px; right:14px; bottom:17px; padding:12px; font-size:11px; }
  .care-progress { margin-top:16px; }
  .care-story figcaption { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .care-story *, .care-story *::before, .care-story *::after { animation:none !important; transition:none !important; }
}