/* V30: phone-first setup. Desktop retains the complete illustrated sequence. */
.vg-import-stepdeck{min-width:0}
.vg-mobile-platform-label,.vg-mobile-download-pack,.vg-mobile-step-picker,.vg-mobile-step-controls,.vg-mobile-import-art,.vg-mobile-step-copy,.vg-mobile-transfer-help,.vg-mobile-auto-guide,.vg-mobile-nfc-menu,.vg-platform-label-short{display:none}

@container site (max-width:720px){
  .visual-guide-page{padding-top:16px;background:#F5F5F3}
  .visual-guide-page .guide-intro .sheet-heading{margin-bottom:12px}
  .visual-guide-page .guide-intro .sheet-heading>.eyebrow{font-size:12px;letter-spacing:.06em;margin-bottom:6px}
  .visual-guide-page .guide-intro h1{font-size:32px;line-height:1.1}
  .visual-guide-page .guide-theme-entry{gap:6px 12px;margin-top:0;margin-bottom:12px;font-size:16px}
  .visual-guide-page .guide-theme-entry>span{display:none}
  .visual-guide-page .quickstart-panel{border-radius:17px;margin-bottom:16px}
  .visual-guide-page .quickstart-panel>summary{padding:17px 16px;gap:10px}
  .visual-guide-page .quickstart-summary>strong{font-size:22px;line-height:1.25}
  .visual-guide-page .quickstart-panel-body{padding:0 16px 16px}
  .visual-guide-page .vg-summary-tag{display:none}
  .visual-guide-page .vg-download{padding:20px;border-radius:17px;gap:0;margin-bottom:16px}
  .visual-guide-page .vg-download-copy .eyebrow{font-size:12px;margin-bottom:8px}
  .visual-guide-page .vg-download-copy h2{font-size:26px;line-height:1.2;margin-bottom:8px}
  .visual-guide-page .vg-download-copy>p{font-size:16px;line-height:1.55;margin-bottom:16px}
  .visual-guide-page .vg-download>.vg-jbin-equation{display:none}
  .visual-guide-page .vg-mobile-download-pack{display:grid;grid-template-columns:52px minmax(0,1fr) 55px;gap:12px;align-items:center;padding:16px 12px;margin-bottom:18px;background:#F1F4F9;border-radius:12px;min-width:0}
  .vg-mobile-download-pack>div{min-width:0;display:grid;gap:5px}
  .vg-mobile-download-pack strong{font-size:17px;line-height:1.3;color:#283D5B}
  .vg-mobile-download-pack>div>span{font-size:15px;line-height:1.4;color:#536780}
  .vg-mobile-download-pack>.vg-card-image{width:55px;height:74px;object-fit:contain;border-radius:4px}
  .vg-mobile-pack-icon{position:relative;display:block;color:#465F91}
  .vg-mobile-pack-icon>.vg-icon{width:52px;height:57px;max-width:100%;color:inherit}
  .vg-mobile-pack-icon>span{position:absolute;top:32px;left:13px;font-size:12px;line-height:1;font-weight:650}
  .visual-guide-page .vg-download-copy .btn{min-height:48px;width:100%;font-size:17px}
  .visual-guide-page .vg-download-copy .inline-link{margin-top:8px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:16px}

  /* Pick the device first; navigation occupies one compact row on phones. */
  #guide-import .vg-mobile-platform-label{display:block;margin:0 0 9px;font-size:16px;line-height:1.4;font-weight:550;color:#53627A}
  #guide-import .vg-import-platform-tabs{gap:5px;margin:0 0 14px;padding:4px;border:1px solid #DFE4ED;border-radius:12px;background:#F3F5F8}
  #guide-import .vg-import-platform-tabs>button{min-height:55px;flex-direction:column;gap:3px;padding:7px 2px;border-radius:8px;border:1px solid transparent;background:transparent;font-size:15px;line-height:1.3;color:#56657B;box-shadow:none}
  #guide-import .vg-import-platform-tabs>button>.vg-icon{width:22px;height:22px}
  #guide-import .vg-import-platform-tabs>button>span{white-space:nowrap}
  #guide-import .vg-import-platform-tabs>button>.vg-platform-label-long{display:none}
  #guide-import .vg-import-platform-tabs>button>.vg-platform-label-short{display:block}
  #guide-import .vg-import-platform-tabs>button[aria-selected="true"]{background:#FFF;border-color:#CBD6E9;box-shadow:0 2px 6px #26395A0D;color:#2C4AA6}
  #guide-import .vg-import-computer-options{margin-bottom:14px}
  #guide-import .vg-import-connection-tabs{display:grid;grid-template-columns:1fr 1.15fr;margin:0;padding:3px;width:100%;border:0;border-radius:10px;background:#F3F5F7}
  #guide-import .vg-import-connection-tabs>button{padding:8px 4px;min-height:44px;font-size:15px}
  #guide-import>.quickstart-panel-body>.vg-transfer-behavior{display:none}
  #guide-import .vg-import-layout{display:block}
  #guide-import .vg-import-stepdeck{border:1px solid #DDE4EF;background:#FFF;border-radius:14px;overflow:hidden}
  #guide-import .vg-mobile-step-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:12px 8px 10px;background:#F6F8FB;border-bottom:1px solid #E3E8F0}
  #guide-import .vg-mobile-step-picker>button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:49px;padding:0 1px;border:0;background:none;color:#67768E;cursor:pointer}
  #guide-import .vg-mobile-step-picker>button>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#E7ECF4;font-size:14px;line-height:1;font-weight:600}
  #guide-import .vg-mobile-step-picker>button>b{font-size:15px;line-height:1.3;font-weight:550;white-space:nowrap}
  #guide-import .vg-mobile-step-picker>button[aria-current="step"]{color:#2F4CAA}
  #guide-import .vg-mobile-step-picker>button[aria-current="step"]>span{background:#354FAE;color:#FFF}
  #guide-import .vg-mobile-step-picker>button[aria-current="step"]>b{font-weight:700}
  #guide-import .vg-mobile-step-picker>button:focus-visible,#guide-import .vg-mobile-step-controls>button:focus-visible{outline:3px solid #AEC3FF;outline-offset:1px;border-radius:6px}
  #guide-import .vg-import-steps{display:block}
  #guide-import .vg-import-steps>.vg-picture{display:flex;flex-direction:column;grid-template-columns:none;margin:0;border:0;border-radius:0;background:#FFF;min-width:0}
  #guide-import .vg-import-steps>.vg-picture[data-mobile-step-active="false"]{display:none}
  #guide-import .vg-import-steps .vg-desktop-import-art{display:none}
  #guide-import .vg-import-steps .vg-mobile-import-art{display:flex;align-items:center;justify-content:center;height:177px;padding:16px;background:linear-gradient(140deg,#F7F9FD,#EEF3F8);min-width:0}
  #guide-import .vg-import-steps figcaption{padding:16px 17px 18px;border:0;display:flex;gap:8px;min-height:126px;justify-content:flex-start;text-align:left;background:#FFF}
  #guide-import .vg-import-steps figcaption>b{font-size:20px;line-height:1.3;color:#26364E;font-weight:650}
  #guide-import .vg-import-steps figcaption>span{font-size:16px;line-height:1.55;color:#526078}
  #guide-import .vg-import-steps .vg-desktop-step-copy{display:none}
  #guide-import .vg-import-steps .vg-mobile-step-copy{display:grid;gap:7px}
  #guide-import .vg-mobile-step-copy>strong{font-size:16px;color:#355E53;font-weight:600}
  #guide-import .vg-import-steps .vg-phone-import-complete{display:none}
  #guide-import .vg-mobile-step-controls{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;padding:7px 9px 10px;border-top:1px solid #E8ECF2}
  #guide-import .vg-mobile-step-controls>button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:0;padding:7px 4px;background:none;border:0;border-radius:7px;font-size:15px;font-weight:600;color:#3653AD;cursor:pointer;white-space:nowrap}
  #guide-import .vg-mobile-step-controls>button:disabled{color:#9AA4B3;cursor:default}
  #guide-import .vg-mobile-step-controls>button:not(:disabled):hover{background:#F0F3FB}
  #guide-import .vg-mobile-step-count{font-size:14px;color:#708097;white-space:nowrap}
  #guide-import .vg-import-video{margin:16px 0 0;width:100%;max-width:none}
  #guide-import .vg-video-heading{padding:12px;align-items:center;gap:7px}
  #guide-import .vg-video-heading>strong{font-size:16px;line-height:1.4}
  #guide-import .vg-video-play{min-height:24px}
  #guide-import .vg-video-kind{display:none}
  #guide-import .vg-phone-video-caption{padding:10px 12px;gap:5px 12px;align-items:flex-start;flex-wrap:nowrap}
  #guide-import .vg-phone-video-caption>span{font-size:14px;line-height:1.5}
  #guide-import .vg-phone-video-caption>span:first-child{white-space:nowrap}
  #guide-import .vg-import-compatibility,#guide-import .vg-import-system-tip{font-size:16px;line-height:1.55;margin-top:13px}
  #guide-import .vg-mobile-transfer-help{display:block;margin:2px 0 0;border:1px solid #E0E6EE;border-radius:9px;background:#F7F9FB}
  #guide-import .vg-mobile-transfer-help>summary{padding:9px 11px;min-height:44px;font-size:16px;line-height:1.4}
  #guide-import .vg-mobile-transfer-help .vg-phone-transfer-art{width:164px;max-width:calc(100% - 24px);margin:8px auto 16px}
  #guide-import .vg-mobile-transfer-help p{margin:0;padding:0 12px 12px;font-size:16px;line-height:1.55;color:#536279}
  #guide-import .vg-phone-reader-body>ol{grid-template-columns:1fr;gap:15px}

  /* Redrawn compact diagrams use large readable labels, not scaled desktop art. */
  .vg-mobile-file-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:center;width:100%;max-width:310px}
  .vg-mobile-file{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-width:0;padding:10px 4px;color:#63748D}
  .vg-mobile-file>.vg-icon{width:64px;height:66px;color:inherit}
  .vg-mobile-file>strong{font-size:15px;line-height:1.3;text-align:center;font-weight:550;max-width:100%;color:#3F526D}
  .vg-mobile-file-ready{background:#FFF;border-radius:13px;box-shadow:0 3px 12px #2A42600A;color:#50699E}
  .vg-mobile-flow-arrow{text-align:center;font-size:25px;font-weight:400;color:#8799B2}
  .vg-mobile-reader-flow{width:100%;max-width:290px}
  .vg-mobile-power-off{display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;color:#5F6470;margin:0 0 2px}
  .vg-mobile-power-off>.vg-icon{width:21px;height:21px;color:inherit}
  .vg-mobile-power-off>b{font-size:15px;font-weight:550}
  .vg-mobile-reader-flow .vg-mobile-file{padding-top:2px;padding-bottom:0}
  .vg-mobile-reader-flow .vg-mobile-file>.vg-icon{height:56px}
  .vg-mobile-connect-art{display:grid;grid-template-columns:85px 32px 94px;align-items:center;justify-content:center;position:relative;gap:8px;width:100%;height:153px;padding-bottom:24px}
  .vg-mobile-device-photo{width:94px;height:132px;display:block;overflow:visible}
  .vg-mobile-host{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
  .vg-mobile-host>.vg-icon{width:57px;height:63px;color:#5B7294}
  .vg-mobile-host>span{font-size:14px;line-height:1.3;text-align:center;color:#576C8C}
  .vg-mobile-cable{height:4px;background:#8194AC;border-radius:3px;position:relative}
  .vg-mobile-cable:before,.vg-mobile-cable:after{content:'';position:absolute;top:-3px;width:6px;height:10px;border-radius:2px;background:#8194AC}
  .vg-mobile-cable:before{left:-3px}.vg-mobile-cable:after{right:-3px}
  .vg-mobile-transfer-pill{position:absolute;right:7%;bottom:-3px;display:flex;align-items:center;gap:9px;padding:5px 13px;border:1px solid #CEDFD8;border-radius:20px;background:#EDF6F0;color:#305E4A;font-size:16px;font-weight:550;box-shadow:0 2px 5px #21463808}
  .vg-mobile-transfer-pill>b{font-size:18px}
  .vg-mobile-success-art{display:grid;grid-template-columns:auto auto;gap:3px 10px;align-items:center;justify-content:center;text-align:center;width:100%;max-width:225px;color:#386D55}
  .vg-mobile-success-art>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#DDEEE3;font-size:26px}
  .vg-mobile-success-art>strong{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:650}
  .vg-mobile-success-art>div{height:7px;background:#6A9D83;border-radius:8px;margin:9px 0 11px;grid-column:1/-1}
  .vg-mobile-success-art>b{grid-column:1/-1;font-size:17px;font-weight:600}

  /* Reading is a separate task. Its three diagrams get a full-width canvas. */
  #guide-nfc .vg-media-row{display:block}
  #guide-nfc .vg-picture-strip{display:grid;grid-template-columns:1fr;gap:12px;counter-reset:scan-step}
  #guide-nfc .vg-picture{display:grid;grid-template-columns:1fr;position:relative;text-align:left;border-color:#DFE6EF;background:#F3F6FB}
  #guide-nfc .vg-picture:before{counter-increment:scan-step;content:counter(scan-step);position:absolute;top:13px;left:13px;z-index:1;display:grid;place-items:center;width:27px;height:27px;background:#FFF;color:#42609B;border:1px solid #DCE4F0;border-radius:50%;font-size:14px;font-weight:600}
  #guide-nfc .vg-picture .vg-art{height:174px;padding:12px 20px;min-height:0}
  #guide-nfc .vg-picture .vg-home-screen{display:none}
  #guide-nfc .vg-picture .vg-mobile-nfc-menu{display:block;width:190px;height:144px;max-width:100%;border-radius:9px;overflow:hidden}
  #guide-nfc .vg-picture .vg-confirm-card{width:108px}
  #guide-nfc .vg-picture .vg-confirm-key{width:39px;height:39px;right:-15px;font-size:26px}
  #guide-nfc .vg-picture .vg-scan-diagram{max-width:220px;gap:15px}
  #guide-nfc .vg-picture .vg-scan-diagram>.vg-mini-device{width:48px;height:80px;padding:7px 5px 13px}
  #guide-nfc .vg-picture .vg-scan-diagram>.vg-mini-device .vg-icon{width:30px;height:40px}
  #guide-nfc .vg-picture .vg-scan-diagram>.vg-icon{width:76px;height:100px}
  #guide-nfc .vg-picture .vg-radio{width:22px;height:47px}
  #guide-nfc .vg-picture figcaption{border-left:0;border-top:1px solid #DFE6EF;min-height:0;padding:13px 16px;gap:5px}
  #guide-nfc .vg-picture figcaption>b{font-size:18px;line-height:1.4}
  #guide-nfc .vg-picture figcaption>span{font-size:16px;line-height:1.5}
  #guide-nfc .video-card-compact{margin-top:16px}
  #guide-auto .vg-auto-strip{display:none}
  #guide-auto .vg-mobile-auto-guide{display:flex;flex-direction:column;gap:12px;padding:20px 17px;background:#F3F6FB;border:1px solid #DFE6EF;border-radius:12px}
  #guide-auto .vg-mobile-auto-state{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;border:1px solid #D9E1EB;border-radius:9px;background:#FFF}
  #guide-auto .vg-mobile-auto-state>strong{font-size:18px;line-height:1.3;font-weight:650;white-space:nowrap;color:#4B5C73}
  #guide-auto .vg-mobile-auto-state .vg-status-battery{position:relative;flex:none;left:auto;top:auto;right:auto;width:21px;height:12px;border:1.5px solid #4D6374;border-radius:3px;padding:2px}
  #guide-auto .vg-mobile-auto-state .vg-status-battery>i{display:block;width:50%;height:100%;background:#4D6374;border-radius:1px}
  #guide-auto .vg-mobile-auto-on{background:#ECF5EF;border-color:#C6DECD}
  #guide-auto .vg-mobile-auto-on>strong{color:#2E6447}
  #guide-auto .vg-mobile-auto-action{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;color:#52647E}
  #guide-auto .vg-mobile-auto-action>b{padding:7px 10px;border:1px solid #8E9CAD;border-bottom:3px solid #758397;border-radius:8px;background:#FFF;font-size:14px;color:#334761;letter-spacing:.03em}
  #guide-auto .vg-mobile-auto-action>span:first-child{font-size:25px;color:#8A9BB0}
  #guide-auto .vg-mobile-auto-guide>p{margin:0;text-align:center;font-size:17px;font-weight:550;color:#355B45;line-height:1.5}
  #guide-files .vg-format-picture{gap:12px}
  #guide-files .vg-format-option{padding:17px}
  #guide-files .vg-format-intro{font-size:16px;line-height:1.55}
  #guide-files .vg-format-option>strong{font-size:17px;line-height:1.4}
}
@container site (max-width:360px){
  .visual-guide-page .quickstart-panel-body{padding-inline:12px}
  .visual-guide-page .vg-download{padding:17px}
  #guide-import .vg-import-platform-tabs>button{font-size:15px}
  #guide-import .vg-mobile-step-picker>button>b{font-size:15px}
  #guide-import .vg-import-steps figcaption{padding:14px 13px 16px}
  #guide-import .vg-mobile-step-controls>button{font-size:15px}
  .vg-mobile-download-pack{gap:8px}
  .vg-mobile-file-flow{gap:4px;grid-template-columns:minmax(0,1fr) 19px minmax(0,1fr)}
}
@media print{
  .vg-mobile-step-picker,.vg-mobile-step-controls,.vg-mobile-import-art{display:none!important}
  #guide-import .vg-import-steps>.vg-picture{display:flex!important}
  #guide-import .vg-import-steps .vg-desktop-import-art{display:flex!important}
}