/* Native explanatory figures: local, accessible and scoped to service pages. */
.svc-visual{--diagram-ink:var(--svc-ink,#1f2732);--diagram-pink:var(--svc-pink,#ff497c);display:block;width:100%;min-width:0;margin:0;padding:26px;border:1px solid #e5e8ee;border-radius:22px;background:linear-gradient(145deg,#fff,#f6f7fa);box-shadow:0 12px 40px #1f273208;color:var(--diagram-ink);text-align:left}
.svc-visual *{box-sizing:border-box}.svc-visual .svc-visual-eyebrow{margin:0 0 8px;color:#b52250;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:1.1px;text-transform:uppercase}.svc-visual .svc-visual-title{margin:0 0 20px;color:var(--diagram-ink);font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.45px}.svc-visual figcaption{margin:18px 0 0;color:#687383;font-size:12px;line-height:1.7}.svc-visual .svc-diagram{position:relative;min-width:0}.svc-visual .svc-diagram svg{display:block;flex-shrink:0;width:26px;height:26px;color:var(--diagram-pink)}.svc-visual .svc-diagram p{margin:0;color:#667180;font-size:12px;line-height:1.65}.svc-visual .svc-diagram strong{display:block;margin:0 0 5px;color:var(--diagram-ink);font-size:14px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}.svc-visual .svc-diagram small{display:block;color:#6b7583;font-size:11px;line-height:1.6}.svc-visual .svc-diagram-icon{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin-bottom:12px;border:1px solid #f3d5df;border-radius:13px;background:#fff3f7}.svc-visual .svc-diagram-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.svc-visual .svc-diagram-card{min-width:0;padding:18px;border:1px solid #e2e6ee;border-radius:14px;background:#fff}.svc-visual .svc-diagram-card.is-accent{border-color:#f1acc2;background:#fff6f9}.svc-visual .svc-diagram-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svc-visual .svc-diagram-points{margin:12px 0 0;padding-left:16px;color:#667180;font-size:11px;line-height:1.7}.svc-visual .svc-diagram-points li{margin:6px 0}.svc-visual .svc-diagram-label{display:inline-block;margin-bottom:12px;padding:4px 9px;border-radius:20px;background:#edf0f6;color:#596575;font-size:10px;font-weight:600;line-height:1.5}
.svc-visual .svc-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:svc-step}.svc-visual .svc-flow-step{position:relative;min-width:0;padding:18px 16px;border:1px solid #e2e6ee;border-radius:14px;background:#fff;counter-increment:svc-step}.svc-visual .svc-flow-step::before{content:counter(svc-step,decimal-leading-zero);position:absolute;right:13px;top:13px;color:#c6ceda;font-size:11px;font-weight:600}.svc-visual .svc-flow-step.is-accent{border-color:#f1acc2;background:#fff4f8}.svc-visual .svc-flow-step .svc-diagram-icon{width:40px;height:40px}.svc-visual .svc-flow-return{display:flex;align-items:center;gap:10px;margin-top:13px;padding:12px 15px;border:1px dashed #cbd3df;border-radius:12px;color:#647184;font-size:11px;line-height:1.6}.svc-visual .svc-flow-return svg{width:20px;height:20px;color:#667b96}
.svc-visual .svc-channel{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid #e2e6ee;border-radius:14px;background:#fff}.svc-visual .svc-channel .svc-diagram-icon{margin:0}.svc-visual .svc-channel-code{display:inline-block;min-width:41px;margin:0 0 4px;color:#b52250;font-size:12px;font-weight:600;letter-spacing:.5px}.svc-visual .svc-channel strong{margin-bottom:3px;font-size:14px}.svc-visual .svc-channel:nth-child(2){background:#fff5f8;border-color:#f1cedb}.svc-visual .svc-channel:nth-child(3){background:#f1f9f8;border-color:#cfe4df}.svc-visual .svc-channel:nth-child(3) .svc-diagram-icon{background:#e7f5f1;border-color:#cfe4df}.svc-visual .svc-channel:nth-child(3) svg{color:#117f70}
.svc-visual .svc-budget-part{position:relative;display:flex;gap:14px;align-items:center;padding:17px;border:1px solid #e2e6ee;border-radius:13px;background:#fff}.svc-visual .svc-budget-part+.svc-budget-part{margin-top:22px}.svc-visual .svc-budget-part+.svc-budget-part::before{content:'+';position:absolute;left:50%;top:-24px;transform:translateX(-50%);color:#8c98a9;font-size:20px;line-height:24px}.svc-visual .svc-budget-part .svc-diagram-icon{margin:0}.svc-visual .svc-budget-part strong{font-size:14px}.svc-visual .svc-budget-part.is-optional{border-style:dashed;background:#fafbfc}.svc-visual .svc-budget-total{margin-top:16px;padding:14px;border-radius:12px;background:#1f2732;color:#e0e5ec;font-size:11px;line-height:1.7}.svc-visual .svc-budget-total strong{color:#fff;font-size:13px}
.svc-visual .svc-system-core{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 15px;padding:18px;border:1px solid #f3bfd0;border-radius:15px;background:#fff0f5;text-align:center}.svc-visual .svc-system-core strong{margin:0}.svc-visual .svc-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.svc-visual .svc-system-grid .svc-diagram-card{padding:16px}.svc-visual .svc-system-grid .svc-diagram-icon{width:38px;height:38px;margin-bottom:10px}.svc-visual .svc-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.svc-visual .svc-platform{min-width:0;padding:18px 10px;text-align:center;border:1px solid #e2e6ee;border-radius:15px;background:#fff}.svc-visual .svc-platform .svc-diagram-icon{margin:0 auto 13px}.svc-visual .svc-platform strong{font-size:13px}.svc-visual .svc-platform small{font-size:10px}
.svc-visual .svc-backup-rule{display:grid;grid-template-columns:50px minmax(0,1fr);gap:16px;align-items:center;padding:17px 18px;border:1px solid #e2e6ee;border-radius:14px;background:#fff}.svc-visual .svc-backup-number{color:#ba2554;font-size:40px;font-weight:600;line-height:1;text-align:center}.svc-visual .svc-backup-rule:nth-child(2) .svc-backup-number{color:#0f8174}.svc-visual .svc-backup-rule:nth-child(3) .svc-backup-number{color:#a75622}.svc-visual .svc-human-authority{display:flex;align-items:center;gap:10px;margin-top:14px;padding:14px;border:1px solid #c9e2da;border-radius:12px;background:#edf8f3;color:#356451;font-size:11px;line-height:1.7}.svc-visual .svc-human-authority svg{color:#268564}
.svc-visual .svc-device-switch{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}.svc-visual .svc-device-switch button{display:inline-flex;align-items:center;justify-content:center;flex:1;min-width:88px;min-height:44px;margin:0;padding:9px 10px;border:1px solid #dce1e9;border-radius:24px;background:#fff;color:#586474;font:inherit;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;cursor:pointer}.svc-visual .svc-device-switch button[aria-pressed=true]{border-color:var(--diagram-pink);background:#fff0f5;color:#972044}.svc-visual .svc-device-switch button:hover{border-color:#c75376}.svc-visual .svc-device-switch button:active{top:0}.svc-visual .svc-device-switch button:focus-visible{outline:2px solid #b52250;outline-offset:3px}.svc-visual .svc-device-stage{display:flex;align-items:center;justify-content:center;min-width:0;height:296px;padding:12px 0;border-radius:14px;background:radial-gradient(ellipse at center,#e7ebf2 0,transparent 69%)}.svc-visual .svc-device-frame{display:flex;flex-direction:column;width:100%;max-width:390px;height:240px;padding:8px;border:2px solid #2d3b4f;border-radius:13px;background:#263445;box-shadow:0 12px 25px #1f273218;transition:width .25s,height .25s}.svc-visual .svc-demo-site{height:100%;min-width:0;overflow:hidden;border-radius:6px;background:#fff}.svc-visual .svc-demo-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid #e4e8ee}.svc-visual .svc-demo-logo{width:58px;height:8px;border-radius:5px;background:#24344a}.svc-visual .svc-demo-nav{display:flex;gap:5px}.svc-visual .svc-demo-nav i{width:19px;height:3px;border-radius:3px;background:#a8b3c2}.svc-visual .svc-demo-hero{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center;padding:17px 14px;background:#f2f5f9}.svc-visual .svc-demo-lines{display:grid;gap:7px}.svc-visual .svc-demo-lines i{display:block;height:5px;border-radius:4px;background:#c9d2df}.svc-visual .svc-demo-lines i:first-child{height:9px;background:#26374e}.svc-visual .svc-demo-lines i:nth-child(2){width:78%}.svc-visual .svc-demo-lines i:last-child{width:48%;height:12px;margin-top:2px;background:#ff6b95}.svc-visual .svc-demo-picture{position:relative;height:71px;overflow:hidden;border-radius:8px;background:#c5e0dc}.svc-visual .svc-demo-picture::before{content:'';position:absolute;left:16px;bottom:-25px;width:88px;height:80px;transform:rotate(32deg);border-radius:15px;background:#1f716b}.svc-visual .svc-demo-picture::after{content:'';position:absolute;right:13px;top:9px;width:27px;height:27px;border-radius:50%;background:#ff8fb0}.svc-visual .svc-demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:13px}.svc-visual .svc-demo-card{height:47px;padding:8px;border:1px solid #e4e8ee;border-radius:7px;background:#fff}.svc-visual .svc-demo-card::before,.svc-visual .svc-demo-card::after{content:'';display:block;height:4px;border-radius:3px;background:#c7d0dd}.svc-visual .svc-demo-card::before{width:60%;margin:2px 0 8px;background:#4d637e}.svc-responsive[data-device=tablet] .svc-device-frame{width:275px;height:267px;border-radius:17px}.svc-responsive[data-device=tablet] .svc-demo-hero{gap:9px;padding:16px 12px}.svc-responsive[data-device=tablet] .svc-demo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-responsive[data-device=smartphone] .svc-device-frame{width:153px;height:274px;padding:7px;border-radius:20px}.svc-responsive[data-device=smartphone] .svc-demo-header{padding:12px 8px}.svc-responsive[data-device=smartphone] .svc-demo-logo{width:44px}.svc-responsive[data-device=smartphone] .svc-demo-nav i{display:none}.svc-responsive[data-device=smartphone] .svc-demo-nav::after{content:'☰';color:#64758c;font-size:10px}.svc-responsive[data-device=smartphone] .svc-demo-hero{grid-template-columns:minmax(0,1fr);gap:10px;padding:13px 10px}.svc-responsive[data-device=smartphone] .svc-demo-lines{gap:5px}.svc-responsive[data-device=smartphone] .svc-demo-picture{height:54px}.svc-responsive[data-device=smartphone] .svc-demo-cards{grid-template-columns:minmax(0,1fr);gap:6px;padding:9px}.svc-responsive[data-device=smartphone] .svc-demo-card{height:37px}.svc-visual .svc-device-description{min-height:42px;margin:13px 0 0!important;color:#5e6a7a!important;font-size:12px!important;line-height:1.7!important}
.svc-section[id]{scroll-margin-top:var(--svc-scroll-offset,120px)}[data-svc-nav] a.is-active,a[data-svc-nav].is-active{color:#ba2554}
@media(max-width:575px){.svc-visual{padding:21px 18px;border-radius:18px}.svc-visual .svc-visual-title{font-size:19px}.svc-visual .svc-diagram-columns{grid-template-columns:minmax(0,1fr)}.svc-visual .svc-diagram-card{padding:16px}.svc-visual .svc-flow{gap:10px}.svc-visual .svc-flow-step{padding:16px 12px}.svc-visual .svc-flow-step strong{font-size:12px}.svc-visual .svc-flow-step p{font-size:11px}.svc-visual .svc-platforms{grid-template-columns:minmax(0,1fr);gap:9px}.svc-visual .svc-platform{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:13px 15px;text-align:left}.svc-visual .svc-platform .svc-diagram-icon{margin:0;grid-row:1/3}.svc-visual .svc-platform strong{margin:0}.svc-visual .svc-device-switch{gap:6px}.svc-visual .svc-device-switch button{min-width:75px;padding:9px 6px;font-size:11px}.svc-visual .svc-device-stage{height:286px}.svc-visual .svc-device-frame{height:228px}.svc-visual .svc-demo-header{padding:12px 10px}.svc-visual .svc-demo-nav i{width:12px}.svc-visual .svc-demo-hero{padding:16px 10px;gap:9px}.svc-visual .svc-demo-cards{padding:10px;gap:6px}.svc-visual .svc-demo-card{padding:7px}.svc-visual .svc-device-description{min-height:60px}.svc-visual .svc-channel{gap:10px;padding:14px 12px}.svc-visual .svc-channel strong{font-size:13px}.svc-visual .svc-backup-rule{padding:15px 13px;gap:12px}}
@media(prefers-reduced-motion:reduce){.svc-visual .svc-device-frame{transition:none}}

/* The shop preview reuses device switching, with its own catalog/cart artwork. */
.svc-shop-responsive .svc-device-stage { height: 310px; }
.svc-shop-responsive .svc-device-frame { height: 254px; }
.svc-shop-responsive .svc-shop-site { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 0 9px 7px; overflow: hidden; border-radius: 6px; background: #fff; }
.svc-shop-responsive .svc-shop-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 7px; min-height: 30px; border-bottom: 1px solid #e8edf2; }
.svc-shop-responsive .svc-shop-brand { color: #243448; font-size: 7px; font-weight: 600; line-height: 1.5; letter-spacing: 1px; white-space: nowrap; }
.svc-shop-responsive .svc-shop-header-links { display: flex; align-items: center; gap: 6px; color: #68788b; font-size: 6px; line-height: 1.5; white-space: nowrap; }
.svc-shop-responsive .svc-shop-header-links i { display: block; width: 2px; height: 2px; border-radius: 50%; background: #a7b2c1; }
.svc-shop-responsive .svc-shop-cart-icon { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; color: #25384c; }
.svc-shop-responsive .svc-shop-cart-icon svg { width: 13px; height: 13px; border-radius: 0; color: #25384c; }
.svc-shop-responsive .svc-shop-cart-icon > span { display: flex; align-items: center; justify-content: center; width: 11px; height: 11px; border-radius: 50%; background: #ff497c; color: #1f2732; font-size: 6px; font-weight: 600; }
.svc-shop-responsive .svc-shop-welcome { flex-shrink: 0; padding: 9px 0 7px; }
.svc-shop-responsive .svc-shop-welcome > span { display: block; margin-bottom: 1px; color: #a3264e; font-size: 5px; font-weight: 500; letter-spacing: .5px; line-height: 1.6; text-transform: uppercase; }
.svc-shop-responsive .svc-shop-welcome p { color: #243448; font-size: 11px; font-weight: 600; letter-spacing: -.2px; line-height: 1.5; }
.svc-shop-responsive .svc-shop-filter { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-bottom: 8px; color: #728092; font-size: 5px; line-height: 1.5; }
.svc-shop-responsive .svc-shop-filter span:first-child { padding: 2px 5px; border-radius: 8px; background: #edf6f3; color: #386a5c; }
.svc-shop-responsive .svc-shop-products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: minmax(92px,1fr); gap: 6px; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.svc-shop-responsive .svc-shop-product { display: flex; flex-direction: column; min-width: 0; padding: 4px; overflow: hidden; border: 1px solid #e5e9ef; border-radius: 6px; background: #fff; }
.svc-shop-responsive .svc-shop-product.is-selected { border-color: #e8a1b7; }
.svc-shop-responsive .svc-shop-thumb { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 44px; margin-bottom: 5px; border-radius: 4px; background: #f3f5f7; }
.svc-shop-responsive .svc-shop-thumb.is-rose { background: #fcf0f4; }
.svc-shop-responsive .svc-shop-thumb.is-mint { background: #edf7f3; }
.svc-shop-responsive .svc-shop-thumb.is-sand { background: #fbf4e8; }
.svc-shop-responsive .svc-shop-thumb.is-blue { background: #edf2fa; }
.svc-shop-responsive .svc-shop-thumb svg { width: 48px; height: 48px; max-width: 100%; border-radius: 0; }
.svc-shop-responsive .svc-shop-item-title { display: block; margin-bottom: 2px; color: #334559; font-size: 6px; font-weight: 500; line-height: 1.6; }
.svc-shop-responsive .svc-shop-item-price { display: flex; align-items: center; justify-content: space-between; color: #243448; font-size: 7px; font-weight: 600; line-height: 1.5; }
.svc-shop-responsive .svc-shop-item-price i { display: flex; align-items: center; justify-content: center; width: 9px; height: 9px; border-radius: 50%; background: #ffd5e2; color: #8c1b40; font-size: 5px; font-style: normal; }
.svc-shop-responsive .svc-shop-cartbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; min-height: 27px; margin-top: 7px; padding-top: 6px; border-top: 1px solid #e8edf2; color: #667589; font-size: 6px; line-height: 1.5; }
.svc-shop-responsive .svc-shop-cartbar b { margin-left: 5px; color: #243448; font-size: 7px; font-weight: 600; }
.svc-shop-responsive .svc-shop-cart-button { padding: 4px 7px; border-radius: 4px; background: #ff497c; color: #1f2732; font-size: 6px; font-weight: 600; white-space: nowrap; }
.svc-shop-responsive[data-device=tablet] .svc-device-frame { width: min(275px,100%); height: 280px; }
.svc-shop-responsive[data-device=tablet] .svc-shop-products { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(66px,1fr); }
.svc-shop-responsive[data-device=tablet] .svc-shop-thumb { min-height: 30px; margin-bottom: 3px; }
.svc-shop-responsive[data-device=tablet] .svc-shop-thumb svg { width: 31px; height: 31px; }
.svc-shop-responsive[data-device=tablet] .svc-shop-item-title { font-size: 6px; }
.svc-shop-responsive[data-device=smartphone] .svc-device-frame { width: 165px; height: 280px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-site { padding: 0 7px 7px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-header { min-height: 30px; gap: 4px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-brand { font-size: 6px; letter-spacing: .6px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-header-links { display: none; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-welcome { padding: 8px 0 6px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-welcome p { font-size: 9px; line-height: 1.6; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-filter { font-size: 4px; gap: 3px; margin-bottom: 6px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-products { grid-template-columns: minmax(0,1fr); grid-auto-rows: minmax(130px,1fr); gap: 6px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-product { padding: 5px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-thumb { min-height: 75px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-thumb svg { width: 66px; height: 66px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-item-title { font-size: 8px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-item-price { font-size: 8px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-cartbar { gap: 3px; min-height: 31px; margin-top: 6px; font-size: 5px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-cartbar b { display: block; margin: 0; font-size: 7px; }
.svc-shop-responsive[data-device=smartphone] .svc-shop-cart-button { padding: 5px 6px; font-size: 5px; }
@media(max-width:575px) {
  .svc-shop-responsive .svc-device-stage { height: 302px; }
  .svc-shop-responsive .svc-device-frame { height: 244px; }
  .svc-shop-responsive .svc-shop-site { padding-inline: 6px; }
  .svc-shop-responsive .svc-shop-header-links { gap: 4px; font-size: 5px; }
  .svc-shop-responsive .svc-shop-products { gap: 4px; }
  .svc-shop-responsive .svc-shop-product { padding: 3px; }
  .svc-shop-responsive .svc-shop-thumb svg { width: 36px; height: 36px; }
  .svc-shop-responsive .svc-shop-item-title { font-size: 5px; }
  .svc-shop-responsive .svc-shop-item-price { font-size: 6px; }
  .svc-shop-responsive[data-device=tablet] .svc-device-frame { height: 276px; }
  .svc-shop-responsive[data-device=smartphone] .svc-device-frame { height: 276px; }
  .svc-shop-responsive[data-device=smartphone] .svc-shop-thumb svg { width: 62px; height: 62px; }
  .svc-shop-responsive[data-device=smartphone] .svc-shop-item-title { font-size: 8px; }
  .svc-shop-responsive[data-device=smartphone] .svc-shop-item-price { font-size: 8px; }
}