/* Collection contact-to-follow-up — Figma 714:2594. */
body #contact-example{padding:90px 0 110px;background:#fff;color:#000000d9}
#contact-example>.container{max-width:1300px;width:calc(100% - 64px);padding:0}
#contact-example .ss-heading{text-align:center;max-width:none;margin:0 0 60px}
#contact-example .ss-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:4px 13px 4px 6px;border:3px solid #fafafa;border-radius:100px;background:white;box-shadow:0 1px 1px #00000026,0 3px 3px #0000000d;color:#495057;font-size:14px;line-height:20px;letter-spacing:0;font-weight:400;margin-bottom:12px}
#contact-example .ss-eyebrow:before{content:"";width:18px;height:18px;background:url('../img/contact-center-badges/review.svg') center/contain no-repeat}
#contact-example h2{font-size:48px;line-height:1.2;letter-spacing:-2.4px;font-weight:400;margin:0 0 12px;color:#000000d9;max-width:none}
#contact-example .ss-intro{max-width:744px;margin:auto;font-size:14px;line-height:25.2px;color:#000000a6}
#contact-example .ss-conversation{margin:0 20px;overflow:visible;border:1px solid #d4d4d6;border-radius:0;background:#ececee;position:relative;align-items:stretch}
#contact-example .ss-conversation-left,#contact-example .ss-record{position:relative;padding:80px 12% 48px;min-width:0;background:transparent;isolation:isolate}
#contact-example .ss-conversation-left:before,#contact-example .ss-branch-grid:before{content:"";position:absolute;inset:0;z-index:-1;background:url('../../img/global-presence/texture.png') top left/16.8px 16.8px;opacity:.05;pointer-events:none}
#contact-example .ss-record{border-left:1px solid #d4d4d6;background:linear-gradient(#a7cce780,#a7cce780),url('../img/paas-ownership/blue.png') center/100% 100%;color:#000000d9}
#contact-example .ss-conversation-left>.ss-label,#contact-example .ss-record>h3{position:absolute;top:0;left:0;right:0;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;border-bottom:1px solid #d4d4d6;background:#ececee;font-size:18px;line-height:24px;font-weight:400;color:#00000073;padding:10px 16px;margin:0}
#contact-example .ss-record>h3:before{display:none}
#contact-example .ss-call-event,#contact-example .ss-record dl>div{background:#ffffffcc;border:0;border-radius:16px;box-shadow:0 3px 6px #003d7608,0 20px 24px -12px #004c760f;min-height:58px;padding:8px 12px;margin:0;font-size:12px;line-height:17px;color:#000;gap:8px}
#contact-example .ss-call-icon{width:32px;height:32px;flex-basis:32px;border:1px solid #e2e2e2;border-radius:8px;background:transparent}
#contact-example .ss-record dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 -24px}
#contact-example .ss-record dl>div{display:block;padding-left:50px;position:relative}
#contact-example .ss-record dl>div:before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:32px;height:32px;aspect-ratio:1;border:1px solid #e2e2e2;border-radius:8px;background:url('../img/collection/followup-contact.svg') center/16px 16px no-repeat}
#contact-example .ss-record dt{color:#00000073;font-size:12px;line-height:16px}
#contact-example .ss-record dd{color:#000;font-size:12px;line-height:16px;margin:2px 0 0}
#contact-example .ss-reply,#contact-example .ss-next{position:relative;isolation:isolate;display:block;transform:rotate(-4deg);margin:26px 0 0;padding:16px;min-height:122px;border:10px solid white;border-radius:16px;background:#f3f5f8;box-shadow:0 3px 3px #3b3b3b08,0 32px 24px -12px #3b3b3b0f;overflow:visible}
#contact-example .ss-reply:before,#contact-example .ss-next:before{content:"";position:absolute;inset:22px -24px -28px 4px;z-index:-2;border-radius:16px;background:#d7d7d999;transform:rotate(6.24deg)}
#contact-example .ss-reply:after,#contact-example .ss-next:after{content:"";position:absolute;inset:0;border-radius:6px;background:#f3f5f8;z-index:-1}
#contact-example .ss-next:before{background:#a0c8e1}
#contact-example .ss-next>svg{display:none}
#contact-example .ss-reply .ss-label,#contact-example .ss-next .ss-label{font-size:14px;line-height:22px;font-weight:400;color:#00000073;margin:0 0 8px}
#contact-example .ss-reply blockquote,#contact-example .ss-next p:not(.ss-label){font-size:20px;line-height:24px;font-weight:500;letter-spacing:0;margin:0;color:#000000d9}
#contact-example .ss-branches{margin:0 20px;border:1px solid #d4d4d6;border-top:0}
#contact-example .ss-branches-title{display:flex;justify-content:center;align-items:center;min-height:80px;margin:0!important;padding:20px;font-size:28px;line-height:32px;font-weight:500;color:#000000d9;border-bottom:1px solid #d4d4d6}
#contact-example .ss-branch-grid{position:relative;isolation:isolate;background:#ececee;gap:22px;padding:48px 40px;min-height:316px}
#contact-example .ss-branch-grid article{padding:0;border:0}
#contact-example .ss-branch-mark{display:grid;place-items:center;width:57px;height:57px;border:1.3px solid #d4d4d6;border-radius:13px;margin-bottom:17px}
#contact-example .ss-branch-mark img{width:31px;height:31px}
#contact-example .ss-branch-grid h4{font-size:20px;line-height:26px;font-weight:500;margin:0 0 16px;color:#000}
#contact-example .ss-branch-grid p{font-size:14px;line-height:22px;color:#667185}
#contact-example .ss-boundary{margin:24px 20px 0;font-size:12px}
@media(max-width:1100px){#contact-example .ss-conversation-left,#contact-example .ss-record{padding:80px 30px 48px}#contact-example .ss-record dl{margin:0}#contact-example h2{font-size:40px}#contact-example .ss-record dl>div{padding-left:12px}#contact-example .ss-record dl>div:before{display:none}}
@media(max-width:760px){body #contact-example{padding:64px 0}#contact-example>.container{width:calc(100% - 40px)}#contact-example h2{font-size:32px;letter-spacing:-1px}#contact-example .ss-heading{margin-bottom:36px}#contact-example .ss-conversation{grid-template-columns:1fr;margin:0}#contact-example .ss-conversation-left,#contact-example .ss-record{padding:88px 28px 52px}#contact-example .ss-record{border-left:0;border-top:1px solid #d4d4d6}#contact-example .ss-conversation-left>.ss-label,#contact-example .ss-record>h3{font-size:15px}#contact-example .ss-branches{margin:0}#contact-example .ss-branch-grid{grid-template-columns:1fr;padding:28px;gap:32px}#contact-example .ss-branches-title{font-size:24px}#contact-example .ss-branch-grid article+article{padding-top:28px;border-top:1px solid #d4d4d6}#contact-example .ss-reply blockquote,#contact-example .ss-next p:not(.ss-label){font-size:18px}#contact-example .ss-boundary{margin:20px 0 0}}
/* Extend the frame guides beyond the content, as in Figma 714:2594. */
#contact-example .ss-conversation:before,#contact-example .ss-conversation:after{content:"";position:absolute;left:-20px;right:-20px;height:1px;background:#d4d4d6;pointer-events:none}
#contact-example .ss-conversation:before{top:-1px}
#contact-example .ss-conversation:after{bottom:-1px}
#contact-example .ss-branches{position:relative}
#contact-example .ss-branches:before{content:"";position:absolute;left:-20px;right:-20px;bottom:-1px;height:1px;background:#d4d4d6;pointer-events:none}
#contact-example .ss-branch-grid:after{content:"";position:absolute;left:-1px;right:-1px;top:0;bottom:-28px;border-left:1px solid #d4d4d6;border-right:1px solid #d4d4d6;pointer-events:none}
@media(max-width:760px){#contact-example .ss-conversation:before,#contact-example .ss-conversation:after,#contact-example .ss-branches:before,#contact-example .ss-branch-grid:after{display:none}}
/* Updated Figma 714:2594: purple/blue panels and level inset cards. */
html body #contact-example{background:#fff;padding-bottom:144px}
#contact-example .ss-conversation-left,#contact-example .ss-record{padding:97px 13% 42px;min-height:336px}
#contact-example .ss-conversation-left{background:linear-gradient(#e1ccf580,#e1ccf580),url('../img/collection/followup-purple.png') center/100% 100% no-repeat}
#contact-example .ss-conversation-left:before{display:none}
#contact-example .ss-record{background:linear-gradient(#c6e4f980,#c6e4f980),url('../img/paas-ownership/blue.png') center/100% 100% no-repeat}
#contact-example .ss-conversation-left>.ss-label,#contact-example .ss-record>h3{background:#fff}
#contact-example .ss-call-event,#contact-example .ss-record dl>div{background:#ffffff33;border:1px solid #ffffff80;box-shadow:none;min-height:58px}
#contact-example .ss-call-icon{background:#ffffffb3;border:0}
#contact-example .ss-record dl{margin:0;gap:12px}
#contact-example .ss-record dl>div:before{background-color:#ffffffb3;border:0}
#contact-example .ss-reply,#contact-example .ss-next{transform:none;margin-top:17px;min-height:122px;background:#f4ebff;border-radius:16px;padding:16px;border:10px solid #fff}
#contact-example .ss-next{background:#eff8ff}
#contact-example .ss-reply:before,#contact-example .ss-reply:after,#contact-example .ss-next:before,#contact-example .ss-next:after{display:none}
#contact-example .ss-reply .ss-label,#contact-example .ss-reply blockquote{color:#53389e}
#contact-example .ss-next .ss-label,#contact-example .ss-next p:not(.ss-label){color:#194185}
#contact-example .ss-branches-title{min-height:56px;padding:16px;font-size:18px;line-height:24px;font-weight:400;color:#00000073;background:#fff}
#contact-example .ss-branch-grid{background:#f5f5f5;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:86px}
#contact-example .ss-branches:after{content:"";position:absolute;bottom:60px;left:40px;width:min(613px,calc(100% - 80px));height:17px;background:url('../img/collection/followup-connector.svg') left center/100% 100% no-repeat;pointer-events:none}
@media(max-width:1100px){#contact-example .ss-conversation-left,#contact-example .ss-record{padding:97px 28px 42px}}
@media(max-width:760px){html body #contact-example{padding:64px 0}#contact-example .ss-conversation-left,#contact-example .ss-record{padding:88px 22px 32px;min-height:0}#contact-example .ss-branch-grid{grid-template-columns:1fr;padding:28px}#contact-example .ss-branches:after{display:none}#contact-example .ss-branches-title{font-size:18px}}
/* Replays in both scroll directions without pinning or changing section height. */
@media(prefers-reduced-motion:no-preference){
 #contact-example .followup-motion{opacity:0;translate:0 var(--followup-exit-y,20px);transition:opacity .38s ease,translate .48s cubic-bezier(.22,1,.36,1)}
 #contact-example .followup-motion.is-in-view{opacity:1;translate:0 0;transition-duration:.75s,.85s;transition-delay:var(--followup-delay,0ms)}
}
/* Reference-video sequence: hold the path row while copy reveals left to right. */
#contact-example .followup-scroll-track{position:relative;margin:0 20px}
#contact-example .followup-scroll-track .ss-branches{margin:0}
#contact-example .followup-scroll-track.is-scroll-staged .ss-branches{position:sticky;top:var(--step-anchor,88px)}
#contact-example .is-scroll-staged .ss-branch-grid article{opacity:var(--step-opacity,0);translate:0 var(--step-offset,18px)}
@media(max-width:760px){#contact-example .followup-scroll-track{margin:0}}
@media(prefers-reduced-motion:reduce){#contact-example .followup-scroll-track .ss-branches{position:relative}#contact-example .ss-branch-grid article{opacity:1;translate:none}}

/* Keep heading, conversation and paths together throughout the scroll sequence. */
#contact-example .followup-whole-track{margin:0}
#contact-example .followup-whole-track>.container{max-width:1300px;width:calc(100% - 64px);padding:0;margin:0 auto}
#contact-example .followup-whole-track.is-scroll-staged>.container{position:sticky;top:var(--step-anchor,80px)}
#contact-example .followup-whole-track .ss-branches{position:relative;top:auto;margin:0 20px}
@media(max-width:760px){#contact-example .followup-whole-track>.container{width:calc(100% - 40px)}#contact-example .followup-whole-track .ss-branches{margin:0}}
@media(prefers-reduced-motion:reduce){#contact-example .followup-whole-track>.container{position:relative;top:auto}}

/* Draw the connecting path with the same progress as its corresponding copy. */
#contact-example .is-scroll-staged .ss-branches:after{opacity:var(--path-opacity,0);clip-path:inset(0 calc(100% - var(--path-reveal,0%)) 0 0)}
@media(prefers-reduced-motion:reduce){#contact-example .ss-branches:after{opacity:1;clip-path:none}}
/* Continuous side guides and extended divider at the follow-up heading. */
#contact-example .ss-conversation{border-left-color:#d4d4d6;border-right-color:#d4d4d6}
#contact-example .ss-conversation-left:after,#contact-example .ss-record:after{content:"";position:absolute;top:-17px;bottom:-1px;width:1px;background:#d4d4d6;pointer-events:none;z-index:2}
#contact-example .ss-conversation-left:after{left:-1px}
#contact-example .ss-record:after{right:-1px}
#contact-example .ss-branches{border-left-color:#d4d4d6;border-right-color:#d4d4d6}
#contact-example .ss-branches-title{position:relative}
#contact-example .ss-branches-title:after{content:"";position:absolute;left:-21px;right:-21px;bottom:-1px;height:1px;background:#d4d4d6;pointer-events:none;z-index:2}
#contact-example .ss-branch-grid:after{z-index:2}
@media(max-width:760px){#contact-example .ss-conversation-left:after,#contact-example .ss-record:after{display:none}#contact-example .ss-branches-title:after{left:-1px;right:-1px}}
/* Separate the exported nodes from the line so the end marker travels with the reveal. */
#contact-example .ss-branches:after{display:none}
#contact-example .followup-progress-rail{position:absolute;left:40px;right:40px;bottom:60px;height:17px;pointer-events:none;opacity:var(--rail-opacity,0)}
#contact-example .followup-progress-line{position:absolute;left:6px;top:8px;height:2px;width:max(0px,calc(var(--rail-progress,0%) - 12px));background:#d4d4d6}
#contact-example .followup-progress-node{position:absolute;top:0;width:12px;height:17px;opacity:0}
#contact-example .followup-progress-end{position:absolute;top:0;left:var(--rail-progress,0%);width:17px;height:17px;transform:translateX(-100%)}
@media(max-width:760px){#contact-example .followup-progress-rail{display:none}}

/* Include textured surfaces and frame guides in the reversible reveal. */
@media(prefers-reduced-motion:no-preference){
 #contact-example .followup-surface-motion{translate:none;transition:opacity .45s ease}
 #contact-example .followup-surface-motion.is-in-view{transition:opacity .9s ease}
 #contact-example .ss-conversation.followup-surface-motion:before,
 #contact-example .ss-conversation.followup-surface-motion:after,
 #contact-example .ss-branches.followup-surface-motion:before,
 #contact-example .followup-surface-motion .ss-branches-title:after{transform:scaleX(0);transform-origin:left center;transition:transform .45s ease}
 #contact-example .ss-conversation.followup-surface-motion.is-in-view:before,
 #contact-example .ss-conversation.followup-surface-motion.is-in-view:after,
 #contact-example .ss-branches.followup-surface-motion.is-in-view:before,
 #contact-example .followup-surface-motion.is-in-view .ss-branches-title:after{transform:scaleX(1);transition-duration:.95s}
 #contact-example .followup-surface-motion .ss-conversation-left:after,
 #contact-example .followup-surface-motion .ss-record:after,
 #contact-example .followup-surface-motion .ss-branch-grid:after{transform:scaleY(0);transform-origin:center top;transition:transform .45s ease}
 #contact-example .followup-surface-motion.is-in-view .ss-conversation-left:after,
 #contact-example .followup-surface-motion.is-in-view .ss-record:after,
 #contact-example .followup-surface-motion.is-in-view .ss-branch-grid:after{transform:scaleY(1);transition-duration:.95s}
}
/* Rotate the moving endpoint independently of its horizontal positioning. */
@keyframes followup-end-spin{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:no-preference){
 #contact-example .followup-progress-end{transform-origin:center;animation:followup-end-spin 3s linear infinite;animation-play-state:paused}
 #contact-example .ss-branches.is-in-view .followup-progress-end{animation-play-state:running}
}

/* Bind the entire grey texture to the staged copy, not merely viewport entry. */
#contact-example .is-scroll-staged .ss-branch-grid{background:transparent}
#contact-example .is-scroll-staged .ss-branch-grid:before{opacity:var(--branch-background-opacity,0);background:linear-gradient(#f5f5f5f2,#f5f5f5f2),url('../../img/global-presence/texture.png') top left/16.8px 16.8px;}
@media(prefers-reduced-motion:reduce){#contact-example .ss-branch-grid{background:#f5f5f5}#contact-example .ss-branch-grid:before{opacity:.05;background:url('../../img/global-presence/texture.png') top left/16.8px 16.8px}}

/* Position with left, then rotate only the exact endpoint glyph around its own center. */
#contact-example .followup-progress-end{left:calc(var(--rail-progress,0%) - 8.5px);transform:none;transform-origin:50% 50%;object-fit:contain}
/* The follow-up heading and frame share the staged copy's visibility. */
@media(prefers-reduced-motion:no-preference){
 #contact-example .is-scroll-staged .ss-branches{border-left-color:rgb(212 212 214 / var(--branch-background-opacity,0));border-right-color:rgb(212 212 214 / var(--branch-background-opacity,0));border-bottom-color:rgb(212 212 214 / var(--branch-background-opacity,0))}
 #contact-example .is-scroll-staged .ss-branches .ss-branches-title{opacity:var(--branch-background-opacity,0);translate:0 calc((1 - var(--branch-background-opacity,0))*12px);transition:none}
 #contact-example .is-scroll-staged .ss-branches:before,
 #contact-example .is-scroll-staged .ss-branches .ss-branch-grid:after{opacity:var(--branch-background-opacity,0)}
}
/* Let the upper side guides extend below the artwork when the lower frame fades. */
#contact-example .ss-conversation-left:after,#contact-example .ss-record:after{bottom:-25px}
@media(max-width:760px){#contact-example .ss-conversation{margin-bottom:24px}}

/* Collection-specific field semantics, preserving the shared icon containers. */
body[data-page="collection"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-semantic-commitment.svg')}
body[data-page="collection"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-semantic-pending.svg')}

/* Original Figma icon dimensions; semantic artwork retained. */
body[data-page="collection"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="collection"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="collection"] #contact-example .ss-record dl>div:before{background-size:16px 16px}
body[data-page="collection"] #contact-example .ss-branch-mark{box-sizing:border-box;width:57px;height:57px;border-width:1.295px;border-radius:12.955px}
body[data-page="collection"] #contact-example .ss-branch-mark img{width:31.091px;height:31.091px;object-fit:contain}

/* Banking application support: preserve original 16px icons / 1.5px rendered stroke. */
body[data-page="banking-finance"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="banking-finance"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="banking-finance"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-document-help.svg')}
body[data-page="banking-finance"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-support-team.svg')}
body[data-page="banking-finance"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-semantic-pending.svg')}

/* Customer service follow-up: semantic icons, shared stroke and dimensions. */
body[data-page="customer-services"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="customer-services"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="customer-services"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-service-time.svg');background-size:16px 16px}
body[data-page="customer-services"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}
body[data-page="customer-services"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-awaiting-response.svg');background-size:16px 16px}

/* Information review semantics, matching the shared 16px glyphs. */
body[data-page="info-checker-kyc"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="info-checker-kyc"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="info-checker-kyc"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-apartment.svg');background-size:16px 16px}
body[data-page="info-checker-kyc"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-document-help.svg');background-size:16px 16px}
body[data-page="info-checker-kyc"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}

/* Telemarketing fields: same 16px glyphs and 1.5px rendered strokes. */
body[data-page="telemarketing"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="telemarketing"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="telemarketing"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-date-question.svg');background-size:16px 16px}
body[data-page="telemarketing"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-intent-pending.svg');background-size:16px 16px}
body[data-page="telemarketing"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}

/* Retail order intent, requested date and fulfillment owner. */
body[data-page="fmcg"] #contact-example .ss-call-icon img{width:16px;height:16px;object-fit:contain}
body[data-page="fmcg"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-retail-order-intent.svg')}
body[data-page="fmcg"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-service-time.svg')}
body[data-page="fmcg"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-support-team.svg')}

/* Telecom renewal inquiry, retention owner and unconfirmed response. */
body[data-page="telecommunication"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="telecommunication"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="telecommunication"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-renewal-question.svg');background-size:16px 16px}
body[data-page="telecommunication"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}
body[data-page="telecommunication"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-awaiting-response.svg');background-size:16px 16px}

/* BPO exception handoff: shared 16px glyphs and stroke treatment. */
body[data-page="bpo"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="bpo"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="bpo"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-renewal-question.svg');background-size:16px 16px}
body[data-page="bpo"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}
body[data-page="bpo"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-acceptance-record.svg');background-size:16px 16px}

/* Logistics availability, pending review and fulfillment owner. */
body[data-page="logistic"] #contact-example .ss-call-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;box-sizing:border-box}
body[data-page="logistic"] #contact-example .ss-call-icon img{display:block;width:16px;height:16px;object-fit:contain}
body[data-page="logistic"] #contact-example .ss-record dl>div:nth-child(1):before{background-image:url('../img/collection/followup-service-time.svg');background-size:16px 16px}
body[data-page="logistic"] #contact-example .ss-record dl>div:nth-child(2):before{background-image:url('../img/collection/followup-semantic-pending.svg');background-size:16px 16px}
body[data-page="logistic"] #contact-example .ss-record dl>div:nth-child(3):before{background-image:url('../img/collection/followup-support-team.svg');background-size:16px 16px}